/* ============================================================
   SCORPIO — COMPONENTES EN CSS

   Los componentes del Design System están escritos en React con
   ESTILOS EN LÍNEA (objetos JS), no con clases. Como la web se
   renderiza en PHP, aquí se traducen a CSS real una sola vez.

   PROCEDENCIA — traducido el 01-ago-2026 de:
     components/core/Button.jsx
     components/forms/Input.jsx
     components/feedback/Alert.jsx
   y el 03-ago-2026 de:
     components/admin/AdminShell.jsx  (retraducido el 03-ago por la
       tarde: interlineado del bloque de usuario y estado activo de
       la navegación lateral)
     components/core/Badge.jsx
     components/forms/FormField.jsx  (sustituye al apaño mínimo
       que se escribió el 01-ago para el login)

   Si esos componentes cambian en Claude Design, ESTE FICHERO SE
   QUEDA VIEJO Y NADA AVISA. Al tocarlos allí, hay que volver aquí.
   ============================================================ */


/* ------------------------------------------------------------
   Button  ·  de components/core/Button.jsx
   ------------------------------------------------------------ */
.scorpio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.scorpio-btn:hover { text-decoration: none; }

/* Tamaños. El alto mínimo no es decorativo: 44px es el objetivo táctil
   cómodo en móvil, que aquí es el caso principal.

   El tamaño medio va TAMBIÉN en `.scorpio-btn`, sin modificador, porque en el
   componente `size` vale 'md' por defecto y al traducirlo a clases ese «por
   defecto» se perdía: un botón sin modificador se quedaba con el padding del
   navegador —18px de alto— y no lo parecía a simple vista. Pasó el 03-ago con
   el de guardar de la ficha. `--sm` y `--lg` van después y lo sobrescriben. */
.scorpio-btn,
.scorpio-btn--md { font-size: 15px; padding: 11px 22px; min-height: 44px; }
.scorpio-btn--sm { font-size: 13px; padding: 8px 16px;  min-height: 36px; }
.scorpio-btn--lg { font-size: 17px; padding: 14px 30px; min-height: 52px; }

/* Variantes */
.scorpio-btn--primary   { background: var(--blue);      color: #fff;     border-color: var(--blue); }
.scorpio-btn--primary:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

.scorpio-btn--secondary { background: #fff;             color: var(--blue); border-color: var(--border-default); }
.scorpio-btn--secondary:hover { background: var(--warm-50); border-color: var(--border-strong); }

.scorpio-btn--ghost     { background: transparent;      color: var(--blue); border-color: transparent; }
.scorpio-btn--ghost:hover { background: var(--blue-50); }

.scorpio-btn--green     { background: var(--green-ink); color: #fff;     border-color: var(--green-ink); }
.scorpio-btn--green:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.scorpio-btn--whatsapp  { background: #25D366;          color: #0b3d1e;  border-color: #25D366; }
.scorpio-btn--whatsapp:hover { background: #1FBE5A; border-color: #1FBE5A; color: #0b3d1e; }

/* Pulsado: baja 1px. Sutil, sin rebote. */
.scorpio-btn:active { transform: translateY(1px); }

.scorpio-btn--block { width: 100%; }

.scorpio-btn:disabled,
.scorpio-btn.is-disabled { opacity: 0.5; pointer-events: none; }


/* ------------------------------------------------------------
   Input  ·  de components/forms/Input.jsx
   ------------------------------------------------------------ */
.scorpio-input {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-strong);
  background: #fff;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  width: 100%;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.scorpio-input:focus {
  border-color: var(--blue);
  box-shadow: var(--shadow-focus);
}
.scorpio-input[aria-invalid="true"],
.scorpio-input.is-invalid {
  border-color: var(--danger);
}
/* El campo bloqueado se lee. Lo apaga el FONDO, no el texto: con el DNI y la
   fecha en gris claro, la ficha en revisión —que es justo cuando el delegado
   quiere repasar lo que ha enviado— no se podía leer. */
.scorpio-input:disabled {
  background: var(--warm-100);
  color: var(--text-body);
  cursor: not-allowed;
}
.scorpio-input::placeholder { color: var(--text-faint); }

/* En pantalla estrecha el campo vuelve a 16px. Por debajo de esa medida,
   Safari de iPhone hace zoom al enfocar y descoloca la página entera: pasaba
   con los 15px que había antes, y con 14px pasaría igual. El aire perdido se
   recupera del `padding`, no del cuerpo de letra. La pantalla del jugador ya
   lo hacía por su cuenta; aquí vale para todas —login incluido—. */
@media (max-width: 640px) {
  .scorpio-input { font-size: 16px; padding: 10px 12px; }
}


/* ------------------------------------------------------------
   FormField  ·  de components/forms/FormField.jsx

   Etiqueta, ayuda, error, marca de obligatorio y el estado
   `locked` —el campo de un jugador ya validado, que se ve pero
   no se toca—.

   Los nombres de clase son los que ya usaban las pantallas de
   acceso (`__label`, `__hint`), a propósito: están en seis
   ficheros de dos paneles y renombrarlos no aporta nada.

   Una diferencia con el componente: aquí `.scorpio-field` mantiene
   su `margin-bottom`. En React el hueco entre campos lo pone el
   contenedor del formulario; en las páginas que ya existen lo
   pone el propio campo, y quitarlo los juntaría todos.
   ------------------------------------------------------------ */
.scorpio-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-body);
  margin-bottom: var(--space-3);
}
.scorpio-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--blue-ink);
}
/* El asterisco de obligatorio. El componente lo esconde cuando el campo
   está bloqueado: exigir algo que no se puede escribir no tiene sentido. */
.scorpio-field__req { color: var(--danger); margin-left: 3px; }
.scorpio-field.is-locked .scorpio-field__req { display: none; }

/* Distintivo de campo validado, junto a la etiqueta. */
.scorpio-field__lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green-ink);
  background: var(--green-100);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

/*
 * El control cuando está bloqueado.
 *
 * OJO: esto es SOLO apariencia. `pointer-events: none` no impide escribir con
 * el teclado, ni que llegue el campo en el POST si alguien lo manda a mano. Un
 * campo bloqueado necesita `disabled` o `readonly` en el HTML, y el servidor
 * tiene que ignorarlo igualmente al guardar. Aquí se comunica, no se protege.
 */
.scorpio-field__control.is-locked {
  /* Sin `opacity`, que se sumaba al gris del propio campo y dejaba el valor
     casi ilegible. Basta con que no se pueda tocar. */
  pointer-events: none;
}

.scorpio-field__hint {
  font-size: 12.5px;
  color: var(--text-muted);
}
/* El error lleva icono, y se alinea arriba y no al centro: un mensaje de dos
   líneas dejaría el icono flotando en mitad del texto. */
.scorpio-field__error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12.5px;
  color: var(--danger);
}
.scorpio-field__error svg { flex: 0 0 auto; margin-top: 1px; }


/* ------------------------------------------------------------
   Alert  ·  de components/feedback/Alert.jsx
   Nunca se desvanece solo: estos usuarios leen despacio.
   ------------------------------------------------------------ */
.scorpio-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-family: var(--font-body);
  background: var(--blue-50);
}
.scorpio-alert__icon { flex: 0 0 auto; margin-top: 1px; line-height: 0; color: var(--blue); }
.scorpio-alert__body { flex: 1 1 auto; min-width: 0; }
.scorpio-alert__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--blue-ink);
  line-height: 1.25;
}
.scorpio-alert__text {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.55;
  margin-top: 3px;
}
.scorpio-alert__actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.scorpio-alert__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: var(--radius-xs);
  line-height: 0;
}

.scorpio-alert--success { background: var(--green-50);      border-left-color: var(--green); }
.scorpio-alert--success .scorpio-alert__icon { color: var(--green-ink); }

.scorpio-alert--error   { background: var(--form-loss-100); border-left-color: var(--form-loss); }
.scorpio-alert--error .scorpio-alert__icon { color: var(--danger); }

.scorpio-alert--warning { background: var(--form-draw-100); border-left-color: var(--form-draw); }
.scorpio-alert--warning .scorpio-alert__icon { color: #8a6200; }

.scorpio-alert--info    { background: var(--blue-50);       border-left-color: var(--blue); }
.scorpio-alert--info .scorpio-alert__icon { color: var(--blue); }


/* ------------------------------------------------------------
   Badge  ·  de components/core/Badge.jsx

   Etiqueta corta de estado. El componente recibe el tono como
   propiedad; aquí es un modificador. El tono neutro es el que
   sale sin modificador, igual que allí el `tone` por defecto.
   ------------------------------------------------------------ */
.scorpio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--warm-100);
  color: var(--warm-700);
}
.scorpio-badge--sm { font-size: 10.5px; padding: 2px 8px; }

.scorpio-badge--blue   { background: var(--blue-100);      color: var(--blue); }
.scorpio-badge--green  { background: var(--green-100);     color: var(--green-ink); }
.scorpio-badge--amber  { background: var(--form-draw-100); color: #8a6200; }
.scorpio-badge--red    { background: var(--form-loss-100); color: var(--danger); }
.scorpio-badge--solid-green { background: var(--green); color: #fff; }
.scorpio-badge--solid-blue  { background: var(--blue);  color: #fff; }

/* El componente lo activa con `uppercase`; las dos cosas van juntas
   porque en mayúsculas sin abrir la letra el texto se apelmaza. */
.scorpio-badge--upper { text-transform: uppercase; letter-spacing: 0.05em; }


/* ------------------------------------------------------------
   AdminShell  ·  de components/admin/AdminShell.jsx

   La carcasa de las pantallas internas: barra superior pegada
   arriba, navegación lateral y zona de contenido. Por debajo de
   900px la lateral se convierte en cajón.

   TRES DIFERENCIAS con el componente de React, y no son
   descuidos:

   1. NO HAY CAMPANA DE NOTIFICACIONES. No existe nada que
      notificar a un delegado, y un icono que nunca hace nada
      enseña a ignorar la zona donde algún día habrá algo.
   2. EL SELECTOR DE COMPETICIÓN NO SE DESPLIEGA. En el back
      office sirve para cambiar de liga; un delegado tiene un
      equipo y solo uno, así que aquí es una etiqueta, no un
      menú.
   3. EL CAJÓN MÓVIL ABRE SIN JAVASCRIPT, con una casilla oculta
      y su etiqueta. La web nueva no carga ni una línea de JS
      todavía, y el menú de navegación es lo último que debe
      depender de que un fichero externo llegue bien.

   Las clases van con prefijo `scorpio-shell__` en vez del `id`
   generado que usa el componente: aquí no hay dos carcasas en la
   misma página, así que el aislamiento no hace falta.
   ------------------------------------------------------------ */
.scorpio-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  font-family: var(--font-body);
}

/* La casilla del cajón. Fuera de la pantalla y no `display:none`,
   que la sacaría del orden de tabulación y la haría inalcanzable
   con el teclado. */
.scorpio-shell__toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Barra superior --------------------------------------------- */
.scorpio-shell__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border-bottom: 1px solid var(--border-subtle);
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.scorpio-shell__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
.scorpio-shell__brand img { height: 38px; width: auto; display: block; }
.scorpio-shell__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 17px;
  color: var(--blue-ink);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}
.scorpio-shell__wordmark span {
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  color: var(--green-ink);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-top: 2px;
}

.scorpio-shell__topright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* El equipo. Etiqueta, no menú: el delegado tiene uno solo. */
.scorpio-shell__ctx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-weight: var(--fw-semibold);
  font-size: 13.5px;
  color: var(--blue-ink);
  white-space: nowrap;
}

.scorpio-shell__user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.scorpio-shell__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 14px;
  flex: 0 0 auto;
}
/* Interlineado apretado a propósito: son dos líneas que se leen como un
   bloque, no como texto corrido. Sin esto heredan --lh-normal (1.5) y se
   separan. */
.scorpio-shell__uname {
  display: block;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--blue-ink);
  white-space: nowrap;
  line-height: 1.1;
}
.scorpio-shell__urole {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.1;
  margin-top: 1px;
}

/* Cuerpo ------------------------------------------------------ */
.scorpio-shell__body { display: flex; flex: 1; min-height: 0; }

.scorpio-shell__side {
  flex: 0 0 236px;
  background: #fff;
  border-right: 1px solid var(--border-subtle);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scorpio-shell__sec {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 12px 12px 6px;
}
.scorpio-shell__nav {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  text-decoration: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.scorpio-shell__nav:hover { background: var(--warm-50); color: var(--blue); }
.scorpio-shell__nav.is-active {
  background: var(--blue-100);
  color: var(--blue);
  font-weight: var(--fw-bold);
}
.scorpio-shell__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  background: var(--warm-100);
  border-radius: 99px;
  padding: 1px 7px;
}
.scorpio-shell__nav.is-active .scorpio-shell__count { background: #fff; color: var(--blue); }

.scorpio-shell__main {
  flex: 1;
  min-width: 0;
  padding: 26px 28px 40px;
  overflow-x: auto;
}

/* El botón del cajón y la capa que lo cierra al tocar fuera.
   Los dos son <label>: sin JavaScript, quien abre y cierra es la
   casilla. */
.scorpio-shell__burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--warm-100);
  color: var(--blue-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.scorpio-shell__scrim { display: none; }

@media (max-width: 900px) {
  .scorpio-shell__side { display: none; }
  .scorpio-shell__toggle:checked ~ .scorpio-shell__body .scorpio-shell__side {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    z-index: 70;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .scorpio-shell__toggle:checked ~ .scorpio-shell__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 23, 42, 0.35);
  }
  .scorpio-shell__burger { display: inline-flex; }
  .scorpio-shell__uname,
  .scorpio-shell__urole { display: none; }
  .scorpio-shell__main { padding: 18px 16px 32px; }
}

/* En un móvil de 390px la barra no cabe, y como sus piezas llevan
   `white-space:nowrap` no se encogen: ensanchan el documento entero y
   aparece scroll horizontal, con el botón de salir fuera de la pantalla.
   Se resuelve quitando lo que ya está dicho en otro sitio —el rótulo, que
   está en el logo, y el nombre del equipo, que es el título de la página—
   en vez de apretar tipos hasta que quepan. */
@media (max-width: 560px) {
  .scorpio-shell__top { padding: 10px 12px; gap: var(--space-2); }
  .scorpio-shell__wordmark { display: none; }

  /* Lo que se va es la inicial del usuario, no el equipo.
     Antes al revés, con el argumento de que el equipo «es el título de la
     página»: cierto en «Mi equipo», falso en la plantilla y en una ficha, donde
     el título es «Plantilla» o el nombre del jugador. Quien lleva dos equipos
     —los hay— se quedaba sin saber en cuál estaba. La inicial, en cambio, no
     dice nada que su dueño no sepa. Sin marco ni icono para que quepa. */
  .scorpio-shell__avatar { display: none; }
  .scorpio-shell__user { padding: 0; }
  .scorpio-shell__ctx {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .scorpio-shell__ctx svg { display: none; }
}

/* El foco del teclado tiene que verse en la etiqueta, porque el
   elemento que recibe el foco de verdad es la casilla oculta. */
.scorpio-shell__toggle:focus-visible ~ .scorpio-shell__top .scorpio-shell__burger {
  outline: var(--focus-ring);
  outline-offset: 2px;
}