/* ==========================================================================
   Telefonía Móvil — hoja de estilos
   Paleta institucional Grupo MV: azul institucional #224F91 (PMS 7462 C) y
   naranja #EF8D27 (PMS 158 C), tomados de BrandPaletteKit.vue (fuente oficial
   de marca). El azul carga el peso (superficies, botones, texto) y el naranja
   se reserva para marcar: destello de la marca, pestaña activa, foco. Los
   tonos derivados (hondo/noche/medio/tenue) se recalcularon conservando la
   misma relación de luminosidad que tenían con la paleta anterior.
   Tipografía: Archivo (títulos) / IBM Plex Sans (texto) / IBM Plex Mono (datos).

   PENDIENTE (seguridad · tipografías de terceros)
   -----------------------------------------------
   Las tres familias se piden hoy a fonts.googleapis.com desde el <link> de cada
   página. Eso tiene tres costos:

     · le dice a un tercero quién abre la aplicación y cuándo, que es
       exactamente lo que marca.py se niega a hacer con el logotipo
       («sólo rutas internas», ver comun.ruta_interna);
     · en un servidor segregado o sin salida a internet la tipografía no carga
       y la aplicación se ve con la de sistema;
     · obliga a que la política de contenido (CSP, en app.py) abra
       style-src y font-src a dos dominios ajenos en lugar de quedarse en 'self'.

   El arreglo es auto-hospedarlas: bajar los .woff2 de Archivo, IBM Plex Sans e
   IBM Plex Mono, ponerlos en static/fonts/, declararlos con @font-face aquí,
   quitar los <link> y <link rel="preconnect"> de los 11 HTML y cerrar la CSP a
   'self'. No se hizo en esta pasada porque requiere descargar los archivos de
   tipografía, que no es algo que se resuelva editando código.
   ========================================================================== */

:root {
  /* Marca (oficial, BrandPaletteKit.vue) */
  --marino: #224f91;
  --marino-hondo: #1b3e71;
  --marino-noche: #173562;
  --marino-medio: #306fcc;
  --naranja: #ef8d27;
  --naranja-hondo: #cb6f0f;   /* variante con contraste suficiente sobre blanco */
  --naranja-tenue: #fef7f0;

  /* Neutros fríos, derivados del marino */
  --acero-900: #10192b;
  --acero-800: #1c2740;
  --acero-700: #2c3b57;
  --acero-500: #5d6b85;
  --acero-400: #8390a6;
  --acero-300: #adb8c9;
  --acero-200: #ccd4e0;
  --acero-100: #e0e6ee;
  --papel: #eef1f6;
  --blanco: #ffffff;

  /* Acento funcional (enlaces, resaltados de datos) */
  --senal: var(--marino);
  --senal-oscuro: var(--marino-hondo);
  --senal-tenue: #ebeff5;

  /* Estados: semáforo de KPIs oficial (BrandPaletteKit.vue), independiente
     de la paleta de marca de arriba. */
  --ok: #268012;
  --ok-tenue: #e6f1e4;
  --espera: #b45309;
  --espera-tenue: #f7ede5;
  --alto: #d4171f;
  --alto-tenue: #fae7e7;
  --mudo: #5d6b85;
  --mudo-tenue: #e7ebf1;

  --display: "Archivo", "Segoe UI", sans-serif;
  --texto: "IBM Plex Sans", "Segoe UI", sans-serif;
  --dato: "IBM Plex Mono", ui-monospace, monospace;

  --rail: 240px;
  --radio: 3px;
  --sombra: 0 1px 2px rgba(27, 62, 113, 0.08), 0 6px 18px rgba(27, 62, 113, 0.07);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--acero-900);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: var(--senal-oscuro); }

:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

.oculto { display: none !important; }

/* Etiqueta de sección: una palabra en versalitas, con filete a la izquierda */
.rotulo {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acero-500);
}

/* --------------------------------------------------------------------------
   Acceso (login.html)
   -------------------------------------------------------------------------- */
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.acceso__marca {
  background: var(--marino-hondo);
  color: var(--acero-100);
  padding: clamp(32px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Trama de "cobertura": arcos concéntricos que evocan la señal celular */
.acceso__marca::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -220px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(254, 107, 0, 0.16);
  box-shadow:
    inset 0 0 0 90px rgba(254, 107, 0, 0.025),
    0 0 0 90px rgba(255, 255, 255, 0.028),
    0 0 0 180px rgba(255, 255, 255, 0.018),
    0 0 0 270px rgba(255, 255, 255, 0.01);
  pointer-events: none;
}

.acceso__logo {
  width: min(280px, 60%);
  height: auto;
  position: relative;
  z-index: 1;
}

.acceso__titulo {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.02;
  color: var(--blanco);
  max-width: 12ch;
}

.acceso__titulo em { font-style: normal; }

/* Trazo naranja: el mismo recurso que subraya el logotipo institucional. */
.acceso__regla {
  width: 64px;
  height: 4px;
  background: var(--naranja);
  border: 0;
  margin: 0 0 22px;
  position: relative;
  z-index: 1;
}

.acceso__nota {
  max-width: 42ch;
  color: var(--acero-300);
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.acceso__panel {
  background: var(--blanco);
  padding: clamp(32px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.acceso__form {
  width: min(360px, 100%);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Estructura general
   -------------------------------------------------------------------------- */
.marco {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100vh;
}

.rail {
  background: var(--marino-hondo);
  color: var(--acero-300);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail__marca {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rail__logo {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-bottom: 16px;
}

/* Los tres textos de la marca se capturan en Administración › Configuración,
   así que aquí sólo va lo estructural: el color, el tamaño, el estilo y la
   familia llegan resueltos en el atributo `style` de cada uno.

   El `>` no sobra: cada uno de los tres es un renglón, pero los `span` que el
   marcado genera *dentro* de la frase —los tramos de color— tienen que seguir
   siendo inline. Sin el `>`, «Ingetek | [#ff8800]Flow[/]» partía la línea en dos
   y dejaba «Flow» abajo. */
.rail__marca > span {
  display: block;
  line-height: 1.35;
  /* La estrategia y el producto son nombres propios: no se parten. Si uno no
     cabe se recorta con puntos suspensivos en lugar de desbordar el carril —y
     se ve igual en la vista previa, así que se nota al capturarlo y se arregla
     bajándole al tamaño—. La descripción sí puede envolverse: es una oración. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail__marca > .rail__descripcion {
  white-space: normal;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Icono de catálogo: el mismo producto se ve igual en todas las pantallas.
   Cuando no hay imagen cargada se dibuja una pastilla con iniciales y un color
   derivado del nombre, en lugar de dejar un hueco.
   -------------------------------------------------------------------------- */
.icono-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: contain;
  background: var(--blanco);
}

.icono-cat--chico { width: 22px; height: 22px; font-size: 9px; border-radius: 5px; }
.icono-cat--normal { width: 32px; height: 32px; font-size: 12px; }
.icono-cat--grande { width: 48px; height: 48px; font-size: 17px; border-radius: 8px; }

img.icono-cat { border: 1px solid var(--acero-100); padding: 2px; }

.icono-cat--letras {
  color: var(--blanco);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 0;
}

.icono-cat__par { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icono-cat__texto { min-width: 0; }
.icono-cat__texto strong { display: block; overflow-wrap: anywhere; }
.icono-cat__texto .ayuda { display: block; font-size: 12px; }

/* --------------------------------------------------------------------------
   Zona para soltar y pegar archivos. Envuelve al <input type="file"> de
   siempre en lugar de reemplazarlo: si el JavaScript falla, el campo sigue ahí.
   -------------------------------------------------------------------------- */
.soltar {
  border: 1px dashed var(--acero-200);
  border-radius: var(--radio);
  padding: 10px 12px;
  background: var(--blanco);
  transition: border-color 0.12s, background 0.12s;
}

.soltar input[type="file"] { border: 0; padding: 0; width: 100%; }

.soltar:focus-within { border-color: var(--senal); }

/* Mientras se arrastra algo encima. El cambio tiene que ser evidente: es la
   única señal de que se puede soltar ahí. */
.soltar--encima {
  border-color: var(--naranja);
  border-style: solid;
  background: var(--naranja-tenue);
}

.soltar--con-archivo { border-style: solid; border-color: var(--ok); }

.soltar__pie { margin-top: 6px; }

.soltar__pista { font-size: 12px; color: var(--acero-500); }

.soltar__pista kbd {
  font-family: var(--dato);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--acero-200);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--papel);
}

.soltar__previa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--acero-100);
}

.soltar__previa img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--acero-200);
  border-radius: var(--radio);
  background: var(--papel);
}

.soltar__ficha { flex: 1 1 auto; min-width: 0; }
.soltar__ficha strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.soltar__ficha .ayuda { font-size: 11px; }

.soltar__error { color: var(--alto); font-size: 13px; }

/* Alta rápida dentro de un formulario: se despliega bajo el combo que la
   ofrece. Sangrada y con filete naranja para que se lea como parte de ese
   campo y no como una sección nueva. */
.campo-nuevo {
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--naranja);
  background: var(--papel);
  border-radius: 0 var(--radio) var(--radio) 0;
}

.campo-nuevo .etiqueta:first-child { margin-top: 0; }

/* Pasos numerados de un trámite. El número va grande y fuera del texto:
   quien está siguiendo instrucciones necesita saber en cuál va de un vistazo. */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; }

.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 20px 40px;
  border-left: 2px solid var(--acero-100);
  margin-left: 13px;
}

.pasos > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: -14px;
  top: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--marino);
  color: var(--blanco);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pasos .ayuda { margin: 4px 0 0; }

/* Barra de filtros: se lee como parte de la lista que filtra, no como otro
   formulario más. Fondo apenas distinto y sin sombra. */
.panel--filtros {
  background: var(--senal-tenue);
  box-shadow: none;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.panel--filtros .etiqueta { margin-top: 0; }
.panel--filtros summary .chip { margin-left: 8px; }

/* Los filtros **dentro** de la tarjeta de su tabla, como su encabezado, en vez
   de flotando arriba como una tarjeta aparte.

   Que fueran dos tarjetas se leía como dos secciones —una de captura y otra de
   resultados— cuando son una sola cosa: la lista y la forma de acotarla. Y
   plegada, la de arriba quedaba como una barra suelta cuyo parentesco con la
   tabla de abajo había que suponer.

   El marco vive **aquí** y no en la tabla porque el desplazamiento horizontal
   tiene que ser sólo de la tabla: con el `overflow-x` en la tarjeta completa,
   al arrastrar una tabla ancha se irían también los filtros. Por eso el
   `.tabla-marco` de dentro renuncia a su borde y a su sombra —ya las pone la
   tarjeta— y conserva su propio desplazamiento. */
.tabla-con-filtros {
  background: var(--blanco);
  border: 1px solid var(--acero-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  /* Recorta las esquinas de la tabla para que sigan al radio de la tarjeta. */
  overflow: hidden;
}

.tabla-con-filtros > .tabla-marco {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* El encabezado de la tarjeta: mismo fondo tenue que la barra de filtros de
   siempre, sin margen que lo separe de su tabla y con un filete que hace de
   frontera entre el control y el resultado. */
.tabla-con-filtros > .panel--filtros {
  margin-bottom: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--acero-200);
}

/* La tarjeta a la que apunta la liga de un aviso. Se marca el contorno en vez
   de cambiarle el fondo: quien llega desde el correo o el WhatsApp tiene que
   encontrarla de un vistazo sin que la lista se vea rota. */
.panel--destacado {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
}

/* Formatos de carga: una tarjeta por formato, en dos columnas si caben. */
.formatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.formato__datos { width: 100%; border-collapse: collapse; font-size: 13px; }
.formato__datos td { padding: 3px 0; vertical-align: top; }
.formato__datos td:first-child { color: var(--acero-500); padding-right: 14px; white-space: nowrap; }

.formato code.chip {
  font-family: var(--dato);
  font-size: 11px;
  margin: 0 3px 4px 0;
  display: inline-block;
}

/* Configuración › entorno. Dos columnas con anchos declarados y no `auto-fit`:
   con auto-fit el formulario —que es largo— empujaba la vista previa hasta
   debajo de todo, y quien capturaba tenía que bajar tres pantallas para ver el
   efecto de lo que acababa de escribir. Se queda pegada al desplazar. */
.config-marca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 20px;
}

.config-marca__previa {
  position: sticky;
  top: 16px;
}

.config-marca__rail {
  position: static;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 1100px) {
  /* Ya no caben lado a lado: la previa va arriba, no al final del formulario. */
  .config-marca { grid-template-columns: 1fr; }
  .config-marca__previa { position: static; order: -1; }
  .config-marca__rail { max-width: 300px; }
}

/* El archivo cargado se ve junto al campo que lo carga, antes de aplicarlo. */
.logo-previa {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--acero-200);
  border-radius: 8px;
  background: var(--marino);
}

.logo-previa img {
  max-width: 150px;
  max-height: 60px;
  height: auto;
}

.logo-previa .ayuda { margin: 0; color: rgba(255, 255, 255, 0.7); }

/* Barra de formato de Configuración: negrita, cursiva y color para una parte
   de la frase. Botones chicos y pegados al campo, para que se lean como parte
   de él y no como acciones del formulario. */
.barra-formato {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.barra-formato button,
.barra-formato label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--acero-200);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--marino);
  font-size: 13px;
  cursor: pointer;
}

.barra-formato button:hover,
.barra-formato label:hover { border-color: var(--senal); }

.barra-formato input[type="color"] {
  width: 22px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.barra-formato .ayuda { margin: 0 0 0 4px; }

.rail__estrategia { letter-spacing: 0.02em; }
.rail__producto { margin-top: 2px; }
.rail__descripcion { margin-top: 6px; letter-spacing: 0.04em; }

.rail__menu {
  padding: 14px 12px;
  flex: 1;
  overflow-y: auto;
}

.rail__grupo {
  padding: 16px 8px 6px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acero-500);
}

.rail__enlace {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radio);
  color: var(--acero-200);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
}

.rail__enlace:hover { background: rgba(255, 255, 255, 0.05); color: var(--blanco); }

.rail__enlace[aria-current="page"] {
  background: rgba(255, 255, 255, 0.09);
  border-left-color: var(--naranja);
  color: var(--blanco);
  font-weight: 600;
}

.rail__pie {
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(169, 183, 191, 0.14);
  font-size: 13px;
}

.rail__usuario { color: var(--blanco); font-weight: 600; }
.rail__puesto { color: var(--acero-500); font-size: 12px; }

.contenido { padding: 0 clamp(20px, 3.4vw, 44px) 64px; min-width: 0; }

.encabezado {
  padding: 30px 0 22px;
  border-bottom: 1px solid var(--acero-200);
  margin-bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.encabezado h1 { font-size: 28px; }

/* Cuántas personas están usando la aplicación ahora. Va en el encabezado, a la
   derecha, y sólo se dibuja para quien administra. */
.en-linea {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--acero-200);
  border-left: 3px solid var(--ok);
  border-radius: var(--radio);
  background: var(--blanco);
  max-width: 260px;
}
.en-linea__valor {
  font-family: var(--dato);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.en-linea { position: relative; flex-direction: column; align-items: stretch; padding: 0; }

.en-linea__resumen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.en-linea__valor {
  font-family: var(--dato);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Avatares con iniciales, encimados como en una lista de presencia. */
.en-linea__avatares { display: flex; }
.en-linea__avatares .avatar + .avatar { margin-left: -8px; }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--marino);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 2px solid var(--blanco);
  flex: 0 0 auto;
}

/* Verde con actividad reciente, ámbar cuando lleva rato quieto. */
.avatar--activo { box-shadow: 0 0 0 2px var(--ok); }
.avatar--ausente { background: var(--acero-500); box-shadow: 0 0 0 2px var(--espera); }
.avatar--mas { background: var(--acero-200); color: var(--acero-700); }

.en-linea__lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--blanco);
  border: 1px solid var(--acero-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.en-linea__fila {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--acero-100);
}
.en-linea__fila:first-of-type { border-top: 0; }
.en-linea__fila .ayuda { display: block; margin: 0; }
.encabezado p { margin: 4px 0 0; color: var(--acero-500); font-size: 14px; max-width: 62ch; }

.bloque { margin-bottom: 34px; }
.bloque__titulo { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.bloque__titulo h2 { font-size: 18px; }
.bloque__titulo p { margin: 0; font-size: 13px; color: var(--acero-500); }

/* --------------------------------------------------------------------------
   Tarjeta de línea — elemento distintivo, con proporción y muesca de SIM
   -------------------------------------------------------------------------- */
.lineas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

.linea {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--acero-200);
  border-radius: var(--radio);
  border-left: 3px solid var(--mudo);
  padding: 18px 20px 16px;
  box-shadow: var(--sombra);
}

.linea--confirmada { border-left-color: var(--ok); }
.linea--pendiente { border-left-color: var(--alto); }

/* Muesca: el chaflán superior derecho de una tarjeta SIM */
.linea::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  background: var(--papel);
  border-left: 1px solid var(--acero-200);
  border-bottom: 1px solid var(--acero-200);
}

/* Íconos: acompañan a la etiqueta, no la sustituyen. Heredan el color del
   texto para que el mismo trazo sirva en gris, en rojo y en blanco. */
.ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  vertical-align: -2px;
}

.linea__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.linea__chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* El excedente va arriba de todo y en rojo: es la única cosa de esta tarjeta
   que puede requerir que alguien haga algo. */
.linea__excedente {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: var(--alto-tenue);
  color: var(--alto);
}

.linea__excedente .ico { width: 18px; height: 18px; margin-top: 2px; }
.linea__excedente .ayuda { color: var(--acero-700); }

.linea__excedente-lista {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--acero-700);
}

.linea__datos--ciclo,
.linea__datos--equipo { border-top-style: dashed; }

.linea__dato--aviso dd { color: var(--espera); }
.linea__dato--alto dd { color: var(--alto); font-weight: 600; }

.linea__dato dd .ayuda {
  display: block;
  font-family: var(--texto);
  font-size: 11px;
  margin-top: 1px;
}

.linea__pie { margin-top: 14px; font-size: 12px; }

.linea__numero {
  font-family: var(--dato);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  display: block;
}

.linea__plan { font-size: 13px; color: var(--acero-500); margin: 2px 0 14px; }

.linea__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  border-top: 1px solid var(--acero-100);
  padding-top: 12px;
  margin-top: 12px;
}

.linea__dato dt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acero-500);
  font-family: var(--display);
  font-weight: 700;
}
.linea__dato dd { margin: 2px 0 0; font-family: var(--dato); font-size: 14px; font-variant-numeric: tabular-nums; }

.linea__acciones { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linea__acciones .chip { display: inline-flex; align-items: center; gap: 5px; }

/* --------------------------------------------------------------------------
   Tarjeta de plan — el catálogo comercial, para comparar de un vistazo
   -------------------------------------------------------------------------- */
.planes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--acero-200);
  border-top: 3px solid var(--marino);
  border-radius: var(--radio);
  padding: 18px 20px 20px;
  box-shadow: var(--sombra);
}

/* El plan que ya trae el socio se marca con el naranja de la casa. */
.plan--mio { border-top-color: var(--naranja); }

.plan__compania {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--acero-500);
  margin: 0;
}

.plan__nombre { font-size: 19px; margin: 4px 0 2px; }
.plan__clave { font-size: 12.5px; color: var(--acero-500); margin: 0 0 14px; }

.plan__precio {
  font-family: var(--dato);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1.1;
}
.plan__precio span { display: block; font-family: var(--texto); font-size: 12.5px; color: var(--acero-500); }

.plan__destacado {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--senal-tenue);
  border-radius: var(--radio);
}
.plan__destacado strong { font-family: var(--dato); font-size: 21px; display: block; color: var(--marino-hondo); }
.plan__destacado span { font-size: 12.5px; color: var(--acero-700); }

.plan__lista { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.plan__lista li { position: relative; padding: 3px 0 3px 16px; }
.plan__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 2px;
  background: var(--naranja);
}

.plan__incluye { margin: 14px 0 0; border-top: 1px solid var(--acero-100); padding-top: 12px; }
.plan__incluye > div + div { margin-top: 8px; }
.plan__incluye dt { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acero-500); }
.plan__incluye dd { margin: 2px 0 0; font-size: 13px; color: var(--acero-700); }

.plan__pie { margin-top: auto; padding-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Distintivos de estado
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--mudo-tenue);
  color: var(--mudo);
  white-space: nowrap;
}

.chip--ok { background: var(--ok-tenue); color: var(--ok); }
.chip--espera { background: var(--espera-tenue); color: var(--espera); }
.chip--alto { background: var(--alto-tenue); color: var(--alto); }
.chip--senal { background: var(--senal-tenue); color: var(--senal-oscuro); }

/* --------------------------------------------------------------------------
   Tarjetas y paneles
   -------------------------------------------------------------------------- */
.panel {
  background: var(--blanco);
  border: 1px solid var(--acero-200);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
}

.panel + .panel { margin-top: 16px; }
.panel__titulo { font-size: 16px; margin-bottom: 14px; }

.rejilla { display: grid; gap: 16px; }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Cuatro cifras piden columnas más angostas; con el mínimo de --3 la cuarta
   se cae de renglón en pantallas de trabajo normales. */
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Cifra destacada */
.cifra { background: var(--blanco); border: 1px solid var(--acero-200); border-radius: var(--radio); padding: 16px 18px; }
.cifra__valor { font-family: var(--dato); font-size: 26px; font-variant-numeric: tabular-nums; display: block; margin-top: 4px; }
.cifra--total { background: var(--marino-hondo); border-color: var(--marino-hondo); color: var(--blanco); }
.cifra--total .rotulo { color: var(--acero-400); }

/* Lista descriptiva del socio */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; margin: 0; }
.ficha dt { font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--acero-500); }
.ficha dd { margin: 3px 0 0; font-size: 15px; }
.ficha dd.mono { font-family: var(--dato); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.campo { margin-bottom: 14px; }

.campo > label,
.etiqueta {
  display: block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acero-700);
  margin-bottom: 5px;
}

/* `input:not([type])` no es de adorno: un `<input>` sin atributo `type` es de
   tipo texto para el navegador, pero **no** empataba con los selectores de abajo
   y se quedaba sin ancho ni borde —salía como una cajita de veinte caracteres
   junto a campos de ancho completo—. Había once así repartidos en la aplicación,
   y el que lo destapó fue el asunto del aviso a Recursos Humanos.

   Se arregla aquí y no poniéndole `type="text"` a los once porque el problema es
   de la hoja de estilos: mientras el selector no lo cubra, el siguiente campo
   que alguien escriba sin `type` va a nacer roto otra vez. */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="file"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-family: var(--texto);
  font-size: 15px;
  color: var(--acero-900);
  background: var(--blanco);
  border: 1px solid var(--acero-300);
  border-radius: var(--radio);
  padding: 9px 11px;
}

input.mono { font-family: var(--dato); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

textarea { min-height: 110px; resize: vertical; }

select[multiple] { min-height: 190px; padding: 6px; }

input:focus, select:focus, textarea:focus { border-color: var(--senal); outline: 2px solid var(--senal-tenue); outline-offset: 0; }

.ayuda { font-size: 12.5px; color: var(--acero-500); margin: 5px 0 0; }

/* Formularios largos: cada bloque de campos bajo su rótulo, separados por
   un filete. Se usa en el catálogo de planes, que captura muchos atributos. */
.grupo + .grupo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--acero-100); }
.grupo > .rotulo { margin-bottom: 10px; }

/* Casillas de "lo que incluye" */
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 7px 16px; }
.opcion { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.opcion input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--marino); }
.opcion span { line-height: 1.35; }

.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.fila > * { flex: 1 1 170px; }
.fila > .fila__fijo { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--acero-300);
  background: var(--blanco);
  color: var(--acero-900);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn:hover { background: var(--acero-100); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--principal { background: var(--marino); border-color: var(--marino); color: var(--blanco); }
.btn--principal:hover { background: var(--marino-hondo); border-color: var(--marino-hondo); }

.btn--peligro { color: var(--alto); border-color: var(--alto); background: var(--blanco); }
.btn--peligro:hover { background: var(--alto-tenue); }

.btn--bloque { display: flex; width: 100%; padding: 11px; font-size: 14px; }
.btn--menudo { padding: 5px 10px; font-size: 12px; }

.btn-enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--senal-oscuro); font-family: var(--texto); font-size: 13px;
  text-decoration: underline; text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.tabla-marco { background: var(--blanco); border: 1px solid var(--acero-200); border-radius: var(--radio); overflow-x: auto; box-shadow: var(--sombra); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

thead th {
  text-align: left;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acero-500);
  padding: 11px 14px;
  border-bottom: 1px solid var(--acero-200);
  background: #f6f8f9;
  white-space: nowrap;
}

tbody td { padding: 11px 14px; border-bottom: 1px solid var(--acero-100); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f7fafb; }

td.mono, th.mono { font-family: var(--dato); font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; font-family: var(--dato); font-variant-numeric: tabular-nums; }

tfoot td { padding: 12px 14px; border-top: 2px solid var(--acero-300); font-weight: 600; }

/* --------------------------------------------------------------------------
   Pestañas (Administración)
   -------------------------------------------------------------------------- */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  border-bottom: 1px solid var(--acero-200);
  margin-bottom: 22px;
}

.pestana {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--acero-500);
  cursor: pointer;
  white-space: nowrap;
}

.pestana:hover { color: var(--acero-900); }
.pestana[aria-selected="true"] { color: var(--marino); border-bottom-color: var(--naranja); }

/* Tablas compactas dentro de un panel (tablero): sin doble borde ni relleno. */
.panel > table { margin: -4px 0 0; }
.panel > table td { padding: 9px 0; border-bottom: 1px solid var(--acero-100); }
.panel > table tr:last-child td { border-bottom: 0; }
.panel > table td:first-child { padding-right: 12px; }
.panel > table td:last-child { text-align: right; white-space: nowrap; }

/* Rejilla del tablero: dos columnas anchas en vez de tres apretadas. */
.rejilla--tablero { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* --------------------------------------------------------------------------
   Avisos, vacíos y notificaciones
   -------------------------------------------------------------------------- */
.aviso {
  border: 1px solid var(--acero-200);
  border-left: 3px solid var(--acero-500);
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 12px 15px;
  font-size: 14px;
  margin-bottom: 16px;
}

.aviso--error { border-left-color: var(--alto); background: var(--alto-tenue); border-color: #eccbc9; color: #7d1f1f; }
.aviso--ok { border-left-color: var(--ok); background: var(--ok-tenue); border-color: #c9e2d3; color: #0f5a31; }
.aviso--senal { border-left-color: var(--senal); background: var(--senal-tenue); border-color: #c6dee2; }

.vacio { padding: 40px 20px; text-align: center; color: var(--acero-500); font-size: 14px; }
.vacio strong { display: block; font-family: var(--display); color: var(--acero-700); font-size: 15px; margin-bottom: 4px; }

.avisos-flotantes {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  max-width: 360px;
}

.notificacion {
  background: var(--marino-hondo);
  color: var(--blanco);
  padding: 12px 16px;
  border-radius: var(--radio);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(1, 25, 60, 0.28);
  border-left: 3px solid var(--naranja);
  animation: entrar 0.18s ease-out;
}

.notificacion--error { border-left-color: #ff8b86; }
.notificacion--ok { border-left-color: #63d197; }
.notificacion--info { border-left-color: var(--naranja); }

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Diálogo modal */
dialog {
  border: 1px solid var(--acero-300);
  border-radius: var(--radio);
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(1, 25, 60, 0.32);
}

dialog::backdrop { background: rgba(1, 25, 60, 0.5); }

.dialogo__cuerpo { padding: 22px 24px; }
.dialogo__pie { padding: 14px 24px; background: #f6f8f9; border-top: 1px solid var(--acero-200); display: flex; justify-content: flex-end; gap: 8px; }

/* --------------------------------------------------------------------------
   Adaptación a pantallas chicas
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { min-height: 210px; }
  .marco { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .rail__menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
  .rail__grupo { width: 100%; padding: 8px 8px 2px; }
  .rail__enlace { border-left: 0; border-bottom: 2px solid transparent; }
  .rail__enlace[aria-current="page"] { border-left: 0; border-bottom-color: var(--naranja); }
  .encabezado { padding-top: 22px; }
  .bloque__titulo { flex-direction: column; gap: 2px; }
  .rejilla--3, .rejilla--4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .linea__numero { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}