/* CMLL INFORMA — Styles */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  background: #e8e8e8;
  color: #111;
}

header { background: #7c086a; color: #fff; padding: 9px 16px; }
header h1 { font-size: 16px; }

/* ── LAYOUT ── */
.wrap { display: flex; gap: 10px; padding: 10px; align-items: flex-start; }
.col  { background: #fff; border: 1px solid #bbb; padding: 12px; }
.col-left  { width: 340px; flex-shrink: 0; }
.col-right { flex: 1; min-width: 0; overflow-x: auto; }

@media (max-width: 700px) {
  .wrap { flex-direction: column; padding: 6px; gap: 6px; }
  .col-left, .col-right { width: 100%; }
}

/* ── TYPOGRAPHY ── */
h2    { font-size: 14px; font-weight: bold; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 10px; }
label { display: block; font-size: 12px; font-weight: bold; margin-bottom: 3px; }
.hint { font-size: 11px; color: #777; margin-top: 2px; }
.sep  { border: none; border-top: 1px solid #ddd; margin: 10px 0; }
.field { margin-bottom: 9px; }

/* ── FORMS ── */
input[type=text], input[type=number], input[type=url], textarea, select {
  padding: 4px 6px; border: 1px solid #aaa;
  font-size: 13px; font-family: Arial, sans-serif; background: #fff;
}
input:focus, textarea:focus, select:focus { outline: 2px solid #8B0000; border-color: #8B0000; }
select   { cursor: pointer; }
textarea { resize: vertical; height: 52px; width: 100%; }

/* ── BUTTONS ── */
button { cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; border: 1px solid #999; background: #e8e8e8; padding: 5px 12px; }
button:hover { background: #d8d8d8; }
.btn-red { background: #7c086a; color: #fff; border-color: #6a0000; }
.btn-red:hover { background: rgb(170, 46, 149); }
.btn-sm  { padding: 3px 8px; font-size: 12px; }
.btn-row { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.btn-xp  { background: #fff; border: 1px solid #ccc; padding: 3px 7px; font-size: 13px; color: #888; flex-shrink: 0; }
.btn-xp:hover { background: #fee; color: #8B0000; border-color: #8B0000; }

/* ── TABS ── */
.tabs { display: flex; border-bottom: 2px solid #8B0000; margin-bottom: 10px; }
.tab  { padding: 5px 13px; cursor: pointer; font-size: 13px; border: 1px solid #bbb; border-bottom: none; margin-right: 3px; background: #eee; }
.tab:hover  { background: #ddd; }
.tab.active { background: #8B0000; color: #fff; border-color: #8B0000; }
.tab-body        { display: none; }
.tab-body.active { display: block; }

/* ── STATUS ── */
.status { font-size: 12px; padding: 5px 8px; margin-top: 8px; margin-bottom: 8px; }
.s-ok   { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.s-err  { background: #ffebee; border: 1px solid #ef9a9a; color: #c62828; }
.s-info { background: #e3f2fd; border: 1px solid #90caf9; color: #1565c0; }

/* ── DATE ROW ── */
.date-block { display: flex; align-items: center; gap: 5px; }
.date-label { font-size: 12px; white-space: nowrap; width: 44px; flex-shrink: 0; }
.date-row   { display: flex; gap: 4px; flex: 1; }
.date-row select { flex: 1; min-width: 0; }

/* ── PARTICIPANT COMBO ── */
.p-sel-row  { display: flex; gap: 5px; margin-bottom: 5px; align-items: center; flex-wrap: nowrap; }
.p-row      { display: flex; gap: 5px; margin-bottom: 5px; align-items: center; flex-wrap: nowrap; }
.combo-wrap { flex: 1; min-width: 0; position: relative; }
.combo-wrap input { width: 100%; padding: 4px 6px; border: 1px solid #aaa; font-size: 13px; }

/* ── SEGMENT BLOCKS ── */
.seg-block  { border: 1px solid #ccc; padding: 9px; margin-bottom: 8px; background: #fafafa; }
.seg-head   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; gap: 6px; }
.seg-label  { font-weight: bold; font-size: 13px; color: #8B0000; }
.seg-arrows { display: flex; gap: 3px; }
.seg-arrows button { padding: 1px 6px; font-size: 12px; line-height: 1.4; }
.btn-remove { font-size: 11px; padding: 2px 7px; color: #8B0000; background: #fff; border: 1px solid #8B0000; }
.btn-remove:hover { background: #8B0000; color: #fff; }

/* ── SHOW LIST (entry) ── */
.show-row      { border: 1px solid #ccc; padding: 7px 9px; margin-bottom: 5px; background: #fafafa; }
.show-row-head { display: flex; justify-content: space-between; align-items: flex-start; }
.show-title    { font-weight: bold; font-size: 13px; }
.show-segs     { font-size: 12px; color: #444; margin-top: 4px; padding-left: 8px; }
.show-actions  { display: flex; gap: 5px; flex-shrink: 0; margin-left: 8px; }

/* ── PARTICIPANT MANAGER (entry) ── */
.p-entry      { border: 1px solid #ddd; padding: 6px 8px; margin-bottom: 5px; background: #fafafa; }
.p-entry-head { display: flex; justify-content: space-between; align-items: center; }
.p-name-main  { font-weight: bold; }
.alias-badge  { display: inline-block; background: #eee; border: 1px solid #ccc; border-radius: 3px; padding: 1px 6px; font-size: 11px; margin: 2px 2px 2px 0; }
.side-row     { display: flex; gap: 5px; align-items: center; margin-bottom: 4px; font-size: 12px; flex-wrap: wrap; }
.side-badge   { display: inline-block; border-radius: 3px; padding: 1px 7px; font-size: 11px; font-weight: bold; }
.side-rudo    { color: #b60505; }
.side-tecnico { color: #0e990e; }
.side-neutral { color: #034cb3; }

/* ── RESULTS TABLE ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #7c086a; color: #fff; padding: 6px 8px; text-align: left; font-size: 12px; white-space: nowrap; }
td { padding: 5px 8px; border-bottom: 1px solid #ddd; vertical-align: top; white-space: nowrap; }

th.col-ep,   td.col-ep   { width: 1%; white-space: nowrap; }
th.col-date, td.col-date { width: 1%; white-space: nowrap; }
th.col-seg,  td.col-seg  { width: 1%; white-space: nowrap; }

td.td-participants { white-space: normal; min-width: 120px; max-width: 300px; word-break: break-word; }

tr:nth-child(even) td { background: #f9f9f9; }

.no-result { color: #888; font-style: italic; padding: 10px 0; }
.note-text { color: #666; font-style: italic; font-size: 12px; display: block; }
.summary   { font-size: 12px; color: #555; margin-top: 10px; border-top: 1px solid #eee; padding-top: 6px; }

/* ── YOUTUBE LINK ── */
.yt-link { display: inline-block; vertical-align: middle; margin-left: 3px; line-height: 1; }
.yt-link svg { display: block; }

/* ── WRESTLER SIDE COLORS ── */
.name-rudo    { color: #b60505; font-weight: bold; }
.name-tecnico { color: #0e990e; font-weight: bold; }
.name-neutral { color: #034cb3; font-weight: bold; }
.name-unknown { color: #111; }