.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav a { color: #dbe7f5; text-decoration: none; padding: 7px 11px; border-radius: 8px; font-size: .92rem; }
.nav a:hover, .nav a.activo { background: rgba(255, 255, 255, .14); color: #fff; }
.nav .usuario { color: #b9cbe2; font-size: .84rem; margin-left: 8px; }
.nav button { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 8px;
  padding: 6px 10px; cursor: pointer; font: inherit; font-size: .85rem; }

.acceso { max-width: 440px; margin: 40px auto; }
.qr-mfa { display: flex; justify-content: center; margin: 12px 0; }
.qr-mfa svg { width: 210px; height: 210px; }

.cabecera-vista { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cabecera-vista h1 { margin-bottom: 2px; }
.indicadores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 16px; }
.indicador { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; cursor: pointer;
  box-shadow: var(--sombra); }
.indicador .numero { font-size: 1.8rem; font-weight: 700; color: var(--azul); line-height: 1.1; }
.indicador .nombre { color: var(--texto-2); font-size: .86rem; }
.indicador.alerta-ind .numero { color: var(--ambar); }

.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.filtros .boton.activo { background: var(--azul); color: #fff; }
.filtros input { max-width: 320px; }
.paginacion { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; font-size: .88rem; }
.sub { color: var(--texto-3); font-size: .8rem; }

.grilla-firmantes { display: grid; gap: 10px; }
.firmante-form { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; background: #fbfcfe; position: relative; }
.firmante-form .fila { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.firmante-form .quitar { position: absolute; top: 6px; right: 8px; }
.firmante-form label { margin-top: 6px; font-size: .82rem; }
.color-firmante { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.editor-campos .paleta { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.editor-campos .paleta button { border: 2px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer;
  font: inherit; font-size: .88rem; background: #eef2f7; }
.editor-campos .paleta button.activo { border-color: currentColor; background: #fff; font-weight: 700; }
.paginas-edicion { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); max-height: 78vh;
  overflow: auto; padding: 8px; background: #e9eef4; border-radius: 10px; }
.pagina-edicion { position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); cursor: crosshair; user-select: none; }
.pagina-edicion img { width: 100%; display: block; pointer-events: none; }
.pagina-edicion .num { position: absolute; top: 4px; left: 6px; font-size: .72rem; background: rgba(31, 41, 51, .65); color: #fff;
  padding: 1px 7px; border-radius: 99px; }
.campo { position: absolute; border: 2px solid; border-radius: 4px; background: rgba(255, 255, 255, .55); cursor: move;
  font-size: .7rem; font-weight: 700; padding: 2px 4px; overflow: hidden; touch-action: none; }
.campo .x { position: absolute; top: -2px; right: 2px; cursor: pointer; font-size: .9rem; }
.campo .tirador { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; background: currentColor; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { border-left: 2px solid var(--borde); padding: 0 0 12px 14px; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--azul-2); }
.linea-tiempo li.malo::before { background: var(--rojo); }
.linea-tiempo li.bueno::before { background: var(--verde); }
.linea-tiempo .fecha { font-size: .78rem; color: var(--texto-3); }
.linea-tiempo details summary { cursor: pointer; font-size: .78rem; color: var(--azul-2); }
.linea-tiempo pre { font-size: .74rem; background: #f6f8fb; padding: 8px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; }

.capturas-admin { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.capturas-admin figure { margin: 0; border: 1px solid var(--borde); border-radius: 8px; padding: 6px; text-align: center; font-size: .78rem; }
.capturas-admin img { width: 100%; border-radius: 6px; }
.dos-columnas { display: grid; gap: 16px; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } .paginas-edicion { grid-template-columns: 1fr; } }
.lista-archivos { margin: 8px 0; display: grid; gap: 4px; }
.archivo-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 4px 8px;
  border: 1px solid var(--borde); border-radius: 8px; background: #fbfcfe; font-size: .9rem; word-break: break-all; }
.clave-unica { font-family: var(--mono); background: #f6f8fb; padding: 10px; border-radius: 8px; word-break: break-all; user-select: all; }

.habitual-ok { color: var(--verde); font-weight: 600; margin-top: 4px; }
.chip.habitual { background: #ede9fe; color: #5b21b6; }
.dato { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 7px 0;
  border-bottom: 1px solid #edf1f6; font-size: .92rem; }
.dato > span:first-child { color: var(--texto-2); min-width: 0; overflow-wrap: anywhere; }
.dato > span:last-child { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.dialogo h3 { font-size: 1rem; margin: 16px 0 4px; color: var(--azul); }