/* ==========================================================================
   ESTILO MODERNO - tknet.cl
   --------------------------------------------------------------------------
   Linea grafica unica para la remodelacion del sistema. Se destilo de las dos
   pantallas que ya estan rehechas:

     - /  (inicio.blade.php)  -> superficie de PRESENTACION, tema oscuro
     - /dashboard y /perfil/{url} (perfil.blade.php) -> superficie de TRABAJO,
       tema claro

   No son dos estilos: es uno solo con dos temas. Comparten geometria (radios
   grandes, pildoras, grillas auto-fill), interaccion (elevar en hover,
   transiciones cortas, anillo de foco visible) y estructura (contenedor
   centrado; cabecera de seccion = rotulo chico en mayusculas + titulo grande).

   REGLA DE USO
     Tema claro   -> paneles, listados, formularios, tablas, modales, admin.
                     Es el tema por defecto. Ante la duda, claro.
     Tema oscuro  -> portadas, landings, pantallas de impacto, proyeccion en
                     sala (llaves en pantalla grande, marcadores).

   COMO SE USA
     <link rel="stylesheet" href="{{ asset('assets/css/estilo-moderno.css?v=1') }}">
     <div class="em em-claro"> ... </div>      (o em-oscuro)

   Todas las clases van prefijadas con em- para no chocar con Bootstrap ni con
   el CSS heredado del sitio. Nada de esto pisa estilos existentes: hay que
   optar explicitamente poniendo la clase.

   OJO: .htaccess sirve /assets con Cache-Control immutable. Al editar este
   archivo hay que subir el ?v= en las vistas que lo incluyan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FUENTES
   Claro : Poppins (titulos y UI) + Manrope (texto corrido)
   Oscuro: Roboto Condensed (titulares) + Roboto (texto) + Roboto Mono (rotulos)
   Se cargan desde la vista, no desde aca, para no encadenar @import:

   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Condensed:wght@500;700;900&family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. FICHAS (design tokens)
   -------------------------------------------------------------------------- */
.em {
  /* -- Tipografia -- */
  --em-fuente-ui:     'Poppins', system-ui, sans-serif;
  --em-fuente-texto:  'Manrope', system-ui, sans-serif;
  --em-fuente-mono:   'Roboto Mono', ui-monospace, monospace;

  /* Escala tipografica. Los tamanos con decimales no son un descuido: son los
     que ya estan en produccion y mantienen la densidad de la interfaz. */
  --em-t-xs:    11.5px;
  --em-t-sm:    12.5px;
  --em-t-base:  13.5px;
  --em-t-md:    14px;
  --em-t-lg:    16px;
  --em-t-titulo:19px;
  --em-t-dato:  26px;

  /* -- Geometria -- */
  --em-r-sm:   8px;
  --em-r-md:  10px;
  --em-r-lg:  12px;
  --em-r-xl:  16px;
  --em-r-2xl: 18px;
  --em-r-3xl: 24px;
  --em-r-pill: 999px;

  /* -- Ritmo -- */
  --em-e-1:  4px;
  --em-e-2:  8px;
  --em-e-3: 12px;
  --em-e-4: 16px;
  --em-e-5: 22px;
  --em-e-6: 30px;

  /* -- Movimiento -- */
  --em-trans:      .15s;
  --em-trans-lenta:.25s;

  /* -- Ancho util -- */
  --em-ancho: 1180px;

  /* -- Acento. Se puede repisar por contexto (ver seccion 9) -- */
  --em-ac:        #2f6df6;
  --em-ac-oscuro: #1e4fd8;
  --em-ac-rgb:    47, 109, 246;

  /* -- Paleta semantica, comun a los dos temas -- */
  --em-exito:   #16a34a;
  --em-peligro: #e11d48;
  --em-aviso:   #f59e0b;
  --em-info:    #0891b2;
  --em-violeta: #7c3aed;
  --em-teal:    #0ea5a4;

  font-family: var(--em-fuente-texto);
  color: var(--em-txt);
  background: var(--em-fondo);
}

.em *, .em *::before, .em *::after { box-sizing: border-box; }

/* -- Tema claro: superficie de trabajo (es el defecto) ---------------------- */
.em, .em-claro {
  --em-fondo:       #f8f9fa;
  --em-superficie:  #ffffff;
  --em-superficie-2:#f4f5f7;

  --em-txt:    #1d1d1f;
  --em-txt-2:  #6b727b;
  --em-txt-3:  #8a9097;
  --em-txt-4:  #9aa0a8;

  --em-borde:       #e6e7eb;  /* borde de tarjeta            */
  --em-borde-suave: #eef0f3;  /* separadores internos        */
  --em-borde-campo: #dfe2e7;  /* inputs, chips, botones ghost*/
  --em-divisor:     #f4f5f7;  /* filas de lista              */

  /* Elevacion: en claro la sombra es discreta y solo aparece al interactuar. */
  --em-sombra:       0 4px 14px rgba(0,0,0,.07);
  --em-sombra-media: 0 8px 22px rgba(0,0,0,.10);
  --em-sombra-color: 0 8px 22px rgba(var(--em-ac-rgb),.35);
  --em-sombra-color-hover: 0 12px 28px rgba(var(--em-ac-rgb),.45);
  --em-foco: 0 0 0 3px rgba(var(--em-ac-rgb),.15);
}

/* -- Tema oscuro: superficie de presentacion -------------------------------- */
.em-oscuro {
  --em-fondo:       #07070c;
  --em-superficie:  #101019;
  --em-superficie-2:rgba(255,255,255,.03);

  --em-txt:    #f3f4f9;
  --em-txt-2:  #9ea0b5;
  --em-txt-3:  #7d7f92;
  --em-txt-4:  #7d7f92;

  --em-borde:       rgba(255,255,255,.10);
  --em-borde-suave: rgba(255,255,255,.06);
  --em-borde-campo: rgba(255,255,255,.10);
  --em-divisor:     rgba(255,255,255,.06);

  /* En oscuro la sombra es estructural: separa la tarjeta del video de fondo. */
  --em-sombra:       0 16px 40px rgba(15,16,24,.45);
  --em-sombra-media: 0 24px 54px rgba(15,16,24,.60);
  --em-sombra-color: 0 12px 34px rgba(255,39,80,.42);
  --em-sombra-color-hover: 0 16px 44px rgba(124,92,255,.55);
  --em-foco: 0 0 0 3px rgba(25,227,255,.35);

  /* Acentos neon propios del tema oscuro. */
  --em-neon-rojo: #ff2750;
  --em-neon-lila: #7c5cff;
  --em-neon-cian: #19e3ff;
  --em-ac:        #19e3ff;
  --em-ac-rgb:    25, 227, 255;

  --em-fuente-ui:    'Roboto Condensed', system-ui, sans-serif;
  --em-fuente-texto: 'Roboto', system-ui, sans-serif;
}

/* Gradiente de marca. Es la firma del sitio: se usa en el tema oscuro para el
   boton principal y para texto destacado. En claro NO se usa de fondo de
   pagina, solo en botones de acceso (seccion 5). */
.em-oscuro { --em-grad: linear-gradient(100deg, #ff2750, #7c5cff); }
.em-grad-texto {
  background: linear-gradient(100deg, #ff2750, #7c5cff 45%, #19e3ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------------------------
   3. ESTRUCTURA
   -------------------------------------------------------------------------- */

/* Contenedor: siempre centrado, ancho util fijo, aire lateral que se achica
   en movil. Nunca contenido pegado al borde de la ventana. */
.em-contenedor { max-width: var(--em-ancho); margin: 0 auto; padding: 0 24px; }

/* Dos columnas: barra lateral fija + contenido elastico. Colapsa a una sola
   columna antes de que la lateral quede impracticable. */
.em-2col { display: grid; grid-template-columns: 340px 1fr; gap: var(--em-e-5); align-items: start; }

/* Grilla de piezas iguales. auto-fill + minmax en vez de un numero fijo de
   columnas: se adapta sola y no hay que tocar breakpoints por cada grilla. */
.em-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--em-e-3); }
.em-grid--ancha{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.em-grid--angosta{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

@media (max-width: 900px) { .em-2col { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .em-contenedor { padding: 0 16px; } }

/* Cabecera de seccion: rotulo chico en mayusculas + titulo grande. Es el
   patron del inicio y ordena cualquier pantalla nueva. */
.em-seccion-rotulo {
  font-family: var(--em-fuente-mono); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--em-ac); margin-bottom: var(--em-e-4);
}
.em-titulo    { margin: 0; font-family: var(--em-fuente-ui); font-weight: 700; font-size: var(--em-t-titulo); color: var(--em-txt); }
.em-titulo-sm { margin: 0 0 14px; font-family: var(--em-fuente-ui); font-weight: 700; font-size: 18px; color: var(--em-txt); }
/* Titular de portada: escala con la ventana sin media queries. */
.em-titular {
  margin: 0; font-family: var(--em-fuente-ui); font-weight: 700;
  font-size: clamp(32px, 5vw, 64px); line-height: 1.02; letter-spacing: -.02em;
}
.em-bajada { margin: 14px 0 0; color: var(--em-txt-2); font-size: var(--em-t-lg); line-height: 1.6; max-width: 54ch; }

/* --------------------------------------------------------------------------
   4. TARJETAS
   La unidad de composicion. Todo bloque de contenido va en una tarjeta.
   -------------------------------------------------------------------------- */
.em-card {
  background: var(--em-superficie);
  border: 1px solid var(--em-borde);
  border-radius: var(--em-r-xl);
  padding: 20px;
}
.em-card--dato { border-radius: var(--em-r-lg); padding: 16px 18px; }

/* Tarjeta que responde: se usa cuando la tarjeta entera es clickeable. El
   feedback es borde de acento + sombra, nunca cambio de fondo. */
.em-card--click { cursor: pointer; transition: border-color var(--em-trans), box-shadow var(--em-trans); }
.em-card--click:hover { border-color: var(--em-ac); box-shadow: var(--em-sombra); }

/* Tarjeta de presentacion (tema oscuro): vidrio esmerilado sobre el fondo. */
.em-oscuro .em-card--vidrio {
  background: linear-gradient(120deg, rgba(18,18,28,.80), rgba(11,11,18,.74));
  border-radius: var(--em-r-3xl);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.em-oscuro .em-card--elevada { border-radius: var(--em-r-2xl); overflow: hidden; transition: transform var(--em-trans-lenta), box-shadow var(--em-trans-lenta); }
.em-oscuro .em-card--elevada:hover { transform: translateY(-5px); box-shadow: var(--em-sombra-media); }

/* Dato destacado dentro de una tarjeta. */
.em-dato     { font-family: var(--em-fuente-ui); font-weight: 700; font-size: var(--em-t-dato); color: var(--em-txt); }
.em-dato-lbl { font-size: var(--em-t-sm); color: var(--em-txt-3); margin-top: 2px; }

/* --------------------------------------------------------------------------
   5. BOTONES
   Tres niveles y nada mas: principal (acento), secundario (contorno) y
   fantasma (solo texto). El cuarto tipo, el acceso grande de color, es para
   menus de entrada, no para acciones dentro de un formulario.
   -------------------------------------------------------------------------- */
.em-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--em-e-2);
  font-family: var(--em-fuente-ui); font-weight: 600; font-size: var(--em-t-base);
  border-radius: var(--em-r-md); border: 1px solid transparent;
  padding: 11px 18px; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: opacity var(--em-trans), background var(--em-trans), border-color var(--em-trans), color var(--em-trans), box-shadow var(--em-trans);
}
.em-btn:hover { text-decoration: none; }
.em-btn:focus-visible { outline: none; box-shadow: var(--em-foco); }
.em-btn[disabled], .em-btn.em-desactivado { opacity: .5; cursor: not-allowed; }

.em-btn--principal   { background: var(--em-ac); color: #fff; }
.em-btn--principal:hover { color: #fff; opacity: .88; }
.em-btn--secundario  { background: var(--em-superficie); color: var(--em-txt-2); border-color: var(--em-borde-campo); }
.em-btn--secundario:hover { border-color: var(--em-ac); color: var(--em-ac); }
.em-btn--fantasma    { background: none; color: var(--em-ac); padding-left: 4px; padding-right: 4px; }
.em-btn--peligro     { background: var(--em-peligro); color: #fff; }
.em-btn--peligro:hover { color: #fff; opacity: .9; }
.em-btn--bloque      { width: 100%; }
.em-btn--sm          { padding: 10px 16px; font-size: 13px; border-radius: var(--em-r-sm); }

/* Pildora. En el tema oscuro TODOS los botones son pildora con Roboto Mono en
   mayusculas: es lo que le da el aire de portada. */
.em-btn--pill { border-radius: var(--em-r-pill); padding: 12px 26px; }
.em-oscuro .em-btn {
  border-radius: var(--em-r-pill); padding: 16px 34px;
  font-family: var(--em-fuente-mono); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
}
.em-oscuro .em-btn--principal { background: var(--em-grad); color: #fff; box-shadow: var(--em-sombra-color); }
.em-oscuro .em-btn--principal:hover { transform: translateY(-2px); box-shadow: var(--em-sombra-color-hover); }
.em-oscuro .em-btn--secundario { background: rgba(25,227,255,.06); border-color: var(--em-neon-cian); color: var(--em-neon-cian); }
.em-oscuro .em-btn--secundario:hover { background: rgba(25,227,255,.16); color: var(--em-neon-cian); }

/* -- Acceso: boton grande de color para menus de entrada -------------------- */
.em-acceso {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: var(--em-r-xl); padding: 22px 14px; min-height: 112px;
  font-family: var(--em-fuente-ui); font-weight: 700; font-size: var(--em-t-md);
  color: #fff; text-decoration: none; text-align: center; line-height: 1.25;
  background: linear-gradient(135deg, var(--em-ac), var(--em-ac-oscuro));
  box-shadow: var(--em-sombra-color);
  transition: transform var(--em-trans), box-shadow var(--em-trans), filter var(--em-trans);
}
.em-acceso:hover  { color: #fff; text-decoration: none; transform: translateY(-3px); filter: brightness(1.06); box-shadow: var(--em-sombra-color-hover); }
.em-acceso:active { transform: translateY(0); }
.em-acceso i      { font-size: 26px; color: #fff; opacity: .95; }

/* En pantalla angosta el acceso deja de ser un mosaico y pasa a ser una fila:
   el icono al costado y el texto alineado a la izquierda. */
@media (max-width: 700px) {
  .em-acceso { flex-direction: row; min-height: 0; padding: 15px 18px; justify-content: flex-start; gap: var(--em-e-3); font-size: 14.5px; }
  .em-acceso i { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */
.em-campo-lbl {
  display: block; font-family: var(--em-fuente-ui); font-weight: 600;
  font-size: 12px; color: var(--em-txt-2); margin-bottom: 6px; white-space: nowrap;
}
.em-campo {
  width: 100%; min-width: 0;
  border: 1px solid var(--em-borde-campo); border-radius: var(--em-r-md);
  padding: 9px 10px; font-family: var(--em-fuente-texto); font-size: 13px;
  background: var(--em-superficie); color: var(--em-txt);
  transition: border-color var(--em-trans), box-shadow var(--em-trans);
}
/* El foco SIEMPRE se ve: borde de acento + anillo. Nunca outline:none a secas. */
.em-campo:focus { outline: none; border-color: var(--em-ac); box-shadow: var(--em-foco); }
.em-campo--pill { border-radius: var(--em-r-pill); padding: 10px 16px; }

/* Buscador con lupa adentro. */
.em-buscador { position: relative; }
.em-buscador input { width: 100%; border: 1px solid var(--em-borde-campo); border-radius: var(--em-r-pill); padding: 10px 38px; font-family: var(--em-fuente-texto); font-size: var(--em-t-md); background: var(--em-superficie); color: var(--em-txt); outline: none; transition: border-color var(--em-trans), box-shadow var(--em-trans); }
.em-buscador input:focus { border-color: var(--em-ac); box-shadow: var(--em-foco); }
.em-buscador .em-lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--em-txt-4); font-size: var(--em-t-md); pointer-events: none; }

/* Campo que se edita en el sitio: punteado + lapiz. Lo que se puede cambiar
   tiene que verse que se puede cambiar, sin tener que descubrirlo al pasar. */
.em-editable { cursor: pointer; border-bottom: 1px dashed #c7cbd1; }
.em-editable:hover { color: var(--em-ac); border-bottom-color: var(--em-ac); }
.em-editable::after {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 6px;
  vertical-align: -1px; opacity: .45; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.em-editable:hover::after { opacity: 1; }
.em-editable[data-editing="1"] { border-bottom: none; cursor: default; }
.em-editable[data-editing="1"]::after { display: none; }

/* --------------------------------------------------------------------------
   7. CHIPS, ETIQUETAS Y FILTROS
   -------------------------------------------------------------------------- */
.em-chip {
  border: 1px solid var(--em-borde-campo); background: var(--em-superficie);
  border-radius: var(--em-r-pill); padding: 9px 12px;
  font-family: var(--em-fuente-texto); font-size: var(--em-t-sm); font-weight: 600;
  color: var(--em-txt-2); cursor: pointer; white-space: nowrap;
  transition: all var(--em-trans);
}
.em-chip:hover  { border-color: var(--em-ac); color: var(--em-ac); }
.em-chip.em-on  { background: var(--em-ac); border-color: var(--em-ac); color: #fff; }

/* Barra de filtros del tema oscuro: un solo riel con la opcion activa en
   gradiente. */
.em-oscuro .em-filtros { display: inline-flex; padding: 5px; border-radius: var(--em-r-pill); border: 1px solid var(--em-borde); background: var(--em-superficie-2); }
.em-oscuro .em-filtros .em-chip { border: none; background: none; color: var(--em-txt-2); font-family: var(--em-fuente-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 11px 22px; }
.em-oscuro .em-filtros .em-chip.em-on { background: var(--em-grad); color: #fff; }

.em-etiqueta {
  display: inline-block; border-radius: var(--em-r-pill); padding: 2px 9px;
  font-family: var(--em-fuente-ui); font-size: var(--em-t-xs); font-weight: 700;
  background: var(--em-superficie-2); color: var(--em-txt-2);
}
.em-etiqueta--exito   { background: rgba(22,163,74,.12);  color: var(--em-exito); }
.em-etiqueta--peligro { background: rgba(225,29,72,.12);  color: var(--em-peligro); }
.em-etiqueta--aviso   { background: #fff6e5; border: 1px solid #f6d68a; color: #8a6100; }

/* --------------------------------------------------------------------------
   8. LISTAS, TABS Y ESTADOS
   -------------------------------------------------------------------------- */
.em-lista { display: flex; flex-direction: column; gap: var(--em-e-1); }
.em-fila  { display: flex; align-items: center; gap: var(--em-e-3); padding: 10px 4px; border-bottom: 1px solid var(--em-divisor); }
.em-fila:last-child { border-bottom: none; }
.em-fila-txt { flex: 1; min-width: 0; font-family: var(--em-fuente-ui); font-weight: 600; font-size: var(--em-t-md); color: var(--em-txt); text-decoration: none; line-height: 1.25; }
.em-fila-txt:hover { color: var(--em-ac); text-decoration: none; }
.em-fila-sub { display: block; font-family: var(--em-fuente-texto); font-weight: 400; font-size: var(--em-t-sm); color: var(--em-txt-3); margin-top: 1px; }

/* Item de grilla: mismo lenguaje que la tarjeta clickeable pero mas compacto. */
.em-item { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--em-borde-suave); border-radius: var(--em-r-lg); text-decoration: none; color: inherit; transition: all var(--em-trans); }
.em-item:hover { border-color: var(--em-ac); box-shadow: var(--em-sombra); color: inherit; text-decoration: none; }

/* Tabs: la pestana activa se marca con una linea del color de acento por
   dentro, no con un fondo. */
.em-tab { border: none; background: none; font-family: var(--em-fuente-ui); font-weight: 600; font-size: 14.5px; padding: 14px 6px; cursor: pointer; color: var(--em-txt-4); transition: color var(--em-trans); }
.em-tab:hover, .em-tab.em-on { color: var(--em-txt); }
.em-tab.em-on { box-shadow: inset 0 -3px 0 var(--em-ac); }

/* Estado vacio: centrado, gris, sin dibujitos. Ocupa toda la grilla. */
.em-vacio { grid-column: 1/-1; text-align: center; color: var(--em-txt-2); font-size: var(--em-t-md); padding: var(--em-e-6) 10px; }

/* Avatares. Siempre circulares; sin foto, la inicial sobre el color de acento. */
.em-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--em-fuente-ui); font-weight: 700; flex: none; object-fit: cover; background: var(--em-ac); }
.em-avatar--sm { width: 44px; height: 44px; font-size: 15px; }
.em-avatar--md { width: 64px; height: 64px; font-size: 20px; }
.em-avatar--xl { width: 128px; height: 128px; font-size: 40px; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* --------------------------------------------------------------------------
   9. ACENTOS POR CONTEXTO
   El acento no es siempre azul: cambia segun de que hable la pantalla. Se
   repisa --em-ac en el contenedor y todo lo de adentro (botones, tabs, focos,
   hovers) se tine solo. No hay que tocar cada componente.

       <div class="em em-claro em-ac--arbitro"> ... </div>
   -------------------------------------------------------------------------- */
.em-ac--torneo     { --em-ac: #e11d48; --em-ac-oscuro: #b3123a; --em-ac-rgb: 225,29,72;
  --em-sombra-color: 0 8px 22px rgba(225,29,72,.35);
  --em-sombra-color-hover: 0 12px 28px rgba(225,29,72,.45);
  --em-foco: 0 0 0 3px rgba(225,29,72,.15); }
.em-ac--instructor { --em-ac: #7c3aed; --em-ac-oscuro: #5b21b6; --em-ac-rgb: 124,58,237;
  --em-sombra-color: 0 8px 22px rgba(124,58,237,.35);
  --em-sombra-color-hover: 0 12px 28px rgba(124,58,237,.45);
  --em-foco: 0 0 0 3px rgba(124,58,237,.15); }
.em-ac--arbitro    { --em-ac: #0891b2; --em-ac-oscuro: #0e6b86; --em-ac-rgb: 8,145,178;
  --em-sombra-color: 0 8px 22px rgba(8,145,178,.35);
  --em-sombra-color-hover: 0 12px 28px rgba(8,145,178,.45);
  --em-foco: 0 0 0 3px rgba(8,145,178,.15); }
.em-ac--deportista { --em-ac: #16a34a; --em-ac-oscuro: #0f7a37; --em-ac-rgb: 22,163,74;
  --em-sombra-color: 0 8px 22px rgba(22,163,74,.35);
  --em-sombra-color-hover: 0 12px 28px rgba(22,163,74,.45);
  --em-foco: 0 0 0 3px rgba(22,163,74,.15); }
.em-ac--aviso      { --em-ac: #f59e0b; --em-ac-oscuro: #b45309; --em-ac-rgb: 245,158,11;
  --em-sombra-color: 0 8px 22px rgba(245,158,11,.35);
  --em-sombra-color-hover: 0 12px 28px rgba(245,158,11,.45);
  --em-foco: 0 0 0 3px rgba(245,158,11,.15); }
.em-ac--teal       { --em-ac: #0ea5a4; --em-ac-oscuro: #0b7f7e; --em-ac-rgb: 14,165,164;
  --em-sombra-color: 0 8px 22px rgba(14,165,164,.35);
  --em-sombra-color-hover: 0 12px 28px rgba(14,165,164,.45);
  --em-foco: 0 0 0 3px rgba(14,165,164,.15); }

/* --------------------------------------------------------------------------
   10. ACCESIBILIDAD Y CIERRE
   -------------------------------------------------------------------------- */

/* Foco visible en todo lo que se pueda enfocar. Sin esto la interfaz no se
   puede recorrer con teclado. */
.em a:focus-visible, .em button:focus-visible, .em [tabindex]:focus-visible {
  outline: 2px solid var(--em-ac); outline-offset: 3px; border-radius: var(--em-r-sm);
}

/* Respeta a quien pidio menos animacion en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .em *, .em *::before, .em *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .em-acceso:hover, .em-oscuro .em-card--elevada:hover, .em-oscuro .em-btn--principal:hover { transform: none; }
}

/* Nada de contenido debe desbordar la ventana a lo ancho: lo que no entra
   (tablas, llaves) scrollea dentro de su propia caja. */
.em-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   11. TABLAS
   Para listados con muchas columnas, donde una grilla de tarjetas obligaria a
   esconder datos. Siempre dentro de .em-tabla-caja: lo ancho scrollea en su
   propia caja y la pagina nunca se va de lado.
   -------------------------------------------------------------------------- */
.em-tabla-caja {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--em-borde); border-radius: var(--em-r-lg);
  background: var(--em-superficie);
}
.em-tabla { width: 100%; border-collapse: collapse; font-size: var(--em-t-base); }
.em-tabla th {
  text-align: left; white-space: nowrap;
  font-family: var(--em-fuente-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--em-txt-3);
  padding: 12px 16px; background: var(--em-superficie-2);
  border-bottom: 1px solid var(--em-borde);
}
.em-tabla td {
  padding: 14px 16px; vertical-align: middle;
  border-bottom: 1px solid var(--em-borde-suave); color: var(--em-txt);
}
.em-tabla tbody tr:last-child td { border-bottom: none; }
.em-tabla tbody tr { transition: background var(--em-trans); }
.em-tabla tbody tr:hover { background: var(--em-superficie-2); }
/* Los numeros que se comparan en columna van alineados por digito. */
.em-tabla .em-num { font-variant-numeric: tabular-nums; text-align: right; }
.em-tabla .em-td-sec { color: var(--em-txt-2); font-size: var(--em-t-sm); }
.em-tabla .em-td-acciones { white-space: nowrap; text-align: right; }

/* Nombre + linea secundaria dentro de una celda. */
.em-celda-titulo { font-family: var(--em-fuente-ui); font-weight: 600; font-size: var(--em-t-md); line-height: 1.25; }
.em-celda-sub    { font-size: var(--em-t-sm); color: var(--em-txt-3); margin-top: 2px; }

/* Miniatura cuadrada (escudos, fotos de deportista). */
.em-mini {
  width: 56px; height: 56px; border-radius: var(--em-r-md);
  object-fit: cover; background: var(--em-superficie-2);
  border: 1px solid var(--em-borde); display: block;
}
.em-mini--lg { width: 72px; height: 72px; }

/* Escudo de reemplazo cuando el equipo no subio imagen: las iniciales sobre
   un color sacado del propio nombre. Ocupa exactamente lo mismo que .em-mini
   para que la fila no se mueva segun tenga o no foto. */
.em-mini--ini {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--em-fuente-ui); font-weight: 700; letter-spacing: .02em;
  font-size: 18px; color: #fff; border: none; user-select: none;
}
.em-mini--lg.em-mini--ini { font-size: 24px; }

.em-ini-0 { background: linear-gradient(150deg,#2f6df6,#1b4bc4); }
.em-ini-1 { background: linear-gradient(150deg,#e11d48,#a1103a); }
.em-ini-2 { background: linear-gradient(150deg,#0ea5a4,#07706f); }
.em-ini-3 { background: linear-gradient(150deg,#7c5cff,#4b2fd1); }
.em-ini-4 { background: linear-gradient(150deg,#f59e0b,#b96f04); }
.em-ini-5 { background: linear-gradient(150deg,#16a34a,#0d6f32); }
.em-ini-6 { background: linear-gradient(150deg,#0284c7,#02557d); }
.em-ini-7 { background: linear-gradient(150deg,#db2777,#961252); }
.em-ini-8 { background: linear-gradient(150deg,#525b6b,#2f3540); }
.em-ini-9 { background: linear-gradient(150deg,#ea580c,#9a3a06); }

/* --------------------------------------------------------------------------
   12. CABECERA DE BLOQUE Y ACCIONES
   -------------------------------------------------------------------------- */

/* Titulo a la izquierda, accion a la derecha; en angosto se apilan. */
.em-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--em-e-3); flex-wrap: wrap; margin-bottom: var(--em-e-4);
}
.em-cab-sub { font-size: var(--em-t-base); color: var(--em-txt-2); margin: 4px 0 0; }

/* Grupo de acciones de una fila. Boton chico, icono opcional. */
.em-acciones { display: inline-flex; gap: 6px; align-items: center; }
.em-acciones form { display: inline; margin: 0; }
.em-btn-icono {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--em-borde-campo); background: var(--em-superficie);
  color: var(--em-txt-2); border-radius: var(--em-r-sm);
  padding: 7px 12px; font-family: var(--em-fuente-ui); font-weight: 600;
  font-size: var(--em-t-sm); cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: all var(--em-trans);
}
.em-btn-icono:hover { border-color: var(--em-ac); color: var(--em-ac); text-decoration: none; }
.em-btn-icono--peligro:hover { border-color: var(--em-peligro); color: var(--em-peligro); }

/* Encabezado de pagina. Reemplaza al banner de foto de 300px que traian las
   pantallas viejas, pero cumple la misma funcion tecnica ademas de la visual:
   la navbar del layout es fixed-top, transparente y con texto blanco hasta que
   se hace scroll, asi que sobre una pagina clara sus enlaces quedarian
   invisibles. Esta franja oscura le hace de fondo -- igual que la portada en el
   perfil -- y su padding-top deja libre el alto de la navbar.

   Va a sangre completa, con su propio .em-contenedor adentro:

     <header class="em-encabezado">
       <div class="em-contenedor">
         <p class="em-seccion-rotulo">Mi cuenta</p>
         <h1>Mis equipos</h1>
         <p>Bajada.</p>
       </div>
     </header>
*/
.em-encabezado {
  background: linear-gradient(160deg, #0f1018 0%, #1a1b2e 100%);
  color: #f3f4f9;
  padding: 128px 0 36px;
  margin-bottom: 26px;
}
.em-encabezado h1 {
  margin: 0; color: #fff;
  font-family: var(--em-fuente-ui); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.015em; line-height: 1.1;
}
.em-encabezado p  { margin: 10px 0 0; color: #9ea0b5; font-size: 14.5px; max-width: 68ch; }
.em-encabezado .em-seccion-rotulo { color: #19e3ff; margin-bottom: 12px; }

/* En movil la navbar es mas baja y el titulo pesa menos. */
@media (max-width: 991px) { .em-encabezado { padding: 104px 0 30px; } }

/* --------------------------------------------------------------------------
   13. MODALES DE BOOTSTRAP DENTRO DEL ESTILO
   No se reimplementa el modal: se le pone la piel del sistema al que ya trae
   Bootstrap, para no tocar el JS ni los data-bs-* que ya funcionan.
   -------------------------------------------------------------------------- */
.em .modal-content {
  border: 1px solid var(--em-borde); border-radius: var(--em-r-xl);
  background: var(--em-superficie); color: var(--em-txt);
}
.em .modal-header { border-bottom: 1px solid var(--em-borde-suave); padding: 18px 22px; }
.em .modal-title  { font-family: var(--em-fuente-ui); font-weight: 700; font-size: 17px; }
.em .modal-body   { padding: 22px; }
.em .modal-footer { border-top: 1px solid var(--em-borde-suave); padding: 16px 22px; }

/* Los formularios de los modales usan .form-control y .form-select de
   Bootstrap: se les da el mismo aspecto que a .em-campo sin renombrar nada. */
.em .form-control, .em .form-select {
  border: 1px solid var(--em-borde-campo); border-radius: var(--em-r-md);
  padding: 9px 11px; font-family: var(--em-fuente-texto); font-size: 13.5px;
  background: var(--em-superficie); color: var(--em-txt);
  transition: border-color var(--em-trans), box-shadow var(--em-trans);
}
.em .form-control:focus, .em .form-select:focus {
  outline: none; border-color: var(--em-ac); box-shadow: var(--em-foco);
}
.em .form-label, .em label.text-14 {
  font-family: var(--em-fuente-ui); font-weight: 600; font-size: 12px;
  color: var(--em-txt-2); margin-bottom: 5px;
}

/* --------------------------------------------------------------------------
   14. VOLVER FLOTANTE
   El volver no es contenido: es navegacion. Por eso no vive al final de la
   pagina, donde hay que scrollear hasta el fondo para encontrarlo, sino fijo
   en la esquina inferior izquierda, siempre a mano. Se pone abajo a la
   izquierda porque arriba ya esta la barra del layout y la derecha es la mano
   con la que se toca en movil: ahi estorbaria.
   -------------------------------------------------------------------------- */
.em-volver {
  position: fixed; left: 24px; bottom: 24px; z-index: 1020;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 13px;
  border: 1px solid var(--em-borde);
  border-radius: var(--em-r-pill);
  background: var(--em-superficie);
  color: var(--em-txt-2);
  font-family: var(--em-fuente-ui); font-weight: 600; font-size: 13.5px;
  line-height: 1; text-decoration: none; white-space: nowrap;
  box-shadow: var(--em-sombra-media);
  transition: color var(--em-trans), border-color var(--em-trans),
              box-shadow var(--em-trans), transform var(--em-trans);
}
.em-volver:hover, .em-volver:focus-visible {
  color: var(--em-ac); border-color: var(--em-ac); text-decoration: none;
}
.em-volver:hover { box-shadow: var(--em-sombra-color); transform: translateY(-2px); }
.em-volver:active { transform: translateY(0); }

/* La flecha se corre hacia atras al pasar el mouse: dice para donde lleva
   antes de leer el texto. */
.em-volver-ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 22px; height: 22px; font-size: 16px;
  transition: transform var(--em-trans);
}
.em-volver:hover .em-volver-ico { transform: translateX(-3px); }

/* Con un modal abierto el volver queda detras del velo pero igual se alcanza
   a ver por el borde; mejor sacarlo mientras el modal manda. */
body.modal-open .em-volver { opacity: 0; pointer-events: none; }

/* En movil se queda solo la flecha: un boton de 46px no tapa la lectura, y el
   texto ya viaja en el aria-label. */
@media (max-width: 600px) {
  .em-volver { left: 16px; bottom: 16px; gap: 0; padding: 0;
               width: 46px; height: 46px; justify-content: center; }
  .em-volver .em-volver-txt { display: none; }
}

@media (prefers-reduced-motion: reduce) { .em-volver:hover { transform: none; } }
@media print { .em-volver { display: none; } }

/* --------------------------------------------------------------------------
   15. MODAL DE VIDRIO
   Variante del modal para lo que interrumpe: editar algo puntual, confirmar un
   borrado. El panel es translucido y desenfoca lo que tiene detras, asi no se
   pierde de vista en que parte de la pagina se esta trabajando.
   Se pone sobre .modal-content:  <div class="modal-content em-glass">
   -------------------------------------------------------------------------- */
.em .em-glass {
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--em-r-2xl);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 24px 70px rgba(15,16,24,.30), inset 0 1px 0 rgba(255,255,255,.65);
  overflow: hidden;
}

/* Con el velo negro de siempre el desenfoque no se ve: quedaria un gris plano.
   Cuando hay un modal de vidrio abierto se aclara el velo y se desenfoca ahi,
   que es lo que deja ver la pagina detras del panel. */
body:has(.modal.show .em-glass) .modal-backdrop.show {
  opacity: 1; background: rgba(15,16,24,.38);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.em-glass-cab {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 22px 56px 18px 24px;
  border-bottom: 1px solid rgba(15,16,24,.08);
}
.em-glass-ico {
  flex: none; width: 44px; height: 44px; border-radius: var(--em-r-lg);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: rgba(var(--em-ac-rgb),.12);
  border: 1px solid rgba(var(--em-ac-rgb),.22);
  color: var(--em-ac);
}
.em-glass-rotulo {
  margin: 0 0 3px; font-family: var(--em-fuente-mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--em-ac);
}
.em-glass-titulo {
  margin: 0; font-family: var(--em-fuente-ui); font-weight: 700;
  font-size: 18px; color: var(--em-txt); line-height: 1.25;
}
.em-glass-cerrar {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(15,16,24,.10); border-radius: 50%;
  background: rgba(255,255,255,.55); color: var(--em-txt-3);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background var(--em-trans), color var(--em-trans);
}
.em-glass-cerrar:hover { background: #fff; color: var(--em-txt); }

.em-glass-cuerpo { padding: 22px 24px; max-height: 66vh; overflow-y: auto; }

/* El pie se apoya en una franja apenas mas solida: separa sin dibujar una
   linea dura sobre el vidrio. */
.em-glass-pie {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px; background: rgba(255,255,255,.45);
  border-top: 1px solid rgba(15,16,24,.07);
}
@media (max-width: 480px) {
  .em-glass-pie { flex-direction: column-reverse; }
  .em-glass-pie .em-btn { width: 100%; }
}

/* Confirmar un borrado usa el mismo panel en rojo: el color hace de aviso
   antes de leer el texto. */
.em-glass--peligro {
  --em-ac: #e11d48; --em-ac-oscuro: #b3123a; --em-ac-rgb: 225,29,72;
  --em-foco: 0 0 0 3px rgba(225,29,72,.15);
  --em-sombra-color: 0 8px 22px rgba(225,29,72,.35);
  --em-sombra-color-hover: 0 12px 28px rgba(225,29,72,.45);
}
.em-glass-nota {
  margin: 0; padding: 12px 14px; border-radius: var(--em-r-md);
  background: rgba(var(--em-ac-rgb),.08);
  border: 1px solid rgba(var(--em-ac-rgb),.18);
  font-size: 13px; color: var(--em-txt-2);
}
.em-glass-objeto {
  font-family: var(--em-fuente-ui); font-weight: 700; font-size: 16px;
  color: var(--em-txt); margin: 0 0 12px;
}

/* Los campos sobre el vidrio tambien son translucidos: un blanco solido
   cortaria el panel en bloques y se perderia el efecto. */
.em .em-glass .form-control, .em .em-glass .form-select, .em .em-glass .em-campo {
  background: rgba(255,255,255,.62); border-color: rgba(15,16,24,.14);
}
.em .em-glass .form-control:focus, .em .em-glass .form-select:focus, .em .em-glass .em-campo:focus {
  background: #fff;
}
.em-oscuro .em-glass .form-control, .em-oscuro .em-glass .form-select, .em-oscuro .em-glass .em-campo {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}

/* En oscuro el vidrio es humo, no escarcha. */
.em-oscuro .em-glass {
  background: rgba(16,16,25,.66); border-color: rgba(255,255,255,.10);
  box-shadow: 0 28px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.em-oscuro .em-glass-cab { border-bottom-color: rgba(255,255,255,.08); }
.em-oscuro .em-glass-pie { background: rgba(255,255,255,.03); border-top-color: rgba(255,255,255,.07); }
.em-oscuro .em-glass-cerrar {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: var(--em-txt-3);
}
.em-oscuro .em-glass-cerrar:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Sin backdrop-filter el panel translucido se leeria mal: se vuelve solido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .em .em-glass { background: var(--em-superficie); }
  .em .em-glass-pie { background: var(--em-superficie-2); }
}

/* --------------------------------------------------------------------------
   16. SELECT DE GRADO CON EL COLOR DEL CINTURON
   Un <option> nativo no admite fondo ni degradado en ningun navegador, asi
   que el desplegable se dibuja a mano. El JS que lo arma vive en
   assets/js/select-cinturon.js; el <select> real se queda en el formulario.
   -------------------------------------------------------------------------- */
/* El cinturón: la mitad de arriba es color1 y la de abajo color2, igual que
   las dos franjas de la tabla. Los grados de un solo color traen color1 y
   color2 iguales, así que el mismo degradado sirve para todos. */
.cinta {
    flex:none; width:18px; height:26px; border-radius:6px;
    border:1px solid rgba(15,16,24,.18);
    background:linear-gradient(180deg, var(--c1,#fff) 0 50%, var(--c2,#fff) 50% 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
/* Sin grado elegido no se inventa un color: se ve que falta elegir. */
.cinta[data-vacia] {
    background:repeating-linear-gradient(135deg,#eef0f3 0 4px,#e2e5ea 4px 8px);
    box-shadow:none;
}

/* ---- Desplegable propio para el grado ------------------------------------
   Un <option> nativo no admite fondo ni degradado en ningún navegador, así
   que el color no puede ir dentro del select del sistema. Este es el mismo
   control dibujado a mano: el <select> real sigue en el formulario, oculto. */
.cs { position:relative; }
.cs__real {
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; padding:0; border:0; pointer-events:none;
}
.cs__btn {
    width:100%; display:flex; align-items:center; gap:9px; text-align:left;
    padding:6px 10px; min-height:38px;
    border:1px solid #dee2e6; border-radius:10px; background:#fff;
    font-size:14px; color:#212529; cursor:pointer;
    transition:border-color .15s, box-shadow .15s;
}
.cs__btn:focus-visible, .cs.abierto .cs__btn {
    outline:none; border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25);
}
.cs__txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs__txt[data-vacio] { color:#8a9097; }
.cs__flecha { font-size:11px; color:#8a9097; transition:transform .15s; }
.cs.abierto .cs__flecha { transform:rotate(180deg); }

/* La lista se cuelga del <body> y va con position:fixed: dentro del modal la
   recortaría el overflow:hidden de .modal-content. */
.cs__lista {
    position:fixed; z-index:1080; margin:0; padding:6px; list-style:none;
    background:#fff; border:1px solid #e6e7eb; border-radius:12px;
    box-shadow:0 16px 40px rgba(15,16,24,.18);
    overflow-y:auto; overscroll-behavior:contain;
}
.cs__op {
    display:flex; align-items:center; gap:10px;
    padding:7px 9px; border-radius:8px; cursor:pointer;
    font-size:14px; color:#212529;
}
.cs__op:hover, .cs__op.activa { background:#f0f2f5; }
.cs__op[aria-selected="true"] { font-weight:600; }