/* ============================================================
   Mi Equipo de Futbol (CF Inter San Jose) - sistema visual comun
   Un solo sitio de donde tirar para que las paginas no vayan cada
   una a su aire. Los tokens (--variables) son el vocabulario: colores,
   espaciados y radios se leen de aqui, no se repiten sueltos.
   ============================================================ */

:root {
  --bg: #0a1120;
  --bg-grad: radial-gradient(1200px 600px at 15% -10%, #132039 0%, transparent 60%),
             radial-gradient(900px 500px at 100% 0%, #0f2418 0%, transparent 55%),
             #0a1120;
  --surface: #131c30;
  --surface-2: #0e1626;
  --surface-3: #1a2540;
  --border: #24314d;
  --border-soft: #1b2740;
  --text: #f3f6fb;
  --text-dim: #98a5bd;
  --text-faint: #6b7897;
  --accent: #2fd06e;
  --accent-fuerte: #22b85d;
  --accent-suave: rgba(47, 208, 110, .14);
  --accent-texto: #06280f;
  --danger: #f2495c;
  --danger-suave: rgba(242, 73, 92, .14);
  --warning: #f5b545;
  --warning-suave: rgba(245, 181, 69, .14);
  --info: #4fa3f7;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-pop: 0 12px 40px -12px rgba(0,0,0,.6);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* La app es de tema oscuro y solo de tema oscuro. Aqui hubo un rato un
   bloque @media (prefers-color-scheme: light) que repintaba estos tokens
   en claro cuando el ordenador estaba en modo blanco, y hacia mas mal que
   bien: cambiaba los fondos pero no el resto, porque hay sitios que llevan
   el color oscuro escrito a fuego (la cabecera, los tokens de superficie
   que se reescriben en partidos.html) y porque los verdes, rojos y ambares
   de los avisos son pasteles calculados para leerse SOBRE oscuro, no
   debajo. Resultado: barra oscura con letra oscura, tarjetas ilegibles y
   avisos invisibles. Un tema claro de verdad no es cambiar cuatro
   variables, es mantener dos paletas en todas las paginas para siempre,
   asi que se decidio no tenerlo. Si algun dia se quiere, el sitio es este,
   pero hay que hacerlo entero.

   El color-scheme: dark de abajo es la otra mitad del asunto: le dice al
   navegador que pinte en oscuro tambien lo que dibuja el, que no pasa por
   nuestro CSS (campos de texto, desplegables, barras de scroll, el
   calendario de los input date). Sin el, en un ordenador en modo blanco
   salian controles blancos en medio de una pagina oscura. */

* { box-sizing: border-box; }
html { color-scheme: dark only; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ------------------------------------------------------------- layout */

header.app {
  position: sticky; top: 0; z-index: 30;
  padding: 1.1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: rgba(10, 17, 32, .78);
  backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
}
header.app h1 {
  margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); display: flex; align-items: center; gap: .5rem;
}
header.app a.volver {
  color: var(--text-dim); text-decoration: none; font-size: .85rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .7rem; border-radius: 999px; transition: background .15s var(--ease), color .15s var(--ease);
}
header.app a.volver:hover { background: var(--surface-3); color: var(--text); }
header.app .cab-izda { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }

/* Lado derecho de la cabecera: lo monta app.js al arrancar, no lo
   escribe ningun HTML. En movil se va a la linea de abajo (la cabecera
   ya es flex-wrap) y se estira de lado a lado. */
header.app .cab-dcha {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-left: auto;
}
header.app .chip-equipo {
  padding: .35rem .75rem; border-radius: 999px;
  background: var(--accent-suave); border: 1px solid rgba(47,208,110,.3);
  color: var(--accent); font-size: .8rem; font-weight: 700;
  white-space: nowrap;
}
header.app .chip-usuario {
  color: var(--text-dim); font-size: .82rem;
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
header.app .selector-equipo {
  padding: .38rem .6rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: .82rem; font-weight: 600; max-width: 15rem;
}
header.app .selector-equipo:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave);
}
header.app .btn-cab {
  padding: .38rem .7rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-dim); font-size: .8rem;
  transition: background .15s var(--ease), color .15s var(--ease);
}
header.app .btn-cab:hover { background: var(--surface-3); color: var(--text); }
header.app .btn-salir { padding: .38rem .7rem; font-size: .8rem; }

/* Aviso a pantalla completa cuando no tiene sentido cargar la pagina
   (usuario sin equipo, sin perfil, o entrando donde no le toca). */
.pantalla-aviso {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem;
}
.pantalla-aviso .caja {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  padding: 2rem; width: min(420px, 100%); text-align: center;
}
.pantalla-aviso h1 { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 800; }
.pantalla-aviso p { margin: 0 0 1.4rem; color: var(--text-dim); font-size: .9rem; line-height: 1.5; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
main.ancho { max-width: 1300px; }

/* -------------------------------------------------------------- tipos */

h2.titulo-seccion {
  margin: 0 0 1rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
}

/* ------------------------------------------------------------ tarjeta */

.tarjeta, .card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
}
.tarjeta h2, .card h2 {
  margin: 0 0 .9rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim);
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
}

/* -------------------------------------------------------------- forms */

input, select, textarea {
  font-family: inherit;
}
.campo input[type=text], .campo input[type=number], .campo input[type=date],
.campo input[type=time], .campo select, .campo textarea,
input.i, select.i, textarea.i {
  width: 100%; padding: .58rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: .9rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.campo label {
  font-size: .74rem; color: var(--text-dim); display: block; margin-bottom: .3rem; font-weight: 600;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave);
}

/* --------------------------------------------------------------- btns */

button, .btn {
  font-family: inherit; cursor: pointer; border: 1px solid transparent;
  border-radius: 999px; font-weight: 600; font-size: .86rem;
  padding: .58rem 1.05rem; display: inline-flex; align-items: center; gap: .4rem;
  transition: transform .1s var(--ease), background .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease);
  background: var(--accent); color: var(--accent-texto);
}
button:hover, .btn:hover { background: var(--accent-fuerte); }
button:active, .btn:active { transform: scale(.97); }
button:disabled, .btn:disabled { opacity: .5; cursor: default; transform: none; }

button.secundario, .btn.secundario {
  background: var(--surface-3); color: var(--text); border-color: var(--border);
}
button.secundario:hover, .btn.secundario:hover { background: var(--border); border-color: var(--text-faint); }

button.fantasma, .btn.fantasma {
  background: transparent; color: var(--text-dim); border-color: transparent; padding: .5rem .8rem;
}
button.fantasma:hover, .btn.fantasma:hover { background: var(--surface-3); color: var(--text); }

button.peligro, .btn.peligro {
  background: var(--danger-suave); color: #ffb4bd; border-color: transparent;
}
button.peligro:hover, .btn.peligro:hover { background: var(--danger); color: #fff; }

button.chica, .btn.chica { padding: .38rem .75rem; font-size: .78rem; }
button.icono, .btn.icono { padding: .5rem; width: 2.15rem; height: 2.15rem; justify-content: center; border-radius: 999px; }

.grupo-btns { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- avisos */

.aviso { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 1rem; border: 1px solid transparent; }
.aviso.error { background: var(--danger-suave); color: #ffc2c9; border-color: rgba(242,73,92,.3); }
.aviso.ok { background: var(--accent-suave); color: #b7f3cd; border-color: rgba(47,208,110,.3); }

/* ------------------------------------------------------------ badges */

.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700;
  padding: .18rem .55rem; border-radius: 999px; letter-spacing: .02em; text-transform: uppercase; }
.pill.verde { background: var(--accent-suave); color: #7cf0a6; }
.pill.gris { background: var(--surface-3); color: var(--text-dim); }
.pill.rojo { background: var(--danger-suave); color: #ffb4bd; }
.pill.ambar { background: var(--warning-suave); color: #fbd899; }

/* -------------------------------------------------------- filtros bar */

.filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; align-items: center; }
.filtros input[type=text] {
  flex: 1; min-width: 200px; padding: .65rem .9rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .9rem;
}
.filtros select {
  padding: .6rem .9rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: .87rem;
}

/* ---------------------------------------------------------- cuadricula */

.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.tarjeta-click {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 1rem; cursor: pointer; box-shadow: var(--shadow-card);
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.tarjeta-click:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 32px -12px rgba(47,208,110,.25); }

/* ------------------------------------------------------------ scroll */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* -------------------------------------------------------- utilidades */

.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mt { margin-top: 1rem; }
.flex-fin { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }