/* =====================================================================
   KRYPTOS · Hoja de estilos
   Identidad Agarimo Comunicación: Rubik, gris grafito, blanco y negro.
   Sin más colores. Las variantes son mezclas de grafito con blanco.
   ===================================================================== */

/* Rubik autoalojado (no se carga desde Google: evita enviar la IP del
   equipo a un tercero cada vez que alguien abre la aplicación). */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/rubik-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --grafito:     #3b4147;
  --tinta:       #000000;
  --papel:       #ffffff;

  --grafito-90:  #4c5259;
  --grafito-60:  #878c91;
  --grafito-35:  #b6b9bd;
  --grafito-18:  #d8dadd;
  --grafito-08:  #eeeff0;
  --grafito-04:  #f7f7f8;

  --fuente: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --paso-1: 0.5rem;
  --paso-2: 1rem;
  --paso-3: 1.5rem;
  --paso-4: 2.5rem;
  --paso-5: 4rem;

  --radio: 3px;
  --linea: 1px solid var(--grafito-18);

  /* Lo que ocupa de alto un rótulo de campo: su propia línea de texto más
     el hueco que `.campo` deja hasta el control. Sirve para bajar hasta la
     línea de los campos lo que no lleva rótulo —una casilla, un botón— en
     los formularios de una sola fila. Si cambia el tamaño de
     `.campo__etiqueta` o el `gap` de `.campo`, se cambia aquí. */
  --alto-etiqueta: calc(0.75rem * 1.55 + 6px);

  /* Y lo que mide de alto un control: su línea de texto, el relleno de
     arriba y abajo, y los dos bordes. Sirve para que una casilla —que solo
     ocupa una línea— se centre contra la línea de los campos en vez de
     quedarse flotando por encima. */
  --alto-control: calc(1.55em + 22px);
}

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

/* Cualquier regla de autor con `display` gana a la del navegador para
   [hidden]. Sin esto, esconder algo desde JavaScript no esconde nada. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--fuente);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/* --- Tipografía ---------------------------------------------------- */

.titulo {
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.015em;
  margin: 0 0 var(--paso-2);
}

.texto-guia {
  color: var(--grafito);
  max-width: 60ch;
  margin: 0 0 var(--paso-3);
}

/* --- Barra superior ------------------------------------------------- */

.barra {
  /* Rejilla, no flex: cada zona tiene su carril reservado. Con flex, el
     reparto automático hacía que la navegación colapsara o desplazara al
     bloque de sesión según cuántos enlaces tuviera el rol. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'marca nav sesion';
  align-items: center;
  column-gap: var(--paso-3);
  padding: 0 var(--paso-3);
  min-height: 58px;
  overflow: visible;
  border-bottom: var(--linea);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marca {
  grid-area: marca;
  display: flex;
  align-items: center;
  gap: var(--paso-2);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}

/* El interletrado de 0.24em deja un hueco suelto detrás de la última letra.
   Con el logotipo al lado se nota, así que se le quita solo a ese margen. */
.marca__texto { margin-right: -0.24em; }

/* --- Logotipo de Agarimo -------------------------------------------- */

/* Regla única: se fija la altura y el ancho se calcula solo. La proporción
   sale intacta con cualquier imagen que se suba, sin recortes ni deformación.
   Los atributos width y height del <img> los escribe Marca::etiqueta() a
   partir del fichero real, así que el hueco ya está reservado antes de que
   la imagen cargue y la cabecera no pega el salto de siempre. */
.marca-agarimo {
  display: block;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.marca-agarimo--barra { height: 24px; }

.marca-agarimo--acceso {
  height: 40px;
  margin: 0 auto var(--paso-3);
}

.marca-agarimo--membrete { height: 30px; }

.navegacion {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: var(--paso-3);
  /* Su carril es minmax(0, 1fr): si no caben todos los enlaces, se desplaza
     dentro de su propio espacio sin robárselo a nadie. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 6px 0;
}

.navegacion a:not(.boton) {
  flex: 0 0 auto;
  color: var(--grafito);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.navegacion a:not(.boton):hover,
.navegacion a[aria-current='page'] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

.sesion {
  grid-area: sesion;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--paso-2);
  font-size: 0.85rem;
  color: var(--grafito);
  white-space: nowrap;
}

.sesion form { margin: 0; }

.lienzo {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--paso-4) var(--paso-3) var(--paso-5);
}

.columna-estrecha { max-width: 420px; }

/* --- Formularios ---------------------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--paso-2);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo__etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.campo__ayuda {
  font-size: 0.78rem;
  color: var(--grafito-60);
}

/* La lista es de todos los tipos que se usan en la aplicación, y hay que
   mantenerla al día: un tipo que falte aquí no hereda nada y el navegador
   lo pinta a su manera —esquinas, alto y aspa propios—, descolgado del
   resto del formulario. Hay una prueba que compara esta lista con los
   `type=` de las plantillas. */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='time'],
input[type='number'],
input[type='search'],
input[type='url'],
input[type='tel'],
select,
textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 10px 12px;
  width: 100%;
}

/* El buscador es un campo más: sin esto, Safari y Chrome le ponen sus
   esquinas redondeadas y su aspa, y se nota al lado de los demás. */
input[type='search'] {
  -webkit-appearance: none;
  appearance: none;
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button {
  -webkit-appearance: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

/* --- Botones -------------------------------------------------------- */

.boton {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--grafito-35);
  border-radius: var(--radio);
  padding: 10px 18px;
  cursor: pointer;
}

.boton:hover { border-color: var(--tinta); }

.boton--solido {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.boton--solido:hover { background: var(--grafito); border-color: var(--grafito); }

.enlace-boton {
  font: inherit;
  font-size: 0.85rem;
  color: var(--grafito);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enlace-boton:hover { color: var(--tinta); }

/* --- Avisos --------------------------------------------------------- */

.aviso {
  border: var(--linea);
  border-left: 3px solid var(--grafito);
  border-radius: var(--radio);
  background: var(--grafito-04);
  padding: 10px 14px;
  margin: 0 0 var(--paso-2);
  font-size: 0.9rem;
}

.aviso--error { border-left-color: var(--tinta); font-weight: 500; }

/* --- Pantalla de acceso --------------------------------------------- */

.acceso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--paso-3);
  background: var(--grafito-04);
}

.tarjeta-acceso {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-4) var(--paso-3) var(--paso-3);
  overflow: hidden;
}

/* Firma de la casa: la línea superior avanza con el minuto en curso.
   No es decoración, es la hora real pasando delante de ti. */
.segundero {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grafito-08);
}

.segundero span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--tinta);
  transform-origin: left center;
  transform: scaleX(0);
  animation: avance 60s linear infinite;
}

@keyframes avance {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .segundero span { animation: none; transform: scaleX(1); opacity: 0.25; }
}

.logotipo {
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.logotipo__pie {
  font-size: 0.78rem;
  color: var(--grafito-60);
  margin: 0 0 var(--paso-3);
}

/* --- Tablas de datos ------------------------------------------------ */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla th {
  text-align: left;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-60);
  border-bottom: 1px solid var(--grafito-35);
  padding: 8px 10px;
}

.tabla td {
  border-bottom: var(--linea);
  padding: 10px;
  vertical-align: top;
}

.tabla tbody tr:hover { background: var(--grafito-04); }

/* Los tiempos y los importes se leen en columna: cifras tabulares. */
.cifra {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .barra {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'marca sesion'
      'nav   nav';
    padding-top: 10px;
  }

  .navegacion { border-top: 1px solid var(--grafito-08); }
}

@media (max-width: 640px) {
  .barra { gap: 0 var(--paso-2); padding: 0 var(--paso-2); }
  .sesion__nombre { display: none; }
  .lienzo { padding: var(--paso-3) var(--paso-2) var(--paso-4); }
  /* En el móvil la cabecera va justa de ancho: el logotipo cede unos
     píxeles antes de que los enlaces empiecen a desplazarse. */
  .marca { gap: var(--paso-1); }
  .marca-agarimo--barra { height: 19px; }
}

/* =====================================================================
   Bloque 2 · Cronómetro y parte del día
   ===================================================================== */

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sutil {
  display: block;
  font-size: 0.78rem;
  color: var(--grafito-60);
}

/* --- Cronómetro ----------------------------------------------------- */

.cronometro {
  position: relative;
  /* Por encima de lo que viene después: el desplegable del buscador se sale
     de la caja y tiene que poder taparlo. Sin overflow, que lo recortaría. */
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paso-3);
  border: 1px solid var(--grafito-35);
  border-radius: var(--radio);
  padding: var(--paso-3);
  margin-bottom: var(--paso-4);
}

.cronometro[data-activo='1'] {
  border-color: var(--tinta);
  background: var(--grafito-04);
}

/* Marca de actividad: late solo cuando hay algo contando. */
.cronometro__marca {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grafito-18);
  border-radius: var(--radio) 0 0 var(--radio);
}

.cronometro[data-activo='1'] .cronometro__marca {
  background: var(--tinta);
  animation: latido 2s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.cronometro__lectura {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
  padding-left: var(--paso-1);
}

.cronometro__cifra {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cronometro[data-activo='0'] .cronometro__cifra { color: var(--grafito-35); }

.cronometro__destino {
  font-size: 0.85rem;
  color: var(--grafito);
}

.cronometro__controles {
  display: flex;
  align-items: flex-end;
  gap: var(--paso-2);
  flex-wrap: wrap;
}

.cronometro__controles select { min-width: 260px; }

/* --- Tira de la semana ---------------------------------------------- */

.semana {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--grafito-18);
  border: 1px solid var(--grafito-18);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--paso-4);
}

.semana__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  background: var(--papel);
  text-decoration: none;
  color: var(--grafito);
}

.semana__dia:hover { background: var(--grafito-04); }

.semana__dia--activo {
  background: var(--tinta);
  color: var(--papel);
}

.semana__dia--activo:hover { background: var(--tinta); }

.semana__dia--futuro { opacity: 0.4; pointer-events: none; }

.semana__nombre {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.semana__numero { font-size: 1.05rem; font-weight: 300; }

.semana__horas { font-size: 0.8rem; font-weight: 500; }

/* --- Cabecera del día ------------------------------------------------ */

.cabecera-dia {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--paso-2);
  margin-bottom: var(--paso-2);
}

.cabecera-dia .titulo { margin-bottom: 0; }

.etiqueta-hoy {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--grafito-35);
  border-radius: 999px;
  padding: 2px 10px;
  vertical-align: middle;
  margin-left: var(--paso-1);
  color: var(--grafito);
}

.navegacion-dia { display: flex; gap: var(--paso-1); }

.navegacion-dia .boton { padding: 6px 12px; font-size: 0.85rem; font-weight: 400; }

/* --- Tabla del parte -------------------------------------------------- */

.tabla tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--tinta);
  padding-top: 12px;
  font-weight: 500;
}

.tabla .total { font-size: 1.05rem; }

.acciones {
  display: flex;
  gap: var(--paso-2);
  justify-content: flex-end;
  font-size: 0.85rem;
}

/* `:not(.boton)` no es cosmético: un selector de dos piezas —clase más
   elemento— gana a `.boton--solido`, así que sin esto un enlace pintado
   como botón sale con letra gris subrayada sobre fondo negro. */
.acciones a:not(.boton) { color: var(--grafito); text-decoration: underline; text-underline-offset: 3px; }
.acciones a:not(.boton):hover { color: var(--tinta); }
.acciones form { margin: 0; }

/* --- Alta manual ------------------------------------------------------ */

.alta-manual {
  margin-top: var(--paso-4);
  border-top: var(--linea);
  padding-top: var(--paso-3);
}

.subtitulo {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafito-60);
  margin: 0 0 var(--paso-2);
}

.formulario--fila {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--paso-2);
}

.formulario--fila .campo { flex: 1 1 150px; }
.formulario--fila .campo--ancho { flex: 2 1 240px; }
.formulario--fila .campo--corto { flex: 0 1 120px; }
.formulario--fila .boton { flex: 0 0 auto; }

.campo--enlinea { flex-direction: column; }

.columna-media { max-width: 560px; }

.botonera { display: flex; gap: var(--paso-2); align-items: center; }

.notificaciones { margin-bottom: var(--paso-3); }

@media (max-width: 640px) {
  .cronometro { flex-direction: column; align-items: stretch; }
  .cronometro__controles select { min-width: 0; width: 100%; }
  .semana__horas { font-size: 0.72rem; }
  .acciones { justify-content: flex-start; }
}

/* --- Ajustes --------------------------------------------------------- */

.campo--casilla {
  flex-direction: row;
  align-items: center;
  gap: var(--paso-1);
}

.campo--casilla input { width: auto; }

.bloque-sync {
  margin-top: var(--paso-4);
  border-top: var(--linea);
  padding-top: var(--paso-3);
  max-width: 720px;
}

.bloque-sync .botonera { margin-bottom: var(--paso-3); }
.bloque-sync form { margin: 0; }

.formulario .subtitulo { margin-top: var(--paso-3); }
.formulario .subtitulo:first-of-type { margin-top: 0; }

/* --- Equipo ---------------------------------------------------------- */

.fila-inactiva { opacity: 0.5; }

.marca-rol {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--grafito-35);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  color: var(--grafito);
  vertical-align: middle;
}

.grupo {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin: 0;
}

.grupo legend { padding: 0 6px; }
.grupo .campo--casilla { margin-top: 6px; }

.cabecera-dia .boton--solido { font-size: 0.9rem; }

/* =====================================================================
   Bloque 5 · Informes

   Aquí vivía también el buscador con autocompletado que Kryptos heredó de
   Cronos y nunca ha usado: ninguna vista tiene .buscador__lista ni
   .buscador__opcion. Se ha quitado porque su `.buscador` pisaba el de la
   barra de búsqueda de verdad, que se define más abajo.
   ===================================================================== */

/* Barra de filtros: una fila, no una columna. El `align-items` de aquí
   abajo llevaba desde el principio sin el `display: flex` que le da
   sentido, así que los cuatro filtros se apilaban a lo ancho de la
   pantalla y empujaban el listado fuera de la vista. */
.filtros {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-2);
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin-bottom: var(--paso-3);
  align-items: flex-start;
}

.filtros .campo { flex: 1 1 11rem; }

/* El botón no tiene etiqueta encima: se le da de margen lo que ocupa una,
   y así aterriza en la misma línea que los campos. */
.filtros .boton { margin-top: var(--alto-etiqueta); }

.filtros .botonera { align-self: flex-end; padding-bottom: 1px; }

.resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paso-4);
  border-top: 2px solid var(--tinta);
  border-bottom: var(--linea);
  padding: var(--paso-2) 0;
  margin-bottom: var(--paso-3);
}

.resumen__dato { display: flex; flex-direction: column; }

.resumen__cifra {
  font-size: 1.6rem;
  font-weight: 300;
  text-align: left;
  line-height: 1.2;
}

.resumen__etiqueta {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.resumen .boton { margin-left: auto; }

@media (max-width: 640px) {
  .resumen { gap: var(--paso-3); }
  .resumen .boton { margin-left: 0; width: 100%; text-align: center; }
  .cronometro .buscador { min-width: 0; flex: 1 1 100%; }
}

/* --- Bloqueo por IP --------------------------------------------------- */

.bloqueo-ip {
  border: 1px solid var(--tinta);
  border-left-width: 3px;
  border-radius: var(--radio);
  padding: var(--paso-2) var(--paso-2) var(--paso-2);
  margin: 0 0 var(--paso-3);
  font-size: 0.88rem;
}

.bloqueo-ip p { margin: 0 0 var(--paso-1); }
.bloqueo-ip p:last-child { margin-bottom: 0; }

.bloqueo-ip__titulo { font-weight: 500; }

.bloqueo-ip__etiqueta {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-60);
  margin-top: var(--paso-2) !important;
}

.bloqueo-ip__ip {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  user-select: all;
}

.ip-actual {
  font-size: 0.85rem;
  color: var(--grafito);
  background: var(--grafito-04);
  border: var(--linea);
  border-radius: var(--radio);
  padding: 8px 12px;
  margin: 0 0 var(--paso-1);
}

.ip-actual strong { font-variant-numeric: tabular-nums; user-select: all; }

textarea {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}

.tabla--compacta td, .tabla--compacta th { padding: 6px 10px; font-size: 0.85rem; }
.tabla--compacta .cifra { text-align: left; }

/* =====================================================================
   Panel de control
   ===================================================================== */

.alertas { margin-bottom: var(--paso-3); }
.alertas .aviso a { color: inherit; margin-left: var(--paso-1); }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--grafito-18);
  border: 1px solid var(--grafito-18);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--paso-4);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--papel);
  padding: var(--paso-2) var(--paso-2) 14px;
}

.tarjeta--marcada { background: var(--tinta); color: var(--papel); }

.tarjeta__etiqueta {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.tarjeta--marcada .tarjeta__etiqueta,
.tarjeta--marcada .tarjeta__pie { color: var(--grafito-35); }

.tarjeta__cifra {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.15;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.tarjeta__de { font-size: 1rem; color: var(--grafito-35); }

.tarjeta__pie { font-size: 0.78rem; color: var(--grafito-60); }

/* --- Tabla del equipo ------------------------------------------------- */

.tabla--equipo tbody tr.fila-activa { background: var(--grafito-04); }

.punto-activo {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tinta);
  margin-right: 7px;
  vertical-align: middle;
  animation: latido 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .punto-activo { animation: none; }
}

.reloj-vivo {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.reloj-vivo--alerta {
  border-bottom: 2px solid var(--tinta);
  padding-bottom: 1px;
}

/* --- Riesgo y reparto -------------------------------------------------- */

.porcentaje {
  display: inline-block;
  min-width: 54px;
  border: 1px solid var(--grafito-35);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.porcentaje--pasado {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
  font-weight: 500;
}

/* Barra de reparto de la tabla de clientes. Nombre propio a propósito:
   antes se llamaba .barra y pisaba los estilos de la cabecera. */
.reparto {
  display: block;
  height: 3px;
  background: var(--grafito-08);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.reparto__relleno {
  display: block;
  height: 100%;
  width: 2%;
  background: var(--grafito);
}

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--paso-4);
  margin-top: var(--paso-4);
}

.dos-columnas .subtitulo { margin-top: 0; }

@media (max-width: 640px) {
  .tarjeta__cifra { font-size: 1.4rem; }
  .tabla--equipo th:nth-child(5),
  .tabla--equipo td:nth-child(5) { display: none; }
}

/* =====================================================================
   Catálogo de proyectos y tareas
   ===================================================================== */

.pestanas {
  display: flex;
  /* Con siete pestañas —las de Ajustes— no caben en una línea en un portátil
     pequeño. Que bajen antes que aparezca una barra de desplazamiento
     horizontal en toda la pantalla. */
  flex-wrap: wrap;
  gap: var(--paso-3);
  row-gap: var(--paso-1);
  border-bottom: 1px solid var(--grafito-18);
  margin-bottom: var(--paso-3);
}

.pestanas a:not(.boton) {
  color: var(--grafito-60);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0 0 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pestanas a:not(.boton):hover { color: var(--tinta); }

/* `.pestanas a` —clase más elemento— gana en especificidad a
   `.pestanas__activa`, que es una clase sola: la pestaña activa se pintaba
   exactamente igual que las demás, porque ni el color ni el subrayado
   llegaban a aplicarse nunca. Llevaba así desde que existen las pestañas de
   Alertas; con siete pestañas en Ajustes se nota mucho más. Bastan estas dos
   palabras de más en el selector. */
.pestanas a.pestanas__activa {
  color: var(--tinta);
  font-weight: 500;
  border-bottom-color: var(--tinta);
}

.columna-marca { width: 34px; }
.columna-marca input { width: auto; margin: 0; }

.tabla--catalogo td { vertical-align: middle; }
.tabla--catalogo a:not(.boton) { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

.etiqueta-tarifa {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--grafito-35);
  border-radius: 999px;
  padding: 1px 10px;
  color: var(--grafito);
  white-space: nowrap;
}

/* El distribuidor va en negativo: es la excepción y tiene que cantar. */
.etiqueta-tarifa--distribuidor {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
  font-weight: 500;
}

.lote {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--paso-2);
  background: var(--papel);
  border: 1px solid var(--grafito-35);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin-top: var(--paso-2);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

.lote__cuenta {
  font-size: 0.85rem;
  color: var(--grafito);
  margin-right: auto;
  align-self: center;
}

.lote .campo { margin: 0; }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--paso-2);
  margin-top: var(--paso-3);
}

@media (max-width: 640px) {
  .tabla--catalogo th:nth-child(3),
  .tabla--catalogo td:nth-child(3),
  .tabla--catalogo th:nth-child(5),
  .tabla--catalogo td:nth-child(5) { display: none; }

  .lote__cuenta { flex: 1 0 100%; margin-bottom: var(--paso-1); }
}

/* =====================================================================
   Margen y auditoría
   ===================================================================== */

.cifra--negativa { font-weight: 500; }

.cifra--negativa::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta);
  margin-right: 6px;
  vertical-align: middle;
}

.resumen__dato--destacado .resumen__cifra { font-weight: 400; }

.resumen__dato--destacado {
  border-left: 2px solid var(--tinta);
  padding-left: var(--paso-2);
}

.tabla--auditoria td { vertical-align: top; font-size: 0.85rem; }

.cambio {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 var(--paso-2) 4px 0;
}

.cambio__campo {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

.cambio__antes {
  text-decoration: line-through;
  color: var(--grafito-60);
}

.cambio__flecha { color: var(--grafito-35); }

.cambio__despues { font-weight: 500; }


/* =====================================================================
   KRYPTOS · estilos propios de la bóveda
   Mismo sistema: Rubik, grafito, blanco y negro. Ningún color nuevo salvo
   los dos acentos mínimos de estado (aviso y peligro), en gris.
   ===================================================================== */

.sr-solo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tenue { color: var(--grafito-60); }

/* --- Pantallas de acceso -------------------------------------------- */

.tarjeta-acceso--ancha { max-width: 30rem; }

.candado {
  width: 34px; height: 34px;
  margin: 0 auto var(--paso-3);
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  position: relative;
}
.candado span {
  position: absolute;
  top: -11px; left: 50%;
  width: 18px; height: 12px;
  margin-left: -9px;
  border: 2px solid var(--tinta);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}
.candado::after {
  content: '';
  position: absolute;
  top: 10px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: var(--tinta);
}

.acceso__pie {
  margin: var(--paso-3) 0 0;
  font-size: 0.8rem;
  color: var(--grafito-60);
  text-align: center;
}

.formulario--secundario { margin-top: var(--paso-2); text-align: center; }

.campo__codigo {
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pasos { margin: var(--paso-3) 0 0; padding-left: 1.2rem; }
.pasos li { margin-bottom: var(--paso-3); }

.qr {
  margin: var(--paso-2) 0;
  padding: var(--paso-2);
  border: var(--linea);
  border-radius: var(--radio);
  display: inline-block;
  background: var(--papel);
}
.qr svg { display: block; }

.qr__manual { margin-top: var(--paso-1); font-size: 0.85rem; }
.qr__manual summary { cursor: pointer; color: var(--grafito-60); }
.qr__clave code {
  font-size: 1rem;
  letter-spacing: 0.12em;
  word-break: break-all;
}

.codigos {
  list-style: none;
  margin: var(--paso-2) 0;
  padding: var(--paso-2);
  border: var(--linea);
  border-radius: var(--radio);
  background: var(--grafito-04);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--paso-1) var(--paso-2);
}
.codigos code { font-size: 1rem; letter-spacing: 0.08em; }

/* --- Cabecera de pantalla ------------------------------------------- */

.cabecera-pantalla {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--paso-2);
  margin-bottom: var(--paso-3);
  flex-wrap: wrap;
}
.cabecera-pantalla__botones { display: flex; gap: var(--paso-1); align-items: center; }

.titulo-seccion {
  font-size: 0.95rem;
  font-weight: 500;
  margin: var(--paso-3) 0 var(--paso-1);
}

.migas { margin: 0 0 2px; font-size: 0.8rem; color: var(--grafito-60); }
.migas a:not(.boton) { color: var(--grafito-60); }

/* --- Buscador -------------------------------------------------------- */

.buscador {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-1);
  align-items: center;
  margin-bottom: var(--paso-3);
}
.buscador__campo { flex: 1 1 18rem; }
.buscador__campo input { width: 100%; }
.buscador__filtro { flex: 0 1 12rem; }

.resultado-total {
  margin: 0 0 var(--paso-1);
  font-size: 0.8rem;
  color: var(--grafito-60);
}

.vacio {
  margin: var(--paso-4) 0;
  padding: var(--paso-4);
  text-align: center;
  color: var(--grafito-60);
  border: 1px dashed var(--grafito-18);
  border-radius: var(--radio);
}

/* --- Tabla de contraseñas -------------------------------------------- */

.tabla--contrasenas td { vertical-align: top; }
.tabla__acciones { white-space: nowrap; text-align: right; }

.enlace-ficha { font-weight: 500; }
.ficha__url {
  display: block;
  font-size: 0.78rem;
  color: var(--grafito-60);
  word-break: break-all;
}

.celda-usuario code { font-size: 0.85rem; word-break: break-all; }
.celda-cliente { font-weight: 500; }

.etiqueta {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--grafito-35);
  border-radius: 10px;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--grafito-60);
  vertical-align: middle;
  white-space: nowrap;
}
.etiqueta--depto   { border-color: var(--grafito-60); color: var(--grafito-90); }
.etiqueta--aviso   { border-color: var(--grafito-90); color: var(--grafito-90); background: var(--grafito-08); }
.etiqueta--peligro { border-color: var(--tinta); color: var(--papel); background: var(--tinta); }
.etiqueta--becario { border-style: dashed; }

/* --- Secreto: mostrar y copiar --------------------------------------- */

.secreto {
  display: inline-flex;
  align-items: center;
  gap: var(--paso-1);
  flex-wrap: wrap;
}

.secreto__valor {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  color: var(--grafito-60);
  user-select: none;
}
.secreto__valor--visible {
  color: var(--tinta);
  background: var(--grafito-08);
  padding: 2px 6px;
  border-radius: var(--radio);
  user-select: all;
  word-break: break-all;
}

.secreto--grande .secreto__valor { font-size: 1.05rem; }
.secreto--notas { align-items: flex-start; }
.secreto--notas .secreto__valor { white-space: pre-wrap; }

.icono {
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grafito-60);
  cursor: pointer;
  border-bottom: 1px solid var(--grafito-18);
}
.icono:hover { color: var(--tinta); border-bottom-color: var(--tinta); }
.icono--hecho { color: var(--tinta); border-bottom-color: transparent; }

.boton--pequeno { padding: 2px 10px; font-size: 0.78rem; }
.boton--peligro { border: 2px solid var(--tinta); font-weight: 500; }

/* --- Ficha ----------------------------------------------------------- */

.ficha {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-3);
}

.ficha__datos { margin: 0; }

.ficha__fila {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--paso-2);
  padding: var(--paso-1) 0;
  border-bottom: 1px solid var(--grafito-08);
}
.ficha__fila:last-child { border-bottom: 0; }
.ficha__fila dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grafito-60);
  padding-top: 3px;
}
.ficha__fila dd { margin: 0; }
.ficha__fila--destacada { background: var(--grafito-04); margin: 0 calc(-1 * var(--paso-2)); padding: var(--paso-2); }

.ficha__notas { margin-top: var(--paso-3); padding-top: var(--paso-2); border-top: var(--linea); }

/* --- Modal de desbloqueo --------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--paso-2);
  z-index: 50;
}
.modal[hidden] { display: none; }

.modal__caja {
  background: var(--papel);
  border-radius: var(--radio);
  padding: var(--paso-3);
  width: 100%;
  max-width: 24rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.modal__botones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--paso-2);
  margin-top: var(--paso-2);
}

.aviso--correcto  { border-left: 3px solid var(--tinta); }
.aviso--atencion  { border-left: 3px solid var(--grafito-60); }

@media (max-width: 700px) {
  .ficha__fila { grid-template-columns: 1fr; gap: 2px; }
  .codigos { grid-template-columns: 1fr; }
  .tabla--contrasenas thead { display: none; }
}

/* --- Formulario de ficha --------------------------------------------- */

.formulario--ficha { max-width: 44rem; }

.password-fila { display: flex; gap: var(--paso-1); align-items: center; }
.password-fila input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; }

.generador {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-2);
  margin-top: var(--paso-1);
  padding: var(--paso-1) var(--paso-2);
  background: var(--grafito-04);
  border-radius: var(--radio);
  font-size: 0.82rem;
}
.generador__opcion { display: inline-flex; align-items: center; gap: 5px; }
.generador__opcion input[type="number"] { width: 4.5rem; }

.fortaleza {
  display: flex;
  align-items: center;
  gap: var(--paso-1);
  margin-top: var(--paso-1);
  font-size: 0.78rem;
  color: var(--grafito-60);
}
.fortaleza__barra {
  display: block;
  width: 8rem; height: 4px;
  background: var(--grafito-08);
  border-radius: 2px;
  overflow: hidden;
}
.fortaleza__barra i { display: block; height: 100%; background: var(--grafito-35); transition: width .2s; }
.fortaleza[data-nivel="media"]  .fortaleza__barra i { background: var(--grafito-60); }
.fortaleza[data-nivel="buena"]  .fortaleza__barra i { background: var(--grafito-90); }
.fortaleza[data-nivel="fuerte"] .fortaleza__barra i { background: var(--tinta); }

.personas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--paso-1);
  margin-top: var(--paso-1);
}
.personas__opcion { display: flex; align-items: flex-start; gap: 6px; font-size: 0.88rem; }

.lista-fichas { margin: var(--paso-1) 0; padding-left: 1.1rem; font-size: 0.9rem; }
.lista-fichas span { margin-left: var(--paso-1); font-size: 0.8rem; }

.fila-denegada td { background: var(--grafito-04); }

.paginacion__pagina {
  display: inline-block;
  padding: 2px 8px;
  border: var(--linea);
  border-radius: var(--radio);
  margin-right: 4px;
  font-size: 0.8rem;
  text-decoration: none;
}
.paginacion__pagina.es-actual { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* --- Puesta en marcha ------------------------------------------------ */

.lista-estado {
  list-style: none;
  margin: var(--paso-3) 0;
  padding: 0;
  text-align: left;
  border: var(--linea);
  border-radius: var(--radio);
}

.lista-estado__item {
  display: flex;
  gap: var(--paso-2);
  align-items: flex-start;
  padding: var(--paso-1) var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
  color: var(--grafito-60);
}
.lista-estado__item:last-child { border-bottom: 0; }
.lista-estado__item.es-hecho   { color: var(--tinta); }
.lista-estado__item.es-actual  { background: var(--grafito-04); color: var(--tinta); }

.lista-estado__marca {
  width: 1.2rem;
  text-align: center;
  font-weight: 500;
}

.lista-estado .campo__ayuda { display: block; }

.llavero-nuevo {
  margin: var(--paso-3) 0;
  padding: var(--paso-2);
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  text-align: left;
}

.llavero-nuevo__contenido {
  margin: var(--paso-1) 0 0;
  padding: var(--paso-2);
  background: var(--grafito-04);
  border-radius: var(--radio);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}

/* --- Bloques secundarios de la ficha --------------------------------- */

.bloque {
  margin-top: var(--paso-4);
  padding-top: var(--paso-2);
  border-top: var(--linea);
}

/* --- Filas de formulario dentro de un bloque -------------------------
   Alineadas ARRIBA, no abajo.

   Con `flex-end` la fila salía escalonada, y el caso que lo enseñaba es
   «Compartir con alguien de fuera»: el campo «Para quién» lleva una línea
   de ayuda debajo, y al cuadrar los bordes inferiores esa ayuda le
   levantaba el input casi cincuenta píxeles por encima del desplegable de
   al lado. Cada control quedaba a una altura y ninguno en línea con otro.

   Alineando arriba, las etiquetas se ponen en la misma línea y los
   controles caen todos a la misma altura detrás de ellas; la ayuda cuelga
   por debajo sin arrastrar nada. */
.bloque .formulario--fila { align-items: flex-start; }

/* Lo que no lleva etiqueta —una casilla, un botón— empezaría en lo alto
   de la fila, a la altura de los rótulos en vez de a la de los campos. Se
   le da de margen exactamente lo que ocupa una etiqueta, y así aterriza
   en la misma línea recta que los demás controles.

   El `:has()` es lo que evita tener que nombrar formularios uno a uno:
   solo se compensa donde hay etiquetas que compensar. En una fila sin
   ninguna —«Añadir un departamento», por ejemplo, que son dos
   desplegables y un botón— no hay desnivel y no se toca nada. */
.bloque .formulario--fila:has(.campo__etiqueta) > .campo--casilla,
.bloque .formulario--fila:has(.campo__etiqueta) > .boton {
  margin-top: var(--alto-etiqueta);
}

/* La casilla ocupa una sola línea y los campos de al lado, tres veces eso.
   Dándole la altura de un control, su `align-items: center` la centra
   contra ellos; sin esto queda pegada al borde de arriba de los cuadros y
   la fila vuelve a verse torcida, aunque empiece donde debe. */
.bloque .formulario--fila:has(.campo__etiqueta) > .campo--casilla {
  min-height: var(--alto-control);
}


.solicitud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso-2);
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--paso-2);
  margin-bottom: var(--paso-1);
  border: var(--linea);
  border-radius: var(--radio);
}

.solicitud__que { flex: 1 1 20rem; }
.solicitud__ficha { margin: 0 0 2px; font-weight: 500; }
.solicitud__ficha span { margin-left: var(--paso-1); font-weight: 400; font-size: 0.82rem; }
.solicitud__quien { margin: 0; font-size: 0.88rem; }
.solicitud__motivo { margin: var(--paso-1) 0 0; font-size: 0.88rem; font-style: italic; }

.solicitud__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paso-1);
}
.solicitud__acciones input[type="text"] { width: 14rem; }

/* --- Bloques de emergencia -------------------------------------------- */
/* Se separan visualmente del resto de Ajustes a propósito: son las dos
   acciones que no se pulsan por curiosidad. */

/* `recuadro` y no `bloque`: `.bloque` ya era el separador de sección que
   usan la ficha y el panel —solo un borde arriba—, y redefinirlo aquí
   convertía todas esas secciones en cajas. */
.recuadro {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-3);
  margin-bottom: var(--paso-3);
}

.recuadro--peligro { border: 2px solid var(--tinta); }

.recuadro__titulo {
  margin: 0 0 var(--paso-1);
  font-size: 1rem;
  font-weight: 500;
}

.recuadro .campo__ayuda { margin-bottom: var(--paso-2); }
.recuadro form { margin-top: var(--paso-2); }


/* --- Alertas de uso anormal ------------------------------------------- */

.alerta {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin-bottom: var(--paso-2);
}

.alerta--grave { border-left: 3px solid var(--tinta); }

.alerta__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--paso-2);
  margin-bottom: var(--paso-1);
  font-size: 0.82rem;
}

.alerta__resumen { margin: 0 0 var(--paso-1); font-weight: 500; }

.alerta__contexto { margin: var(--paso-1) 0; font-size: 0.88rem; }
.alerta__contexto summary { cursor: pointer; color: var(--grafito-60); }
.alerta__contexto summary:hover { color: var(--tinta); }
.alerta__contexto .tabla { margin-top: var(--paso-1); }

.alerta__pie { margin: var(--paso-1) 0 0; font-size: 0.85rem; }

/* --- Salud de las contraseñas ----------------------------------------- */

.fuerza {
  display: inline-block;
  width: 70px;
  height: 6px;
  background: var(--grafito-08);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}

.fuerza__barra { display: block; height: 100%; background: var(--tinta); }

.grupo-repetido {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin-bottom: var(--paso-2);
}

.grupo-repetido__titulo {
  margin: 0 0 var(--paso-1);
  font-size: 0.92rem;
  font-weight: 500;
}

/* --- Elegir con quién se comparte, en el formulario ---------------------
   Se llama «eleccion» y no «reparto» porque `.reparto` ya es la barra de
   3 px de la tabla de clientes, con height y overflow:hidden: reutilizar
   ese nombre aplastaba la lista entera a una franja de tres píxeles. */

.eleccion {
  border: var(--linea);
  border-radius: var(--radio);
  margin-top: var(--paso-1);
}

.eleccion__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso-2);
  padding: 8px var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
}
.eleccion__fila:last-child { border-bottom: 0; }

.eleccion__quien,
.eleccion__nivel {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

.eleccion__quien { flex: 1 1 auto; }

.eleccion__nivel {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--grafito-60);
}
.eleccion__nivel:hover { color: var(--tinta); }

.eleccion input[type="checkbox"] { width: auto; margin: 0; }

/* --- Quién tiene acceso, dentro de la ficha ----------------------------
   Prefijo «permisos» y no «acceso»: `.acceso` ya es el <body> de la pantalla
   de entrada, con min-height:100vh. Reutilizar ese nombre aquí estiraba cada
   lista a una pantalla entera. */

.permisos__titulo {
  margin: var(--paso-3) 0 var(--paso-1);
  font-size: 0.92rem;
  font-weight: 500;
}
.permisos__titulo:first-of-type { margin-top: var(--paso-1); }

.permisos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--paso-1);
  border: var(--linea);
  border-radius: var(--radio);
}

.permisos__fila {
  display: flex;
  align-items: center;
  gap: var(--paso-2);
  padding: 8px var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
}
.permisos__fila:last-child { border-bottom: 0; }

.permisos__quien { flex: 1 1 auto; }

.permisos__nivel { flex: 0 0 auto; margin: 0; }
.permisos__nivel select { width: auto; font-size: 0.85rem; padding: 2px 6px; }

.permisos__fila form { margin: 0; }

.permisos__anadir { margin-top: var(--paso-1); align-items: flex-end; }
.permisos__anadir .campo { margin-bottom: 0; }

/* =====================================================================
   Membrete e impresión
   =====================================================================

   La aplicación no monta PDFs con una librería: los informes salen del
   navegador, con «Imprimir → Guardar como PDF», desde Auditoría, Salud o
   un listado filtrado. Ese PDF salía antes sin cabecera de ninguna clase.
   Aquí se le pone membrete —logotipo, pantalla y fecha— y se le quitan
   los adornos que en papel solo estorban: la barra de navegación, el
   buscador, los botones y la paginación.
   ===================================================================== */

.membrete {
  display: none;                    /* en pantalla no existe */
  align-items: center;
  gap: var(--paso-2);
  margin: 0 0 var(--paso-3);
  padding: 0 0 var(--paso-2);
  border-bottom: 2px solid var(--tinta);
}

.membrete__titulo {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.membrete__fecha {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--grafito-60);
  font-variant-numeric: tabular-nums;
}

@media print {
  .membrete { display: flex; }

  .barra,
  .buscador,
  .paginacion,
  .cabecera-pantalla__botones,
  .acciones,
  .boton,
  .enlace-boton { display: none; }

  .lienzo { padding: 0; max-width: none; }

  body { background: #fff; color: #000; }

  /* Que una fila de la tabla no se parta entre dos páginas. */
  tr, .permisos__fila { break-inside: avoid; }

  /* En papel un enlace subrayado en gris solo añade ruido. */
  a { color: #000; text-decoration: none; }
}

/* --- Elegir de dónde sale la copia a restaurar ----------------------- */

.eleccion-origen {
  border: var(--linea);
  border-radius: var(--radio);
  padding: var(--paso-2);
  margin: 0 0 var(--paso-2);
  display: flex;
  flex-direction: column;
  gap: var(--paso-2);
}

.eleccion-origen legend {
  padding: 0 6px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grafito-60);
}

/* El desplegable y el selector de fichero van sangrados bajo su opción:
   se ve de un vistazo cuál pertenece a cuál. */
.eleccion-origen > .campo:not(.campo--casilla) {
  margin-left: var(--paso-3);
  margin-top: calc(var(--paso-2) * -0.5);
}

.eleccion-origen input[type="radio"] { width: auto; margin: 0; }

/* --- Cómo se leen las reglas de IP ----------------------------------- */

.reglas-ip {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--linea);
  border-radius: var(--radio);
  font-size: 0.85rem;
}

.reglas-ip__una {
  display: flex;
  align-items: baseline;
  gap: var(--paso-2);
  padding: 6px var(--paso-2);
  border-bottom: 1px solid var(--grafito-08);
}

.reglas-ip__una:last-child { border-bottom: 0; }

/* Sin color: la identidad es monocroma. Una regla que no se aplica se
   marca tachándola, que se ve igual de bien en gris y en papel. */
.reglas-ip__una.es-invalida code { text-decoration: line-through; }
.reglas-ip__una.es-invalida strong { margin-left: auto; }

/* =====================================================================
   La credencial compartida
   =====================================================================

   Es la única pantalla de Kryptos que ve gente de fuera —un cliente, un
   proveedor— y la ven UNA vez. Todo lo que necesitan para entrar tiene que
   caber aquí y leerse sin esfuerzo.
   ===================================================================== */

/* Las demás tarjetas de acceso son formularios de una columna y 480 px les
   sobran. Esta enseña datos: una nota de diez líneas o una URL larga en esa
   anchura salen partidas en tiras. En un ordenador ocupa 800 px; en el móvil
   sigue mandando el `width: 100%` de `.tarjeta-acceso`. */
.tarjeta-acceso--enlace { max-width: 800px; }

/* Y el margen del contenedor no puede comerse esos 800 px en una pantalla
   justa: por debajo de ese ancho la tarjeta ya se encoge sola. */
@media (min-width: 800px) {
  .acceso { padding: var(--paso-4) var(--paso-3); }
}

/* --- Una fila con el rótulo encima, no al lado ------------------------
   `.ficha__fila` reserva 12rem para el rótulo y deja el resto al dato. Va
   bien para un usuario o una contraseña, que son una línea. Para unas notas
   largas no: el texto se quedaba encajonado en la columna de la derecha. */
.ficha__fila--apilada {
  grid-template-columns: 1fr;
  gap: var(--paso-1);
}

.enlace-notas {
  margin: 0 0 var(--paso-1);
  padding: var(--paso-2);
  background: var(--grafito-04);
  border: var(--linea);
  border-radius: var(--radio);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  /* Respeta los saltos de línea de la nota y parte los suyos donde haga
     falta: una nota con una cadena larguísima no debe sacar una barra de
     desplazamiento horizontal en toda la página. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Dónde se entra --------------------------------------------------- */

.enlace-destino {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paso-1) var(--paso-2);
}

.enlace-destino a:not(.boton) {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Una URL larga se parte por donde sea antes que desbordar la tarjeta. */
  overflow-wrap: anywhere;
}