/* Notarium — hoja de estilos.
   Sin framework a propósito: la interfaz es pequeña y añadir una cadena de
   construcción solo para esto traería más modos de fallo que valor. */

/* --------------------------------------------------------------------- */
/* Paleta                                                                 */
/* --------------------------------------------------------------------- */
/*
 * Violeta de lacre y tipografía con serifa en los títulos. No es decoración:
 * esto custodia los documentos firmados de una sociedad, y el registro visual
 * de un documento legal no es el de una aplicación de tareas. El violeta
 * profundo distingue a Notarium de sus hermanos —Kontexto lleva ámbar,
 * Centinel azul— sin salirse de la familia, y deja libres el verde, el ámbar y
 * el rojo para lo que de verdad tiene que gritar: el estado de un documento.
 *
 * Todo color vive en una variable y se redefine entero en el tema oscuro. Un
 * solo color escrito a pelo en una regla es un color que el tema oscuro no
 * puede corregir, y se nota enseguida: texto negro sobre fondo negro.
 *
 * Los contrastes cumplen AA en los dos temas. Estos documentos los leen
 * personas de la junta, y algunas con presbicia.
 */
:root,
:root[data-tema="claro"] {
  color-scheme: light;

  --tinta: #141a21;
  --tinta-suave: #596673;
  --tinta-tenue: #8893a0;
  --borde: #e2e6eb;
  --borde-fuerte: #cdd4dc;
  --fondo: #f4f6f8;
  --papel: #ffffff;
  --papel-hundido: #f8fafb;

  --acento: #4a3bb0;
  --acento-oscuro: #332879;
  --acento-claro: #6E5BD4;
  --acento-suave: #efecfb;
  --acento-borde: #d8d2f3;
  --sobre-acento: #ffffff;

  --verde: #15663f;
  --verde-fondo: #e7f4ed;
  --verde-borde: #c3e4d2;
  --ambar: #7a4e00;
  --ambar-fondo: #fdf3e0;
  --ambar-borde: #f0dcb4;
  --rojo: #96191c;
  --rojo-fondo: #fdeaea;
  --rojo-borde: #f3c9c9;

  /* El menú lateral es oscuro en los dos temas, igual que en Kontexto. Un
     documento se lee en blanco; el andamiaje que lo rodea se aparta. */
  --menu-fondo: #15131f;
  --menu-fondo-alto: #1d1a2b;
  --menu-tinta: #cfcbe0;
  --menu-tinta-suave: #8a86a0;
  --menu-borde: #2a2639;
  --menu-activo: #2a2350;

  --sombra: 0 1px 2px rgba(20, 26, 33, .05), 0 1px 3px rgba(20, 26, 33, .04);
  --sombra-alta: 0 4px 12px rgba(20, 26, 33, .08);

  --radio: 10px;
  --radio-chico: 6px;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --menu-ancho: 250px;
  --menu-ancho-min: 68px;
}

/*
 * Tema oscuro.
 *
 * No es el claro con los colores invertidos: los fondos son grises cálidos muy
 * oscuros y no negro puro —el negro puro sobre pantalla OLED produce un halo
 * alrededor del texto que cansa—, y los acentos se aclaran, porque un violeta
 * que contrasta bien sobre blanco desaparece sobre negro.
 */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --tinta: #e8eaee;
  --tinta-suave: #9aa3b0;
  --tinta-tenue: #6f7885;
  --borde: #2a2e35;
  --borde-fuerte: #3b414a;
  --fondo: #101216;
  --papel: #181b21;
  --papel-hundido: #14171c;

  --acento: #8f7ef0;
  --acento-oscuro: #6E5BD4;
  --acento-claro: #a99cf5;
  --acento-suave: #221e36;
  --acento-borde: #39325c;
  --sobre-acento: #12101d;

  --verde: #6ddba0;
  --verde-fondo: #12241a;
  --verde-borde: #1f4432;
  --ambar: #e8b663;
  --ambar-fondo: #251d10;
  --ambar-borde: #4a3819;
  --rojo: #f08b8e;
  --rojo-fondo: #2a1416;
  --rojo-borde: #512528;

  --menu-fondo: #0c0b12;
  --menu-fondo-alto: #15131f;
  --menu-tinta: #c9c5db;
  --menu-tinta-suave: #7e7a93;
  --menu-borde: #221f2e;
  --menu-activo: #272050;

  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --sombra-alta: 0 8px 24px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.5;
}

/* ---------------------------------------------------------- cabecera */

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  /* Fija al desplazarse: en un acta larga, perder de vista quién eres y de qué
     empresa son los libros que estás tocando es justo lo que no debe pasar. */
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca { display: flex; align-items: center; gap: 12px; }

.logo {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  /* Degradado sutil: da cuerpo sin convertirlo en un adorno. */
  background: linear-gradient(145deg, var(--acento) 0%, var(--acento-oscuro) 100%);
  color: #fff;
  border-radius: var(--radio-chico);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .5px;
}

.marca strong {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .2px;
}

.marca strong { display: block; font-size: 15px; }
.marca small { color: var(--tinta-suave); font-size: 12px; }

.sesion { display: flex; align-items: center; gap: 10px; }

/* ---------------------------------------------------------- estructura */

main { max-width: 900px; margin: 28px auto; padding: 0 20px; }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px;
}

.tarjeta--centrada { max-width: 480px; margin: 40px auto; }
.tarjeta--vacia { text-align: center; color: var(--tinta-suave); }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 28px 0 10px; color: var(--tinta-suave);
     text-transform: uppercase; letter-spacing: .04em; }

.barra { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.apunte { color: var(--tinta-suave); font-size: 13px; margin: 4px 0 16px; }
.oculto { display: none !important; }

/* ---------------------------------------------------------- formularios */

label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=url], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: var(--papel);
  color: var(--tinta);
}
input::placeholder { color: var(--tinta-tenue); }

textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }

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

.zona-archivo {
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 14px;
  transition: border-color .15s, background .15s;
}

.zona-archivo.encima { border-color: var(--acento); background: var(--acento-suave); }
.zona-archivo.cargado { border-style: solid; border-color: var(--verde); background: var(--verde-fondo); color: var(--verde); }

/* ---------------------------------------------------------- botones */

.boton {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.boton--principal { background: var(--acento); color: var(--sobre-acento); margin-top: 20px; }
.boton--principal:hover:not(:disabled) { background: var(--acento-oscuro); }
.boton--plano { background: var(--papel); color: var(--tinta); border-color: var(--borde); }
.boton--plano:hover:not(:disabled) { background: var(--fondo); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.enlace { background: none; border: none; color: var(--acento); font: inherit;
          text-decoration: underline; cursor: pointer; padding: 0; }

.volver { background: none; border: none; color: var(--tinta-suave);
          font: inherit; font-size: 13px; cursor: pointer; padding: 0 0 12px; }
.volver:hover { color: var(--acento); }

/*
 * Fila de botones.
 *
 * `align-items: center` y no el estiramiento por omisión: el botón principal
 * lleva un `margin-top` para separarse de los campos cuando va solo al final
 * de un formulario, y dentro de una fila ese margen estiraba al de al lado
 * para rellenar el hueco. El resultado era un «Crear» de 40 px junto a un
 * «Cancelar» de 54.
 */
.acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Y aquí el margen sobra: no hay campos encima de los que despegarse, hay
   otro botón al lado. */
.acciones .boton--principal { margin-top: 0; }

/* ---------------------------------------------------------- listas */

.lista { display: flex; flex-direction: column; gap: 10px; }

.fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.fila--clicable { cursor: pointer; }
.fila--clicable:hover { border-color: var(--acento); }
.fila__titulo { font-weight: 600; font-size: 14px; }
.fila__meta { color: var(--tinta-suave); font-size: 12px; margin-top: 2px; }

.firmante { display: flex; justify-content: space-between; align-items: center;
            padding: 12px 14px; border: 1px solid var(--borde); border-radius: 6px; }

/* ---------------------------------------------------------- pastillas */

.pastilla {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pastilla--verde { background: var(--verde-fondo); color: var(--verde); }
.pastilla--ambar { background: var(--ambar-fondo); color: var(--ambar); }
.pastilla--rojo  { background: var(--rojo-fondo);  color: var(--rojo); }
.pastilla--gris  { background: var(--fondo); color: var(--tinta-suave); }

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

.aviso {
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 16px;
  border: 1px solid transparent;
}

.aviso--error { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-borde); }
.aviso--ok    { background: var(--verde-fondo); color: var(--verde); border-color: var(--verde-borde); }
.aviso--nota  { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-borde); }

/* ---------------------------------------------------------- firma */

.bloque-firma { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--borde); }

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; }

/*
 * Hijos directos, no descendientes.
 *
 * Con `.pasos li` el selector alcanzaba también a los <li> de la lista de
 * instalación que va DENTRO de un paso, y les ponía el círculo numerado encima
 * de su propia viñeta: salía «1. ②», «2. ③», «3. ④», y además el contador del
 * paso avanzaba tres veces de más.
 */
.pasos > li {
  counter-increment: paso;
  position: relative;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 10px;
  font-size: 14px;
}

.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 14px; top: 14px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--fondo);
  color: var(--tinta-suave);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.pasos > li.hecho::before { content: '✓'; background: var(--verde-fondo); color: var(--verde); }
.pasos > li.activo { border-color: var(--acento); }

.codigo {
  display: block;
  background: var(--menu-fondo-alto);
  color: #d7d2ee;
  padding: 12px;
  border-radius: 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-x: auto;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------------------------------------------------------- brindis */

/*
 * Aviso flotante.
 *
 * Color propio, no `var(--tinta)`.
 *
 * Usaba la tinta del tema como fondo con el texto en blanco: en tema claro la
 * tinta es casi negra y se leía, pero en oscuro la tinta es casi BLANCA, así
 * que el aviso salía blanco sobre blanco y no se leía nada. El error estaba en
 * tomar por «un color oscuro» lo que en realidad significa «el color del
 * texto», que es justo lo que se invierte al cambiar de tema.
 *
 * Ahora es oscuro en los dos temas —es lo corriente en un aviso flotante— con
 * un borde que lo despega del fondo cuando la página ya es oscura.
 */
.brindis {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: #1d1b29;
  color: #f1eff8;
  border: 1px solid #353147;
  box-shadow: var(--sombra-alta);
  padding: 11px 18px;
  border-radius: var(--radio);
  font-size: 14px;
  line-height: 1.45;
  z-index: 50;
  max-width: 90vw;
}

@media (max-width: 620px) {
  .barra { flex-direction: column; }
  .fila { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------- usuarios */

.fila--usuario {
  /* Tres zonas apiladas: identidad, estado y acciones. En una sola linea no
     caben el nombre, el correo, la fecha del ultimo acceso y tres controles
     sin que algo quede ilegible. */
  display: block;
}

.fila__principal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fila__principal .apunte { margin: 0; }
.fila__principal strong { font-size: 14px; }

.fila--usuario .fila__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 12px;
}
.fila--usuario .fila__meta .apunte { margin: 0; }

.fila__acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fila__acciones .boton { padding: 6px 12px; font-size: 13px; }

.selector-rol { width: auto; min-width: 170px; margin: 0; padding: 6px 10px; font-size: 13px; }

/* Un usuario suspendido se atenua, pero NO se esconde: sigue ahi, y tiene que
   verse para poder reactivarlo. */
.fila--apagada { opacity: 0.62; }
.fila--apagada:hover { opacity: 1; }

[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------- contrasena generada */

.tarjeta--destacada { border-color: var(--ambar); background: var(--ambar-fondo); }

.password-generada {
  display: block;
  /* Monoespaciada y espaciada: esta contrasena se dicta por telefono o se
     teclea a mano, y ahi la diferencia entre caracteres parecidos importa. */
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 20px;
  letter-spacing: 2px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin: 10px 0 14px;
  user-select: all;
  word-break: break-all;
}

@media (max-width: 620px) {
  .fila--usuario .fila__acciones { flex-direction: column; align-items: stretch; }
  .selector-rol { width: 100%; }
}

/* ------------------------------------------------- instalacion del agente */

.pasos-agente {
  margin: 0; padding-left: 20px;
  color: var(--tinta-suave); font-size: 13px; line-height: 1.7;
}
.pasos-agente strong { color: var(--tinta); }

/* ===================================================================== */
/* Gestor documental                                                     */
/* ===================================================================== */

/* ------------------------------------------------------- cifras del panel */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.cifra {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .12s, transform .12s;
}
.cifra:hover { border-color: var(--acento); }
.cifra:active { transform: translateY(1px); }
.cifra strong { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--tinta-suave); font-size: 12px; }

/* La primera cifra es la unica que pide una accion, y se distingue por eso. */
.cifra--accion { border-color: var(--acento-borde); background: var(--acento-suave); }
.cifra--accion strong { color: var(--acento); }

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

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.buscador { flex: 1 1 260px; min-width: 200px; }
.buscador input { margin: 0; width: 100%; }
.filtro { margin: 0; width: auto; min-width: 180px; }
.filtros .boton { padding: 9px 14px; }

/* --------------------------------------------------------- filas de lista */

.fila__izquierda { min-width: 0; }
.fila__derecha { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.fila__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.etiqueta-tipo {
  display: inline-block;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  color: var(--tinta-suave);
}

/* Cuantas firmas de cuantas. Monoespaciado para que la columna no baile. */
.progreso-firmas {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.pastilla--accion { background: var(--acento); color: var(--sobre-acento); }

/* ------------------------------------------------------------ historial */

.historial { list-style: none; margin: 0 0 8px; padding: 0; }

.historial__linea {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde);
}
.historial__linea:last-child { border-bottom: 0; }

.historial__icono {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 12px;
  color: var(--tinta-suave);
}

.historial__huella {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 3px;
  cursor: help;
}

@media (max-width: 620px) {
  .fila__derecha { margin-top: 10px; }
  .filtro, .buscador { width: 100%; }
}

/* ===================================================================== */
/* Pagina publica de verificacion                                        */
/* ===================================================================== */

.publica #app { max-width: 760px; }

/* El veredicto va arriba y en grande: es lo unico que la mayoria leera. */
.veredicto {
  display: flex; flex-direction: column; gap: 6px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.veredicto strong { font-size: 20px; }
.veredicto span { font-size: 14px; line-height: 1.5; }

.veredicto--bien   { background: var(--verde-fondo); border-color: var(--verde); color: var(--verde); }
.veredicto--parcial,
.veredicto--duda   { background: var(--ambar-fondo); border-color: var(--ambar); color: var(--ambar); }
.veredicto--mal    { background: var(--rojo-fondo);  border-color: var(--rojo);  color: var(--rojo); }
.veredicto span    { color: var(--tinta); }

/* Pares etiqueta/valor del documento. */
.datos {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 6px 18px;
  margin: 0 0 8px;
  font-size: 14px;
}
.datos dt { color: var(--tinta-suave); }
.datos dd { margin: 0; }

.pie-verificacion { text-align: center; margin-top: 16px; }

@media (max-width: 520px) {
  .datos { grid-template-columns: 1fr; gap: 2px 0; }
  .datos dd { margin-bottom: 8px; }
}

/* ------------------------------------------------- documentacion de la API */

.documentacion { max-width: 820px; }
.documentacion h2 { margin-top: 32px; font-size: 16px; color: var(--tinta); }
.documentacion h3 { margin-top: 22px; font-size: 14px; color: var(--tinta-suave); }
.documentacion .apunte { font-size: 14px; line-height: 1.6; margin: 8px 0 14px; }
.documentacion code { font-size: 12.5px; background: var(--fondo); padding: 1px 5px; border-radius: 3px; }

.codigo-bloque {
  background: var(--menu-fondo-alto);
  color: #e6e4f0;
  border-radius: var(--radio);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: ui-monospace, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  margin: 10px 0 16px;
  /* Sin esto, una linea larga ensancha la pagina entera en el movil. */
  white-space: pre;
  max-width: 100%;
}
.documentacion .codigo-bloque code { background: none; padding: 0; color: inherit; }

/* ===================================================================== */
/* Acabado visual                                                        */
/* ===================================================================== */
/*
 * Va al final a proposito: estas reglas refinan lo que ya hay en vez de
 * reescribirlo. Rehacer la hoja entera habria arriesgado romper pantallas que
 * funcionan, y lo que falta no es estructura, es acabado.
 */

/* Titulos con serifa. Un libro societario no se lee como un panel de control. */
h1 { font-family: var(--serif); font-size: 25px; letter-spacing: -.2px; }
h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--borde);
  padding-bottom: 7px;
}

.tarjeta {
  box-shadow: var(--sombra);
  border-color: var(--borde);
}

/* Las filas responden al puntero: sin eso no se nota que son pulsables. */
.fila {
  border-radius: var(--radio-chico);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.fila--clicable:hover {
  border-color: var(--acento);
  box-shadow: var(--sombra-alta);
  transform: translateY(-1px);
}

.boton {
  border-radius: var(--radio-chico);
  font-weight: 500;
  transition: background-color .12s, border-color .12s, transform .08s;
}
.boton:active { transform: translateY(1px); }
.boton--principal { box-shadow: var(--sombra); }

.pastilla {
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2px;
  padding: 3px 11px;
}

input, select, textarea { border-radius: var(--radio-chico); }
input:focus, select:focus, textarea:focus {
  /* El foco se ve SIEMPRE, tambien al navegar con el teclado: quien no usa
     raton necesita saber donde esta, y es lo primero que se pierde al
     "limpiar" los estilos por defecto. */
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.cifra { box-shadow: var(--sombra); }
.cifra--accion { background: var(--acento-suave); }
.cifra strong { font-family: var(--serif); }

.logo { box-shadow: var(--sombra); }

/* La hoja de firmas de un acta y esta pantalla comparten intencion: que se lea
   igual de bien impresa. */
@media print {
  .cabecera, .boton, .filtros, .cifras, .volver { display: none !important; }
  .tarjeta { border: 0; box-shadow: none; }
  body { background: var(--papel); }
}

/* ------------------------------------------------- cabecera en pantalla chica */
/*
 * A 375 px la cabecera medía 779 px: «Salir» y el nombre de quien habia entrado
 * quedaban fuera de la pantalla y solo se alcanzaban desplazando a lo ancho.
 * Perder el boton de salir en un movil no es un detalle estetico.
 */
@media (max-width: 620px) {
  .cabecera { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .sesion { flex-wrap: wrap; gap: 8px; width: 100%; }
  .sesion .boton { padding: 7px 11px; font-size: 13px; }
  /* El nombre cede sitio antes que los botones: es informacion, no accion. */
  #estadoSesion {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Nada debe poder ensanchar la pagina a lo ancho. */
  body { overflow-x: hidden; }
  #app { padding-left: 16px; padding-right: 16px; }
}

/* ==================================================================== */
/* Armazón: menú lateral y barra superior                               */
/* ==================================================================== */
/*
 * El menú es oscuro en los dos temas y se contrae a iconos. Por qué contraer y
 * no esconder: en una pantalla de trece pulgadas con un PDF abierto al lado,
 * 250 píxeles de menú son mucho; pero esconderlo del todo obliga a abrirlo
 * para saber dónde estás. Contraído sigue diciéndolo, con el icono marcado.
 *
 * El estado se guarda por navegador, no por cuenta: es una preferencia de ESTA
 * pantalla. La misma persona quiere el menú abierto en el monitor grande del
 * despacho y contraído en el portátil.
 */

.armazon {
  display: grid;
  grid-template-columns: var(--menu-ancho) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}
.armazon.menu-contraido { grid-template-columns: var(--menu-ancho-min) 1fr; }

/*
 * Que la columna del contenido pueda encoger.
 *
 * En CSS grid una celda no baja de `min-width: auto`, que es el ancho de lo que
 * lleva dentro. Sin esto, una tabla ancha o un título largo ensanchaban la
 * columna por encima del `1fr` y empujaban la página: en 375 px se desbordaba
 * veinticinco píxeles y aparecía una barra horizontal en toda la aplicación.
 */
.armazon > * { min-width: 0; }

/* ------------------------------------------------------------ el menú */

.menu {
  background: var(--menu-fondo);
  border-right: 1px solid var(--menu-borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.menu__marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 16px;
  min-height: 74px;
  border-bottom: 1px solid var(--menu-borde);
}
.menu__marca img { width: 34px; height: 34px; flex: none; display: block; }
.menu__nombre { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.menu__nombre strong {
  font-family: var(--serif);
  font-size: 19px;
  color: #fff;
  letter-spacing: .3px;
}
.menu__nombre small {
  font-size: 9.5px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--menu-tinta-suave);
  margin-top: 2px;
}

/* El tirador de contraer, montado sobre el borde del menú. */
.menu__tirador {
  position: absolute;
  top: 28px;
  left: calc(var(--menu-ancho) - 13px);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--menu-borde);
  background: var(--menu-fondo-alto);
  color: var(--menu-tinta-suave);
  cursor: pointer;
  z-index: 30;
  transition: left .18s ease, color .15s, border-color .15s;
}
.menu__tirador:hover { color: #fff; border-color: var(--acento-claro); }
.armazon.menu-contraido .menu__tirador { left: calc(var(--menu-ancho-min) - 13px); }
.menu__tirador svg { width: 13px; height: 13px; transition: transform .18s ease; }
.armazon.menu-contraido .menu__tirador svg { transform: rotate(180deg); }

.menu__cuerpo { flex: 1; overflow-y: auto; padding: 14px 0 8px; }
.menu__cuerpo::-webkit-scrollbar { width: 6px; }
.menu__cuerpo::-webkit-scrollbar-thumb { background: var(--menu-borde); border-radius: 3px; }

.menu__seccion {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--menu-tinta-suave);
  padding: 16px 20px 7px;
  white-space: nowrap;
}

.menu__opcion {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--menu-tinta);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background .13s, color .13s;
}
.menu__opcion:hover { background: var(--menu-fondo-alto); color: #fff; }
.menu__opcion svg { width: 18px; height: 18px; flex: none; stroke-width: 1.7; }

.menu__opcion.activa {
  background: var(--menu-activo);
  border-left-color: var(--acento-claro);
  color: #fff;
  font-weight: 600;
}

/* La cifra a la derecha de una opción: cuántos te esperan, cuántos vencen. */
.menu__cuenta {
  margin-left: auto;
  background: var(--acento-claro);
  color: #16122b;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  text-align: center;
}
.menu__cuenta--alerta { background: #e8767a; color: #2a1012; }

.menu__pie {
  border-top: 1px solid var(--menu-borde);
  padding: 12px 0 10px;
}

.menu__usuario {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 20px 12px;
  white-space: nowrap;
}
.menu__avatar {
  width: 30px; height: 30px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--acento-oscuro);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}
.menu__quien { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.menu__quien strong {
  font-size: 13px; font-weight: 600; color: var(--menu-tinta);
  overflow: hidden; text-overflow: ellipsis;
}
.menu__quien small { font-size: 11px; color: var(--menu-tinta-suave); }

/* Contraído: desaparece todo lo que es texto, quedan los iconos centrados. */
.armazon.menu-contraido .menu__nombre,
.armazon.menu-contraido .menu__quien,
.armazon.menu-contraido .menu__opcion span,
.armazon.menu-contraido .menu__cuenta { display: none; }
.armazon.menu-contraido .menu__marca,
.armazon.menu-contraido .menu__usuario { justify-content: center; padding-left: 0; padding-right: 0; }
.armazon.menu-contraido .menu__opcion { justify-content: center; padding-left: 0; padding-right: 0; }
.armazon.menu-contraido .menu__seccion {
  /* Una línea en lugar del rótulo, para que los grupos sigan separándose. */
  padding: 0; height: 0; overflow: hidden;
  border-top: 1px solid var(--menu-borde); margin: 10px 14px;
}

/* ------------------------------------------------------- barra superior */

.superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  min-height: 60px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}
.superior__titulo { font-size: 15px; font-weight: 600; letter-spacing: .2px; }
.superior__derecha { display: flex; align-items: center; gap: 6px; }

.icono-boton {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.icono-boton:hover { background: var(--papel-hundido); border-color: var(--borde); color: var(--tinta); }
.icono-boton svg { width: 17px; height: 17px; stroke-width: 1.8; }

.contenido { padding: 26px 28px 60px; max-width: 1180px; }

/* ---------------------------------------------------------- escritorio */

.panel-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.panel-cifra {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
}
.panel-cifra:hover { border-color: var(--acento-borde); box-shadow: var(--sombra); }
.panel-cifra__rotulo {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--tinta-suave);
}
.panel-cifra__rotulo svg { width: 14px; height: 14px; stroke-width: 1.8; }
.panel-cifra strong { display: block; font-size: 30px; line-height: 1.1; margin: 8px 0 2px; }
.panel-cifra .pie { font-size: 12px; color: var(--tinta-suave); }
.panel-cifra--accion { border-color: var(--acento-borde); background: var(--acento-suave); }
.panel-cifra--alerta strong { color: var(--rojo); }

.rejilla-paneles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  align-items: start;
}

/* ------------------------------------------------------------ etiquetas */

.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--acento-suave);
  color: var(--acento);
  border: 1px solid var(--acento-borde);
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 11.5px;
  font-weight: 500;
}
.etiqueta button {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0; opacity: .6;
}
.etiqueta button:hover { opacity: 1; }
.etiqueta--filtro { cursor: pointer; font: inherit; font-size: 11.5px; }
.etiqueta--filtro.puesta { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }

/* Vencimientos: el color dice cuánto queda sin tener que leer la fecha. */
.vigencia { font-size: 12px; font-weight: 600; }
.vigencia--vencido { color: var(--rojo); }
.vigencia--pronto  { color: var(--ambar); }
.vigencia--lejos   { color: var(--tinta-suave); font-weight: 500; }

.campos-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 16px;
}

/* --------------------------------------------------------------- móvil */

@media (max-width: 860px) {
  .armazon { grid-template-columns: var(--menu-ancho-min) 1fr; }
  .armazon .menu__nombre,
  .armazon .menu__quien,
  .armazon .menu__opcion span,
  .armazon .menu__cuenta { display: none; }
  .armazon .menu__seccion {
    padding: 0; height: 0; overflow: hidden;
    border-top: 1px solid var(--menu-borde); margin: 10px 14px;
  }
  .armazon .menu__marca,
  .armazon .menu__usuario,
  .armazon .menu__opcion { justify-content: center; padding-left: 0; padding-right: 0; }
  .menu__tirador { display: none; }
  .contenido { padding: 18px 14px 50px; }
  .superior { padding: 0 14px; }
}

/* ==================================================================== */
/* Pantalla de acceso                                                    */
/* ==================================================================== */
/*
 * Oscura en los dos temas, con la marca encima de la tarjeta. Quien está aquí
 * todavía no es nadie para la aplicación: no hay menú, no hay empresa, no hay
 * nada que gestionar. La pantalla lo dice sola.
 */

.acceso-pantalla {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px 18px;
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(110, 91, 212, .16), transparent 70%),
    #0d0c13;
  color: #e8e6f2;
}

.acceso-marca { display: flex; align-items: center; gap: 14px; }
.acceso-marca img { display: block; }
.acceso-marca strong {
  display: block;
  font-family: var(--serif);
  font-size: 27px;
  color: #fff;
  letter-spacing: .4px;
  line-height: 1.1;
}
.acceso-marca small {
  display: block;
  font-size: 10px;
  letter-spacing: 2.2px;
  color: #8a86a0;
  margin-top: 3px;
}

/* La tarjeta de acceso no sigue el tema: va siempre sobre el fondo oscuro. */
.acceso-pantalla .tarjeta {
  background: #16151d;
  border: 1px solid #262433;
  color: #e8e6f2;
  width: min(420px, 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.acceso-pantalla h1 { color: #fff; }
.acceso-pantalla .apunte { color: #938fa8; }
.acceso-pantalla label { color: #c3bfd6; }
.acceso-pantalla input {
  background: #0f0e15;
  border-color: #2e2b3d;
  color: #e8e6f2;
}
.acceso-pantalla input::placeholder { color: #605c74; }
.acceso-pantalla input:focus {
  border-color: var(--acento-claro);
  box-shadow: 0 0 0 3px rgba(110, 91, 212, .22);
}
.acceso-pantalla .boton--principal { background: var(--acento-claro); color: #15122a; }
.acceso-pantalla .boton--principal:hover { background: #8071e0; }

.acceso-pie { font-size: 12px; color: #6c6882; }

.acceso-pantalla .boton--principal { width: 100%; justify-content: center; }

/* ==================================================================== */
/* Modales de mantenimiento                                              */
/* ==================================================================== */
/*
 * Las altas —usuario, tipo de documento, clave de API— y la edición de la
 * ficha se abren encima, no desplegándose dentro de la página.
 *
 * Por qué cambió: desplegadas empujaban la lista hacia abajo, así que al
 * pulsar «Añadir» lo que estabas mirando se movía de sitio y a veces el
 * formulario nacía fuera de la pantalla. Encima, el formulario aparece donde
 * miras y la lista de detrás sigue donde estaba para cuando lo cierres.
 *
 * Es el <dialog> nativo y no un div con posición fija: trae gratis tres cosas
 * que a mano se olvidan y se notan —Escape cierra, el foco queda atrapado
 * dentro mientras está abierto, y el resto de la página queda inerte, así que
 * no se puede pulsar un botón de debajo sin querer.
 */

.modal {
  /* `fixed` y los cuatro márgenes a 0 en vez de `margin: auto`: así el cuadro
     queda centrado también cuando la página está desplazada. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;

  padding: 24px 26px 26px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-alta);
}

.modal::backdrop {
  background: rgba(10, 9, 16, .55);
  /* Desenfoque suave detrás: separa el formulario de la lista sin esconderla,
     que es lo que recuerda dónde estabas. */
  backdrop-filter: blur(2px);
}

/* El primer título del modal hace de encabezado del cuadro. */
.modal h2 { margin-top: 0; }

/*
 * Los botones del modal son un pie de diálogo, no un elemento más del
 * formulario.
 *
 * Con solo un margen quedaban pegados al último campo —a veces casi montados
 * encima— porque los campos no llevan margen inferior: el aire del formulario
 * lo pone la etiqueta del siguiente, y debajo del último no hay siguiente.
 * Separarlos con una línea deja claro dónde acaba lo que se rellena y empieza
 * lo que se decide, y funciona igual tanto si el último elemento es un campo
 * como si es una nota o una casilla.
 */
.modal .acciones {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--borde);
}

/* Los modales de acceso van sobre fondo oscuro propio, así que su línea
   también. */
.modal--acceso .acciones { border-top-color: #262433; }

/* Cuando el botón principal va solo, sin fila de acciones, necesita el mismo
   respiro: es el caso del modal de empresa. */
.modal > form > .boton--principal:last-child { margin-top: 22px; }

/* La X de cerrar, arriba a la derecha. Además del Escape, porque no todo el
   mundo sabe que Escape cierra. */
.modal__cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--tinta-suave);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.modal__cerrar:hover {
  background: var(--papel-hundido);
  border-color: var(--borde);
  color: var(--tinta);
}

/* Un modal que enseña un secreto de un solo uso se distingue del resto: lo que
   hay dentro no se puede volver a consultar, y cerrarlo sin copiarlo obliga a
   generar otro. */
.modal--destacada { border-color: var(--acento-borde); border-top: 3px solid var(--acento); }

@media (max-width: 560px) {
  .modal { width: calc(100vw - 20px); padding: 20px 16px 22px; }
}

/* ==================================================================== */
/* Portada pública                                                       */
/* ==================================================================== */
/*
 * Oscura en los dos temas, como la pantalla de acceso: quien llega aquí no ha
 * entrado todavía, no hay empresa ni preferencia que respetar, y la portada es
 * lo mismo para todo el mundo.
 */

.landing {
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(110, 91, 212, .20), transparent 68%),
    #0d0c13;
  color: #e8e6f2;
}

.landing__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px;
}

.landing__marca { display: flex; align-items: center; gap: 11px; }
.landing__marca img { display: block; }
.landing__marca strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  color: #fff;
  line-height: 1.1;
}
.landing__marca small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.7px;
  color: #8a86a0;
  margin-top: 2px;
}

.landing .boton--principal {
  background: var(--acento-claro);
  color: #15122a;
}

/*
 * El margen se quita SOLO en la cabecera, no en toda la portada.
 *
 * Escrito como `.landing .boton--principal` alcanzaba también al botón grande
 * del centro, y por especificidad ganaba a su propia regla: el botón quedaba
 * pegado al párrafo, sin un pixel de separación. Acotarlo a la barra es lo que
 * se quería decir.
 */
.landing__barra .boton--principal { margin-top: 0; }
.landing .boton--principal:hover { background: #8071e0; }

/* ----------------------------------------------------------- portada */

.landing__portada {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px 56px;
  text-align: center;
}

.landing__pastilla {
  display: inline-block;
  border: 1px solid #312b4d;
  background: rgba(110, 91, 212, .12);
  color: #b7adf0;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: .3px;
}

.landing__portada h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.12;
  color: #fff;
  margin: 22px 0 0;
}
.landing__portada h1 em { color: var(--acento-claro); font-style: normal; }

.landing__portada p {
  font-size: 17px;
  line-height: 1.6;
  color: #9d99b4;
  max-width: 600px;
  margin: 18px auto 0;
}

.landing__acceder { margin-top: 34px; padding: 13px 28px; font-size: 15px; }

/* ------------------------------------------------------------ cifras */

.landing__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 24px 64px;
  border-top: 1px solid #1d1a2b;
  border-bottom: 1px solid #1d1a2b;
  text-align: center;
}
.landing__cifras strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  color: #fff;
}
.landing__cifras span { display: block; font-size: 12.5px; color: #817d99; margin-top: 5px; }

/* ------------------------------------------------------------- qué hace */

.landing__cosas { max-width: 1000px; margin: 0 auto; padding: 64px 24px 24px; }

.landing__rotulo {
  display: block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--acento-claro);
  text-align: center;
}
.landing__cosas h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 34px);
  color: #fff;
  text-align: center;
  margin: 10px 0 36px;
}

.landing__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.landing__rejilla article {
  background: #16151d;
  border: 1px solid #262433;
  border-radius: var(--radio);
  padding: 22px;
}
.landing__rejilla h3 {
  font-size: 15px;
  color: #fff;
  margin: 0 0 8px;
}
.landing__rejilla p { font-size: 14px; line-height: 1.6; color: #938fa8; margin: 0; }

.landing__pie {
  text-align: center;
  font-size: 12px;
  color: #6c6882;
  padding: 56px 24px 40px;
}

/* ==================================================================== */
/* Modal de empresa                                                      */
/* ==================================================================== */
/*
 * No sigue el tema claro/oscuro: se abre sobre la portada, que es oscura
 * siempre. Un cuadro blanco encima de ella sería un fogonazo.
 */

.modal--acceso {
  background: #16151d;
  border-color: #262433;
  color: #e8e6f2;
  width: min(420px, calc(100vw - 32px));
}
.modal--acceso::backdrop { background: rgba(8, 7, 12, .72); }
/*
 * El título del modal de acceso es un título de verdad, no un rótulo de
 * sección. Los h2 de la aplicación van en versalitas pequeñas porque separan
 * bloques dentro de una pantalla; aquí el h2 ES la pantalla, y «ENTRA A TU
 * EMPRESA» en versalitas se lee como una etiqueta, no como una invitación.
 */
.modal--acceso h2 {
  font-family: var(--serif);
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  margin: 16px 0 0;
}
.modal--acceso .apunte { color: #938fa8; }
.modal--acceso label { color: #c3bfd6; }
.modal--acceso input {
  background: #0f0e15;
  border-color: #2e2b3d;
  color: #e8e6f2;
  margin-top: 16px;
}
.modal--acceso input::placeholder { color: #605c74; }
.modal--acceso input:focus {
  border-color: var(--acento-claro);
  box-shadow: 0 0 0 3px rgba(110, 91, 212, .22);
}
.modal--acceso .boton--principal {
  background: var(--acento-claro);
  color: #15122a;
  width: 100%;
  margin-top: 16px;
}
.modal--acceso .boton--principal:hover { background: #8071e0; }
.modal--acceso .modal__cerrar { color: #7e7a93; }
.modal--acceso .modal__cerrar:hover { background: #1f1d2a; border-color: #312e42; color: #fff; }

.modal__marca { display: flex; align-items: center; gap: 9px; }
.modal__marca strong { font-family: var(--serif); font-size: 17px; color: #fff; }

/* La empresa elegida, encima del formulario de acceso. El punto verde dice que
   está resuelta: no es un campo que escribiste, es una empresa que existe. */
.empresa-elegida {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #0f0e15;
  border: 1px solid #262433;
  border-radius: var(--radio-chico);
  padding: 10px 13px;
  margin-bottom: 20px;
}
.empresa-elegida strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #e8e6f2;
}
.empresa-elegida strong::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex: none;
}
.empresa-elegida small { display: block; font-size: 12px; color: #817d99; margin-left: 15px; }
.empresa-elegida .enlace { color: #817d99; text-decoration: none; font-size: 13px; }
.empresa-elegida .enlace:hover { color: var(--acento-claro); text-decoration: underline; }

/* Visible para un lector de pantalla, invisible en la pantalla. Para etiquetas
   que el diseño no enseña pero que alguien con lector necesita oír. */
.oculto-accesible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Interruptor de sí/no en los formularios de configuración. */
.interruptor { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; font-size: 14px; font-weight: 500; }
.interruptor input { width: auto; margin: 0; }