/* --- Estilo para los selects de equipos y puntos --- */
select.team-name {
  appearance: none;
  background: #000;     /* contenedor negro */
  color: #fff;          /* texto blanco */
  border: 1px solid #444;
  border-radius: 10px;
  padding: 6px 8px;
  font-weight: 800;
}
select.score-badge {
  appearance: none;
  border: 1px solid #b28900;
  color: #000000;
  background: var(--gold);
  border-radius: 10px;
  padding: 6px 8px;
  font-weight: 900;
  box-shadow: 0 5px 0 #b28900;
}

select.score-badge {
  width: 32px;
  height: 32px;
  text-align: center;
}


select.score-badge-white {
  appearance: none;
  border: 1px solid #cfcfcf;
  color: #111;
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  font-weight: 900;
  box-shadow: 0 5px 0 #cfcfcf;
  width: 44px;
  height: 32px;
  text-align: center;
}


    :root{
      --bg:#0a0a0a;
      --ink:#ffffff;
      --gold:#ffcc00;
      --line:#ffffff22;
      --ok:#3ccf4e;
      --err:#ff6767;
    }
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    }
    .container{ max-width:2000px; margin:0 auto; padding:18px 16px; }
    header{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding-bottom:0px; }
    header img{ height:60px; width:auto; display:block; }
    .title{ font-weight:900; letter-spacing:.06em; color:var(--gold); font-size:clamp(22px,4.3vw,34px); text-align:center; }
    .subtitle{ display:block; font-size:.7em; letter-spacing:.1em; opacity:.85; }
    .actions{ margin-left:auto; display:flex; }
    .btn{ border:1px solid #b28900; background:transparent; color:var(--gold); font-weight:800; padding:5px 5px; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

    /* Botones de encuentros */
    .pill-wrap { display:flex; justify-content:flex-start; gap:16px; margin-top:28px; flex-wrap:wrap; }
    .pill-btn { display:inline-block; padding:12px 22px; border:2px solid #b28900; border-radius:14px; background:#0f0f11; color:#ffd966; font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(16px,2vw,20px); text-decoration:none; box-shadow:inset 0 0 0 3px #1b1600; user-select:none; cursor:pointer; opacity:.5; transition:opacity .15s ease-in-out; }
    .pill-btn.active { background:#1b1b1b; opacity:1; }

    /* ===== Tablas ===== */
    .grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin-top:22px; }
    @media (max-width:1100px){ .grid{ grid-template-columns:1fr; } }
    .card{ background:#16171a; border:1px solid var(--line); border-radius:20px; padding:20px 12px 8px; box-shadow:0 10px 24px #0006; max-width:640px; justify-self:start; }
    .h1{ margin:0; font-size:clamp(22px,4.6vw,30px); font-weight:900; letter-spacing:.06em; color:var(--gold); }
    .h2{ margin:16px 0 10px; font-size:clamp(14px,2.6vw,14px); font-weight:800; opacity:.95; }
    .rule{ height:1px; background:var(--line); margin:10px 0 6px; }

    .row{ display:grid; grid-template-columns:35px 44px 1fr auto 1fr 44px 35px; align-items:center; gap:10px; padding:8px 0; position:relative; }
    .row + .row::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); }
    .score-badge{ width:32px; height:32px; border-radius:10px; background:var(--gold); box-shadow:0 5px 0 #b28900; display:flex; align-items:center; justify-content:center; font-weight:900; color:#1b1600; }
    .team-name{ font-size:16px; font-weight:800; letter-spacing:.04em; }
    .vs{ font-weight:900; letter-spacing:.28em; color:#d0d0d0; font-size:1px; }

    .muted{ opacity:.7; }

    footer{ text-align:center; font-size:12px; padding:24px 0; }

    /* ===== Categorías ===== */
    .cat-inline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .cat-btn{ display:inline-block; padding:10px 18px; border:1px solid #b28900; border-radius:12px;background:linear-gradient(180deg,#ffd966 0%, #ffcc00 60%, #e5b300 100%);color:#1b1600; font-weight:900; letter-spacing:.06em; text-transform:uppercase;font-size:clamp(14px,1.8vw,16px); text-decoration:none;box-shadow:inset 0 -2px 0 #b28900, 0 2px 8px rgba(0,0,0,.4);user-select:none; cursor:pointer; opacity:.5; transition:opacity .15s ease-in-out; }
    .cat-btn.active{ opacity:1; transform:translateY(-1px); }

    .header-center{ display:flex; align-items:center; justify-content:center; gap:14px; }

    .cat-btn:hover{ opacity:.85; }
    .cat-btn:active{ transform:translateY(0); box-shadow:inset 0 1px 0 #b28900, 0 1px 4px rgba(0,0,0,.3); }

  
/* Fecha header layout and date input style */
.fecha-header{ display:flex; align-items:center; gap:.5rem; }
.fecha-header .h2{ flex:1 1 auto; }
.fecha-header .fecha-input{
  margin-left:auto;
  background:#000;
  color:#fff;
  border:1px solid #444;
  padding:.35rem .5rem;
  border-radius:.5rem;
  width:11rem;
  max-width:40vw;
}
.fecha-header .fecha-input::-webkit-calendar-picker-indicator{ filter: invert(1); }
@media (max-width: 640px){ .fecha-header .fecha-input{ width:9.5rem; } }

/* Botón Guardar con estilo dorado consistente */
.save-btn{
  padding:10px 18px;
  border:1px solid #b28900;
  border-radius:12px;
  background:linear-gradient(180deg,#ffd966 0%, #ffcc00 60%, #e5b300 100%);
  color:#1b1600;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:inset 0 -2px 0 #b28900, 0 2px 8px rgba(0,0,0,.4);
  cursor:pointer;
  transition: opacity .15s ease-in-out, transform .05s ease, filter .15s ease;
}
.save-btn:hover{ opacity:.85; filter: brightness(1.05); }
.save-btn:active{ transform:translateY(0); box-shadow:inset 0 1px 0 #b28900, 0 1px 4px rgba(0,0,0,.3); }

/* Toast "Guardado correctamente" */
.toast {
  position: fixed;
  left: 24px;
  bottom: 24px;
  background: #1e1e1e;
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Layout por fecha: 1ª fecha A/B/C/D, luego 2ª fecha A/B/C/D */
.grid{
  display:block;
  margin-top:22px;
}
.fecha-block{
  margin-bottom:20px;
}
.fecha-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
@media (max-width:1100px){
  .fecha-grid{
    grid-template-columns:1fr;
  }
}
.fecha-card{
  max-width:640px;
  justify-self:start;
}


/* Fix real overflow in fixture rows */
.row > *{
  min-width:0;
}

select.team-name{
  width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}