/* vitrina — identidad visual. Fondo neutro, color solo donde guía la acción: el foco son las fotos. */
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-grotesque.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('fonts/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }

:root {
  --bg: #F6F4EF;          /* lino */
  --card: #FFFFFF;
  --text: #1B1F24;        /* tinta */
  --muted: #4A5159;
  --line: #E6E1D6;
  --chip: #F1EEE7;
  --accent: #0F6E6E;      /* petróleo */
  --accent-hover: #0A5252;
  --accent-text: #FFFFFF;
  --coral: #FF6B4A;       /* acento */
  --coral-text: #1B1F24;
  --local-bg: #E3F1EE;    /* menta */
  --local-text: #0A5252;
  --top-bg: #0F6E6E;
  --top-text: #FFFFFF;
  --top-muted: #D2E8E4;
  --top-on: rgba(255, 255, 255, .18);
  --ok: #1D6B45; --ok-bg: #E2F3E9;
  --bad: #A83418; --bad-bg: #FFE9E3; --bad-on: #FFFFFF;
  --warn: #7A4E00; --warn-bg: #FFF1D1;
  --shadow: 0 1px 2px rgba(27, 31, 36, .05), 0 4px 14px rgba(27, 31, 36, .05);
  --radius: 14px;
  --head: #FBFAF7; --fin: #F4F1EB; --hoy-bg: #FFF1EC; --kpi-bg: #E9ECF8; --kpi-text: #2F3A7A;
  --display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101415; --card: #182022; --text: #ECEAE4; --muted: #A7AFB3; --line: #2A3437; --chip: #222B2E;
    --accent: #4FC1B5; --accent-hover: #74D3C8; --accent-text: #0B1413;
    --coral: #FF8A6F; --coral-text: #1B1F24;
    --local-bg: #173532; --local-text: #A6E3D9;
    --top-bg: #0B2B2B; --top-text: #ECEAE4; --top-muted: #A9CBC6; --top-on: rgba(255, 255, 255, .12);
    --ok: #7FD6A6; --ok-bg: #16311F;
    --bad: #FF9C85; --bad-bg: #3A1E17; --bad-on: #1B1F24;
    --warn: #F4C66A; --warn-bg: #3A2E10;
    --head: #1C2527; --fin: #1D2628; --hoy-bg: #2E2320; --kpi-bg: #262B45; --kpi-text: #C3CAF2;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--body); background: var(--bg); color: var(--text); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
main { max-width: 1240px; margin: 0 auto; padding: 20px 20px 48px; }
h1 { font-family: var(--display); font-weight: 800; font-size: 1.75rem; letter-spacing: -.5px; margin: .2rem 0 1rem; }
h2 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin: 0 0 .6rem; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* ---------- Barra superior ---------- */
.top { display: flex; align-items: center; gap: 8px 22px; padding: 0 20px; min-height: 60px; background: var(--top-bg); color: var(--top-text); position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--top-text); }
.marca:hover { color: var(--top-text); }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca span { font-family: var(--display); font-weight: 800; font-size: 1.4rem; letter-spacing: -.5px; }
.top nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.top nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--top-muted); font-weight: 500; white-space: nowrap; }
.top nav a:hover { color: var(--top-text); background: var(--top-on); }
.top nav a.on { background: var(--top-on); color: var(--top-text); font-weight: 600; }
.salir { margin: 0; }
.version-fecha-corta { display: none; }
.wa-estado { margin-left: auto; display: inline-flex; align-items: center; color: var(--top-muted); font-size: .8rem; white-space: nowrap; cursor: default; }
.wa-estado .dot { margin-right: 6px; }
.version { margin-left: 14px; color: var(--top-muted); font-size: .8rem; white-space: nowrap; cursor: default; font-variant-numeric: tabular-nums; }
.salir button { background: none; border: 0; color: var(--top-muted); font: inherit; cursor: pointer; min-height: 40px; padding: 0 4px; text-decoration: underline; text-underline-offset: 3px; }
.salir button:hover { color: var(--top-text); }
.alerta { background: var(--bad-bg); color: var(--bad); padding: 10px 20px; text-align: center; font-weight: 500; }
.alerta a { color: inherit; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--muted); vertical-align: middle; flex: none; }
.dot-conectado { background: #3DDC97; }
.dot-reconectando, .dot-iniciando, .dot-esperando_qr { background: #F5B83D; }
.dot-desvinculado, .dot-apagado { background: var(--coral); }

/* ---------- Controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; border-radius: 10px; padding: 0 16px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--accent-hover); color: var(--accent-text); }
.btn.sec { background: var(--chip); color: var(--text); }
.btn.sec:hover { background: var(--line); color: var(--text); }
.btn.peligro { background: var(--bad); color: var(--bad-on); }
.btn.peligro:hover { filter: brightness(.92); }
.btn:disabled { opacity: .5; cursor: default; }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
input, select { font: inherit; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); max-width: 100%; }
input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
input[type=checkbox] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); }
input[type=file] { padding: 8px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 500; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 400; font-size: .92rem; }

/* ---------- Bloques ---------- */
.tarjeta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.error { color: var(--bad); }
.ok-box { background: var(--ok-bg); color: var(--ok); padding: 10px 14px; border-radius: 10px; }
.aviso-box { background: var(--warn-bg); color: var(--warn); padding: 10px 14px; border-radius: 10px; }
.ayuda { color: var(--muted); }
.mini { font-size: .82rem; color: var(--muted); }
.vacio { text-align: center; color: var(--muted); padding: 48px 0; }

/* ---------- Ingreso ---------- */
.login { max-width: 380px; margin: 9vh auto 0; padding: 0 20px; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; text-align: center; }
.login-marca svg { width: 84px; height: 84px; }
.login-marca .nombre { font-family: var(--display); font-weight: 800; font-size: 2.8rem; letter-spacing: -1.5px; line-height: 1; }
.login-marca .lema { color: var(--muted); }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login .btn { min-height: 46px; }

/* ---------- Reportes ---------- */
.filtros { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.filtros summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.grid-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.grid-filtros .ancho { grid-column: 1 / -1; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.acciones form { margin: 0; }
.chip { display: inline-block; background: var(--chip); padding: 5px 12px; border-radius: 99px; }

.resumen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin: 4px 0 16px; }
.kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.kpis > * { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; text-decoration: none; color: var(--text); }
.kpis > a:hover { border-color: var(--accent); color: var(--text); }
.kpis b { font-family: var(--display); font-size: 1.05rem; }
.descargas { display: flex; gap: 8px; flex-wrap: wrap; }

.reportes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.reporte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: var(--shadow); }
.reporte.revisado { opacity: .75; }
.reporte header { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .9rem; color: var(--muted); }
.reporte header b { color: var(--text); }
.reporte .quien { width: 100%; font-size: 1rem; color: var(--text); }
.reporte .quien a { color: var(--text); text-decoration: none; }
.reporte .quien a:hover { color: var(--accent); }
.falta { color: var(--bad); font-weight: 600; margin-right: 6px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: var(--chip); border-radius: 7px; padding: 3px 9px; font-size: .8rem; font-weight: 500; }
.tag small { opacity: .75; margin-left: 4px; font-weight: 400; }
.tag.local { background: var(--local-bg); color: var(--local-text); font-weight: 600; }
.tag.malo { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.tag.aviso { background: var(--warn-bg); color: var(--warn); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.texto { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; font-size: .92rem; max-height: 12em; overflow: auto; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.foto { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--chip); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
a.foto:hover img { transform: scale(1.04); }
.foto.archivo { display: flex; align-items: center; justify-content: center; text-align: center; font-size: .78rem; padding: 6px; text-decoration: none; color: var(--text); }
.foto.archivo img { position: absolute; inset: 0; opacity: .45; }
.foto.archivo span { position: relative; }
.foto.falta { color: var(--muted); }
audio { width: 100%; grid-column: 1 / -1; }
.editar summary { cursor: pointer; font-size: .85rem; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.form-reporte { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.form-reporte .ancho { flex: 1 1 100%; }
.estado-guardar { font-size: .85rem; color: var(--ok); }
.paginas { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 24px 0; }

/* ---------- Tablas y otras páginas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla th, .tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla th { font-weight: 600; color: var(--muted); white-space: nowrap; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.form-col { display: flex; flex-direction: column; gap: 14px; max-width: 540px; }
.en-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.tabs a.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.remitentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.remitente { display: flex; gap: 14px; margin: 0; }
.rem-foto { flex: 0 0 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); }
.rem-foto img { width: 100%; height: 100%; object-fit: cover; }
.rem-info { min-width: 0; flex: 1; }
.rem-nombre { font-size: 1rem; }
.qr { width: 300px; max-width: 100%; background: #fff; padding: 10px; border-radius: 12px; }
ul.errores li { color: var(--bad); }

.barra { position: relative; height: 26px; background: var(--chip); border-radius: 13px; overflow: hidden; margin: 10px 0; }
.barra > div { height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.barra > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: var(--text); text-shadow: 0 0 6px var(--card); }

/* ---------- Visor de fotos ---------- */
#lightbox { position: fixed; inset: 0; background: rgba(10, 14, 15, .94); z-index: 50; display: flex; align-items: center; justify-content: center; }
#lightbox[hidden] { display: none; }
#lightbox figure { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
#lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 6px; }
#lightbox figcaption { color: #E6E3DC; margin-top: 10px; font-size: .9rem; text-align: center; padding: 0 56px; }
#lightbox button { position: absolute; background: rgba(255, 255, 255, .14); color: #fff; border: 0; font-size: 2rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
#lightbox button:hover { background: rgba(255, 255, 255, .26); }
.lb-cerrar { top: calc(12px + env(safe-area-inset-top)); right: 12px; font-size: 1.3rem !important; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-abrir { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); right: 16px; color: #fff; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding: 14px 14px 40px; }
  h1 { font-size: 1.5rem; }
  .top { flex-wrap: wrap; padding: 6px 14px 0; padding-top: calc(6px + env(safe-area-inset-top)); gap: 0 12px; }
  .marca svg { width: 26px; height: 26px; }
  .marca span { font-size: 1.25rem; }
  .salir { margin-left: 0; }
  .version { font-size: .74rem; margin-left: 10px; }
  .wa-txt { display: none; }
  .wa-estado .dot { margin-right: 0; width: 11px; height: 11px; }
  .version-fecha { display: none; }
  .version-fecha-corta { display: inline; }
  .top nav { order: 3; flex: 1 1 100%; margin: 0 -14px; padding: 4px 10px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { min-height: 40px; padding: 0 12px; font-size: .95rem; }
  .btn, input, select { min-height: 44px; }
  input, select { font-size: 16px; } /* evita el zoom automático en iPhone */
  .reportes, .remitentes { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-filtros > label { min-width: 0; }
  .resumen { flex-direction: column; align-items: stretch; }
  .descargas .btn { flex: 1; }
  .form-col { max-width: none; }
  .form-col .btn, .login .btn { width: 100%; }
  .tarjeta { padding: 14px; }
  .remitente .en-linea input { flex: 1 1 100%; min-width: 0; }
  .remitente .en-linea .btn { flex: 1 1 auto; }
  .rem-foto { flex-basis: 64px; height: 64px; }
  #lightbox figcaption { padding: 0 12px; }
  .lb-prev, .lb-next { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; }
  .lb-prev { left: 16px; } .lb-next { right: 16px; }
  .lb-abrir { bottom: calc(26px + env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%); }
}
@media (max-width: 380px) {
  .grid-filtros { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .mini-usuario { display: none; } }
.solo-movil { display: none; }
@media (max-width: 760px) {
  .solo-pc { display: none; }
  .solo-movil { display: inline; }
  .alerta { font-size: .85rem; padding: 8px 14px; }
  .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpis > * { display: flex; flex-direction: column; padding: 8px 10px; font-size: .78rem; line-height: 1.25; color: var(--muted); }
  .kpis b { font-size: 1.25rem; color: var(--text); }
}
.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Matriz personas × días ---------- */
main.ancho { max-width: 1680px; }
.barra-vista { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 14px; }
.vista-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.vista-toggle a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; text-decoration: none; color: var(--muted); font-weight: 500; }
.vista-toggle a:hover { color: var(--text); background: var(--chip); }
.vista-toggle a.on { background: var(--text); color: var(--bg); font-weight: 600; }
.periodo { display: flex; align-items: center; gap: 8px; }
.periodo a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; color: var(--text); font-size: 1.3rem; }
.periodo a:hover { border-color: var(--accent); color: var(--accent); }
.periodo b { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: -.3px; min-width: 9ch; text-align: center; }
.kpis .kpi-malo b { color: var(--bad); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); align-items: center; }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { font-style: normal; }

.matriz-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 140px); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin-bottom: 8px; }
.matriz { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.matriz th, .matriz td { padding: 0; border-bottom: 1px solid var(--line); background: var(--card); }
.matriz thead th { position: sticky; top: 0; z-index: 2; background: var(--head); vertical-align: bottom; }
.matriz tfoot td, .matriz tfoot th { background: var(--head); border-bottom: 0; height: 32px; }
.matriz { --w-local: 150px; --w-nombre: 262px; }
.matriz .m-local, .matriz .m-nombre { position: sticky; z-index: 1; text-align: left; padding: 6px 12px; font-weight: 400; border-right: 1px solid var(--line); }
.matriz .m-local { width: var(--w-local); min-width: var(--w-local); max-width: var(--w-local); }
.matriz .m-nombre { width: var(--w-nombre); min-width: var(--w-nombre); max-width: var(--w-nombre); }
/* Primera y segunda columna fijas: su orden depende del tablero (Ventas: local primero; Reposición: persona primero) */
.matriz.orden-local { --w1: var(--w-local); }
.matriz.orden-persona { --w1: var(--w-nombre); }
.matriz .m-c1 { left: 0; vertical-align: top; padding-top: 9px; }
.matriz .m-c2 { left: var(--w1); }
.matriz thead .m-local, .matriz thead .m-nombre { z-index: 3; vertical-align: bottom; padding-top: 6px; }
.matriz tr.m-g0 > * { border-top: 2px solid var(--line); }
.matriz tbody tr:first-child > * { border-top: 0; }
.m-cod { display: block; font-weight: 700; color: var(--local-text); text-decoration: none; letter-spacing: .2px; }
a.m-cod:hover { color: var(--accent); }
.m-local.sin .m-cod { color: var(--muted); font-style: italic; }
.m-sub.malo { color: var(--bad); }
.pd-local { margin: 4px 0 0; color: var(--local-text); }
.matriz thead a { color: var(--muted); text-decoration: none; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.matriz thead a.on, .matriz thead a:hover { color: var(--text); }
.m-quien { display: block; max-width: 238px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.m-quien:hover { color: var(--accent); }
.m-sub { display: block; max-width: 238px; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.m-sub:hover { color: var(--accent); }
.m-cont-movil { display: none; }
.m-dh { width: 30px; min-width: 30px; text-align: center; font-size: .72rem; line-height: 1.2; padding: 6px 0 !important; color: var(--muted); font-weight: 400; }
.m-dh span, .m-dh b { display: block; }
.m-dh b { font-size: .8rem; color: var(--text); }
.m-dh.futuro { opacity: .45; }
.matriz .fin { background: var(--fin); }
.matriz thead .fin { background: var(--fin); }
.matriz .hoy { background: var(--hoy-bg); }
.matriz thead .m-dh.hoy { background: var(--text); color: var(--bg); border-radius: 8px 8px 0 0; }
.matriz thead .m-dh.hoy b { color: var(--bg); }
.m-d { width: 30px; min-width: 30px; height: 38px; text-align: center; vertical-align: middle; }

.m-celda { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: .68rem; font-weight: 700; font-style: normal; line-height: 1; text-decoration: none; vertical-align: middle; transition: transform .12s ease; }
a.m-celda:hover { transform: scale(1.15); }
.m-foto { background: var(--accent); color: var(--accent-text); }
a.m-foto:hover { color: var(--accent-text); }
.m-oculta { background: var(--local-bg); color: var(--local-text); border: 2px dashed var(--accent); }
a.m-oculta:hover { color: var(--local-text); }
.m-sinfoto { background: var(--bad-bg); color: var(--bad); border: 2px solid var(--bad); font-size: .72rem; }
a.m-sinfoto:hover { color: var(--bad); }
.m-texto { background: var(--local-bg); color: var(--local-text); border: 2px solid transparent; font-size: .72rem; }
a.m-texto:hover { color: var(--local-text); }
.m-anon { background: repeating-linear-gradient(135deg, var(--chip) 0 3px, var(--line) 3px 6px); color: var(--muted); }
a.m-anon:hover { color: var(--text); }
.m-celda.sel { outline: 3px solid var(--coral); outline-offset: 2px; }
.m-vacio { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--line); vertical-align: middle; }
.leyenda .m-vacio { width: 6px; height: 6px; margin: 0 9px; background: var(--muted); opacity: .5; }
.m-sinper th, .m-sinper td { border-top: 1px dashed var(--line); }
.m-sinper .m-quien { color: var(--muted); }
.m-tot { font-size: .75rem; font-weight: 700; color: var(--muted); }
.m-tot.incompleto { color: var(--bad); }

.m-cont { position: sticky; right: 0; z-index: 1; min-width: 124px; padding: 6px 14px !important; border-left: 1px solid var(--line); text-align: left; }
.matriz thead .m-cont { z-index: 3; }
.m-cuenta { white-space: nowrap; color: var(--muted); }
.m-cuenta b { font-family: var(--display); font-size: 1.05rem; color: var(--text); }
.m-cuenta small { margin-left: 4px; }
.m-barra { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; margin-top: 4px; }
.m-barra > div { height: 100%; background: var(--bad); }
.m-barra.medio > div { background: #D69A1E; }
.m-barra.ok > div { background: var(--accent); }
.m-cont-movil.bajo { color: var(--bad); }
.m-cont-movil.medio { color: var(--warn); }
.m-cont-movil.ok { color: var(--accent); }

/* Panel de detalle del día */
#panel-fondo { position: fixed; inset: 0; background: rgba(15, 20, 22, .32); z-index: 30; }
#panel-dia { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); background: var(--card); z-index: 31; border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(15, 20, 22, .16); display: flex; flex-direction: column; }
#panel-dia[hidden], #panel-fondo[hidden] { display: none; }
.pd-barra { display: flex; align-items: center; gap: 6px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
.pd-barra button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 1.2rem; cursor: pointer; }
.pd-barra button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pd-barra button:disabled { opacity: .35; cursor: default; }
.pd-barra .pd-cerrar { margin-left: auto; border: 0; font-size: 1.1rem; }
.pd-contenido { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pd-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 24px; -webkit-overflow-scrolling: touch; }
.pd-titulo { font-size: 1.45rem; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.pd-fecha { color: var(--muted); margin: 2px 0 10px; }
.pd-fecha::first-letter { text-transform: uppercase; }
.pd-rep { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pd-rep-cab { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.pd-rep-cab span { color: var(--muted); text-align: right; }
.pd-rep .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-pie { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 8px; }
body.con-panel { overflow: hidden; }

@media (max-width: 760px) {
  main.ancho { padding-left: 12px; padding-right: 12px; }
  .barra-vista { justify-content: space-between; }
  .periodo { flex: 1 1 100%; justify-content: space-between; }
  .periodo a { width: 44px; height: 44px; }
  .leyenda { font-size: .76rem; gap: 4px 12px; }
  .matriz-wrap { max-height: calc(100vh - 120px); border-radius: 12px; margin: 0 -4px 8px; }
  .matriz { --w-local: 72px; --w-nombre: 108px; }
  .matriz .m-local, .matriz .m-nombre { padding: 4px 6px 4px 8px; }
  .matriz .m-local { padding-top: 8px; }
  .m-cod { font-size: .74rem; overflow-wrap: anywhere; }
  .matriz .m-sub { display: none; }
  .matriz .m-sinper .m-sub { display: block; max-width: 176px; }
  .m-quien { font-size: .8rem; max-width: 94px; }
  .m-cont-movil { display: block; font-size: .74rem; font-weight: 700; }
  .matriz .m-cont { display: none; }
  .m-dh, .m-d { width: 28px; min-width: 28px; }
  .m-d { height: 44px; }
  .m-celda { width: 22px; height: 22px; }
  #panel-dia { top: auto; left: 0; width: auto; height: 86vh; height: 86dvh; border-left: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(15, 20, 22, .2); }
  .pd-barra { padding-top: 18px; position: relative; }
  .pd-barra::before { content: ''; position: absolute; top: 6px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--line); }
  .pd-ayuda { display: none; }
  .pd-cuerpo { padding: 14px 16px 20px; }
  .pd-pie .btn { flex: 1; }
  .kpis.kpis-matriz { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis-matriz > * { padding: 7px 8px; font-size: .72rem; }
  .kpis-matriz b { font-size: 1.1rem; }
  .kpis-matriz .solo-pc { display: none; }
}

/* ---------- Filtros de opción múltiple ---------- */
.filtros-n { margin-left: 8px; background: var(--local-bg); color: var(--local-text); border-radius: 99px; padding: 1px 9px; font-size: .78rem; font-weight: 600; }
.filtros-ayuda { margin: 0 0 4px; }
.campo-multi { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.multi-etq { font-size: .85rem; font-weight: 500; color: var(--muted); }
.multi { position: relative; }
.multi > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 30px 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; position: relative; }
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
.multi[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.multi[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.multi-resumen { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-resumen.activo { font-weight: 600; }
.multi-n { flex: none; background: var(--accent); color: var(--accent-text); border-radius: 99px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; }
.multi-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(380px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 20, 22, .16); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.multi-buscar { width: 100%; }
.multi-lista { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; overscroll-behavior: contain; }
.multi-op { -webkit-tap-highlight-color: transparent; flex-direction: row; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--text); font-weight: 400; font-size: .92rem; cursor: pointer; }
.multi-op:hover { background: var(--chip); }
.multi-op[hidden] { display: none; }
.multi-op input { flex: none; }
.multi-acc { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.multi-acc .btn { min-height: 36px; }
@media (max-width: 760px) {
  /* En celular la lista se abre dentro del formulario, a todo el ancho */
  .campo-multi:has(.multi[open]) { grid-column: 1 / -1; }
  .multi-panel { position: static; width: auto; max-width: none; margin-top: 6px; box-shadow: none; }
  .multi-op { min-height: 44px; }
  .multi-lista { max-height: 50vh; }
}

/* ---------- Tarjetas en miniatura (vista por defecto) ---------- */
.mini-fecha, .solo-texto, .contraer { display: none; }
.reportes.compacta { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.compacta .reporte:not(.abierta) { flex: 0 1 auto; max-width: 100%; padding: 6px; gap: 5px; cursor: zoom-in; }
.compacta .reporte:not(.abierta) > :not(.mini-fecha):not(.galeria):not(.solo-texto) { display: none; }
.compacta .reporte:not(.abierta) .mini-fecha { display: block; font-size: .74rem; line-height: 1.2; color: var(--muted); padding: 0 2px; white-space: nowrap; }
.compacta .reporte:not(.abierta) .mini-fecha b { color: var(--text); }
.compacta .reporte:not(.abierta) .galeria { display: flex; flex-wrap: wrap; gap: 5px; }
.compacta .reporte:not(.abierta) .galeria > * { width: 104px; height: 104px; flex: none; }
.compacta .reporte:not(.abierta) .galeria audio { display: none; }
.compacta .reporte:not(.abierta) .foto.archivo { font-size: .62rem; line-height: 1.2; padding: 4px; }
.compacta .reporte:not(.abierta) .foto:hover img { transform: scale(1.06); }
.compacta .reporte:not(.abierta) .solo-texto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 104px; height: 104px; border: 2px solid var(--bad); border-radius: 10px; background: var(--bad-bg); color: var(--bad); font: inherit; font-size: .78rem; font-weight: 600; cursor: zoom-in; }
.compacta .reporte:not(.abierta) .solo-texto b { font-size: 1.2rem; }
.compacta .reporte.abierta { flex: 1 1 100%; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.compacta .reporte.abierta .contraer { display: inline-flex; align-self: flex-end; min-height: 34px; margin-bottom: -4px; }
@media (max-width: 760px) {
  .reportes.compacta { gap: 6px; }
  .compacta .reporte:not(.abierta) { padding: 4px; }
  .compacta .reporte:not(.abierta) .galeria > *, .compacta .reporte:not(.abierta) .solo-texto { width: 84px; height: 84px; }
}

/* ---------- Fotos repetidas ---------- */
.foto.repetida { outline: 3px solid var(--coral); outline-offset: -3px; }
.rep-marca { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 6px; background: var(--coral); color: #1B1F24; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avisos-rep { display: flex; flex-direction: column; gap: 8px; }
.aviso-rep { display: flex; align-items: center; gap: 8px; background: var(--bad-bg); color: var(--text); border-radius: 10px; padding: 8px; font-size: .85rem; }
.aviso-rep img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.aviso-rep b { color: var(--bad); }
.rep-igual { font-weight: 700; color: var(--bad); }
.aviso-rep.neutro { background: var(--chip); }
.aviso-rep.neutro b, .aviso-rep.neutro .rep-igual { color: var(--text); }
.m-celda.m-rep { position: relative; box-shadow: inset 0 0 0 2px var(--coral); }
.m-celda.m-rep::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); border: 1.5px solid var(--card); }

/* ---------- Panel de control ---------- */
.migas { margin: 0 0 4px; font-size: .88rem; color: var(--muted); }
.migas a { color: var(--muted); }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.panel-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); margin: 0; }
.panel-item:hover { border-color: var(--accent); color: var(--text); }
.panel-item b { font-family: var(--display); font-size: 1.15rem; }
.panel-ico { font-size: 1.6rem; }
.disco { height: 14px; border-radius: 7px; background: var(--chip); overflow: hidden; margin: 6px 0 10px; }
.disco-uso { height: 100%; background: var(--accent); }
.disco-uso.alto { background: #D69A1E; }
.disco-uso.critico { background: var(--bad); }
.partes { list-style: none; padding: 0; margin: 0 0 6px; max-width: 520px; }
.partes li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.auto-sel { margin: 8px 0 14px; }
.auto-sel label { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text); font-size: .92rem; font-weight: 400; }
.tabla-alm { display: table; }
.tabla-alm .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-alm .fila-mes td { background: var(--head); border-top: 2px solid var(--line); }
.tabla-alm .sem { padding-left: 30px; }
.abrir-mes { background: none; border: 0; font: inherit; color: var(--text); cursor: pointer; padding: 0; }
.barra-accion { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--card); border-top: 1px solid var(--line); padding: 12px 0; margin-top: 8px; }
.barra-accion #sel-resumen { flex: 1 1 260px; font-size: .9rem; }
.foto.archivada img { filter: saturate(.85); }
.arch-marca { position: absolute; left: 4px; bottom: 4px; background: rgba(27, 31, 36, .72); color: #fff; font-size: .62rem; border-radius: 5px; padding: 1px 5px; }
@media (max-width: 760px) {
  .tabla-alm { display: block; overflow-x: auto; }
  .barra-accion .btn { flex: 1 1 100%; }
}

/* Tableros de la matriz */
.tableros { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.tableros a { display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--text); min-width: 150px; }
.tableros a span { font-size: .76rem; color: var(--muted); }
.tableros a b { font-family: var(--display); font-size: 1.05rem; }
.tableros a:hover { border-color: var(--accent); color: var(--text); }
.tableros a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tableros a.on span { color: var(--accent-text); opacity: .85; }
@media (max-width: 760px) {
  .tableros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 12px; padding: 0 12px; scrollbar-width: none; }
  .tableros a { min-width: 0; flex: 1 0 auto; padding: 8px 12px; }
  .tableros a span { display: none; }
}

/* Selector "Agrupar por" (Persona | Local): qué va en la primera columna de la matriz */
.tab-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 14px; }
.tab-fila .tableros { margin: 0; }
.agrupar { display: inline-flex; align-items: center; gap: 10px; }
.agrupar-etq { font-size: .88rem; color: var(--muted); white-space: nowrap; }
.agrupar-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--chip); }
.agrupar-seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.agrupar-seg a:hover { color: var(--text); }
.agrupar-seg a.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(27, 31, 36, .14); }
.agrupar-seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Resumen de la persona en el periodo: color propio (no es local ni alerta) */
.m-kpi { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 6px; background: var(--kpi-bg); color: var(--kpi-text); font-size: .74rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.m-kpi b { font-weight: 700; }
.m-kpis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.m-kpis .m-kpi { margin-top: 0; }
.m-kpi-foto { background: var(--ok-bg); color: var(--ok); }
.m-kpi-foto.cero { background: var(--bad-bg); color: var(--bad); font-weight: 700; }
.m-kpi-alerta { display: inline-flex; align-items: center; gap: 4px; background: var(--bad-bg); color: var(--bad); font-weight: 700; }
.m-kpi-alerta svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Usuarios de consulta: nota del reporte en modo lectura */
.nota-lectura { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }

/* ============================================================================
   v1.30 · Interfaz de teléfono (propuesta A + E)
   A: una línea arriba, barra de secciones abajo, filtros a pantalla completa, hojas que suben.
   E: matriz compacta con todos los días del periodo en el ancho, y fotos en cuadrícula de 3 columnas.
   En computador nada de esto se ve (salvo la página "Más", que también funciona ahí).
   ============================================================================ */
.top-titulo, .tabbar, .mv, .tm, .filtros-cerrar { display: none; }
.lb-reporte { position: absolute; left: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); color: #fff; }
.lb-reporte[hidden] { display: none; }

/* Página Más (celular y computador) */
.mas { max-width: 560px; margin: 0 auto; }
.mas-cuenta { display: flex; align-items: center; gap: 12px; }
.mas-cuenta > span:last-child { display: flex; flex-direction: column; }
.mas-av { width: 44px; height: 44px; border-radius: 50%; background: var(--local-bg); color: var(--local-text); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.mas-t { font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 6px 6px; }
.mas-lista { padding: 0; overflow: hidden; }
.mas-lista a, .mas-lista button { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; background: none; width: 100%; font: inherit; cursor: pointer; text-align: left; }
.mas-lista > :last-child, .mas-lista form:last-child button { border-bottom: 0; }
.mas-lista form { margin: 0; }
.mas-lista a:hover, .mas-lista button:hover { background: var(--chip); color: var(--text); }
.mas-lista .tag, .mas-lista .mini { margin-left: auto; }
.mas-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mas-version { text-align: center; margin-top: 18px; }

@media (max-width: 760px) {
  /* ---- Barra superior: una sola línea ---- */
  .top { flex-wrap: nowrap; min-height: 56px; padding: 0 8px 0 14px; padding-top: env(safe-area-inset-top); gap: 10px; }
  .top nav, .top .version, .top .salir, .marca span { display: none; }
  .marca svg { width: 28px; height: 28px; }
  .top-titulo { display: block; flex: 1; min-width: 0; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wa-estado { margin-left: 0; width: 44px; height: 44px; justify-content: center; }
  .alerta { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; text-align: left; font-size: .85rem; }
  .alerta a { margin-left: auto; font-weight: 700; }

  /* ---- Barra de secciones abajo ---- */
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: var(--muted); text-decoration: none; font-size: .75rem; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  .tabbar .tb-ico { width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a.on { color: var(--accent); }
  .tabbar a.on .tb-ico { background: var(--local-bg); }
  .tb-n { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--coral); color: var(--coral-text); font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; padding: 0 5px; }
  .tb-n[hidden] { display: none; }

  /* ---- Filtros: ocultos; la pestaña "Filtros" los abre a pantalla completa ---- */
  details.filtros { display: none; }
  body.ver-filtros { overflow: hidden; }
  body.ver-filtros details.filtros { display: block; position: fixed; inset: 0; z-index: 40; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0 16px; overflow-y: auto; background: var(--card); padding-top: env(safe-area-inset-top); }
  body.ver-filtros .filtros > summary { position: sticky; top: 0; z-index: 2; background: var(--card); min-height: 56px; margin: 0 -16px; padding: 0 64px 0 16px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.25rem; font-weight: 800; list-style: none; cursor: default; }
  body.ver-filtros .filtros > summary::-webkit-details-marker { display: none; }
  body.ver-filtros .filtros-cerrar { display: flex; align-items: center; justify-content: center; position: fixed; top: calc(6px + env(safe-area-inset-top)); right: 8px; z-index: 41; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--chip); color: var(--text); font-size: 1.1rem; cursor: pointer; }
  body.ver-filtros .grid-filtros { grid-template-columns: 1fr; gap: 14px; }
  body.ver-filtros .filtros .acciones { position: sticky; bottom: 0; background: var(--card); margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  body.ver-filtros .filtros .acciones .btn { flex: 1; }
  body.ver-filtros .filtros .acciones .mini { flex: 1 1 100%; order: 3; }

  /* ---- Encabezado de Reportes ---- */
  .vista-toggle, .barra-vista.bv-miniaturas, .rs-miniaturas { display: none; }
  .barra-vista { margin-bottom: 8px; }
  .tableros { display: flex; gap: 3px; margin: 0 0 10px; padding: 3px; background: var(--chip); border-radius: 12px; overflow: visible; }
  .tableros a { flex: 1; min-height: 40px; min-width: 0; align-items: center; justify-content: center; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
  .tableros a b { font-family: var(--body); font-size: .9rem; font-weight: 600; }
  .tableros a.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(27, 31, 36, .12); }
  .kpis .kpi-sec { display: none; }
  .kpis.kpis-matriz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resumen { margin-bottom: 8px; }
  .resumen .leyenda { display: none; }

  /* ---- Matriz (v1.34): calendario vertical. Los días bajan, cada columna es una persona en un local.
     La página no se desplaza: solo la matriz. Quedan fijas la barra superior, los controles, la fila de nombres,
     la columna de días y la barra inferior. ---- */
  .matriz-wrap, .nota-matriz, .pag-matriz .resumen .leyenda { display: none; }
  body.pag-matriz { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .pag-matriz .top { position: static; flex: none; min-height: 50px; }
  .pag-matriz .alerta { flex: none; min-height: 32px; padding: 3px 14px; }
  .pag-matriz .tabbar { padding: 4px 4px calc(6px + env(safe-area-inset-bottom)); }
  .pag-matriz main { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0 0 calc(62px + env(safe-area-inset-bottom)); box-sizing: border-box;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
  .pag-matriz .tab-fila { display: contents; }
  .pag-matriz .tableros { grid-area: 1 / 1 / 2 / -1; margin: 6px 10px 0; }
  .pag-matriz .agrupar { grid-area: 2 / 2 / 3 / 3; justify-self: end; gap: 6px; padding-right: 10px; }
  .pag-matriz .agrupar-etq { font-size: .72rem; }
  .pag-matriz .agrupar-seg a { min-height: 30px; padding: 0 9px; font-size: .78rem; }
  .pag-matriz .agrupar-seg svg { display: none; }
  .pag-matriz .tableros a { min-height: 34px; }
  .pag-matriz .barra-vista { grid-area: 2 / 1 / 3 / 2; margin: 0; padding: 2px 0 2px 6px; }
  .pag-matriz .periodo { flex: none; gap: 0; }
  .pag-matriz .periodo a { width: 36px; height: 38px; border: 0; background: none; }
  .pag-matriz .periodo b { font-size: 1rem; min-width: 0; white-space: nowrap; }
  .pag-matriz .resumen { grid-area: 3 / 1 / 4 / -1; margin: 0; padding: 0 12px 4px; flex-direction: row; align-items: center; justify-content: flex-start; min-width: 0; }
  .pag-matriz .kpis.kpis-matriz { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 12px; height: 20px; overflow: hidden; }
  .pag-matriz .kpis-matriz > * { flex-direction: row; align-items: baseline; gap: 3px; padding: 0; border: 0; background: none; font-size: .72rem; line-height: 20px; white-space: nowrap; }
  .pag-matriz .kpis-matriz b { font-size: .85rem; }
  .pag-matriz .aviso-box { grid-area: 4 / 1 / 5 / -1; margin: 0 10px 6px; padding: 6px 10px; font-size: .8rem; }
  .pag-matriz .vacio { grid-area: 5 / 1 / 6 / -1; }
  .mv { display: block; grid-area: 5 / 1 / 6 / -1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--card); border-top: 1px solid var(--line);
    --wd: 42px; --w: clamp(54px, calc((100vw - var(--wd)) / var(--n)), 84px); }
  .mv:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .mv-grid { display: grid; grid-template-columns: var(--wd) repeat(var(--n), var(--w)); width: max-content; min-width: 100%; }
  .mv-esq, .mv-h { position: sticky; top: 0; z-index: 2; background: var(--head); border-bottom: 1px solid var(--line); }
  .mv-esq { left: 0; z-index: 3; border-right: 1px solid var(--line); display: flex; align-items: flex-end; padding: 0 0 5px 8px; font-size: .62rem; line-height: 1.15; font-weight: 600; color: var(--muted); }
  .mv-esq span { max-width: 30px; }
  .mv-h { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; padding: 5px 1px 4px; min-width: 0; text-align: center; text-decoration: none; color: var(--text); -webkit-tap-highlight-color: transparent; }
  .mv-h:hover { color: var(--text); }
  .mv-g0 { border-left: 1px solid var(--line); }
  /* Franja de grupo: la dimensión de "Agrupar por". Persona: nombre + resumen. Local: código + nombre. */
  .mv-franja { --hb: 36px; }
  .mv-franja.mv-por-persona { --hb: 76px; }
  .mv-franja .mv-esq { grid-row: 1 / span 2; grid-column: 1; }
  .mv-franja .mv-h { top: var(--hb); }
  .mv-g { position: sticky; top: 0; z-index: 2; height: var(--hb); box-sizing: border-box; min-width: 0; padding: 3px; background: var(--chip); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; overflow: hidden; }
  .mv-franja .mv-g0 { border-left: 1.5px solid var(--muted); border-left-color: color-mix(in srgb, var(--muted) 45%, transparent); }
  .mv-g-nom { max-width: 100%; font-size: .72rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mv-g-nom.dos { display: flex; flex-direction: column; font-size: .64rem; }
  .mv-g-nom.dos span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mv-g-sub { max-width: 100%; font-size: .62rem; line-height: 1.1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mv .m-kpi { margin-top: 0; padding: 1px 4px; border-radius: 4px; font-size: .6rem; font-weight: 700; line-height: 1.2; text-align: center; }
  .mv .m-kpi b { font-weight: 700; }
  .mv .m-kpis { margin-top: 0; gap: 2px 3px; justify-content: center; flex-wrap: wrap; max-width: 100%; }
  .mv .m-kpi-alerta { gap: 2px; }
  .mv .m-kpi-alerta svg { width: 9px; height: 9px; }
  .mv .m-kpis.apilado { flex-direction: column; align-items: center; }
  .mv-loc { max-width: calc(100% - 4px); overflow: hidden; white-space: nowrap; font-size: .6rem; font-weight: 700; line-height: 14px; padding: 0 3px; border-radius: 4px; background: var(--local-bg); color: var(--local-text); }
  .mv-loc.sin { background: var(--chip); color: var(--muted); font-style: italic; }
  .mv-loc.malo { background: var(--bad-bg); color: var(--bad); }
  .mv-nom { display: flex; flex-direction: column; max-width: 100%; font-size: .64rem; line-height: 1.15; font-weight: 600; letter-spacing: -.2px; }
  .mv-nom span { display: block; max-width: 100%; min-height: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mv-pct { font-size: .66rem; font-weight: 700; line-height: 1.2; color: var(--muted); white-space: nowrap; }
  .mv-pct.ok { color: var(--accent); } .mv-pct.medio { color: var(--warn); } .mv-pct.bajo { color: var(--bad); }
  .mv-sinper .mv-nom, .mv-sinper .mv-pct { color: var(--muted); font-weight: 500; }
  .mv-dia { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 4px; height: 34px; padding-left: 8px; background: var(--card); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  .mv-dia span { width: 13px; font-size: .62rem; color: var(--muted); }
  .mv-dia b { font-size: .82rem; }
  .mv-c { display: flex; align-items: center; justify-content: center; height: 34px; background: var(--card); border-bottom: 1px solid var(--line); text-decoration: none; scroll-margin: 168px 10px 10px 52px; -webkit-tap-highlight-color: transparent; }
  .mv-dia.fin, .mv-c.fin { background: var(--fin); }
  .mv-dia.hoy, .mv-c.hoy { background: var(--hoy-bg); }
  .mv-dia.hoy span, .mv-dia.hoy b { color: var(--bad); font-weight: 700; }
  .mv .m-celda { width: 26px; height: 26px; font-size: .74rem; }
  .mv-c.sel .m-celda { outline: 3px solid var(--text); outline-offset: 2px; }
  .mv-pie { position: sticky; left: 0; width: 100vw; box-sizing: border-box; padding: 10px 12px 16px; }
  .mv-pie .mini { margin: 0; }
  .mv-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
  .mv-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
  .mv-leyenda i { font-style: normal; }
  .mv-leyenda .m-celda { width: 18px; height: 18px; font-size: .6rem; }
  .mv-leyenda .m-vacio { margin: 0 7px; background: var(--muted); opacity: .5; }

  /* Casilla tocada: el reporte queda en un panel fijo abajo; la matriz sigue visible y desplazable arriba */
  .pag-matriz #panel-fondo { display: none; }
  .pag-matriz #panel-dia { position: static; grid-area: 6 / 1 / 7 / -1; width: auto; height: auto; max-height: 46vh; max-height: 46dvh; min-height: 0; border-radius: 0; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(15, 20, 22, .1); z-index: auto; }
  .pag-matriz #panel-dia[hidden] { display: none; }
  .pag-matriz .pd-barra { padding: 4px 6px 2px 10px; border-bottom: 0; }
  .pag-matriz .pd-barra::before { display: none; }
  .pag-matriz .pd-barra button { height: 36px; }
  .pag-matriz .pd-cuerpo { padding: 0 12px 10px; }
  .pag-matriz .pd-titulo { font-size: 1.05rem; }
  .pag-matriz .pd-local { margin-top: 0; font-size: .85rem; }
  .pag-matriz .pd-fecha { margin: 0 0 6px; font-size: .85rem; }
  .pag-matriz .pd-rep { margin-top: 8px; padding-top: 8px; gap: 6px; }
  .pag-matriz .pd-rep .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pag-matriz .pd-pie { padding: 8px 12px; }
  .pag-matriz .pd-pie .btn { min-height: 40px; }

  /* ---- Tarjetas: fotos en cuadrícula por día ---- */
  .reportes.compacta { display: none; }
  .tm { display: block; }
  .tm-rapidos { display: flex; gap: 6px; overflow-x: auto; margin: 0 -12px; padding: 0 12px 8px; scrollbar-width: none; }
  .tm-rapidos::-webkit-scrollbar { display: none; }
  .tm-rapidos a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap; flex: none; }
  .tm-rapidos a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
  .tm-sep { width: 1px; background: var(--line); margin: 6px 2px; flex: none; }
  .tm-resumen { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); margin: 2px 0 4px; }
  .tm-resumen b { color: var(--text); }
  .tm-dia { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; font-size: 1.05rem; }
  .tm-dia .mini { margin-left: auto; font-family: var(--body); font-weight: 400; }
  .tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0 -12px; }
  .tm-t { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--chip); text-decoration: none; color: var(--text); }
  .tm-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tm-loc, .tm-n { position: absolute; background: rgba(27, 31, 36, .66); color: #fff; font-size: .66rem; font-weight: 700; border-radius: 6px; padding: 1px 6px; line-height: 1.5; }
  .tm-loc { left: 5px; bottom: 5px; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tm-loc.sin { font-style: italic; font-weight: 500; }
  .tm-n { left: 5px; top: 5px; }
  .tm-rep { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; background: var(--coral); color: #1B1F24; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .tm-sin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); text-align: center; padding: 4px; }
  .tm-sin svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tm-sin b { font-size: .74rem; }
  .tm-sin span { font-size: .66rem; }
  .tm-nov { box-shadow: inset 0 0 0 2px var(--accent); }
  .tm-nov img { opacity: .45; }
  .tm-nov-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; color: var(--local-text); }
  .tm-descargas { display: flex; gap: 8px; margin: 18px 0 4px; }
  .tm-descargas .btn { flex: 1; }
  .lb-reporte { left: 12px; top: calc(12px + env(safe-area-inset-top)); bottom: auto; background: rgba(255, 255, 255, .14); border-radius: 99px; padding: 10px 16px; text-decoration: none; font-weight: 600; }
}

/* ---------- Uso de la app (Usuarios) ---------- */
.uso-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-uso { display: table; }
.tabla-uso td { vertical-align: middle; white-space: nowrap; }
.tabla-uso .num { text-align: right; font-variant-numeric: tabular-nums; }
.uso-rol { display: block; }
.uso-inactivo td { opacity: .6; }
.uso-franja { display: inline-grid; grid-template-columns: repeat(30, 7px); gap: 2px; vertical-align: middle; }
.uso-franja i { width: 7px; height: 16px; border-radius: 2px; background: var(--line); }
.uso-franja i.on { background: var(--accent); }
.uso-franja i.sin-dato { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) {
  /* En el teléfono cada usuario es una ficha: nombre y última actividad, franja de 30 días y cifras */
  .tabla-uso thead { display: none; }
  .tabla-uso, .tabla-uso tbody { display: block; }
  .tabla-uso tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "u ult" "fr fr" "vis dias" "log log"; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tabla-uso td { border: 0; padding: 0; white-space: normal; }
  .tabla-uso .uso-u { grid-area: u; } .tabla-uso .uso-ult { grid-area: ult; text-align: right; font-weight: 600; }
  .tabla-uso .uso-fr { grid-area: fr; } .tabla-uso .uso-vis { grid-area: vis; text-align: left; }
  .tabla-uso .uso-dias { grid-area: dias; text-align: right; } .tabla-uso .uso-log { grid-area: log; font-size: .85rem; color: var(--muted); }
  .tabla-uso [data-etq]::before { content: attr(data-etq) ': '; color: var(--muted); font-size: .85rem; }
  .uso-franja { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); width: 100%; }
  .uso-franja i { width: auto; height: 20px; }
}

/* ---------- Filtros contraídos por defecto: botón destacado + resumen de lo activo ---------- */
.filtros > summary { list-style: none; flex-wrap: wrap; gap: 8px 10px; }
.filtros > summary::-webkit-details-marker { display: none; }
.fb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px 0 16px; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-weight: 700; box-shadow: 0 2px 6px rgba(15, 110, 110, .25); transition: background .15s ease; }
.filtros > summary:hover .fb-btn { background: var(--accent-hover); }
.fb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fb-chev { transition: transform .2s ease; }
.filtros[open] .fb-chev { transform: rotate(180deg); }
.fb-n.filtros-n { margin: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--coral); color: var(--coral-text); font-size: .78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { background: var(--local-bg); color: var(--local-text); border-radius: 8px; padding: 4px 10px; font-size: .84rem; font-weight: 600; }
.fb-chip span { font-weight: 400; opacity: .85; }
.fb-limpiar { font-size: .85rem; color: var(--muted); margin-left: 2px; }
.fb-nada { font-size: .85rem; font-weight: 400; color: var(--muted); }
/* Cerrados: solo el botón y el resumen, sin la tarjeta alrededor */
details.filtros:not([open]) { background: none; border: 0; box-shadow: none; padding: 0; }
details.filtros[open] > summary { padding-bottom: 6px; }
@media (max-width: 760px) {
  /* En el teléfono los filtros se abren a pantalla completa desde la barra inferior: el encabezado es solo el título */
  body.ver-filtros .filtros > summary .fb-btn { background: none; box-shadow: none; color: var(--text); padding: 0; min-height: 0; font: inherit; }
  body.ver-filtros .filtros > summary .fb-btn svg, body.ver-filtros .fb-chips, body.ver-filtros .fb-limpiar, body.ver-filtros .fb-nada { display: none; }
  body.ver-filtros .fb-n.filtros-n { margin-left: 8px; }
}
@media (min-width: 761px) {
  .tableros a b span.solo-pc { font-size: inherit; color: inherit; opacity: 1; }
}

/* ---------- Comparar fotos parecidas lado a lado ---------- */
#comparar { position: fixed; inset: 0; z-index: 55; background: #0C1012; color: #ECEAE4; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
#comparar[hidden] { display: none; }
.cmp-barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.cmp-marca { width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: #1B1F24; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.cmp-titulo { font-family: var(--display); font-size: 1.2rem; }
.cmp-n { color: #A7AFB3; font-size: .9rem; }
.cmp-barra button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.5rem; cursor: pointer; }
.cmp-barra button:hover { background: rgba(255, 255, 255, .26); }
.cmp-barra button[hidden] { display: none; }
.cmp-ant { margin-left: auto; }
.cmp-barra .cmp-cerrar { font-size: 1.1rem; margin-left: 6px; }
.cmp-ant[hidden] + .cmp-sig[hidden] + .cmp-cerrar { margin-left: auto; }
.cmp-fotos { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 4px 16px; }
.cmp-fotos figure { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.cmp-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cmp-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; outline: 3px solid transparent; }
.cmp-img.cmp-rep img { outline-color: var(--coral); outline-offset: 2px; }
.cmp-fotos figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; color: #D7D4CC; text-align: center; }
.cmp-fotos figcaption b { color: #fff; font-size: 1rem; }
.cmp-fotos figcaption a { color: #A6E3D9; margin-top: 2px; }
.cmp-etq { align-self: center; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 255, 255, .12); border-radius: 99px; padding: 2px 10px; margin-bottom: 2px; }
.cmp-etq.rep { background: var(--coral); color: #1B1F24; }
.cmp-pie { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: center; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); font-size: .85rem; color: #A7AFB3; }
.cmp-pie a { color: #A6E3D9; font-weight: 600; }
.cmp-pie a[hidden] { display: none; }
.btn-comparar { min-height: 32px; padding: 0 12px; font-size: .82rem; margin-right: 8px; }
.foto.repetida[data-comparar] { cursor: zoom-in; }
@media (max-width: 760px) {
  .cmp-fotos { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: 16px; overflow-y: auto; padding-bottom: 8px; }
  .cmp-fotos figure { min-height: auto; gap: 6px; }
  .cmp-img { flex: none; height: 32vh; height: 32dvh; }
  .cmp-barra { gap: 8px; padding: 10px 12px; }
  .cmp-titulo { font-size: 1rem; white-space: nowrap; }
  .cmp-n { font-size: .78rem; }
  .cmp-fotos figcaption { font-size: .85rem; }
  .cmp-ayuda { display: none; }
}

/* ---------- Maestros: probar un mensaje ---------- */
.probador { margin-top: 16px; }
.probador form { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.probador textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); resize: vertical; }
.probar-res { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--head); border: 1px solid var(--line); max-width: 720px; }
.probar-res[hidden] { display: none; }
.probar-res p { margin: 0 0 6px; }
.probar-res ul { margin: 0 0 8px; padding-left: 20px; }
.pr-titulo { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.pr-titulo.malo { color: var(--bad); }
.pr-sub { margin-top: 10px !important; font-weight: 600; }

/* ---------- Directorio de personas ---------- */
.dir-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.dir-cab h1 { margin: 0; }
.dir-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 14px; }
.dir-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dir-etq { font-size: .85rem; color: var(--muted); margin-right: 2px; }
.dir-chips a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 500; white-space: nowrap; }
.dir-chips a:hover { border-color: var(--accent); color: var(--text); }
.dir-chips a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.dir-buscar { display: flex; gap: 6px; margin-left: auto; }
.dir-buscar input { width: 230px; }
.dir-aviso { background: var(--head); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: .88rem; color: var(--muted); margin: 0 0 14px; }
.dir-aviso b { color: var(--text); }
.dir-tabla { padding: 0; overflow: hidden; }
.dir-fila { display: grid; grid-template-columns: 92px minmax(140px, 1.25fr) minmax(128px, .95fr) minmax(100px, .8fr) minmax(90px, .75fr) minmax(220px, 1.9fr) minmax(128px, .95fr); align-items: center; border-top: 1px solid var(--line); }
.dir-fila > * { padding: 10px 12px; min-width: 0; }
.dir-fila:first-child, .dir-encab + .dir-fila { border-top: 0; }
.dir-encab { background: var(--head); border-bottom: 1px solid var(--line); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.dir-encab a { color: var(--muted); text-decoration: none; }
.dir-encab a.on, .dir-encab a:hover { color: var(--text); }
.dir-foto { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dir-cara { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: var(--local-bg); color: var(--local-text); font: inherit; font-weight: 700; border: 0; padding: 0; cursor: zoom-in; }
.dir-cara:hover, .dir-cara:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dir-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-elegir { border: 0; background: none; padding: 2px 4px; font: inherit; font-size: .72rem; color: var(--accent); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.dir-persona { display: flex; flex-direction: column; }
.dir-persona b { overflow-wrap: anywhere; }
.dir-fila .tag { white-space: nowrap; display: inline-block; }
.dir-tel { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }
.dir-tel small { display: block; font-size: .72rem; line-height: 1.2; color: var(--muted); margin-bottom: 2px; }
.dir-tel-ant { color: var(--muted); }
.dir-ult { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-variant-numeric: tabular-nums; }
.dir-ult-etq { display: none; }
.dir-ant { background: var(--kpi-bg); color: var(--kpi-text); border-radius: 6px; padding: 1px 7px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.dir-v-propio { background: var(--kpi-bg); color: var(--kpi-text); font-weight: 600; }
.dir-v-externo { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.dir-grupos { list-style: none; margin: 0; padding: 10px 12px; font-size: .88rem; line-height: 1.55; }
.dir-grupos b { font-weight: 600; }
.dir-grupos span { color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
  .dir-cab { margin-bottom: 8px; }
  .dir-filtros { gap: 8px; }
  .dir-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; flex: 1 1 100%; }
  .dir-chips::-webkit-scrollbar { display: none; }
  .dir-etq { flex: none; width: 54px; }
  .dir-chips a { flex: none; }
  .dir-buscar { margin-left: 0; flex: 1 1 100%; order: -1; }
  .dir-buscar input { flex: 1; width: auto; min-width: 0; }
  .dir-encab { display: none; }
  /* Cada persona es una ficha: foto a la izquierda y los datos apilados a la derecha */
  .dir-fila { grid-template-columns: 64px auto minmax(0, 1fr); grid-template-areas: "foto persona persona" "foto fun vin" "foto tel tel" "foto grupos grupos" "foto ult ult"; align-items: start; padding: 10px 12px; gap: 3px 6px; }
  .dir-fila > * { padding: 0; }
  .dir-foto { grid-area: foto; }
  .dir-persona { grid-area: persona; }
  .dir-tel { grid-area: tel; flex-direction: row; flex-wrap: wrap; gap: 0 10px; }
  .dir-foto { padding-right: 4px; }
  .dir-fun { grid-area: fun; }
  .dir-vin { grid-area: vin; justify-self: start; }
  .dir-grupos { grid-area: grupos; padding: 0; font-size: .82rem; }
  .dir-ult { grid-area: ult; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .82rem; }
  .dir-ult-etq { display: inline; color: var(--muted); }
}

/* Ficha de la persona: foto ampliada y datos */
#ficha { position: fixed; inset: 0; z-index: 58; background: rgba(15, 20, 22, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
#ficha[hidden] { display: none; }
.fi-caja { position: relative; background: var(--card); color: var(--text); border-radius: 18px; width: min(640px, 100%); max-height: 100%; overflow-y: auto; display: flex; gap: 22px; padding: 24px; box-shadow: 0 20px 50px rgba(15, 20, 22, .3); }
.fi-cerrar { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--chip); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.fi-foto { width: 240px; height: 240px; flex: none; border-radius: 16px; overflow: hidden; background: var(--local-bg); color: var(--local-text); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 4.5rem; font-weight: 800; }
.fi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fi-datos { flex: 1; min-width: 0; padding-right: 30px; }
.fi-datos h2 { margin: 0 0 4px; font-size: 1.4rem; overflow-wrap: anywhere; }
.fi-sub { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.fi-datos dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; }
.fi-datos dt { color: var(--muted); font-size: .88rem; }
.fi-datos dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fi-datos h3 { font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.fi-grupos { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.fi-grupos li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.fi-grupos b { font-weight: 600; }
.fi-grupos span { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  #ficha { padding: 0; align-items: flex-end; }
  .fi-caja { flex-direction: column; align-items: center; gap: 14px; width: 100%; border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); max-height: 92vh; }
  .fi-foto { width: 200px; height: 200px; }
  .fi-datos { width: 100%; padding-right: 0; }
  .fi-datos h2 { text-align: center; }
  .fi-sub { justify-content: center; }
  .fi-grupos li { flex-direction: column; gap: 0; }
}

/* Elegir y encuadrar el retrato */
#retrato { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 22, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
#retrato[hidden] { display: none; }
.rt-caja { background: var(--card); color: var(--text); border-radius: 16px; width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 20, 22, .3); }
.rt-barra { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px 18px; }
.rt-barra h2 { margin: 0; flex: 1; font-size: 1.2rem; }
.rt-cerrar { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--chip); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.rt-paso { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 16px; min-height: 0; overflow-y: auto; }
.rt-paso[hidden] { display: none; }
.rt-ayuda { margin: 0; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.rt-foto { border: 0; padding: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--chip); cursor: pointer; }
.rt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-foto:hover, .rt-foto:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.rt-pie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.rt-pie .peligro-txt { color: var(--bad); }
.rt-lienzo { display: flex; justify-content: center; background: var(--bg); border-radius: 12px; padding: 8px; }
.rt-marco { position: relative; display: inline-block; line-height: 0; cursor: crosshair; touch-action: none; overflow: hidden; border-radius: 6px; }
.rt-marco img { max-width: 100%; max-height: 52vh; display: block; user-select: none; -webkit-user-drag: none; }
.rt-circulo { position: absolute; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2000px rgba(15, 20, 22, .55); pointer-events: none; }
.rt-tam { flex-direction: row; align-items: center; gap: 10px; color: var(--text); }
.rt-tam input { flex: 1; min-height: 0; }
.rt-error { margin: 0; padding: 0 18px 14px; }
@media (max-width: 760px) {
  #retrato { padding: 0; align-items: stretch; }
  .rt-caja { border-radius: 0; width: 100%; padding-top: env(safe-area-inset-top); }
  .rt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rt-pie .btn { flex: 1; }
}

/* Directorio: cuentas con reportes sin persona (solo administradores) y diálogo para asignarlas o crear la persona */
.dir-cuentas { margin: 0 0 16px; padding: 4px 14px; border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line)); border-left: 4px solid var(--warn); border-radius: 14px; background: color-mix(in srgb, var(--warn-bg) 42%, var(--bg)); }
.dir-cuentas[open] { padding-bottom: 12px; }
.dir-cuentas > summary { cursor: pointer; font-size: .95rem; min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none; }
.dir-cuentas > summary::-webkit-details-marker { display: none; }
.dc-ver { margin-left: auto; white-space: nowrap; font-weight: 600; font-size: .85rem; color: var(--accent); }
.dc-ver::after { content: 'Mostrar ▾'; }
.dir-cuentas[open] .dc-ver::after { content: 'Ocultar ▴'; }
.dir-cuentas > .mini { margin: 0 0 10px; }
.dc-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dc-buscar { flex: 1; max-width: 420px; }
.dc-lista { list-style: none; margin: 0; padding: 0 8px 0 0; display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.dc-fila { display: grid; grid-template-columns: 44px minmax(170px, 1.6fr) minmax(110px, .8fr) 100px 150px auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--warn) 18%, var(--line)); font-size: .88rem; }
.dc-fila[hidden] { display: none; }
.dc-encab { border-top: 0; padding: 4px 8px 6px 0; grid-template-columns: 44px minmax(170px, 1.6fr) minmax(110px, .8fr) 100px 150px 296px; }
.dc-ord-etq { font-size: 0; }
.dc-encab button { justify-self: start; border: 0; background: none; padding: 6px 0; min-height: 32px; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.dc-encab button:hover, .dc-encab button.on { color: var(--text); }
.dc-encab button.on[data-dir=desc]::after { content: ' ↓'; }
.dc-encab button.on[data-dir=asc]::after { content: ' ↑'; }
.dc-img { width: 44px; height: 44px; border-radius: 10px; background: var(--chip); overflow: hidden; }
.dc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dc-quien span { color: var(--muted); font-variant-numeric: tabular-nums; }
.dc-quien b, .dc-quien .mini { overflow-wrap: anywhere; }
.dc-f, .dc-n { font-variant-numeric: tabular-nums; }
.dc-f .dc-etq { display: none; }
.dc-n .dc-etq { color: var(--muted); }
.dc-acc { display: flex; gap: 6px; justify-content: flex-end; }
.dc-acc .btn { min-height: 40px; white-space: nowrap; }
.dc-nada { margin: 8px 0 0; }
#cuenta { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 22, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
#cuenta[hidden] { display: none; }
.ct-caja { background: var(--card); color: var(--text); border-radius: 16px; width: min(560px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15, 20, 22, .3); }
.ct-cerrar { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--chip); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.ct-cuenta { margin: 0 18px 12px; padding: 8px 12px; background: var(--head); border-radius: 10px; font-size: .88rem; overflow-wrap: anywhere; }
.ct-paso, .ct-modo { display: flex; flex-direction: column; gap: 12px; }
.ct-paso { padding: 0 18px 16px; }
.ct-paso[hidden], .ct-modo[hidden], .ct-tel[hidden], .ct-avisos[hidden] { display: none; }
.ct-caja .ct-queda input { width: 20px; }
.ct-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-caja label small { font-weight: 400; font-size: .78rem; }
.ct-caja input, .ct-caja select { width: 100%; min-height: 44px; }
.ct-resumen { margin: 0; font-size: 1rem; font-weight: 600; }
.ct-avisos { margin: 0; }
.ct-error { margin: 0; padding: 0 18px 14px; }
.fi-num { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-height: 28px; }
.fi-num + .fi-num { margin-top: 6px; }
.fi-datos dd .fi-num small { display: inline; font-weight: 400; font-size: .8rem; color: var(--muted); }
.fi-quitar { border: 1px solid var(--line); background: var(--card); color: var(--bad); border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 600; padding: 4px 10px; min-height: 32px; cursor: pointer; }
.fi-error { margin: 8px 0 0; }
.aviso-fuerte { background: var(--bad-bg); color: var(--text); border-left: 4px solid var(--bad); padding: 10px 14px; border-radius: 10px; }
@media (max-width: 760px) {
  .dc-fila { grid-template-columns: 44px 1fr 1fr; gap: 6px 12px; }
  .dc-quien { grid-column: 2 / -1; }
  .dc-n { grid-column: 1 / -1; }
  .dc-f { grid-column: span 3; color: var(--muted); }
  .dc-f .dc-etq { display: inline; }
  .dc-f + .dc-f { margin-top: -4px; }
  .dc-acc { grid-column: 1 / -1; justify-content: stretch; }
  .dc-acc .btn { flex: 1; min-height: 44px; padding-left: 8px; padding-right: 8px; }
  .dc-encab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 8px; }
  .dc-encab > span:last-child { display: none; }
  .dc-ord-etq { font-size: .8rem; color: var(--muted); margin-right: 2px; }
  .dc-encab button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; min-height: 40px; text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 500; color: var(--text); }
  .dc-encab button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
  .dc-buscar { max-width: none; }
  .dc-lista { max-height: 62dvh; padding-right: 4px; }
  #cuenta { padding: 0; align-items: flex-end; }
  .ct-caja { width: 100%; border-radius: 20px 20px 0 0; max-height: 94dvh; padding-bottom: env(safe-area-inset-bottom); }
  .ct-dos { grid-template-columns: 1fr; }
  .ct-caja .rt-pie .btn { flex: 1; }
  .fi-quitar { min-height: 40px; }
}

/* Ficha (administradores): cuentas de WhatsApp detrás de la persona, desvincular y unir códigos */
.fi-caja { flex-wrap: wrap; }
.fi-admin { flex: 1 1 100%; min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.fi-admin[hidden] { display: none; }
.fi-admin h3 { font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.fi-ojo { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: .88rem; }
.fi-cuenta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.fi-cuentas > .fi-cuenta:first-of-type { border-top: 0; }
.fi-c-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.fi-c-quien > span { color: var(--muted); font-variant-numeric: tabular-nums; }
.fi-manual { color: var(--warn); font-weight: 600; }
.fi-c-fotos { display: flex; gap: 4px; }
.fi-c-fotos img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--chip); }
.btn.fi-desv { min-height: 40px; color: var(--bad); }
.fi-acc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dir-ncuentas { align-self: flex-start; margin-top: 3px; cursor: default; }
.ct-queda { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ct-queda legend { font-size: .85rem; font-weight: 500; color: var(--muted); padding: 0 4px; }
.ct-queda input[type=radio] { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); flex: none; }
.ct-queda label { min-height: 36px; }
.ct-izq { display: flex; gap: 8px; }
.ct-volver[hidden] { display: none; }
@media (max-width: 760px) {
  .fi-admin { width: 100%; }
  .fi-cuenta { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .btn.fi-desv { min-height: 44px; }
  .fi-unir { min-height: 44px; }
  .ct-queda label { min-height: 44px; }
}
#ficha[data-admin] .fi-caja { width: min(760px, 100%); }
@media (max-width: 760px) { .fi-caja { flex-wrap: nowrap; } #ficha[data-admin] .fi-caja { width: 100%; } }

/* Separar los reportes de una cuenta que son de dos personas */
.fi-c-acc { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fi-c-acc .btn { min-height: 40px; white-space: nowrap; }
.fi-solonombre { color: var(--warn); font-size: .8rem; }
#separar { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 22, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
#separar[hidden] { display: none; }
.sp-caja { background: var(--card); color: var(--text); border-radius: 16px; width: min(820px, 100%); height: min(860px, 100%); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 20, 22, .3); }
.sp-caja .rt-barra h2 { font-size: 1.05rem; overflow-wrap: anywhere; }
.sp-paso { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 14px; min-height: 0; }
.sp-paso-1 { flex: 1; }
.sp-paso[hidden], .sp-tel[hidden], .sp-avisos[hidden] { display: none; }
.sp-ayuda { margin: 0; }
.sp-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 12px; }
.sp-dia + .sp-dia { border-top: 1px solid var(--line); }
.sp-dia-cab { position: sticky; top: 0; z-index: 1; background: var(--head); padding: 8px 12px; min-height: 44px; }
.sp-rep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.sp-rep:has(input:checked) { background: color-mix(in srgb, var(--warn-bg) 55%, var(--card)); }
.sp-rep label { align-items: flex-start; min-height: 44px; }
.sp-lista input[type=checkbox] { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.sp-rep-txt { min-width: 0; overflow-wrap: anywhere; }
.sp-texto { display: block; }
.sp-fotos { display: flex; gap: 4px; align-items: center; }
.sp-fotos img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--chip); display: block; }
.sp-pie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px) auto; gap: 10px; align-items: end; }
.sp-cuenta { font-weight: 600; font-size: .9rem; align-self: center; }
.sp-pie input { width: 100%; min-height: 44px; }
.sp-tel { grid-column: 2; grid-row: 2; }
.sp-pie .btn { min-height: 44px; }
.sp-error { margin: 0; padding: 0 18px 14px; }
@media (max-width: 760px) {
  .fi-c-acc { justify-content: stretch; }
  .fi-c-acc .btn { flex: 1; min-height: 44px; }
  #separar { padding: 0; }
  .sp-caja { width: 100%; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .sp-rep { grid-template-columns: minmax(0, 1fr); }
  .sp-fotos { padding-left: 30px; overflow-x: auto; }
  .sp-pie { grid-template-columns: 1fr; }
  .sp-tel { grid-column: 1; grid-row: auto; }
}

/* Inicio: pendientes, novedades desde la visita anterior y un resumen por tablero */
.ini-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ini-cab h1 { margin: 0; }
.ini-desde { margin-left: auto; }
.ini-dos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ini-pend, .ini-nuevo { padding: 0; overflow: hidden; }
.ini-sec-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; }
.ini-sec-cab h2 { margin: 0; font-size: 1.1rem; }
.ini-item { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-top: 1px solid var(--line); }
.ini-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--chip); color: var(--text); }
.ini-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ini-ico.malo { background: var(--bad-bg); color: var(--bad); }
.ini-ico.aviso { background: var(--warn-bg); color: var(--warn); }
.ini-ico.info { background: var(--local-bg); color: var(--local-text); }
.ini-txt { flex: 1; min-width: 0; }
.ini-txt .mini { display: block; overflow-wrap: anywhere; }
.ini-admin { font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--chip); border-radius: 5px; padding: 1px 6px; vertical-align: 2px; }
.ini-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ini-acc .btn { min-height: 36px; padding: 0 14px; white-space: nowrap; font-size: .85rem; }
.ini-nada { margin: 0; padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.ini-bien { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.ini-nuevo dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ini-nuevo dl > div { display: flex; flex-direction: column-reverse; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.ini-nuevo dl > div:nth-child(odd) { border-right: 1px solid var(--line); }
.ini-nuevo dd { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ini-nuevo dt { color: var(--muted); font-size: .82rem; }
.ini-t { font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.ini-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ini-tab { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ini-tab-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ini-tab-cab h3 { margin: 0; font-size: 1.2rem; }
.ini-nuevos { margin-left: auto; font-size: .85rem; font-weight: 600; color: var(--local-text); }
.ini-cumpl { display: flex; align-items: center; gap: 12px; }
.ini-cumpl > b { font-family: var(--display); font-size: 2.1rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ini-cumpl > div { flex: 1; min-width: 0; }
.ini-barra { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; margin-bottom: 3px; }
.ini-barra i { display: block; height: 100%; border-radius: 4px; background: var(--warn); }
.ini-cumpl.ok > b { color: var(--ok); } .ini-cumpl.ok .ini-barra i { background: var(--ok); }
.ini-cumpl.medio > b { color: var(--warn); }
.ini-cumpl.bajo > b { color: var(--bad); } .ini-cumpl.bajo .ini-barra i { background: var(--bad); }
.ini-sinhoy { margin: 0; }
.ini-fotos { display: flex; gap: 5px; overflow: hidden; }
.ini-fotos img { width: 62px; height: 62px; border-radius: 9px; object-fit: cover; background: var(--chip); flex: none; }
.ini-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ini-tab .btn { margin-top: auto; justify-content: center; text-align: center; }
.ini-otras { margin-top: 14px; }
.ini-otras > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent); }
.ini-otras .ini-tabs { margin-top: 6px; }
.ini-pie { margin-top: 18px; }
@media (max-width: 760px) {
  .ini-desde { margin-left: 0; }
  .ini-dos, .ini-tabs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ini-item { flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .ini-txt { flex-basis: calc(100% - 52px); }
  .ini-acc { flex-basis: 100%; justify-content: stretch; padding-left: 50px; }
  .ini-acc .btn { flex: 1; min-height: 44px; }
  .ini-fotos img { width: 56px; height: 56px; }
}

/* Con "Inicio" en la barra superior, en pantallas medianas el estado de WhatsApp queda solo como punto (el texto sigue en el aviso y al pasar el cursor) */
@media (max-width: 1420px) and (min-width: 761px) {
  .top nav { overflow-x: auto; scrollbar-width: none; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { padding: 0 10px; }
  .wa-txt { display: none; }
  .wa-estado .dot { margin-right: 0; width: 11px; height: 11px; }
}
@media (max-width: 760px) { .ini-desde a { min-height: 40px; } }
@media (max-width: 1180px) and (min-width: 761px) {
  .top nav a { padding: 0 8px; font-size: .92rem; }
  .version-fecha, .mini-usuario { display: none; }
}

/* ---- Respaldo externo ---- */
.resp-titular { margin: 0 0 12px; }
.resp-permiso { margin: 0 0 12px; }
.resp-permiso code { background: var(--chip); padding: 2px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
.resp-pasos { padding-left: 20px; display: grid; gap: 8px; }
.resp-pasos code, .tarjeta .ayuda code { background: var(--chip); padding: 2px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
.resp-acc { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.resp-curso { display: flex; align-items: center; gap: 12px; background: var(--chip); border-radius: 12px; padding: 12px 14px; margin: 14px 0 8px; }
.resp-curso[hidden], .resp-acc[hidden] { display: none; }
.resp-curso > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.resp-giro { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: resp-giro 1s linear infinite; }
@keyframes resp-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .resp-giro { animation: none; } }
.resp-prueba { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.resp-prueba .bien { color: var(--ok); }
.resp-prueba .mal { color: var(--bad); font-weight: 600; }
.resp-hist td:first-child, .resp-hist .tag { white-space: nowrap; }
.resp-hist td:last-child { min-width: 240px; }
.resp-hist details { margin-top: 4px; word-break: break-word; }

/* ---- Verificación en dos pasos ---- */
.login-paso { margin: 0 0 4px; }
.dp-pasos { padding-left: 20px; display: grid; gap: 18px; max-width: 640px; }
.dp-qr { margin: 12px 0; padding: 12px; background: #fff; border-radius: 12px; display: inline-block; line-height: 0; border: 1px solid var(--line); }
.dp-clave { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .06em; background: var(--chip); padding: 10px 12px; border-radius: 10px; word-break: break-all; user-select: all; }
.dp-form { display: grid; gap: 12px; max-width: 320px; margin-top: 10px; }
.dp-form label { display: grid; gap: 4px; font-weight: 600; }
.dp-codigos { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 8px 20px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .05em; }
.dp-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.dp-mas { margin-top: 8px; }
.dp-mas form { margin-top: 10px; }
.btn-mini { min-height: 30px; padding: 0 10px; font-size: .8rem; margin-top: 4px; }
@media print { header, nav, .tabbar, .resp-acc, .migas, .btn, .aviso-wa { display: none !important; } }

/* ---- Registro de cambios ---- */
.reg-filtros { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.reg-filtros label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.reg-filtros .reg-q { flex: 1 1 200px; }
.reg-filtros .reg-q input { width: 100%; }
.reg-botones { display: flex; gap: 8px; }
.reg-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 10px; flex-wrap: wrap; }
.reg-lista { padding-top: 4px; }
.reg-dia { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.reg-dia::first-letter { text-transform: uppercase; }
.reg-fila { display: grid; grid-template-columns: 48px minmax(70px, 110px) max-content minmax(0, 1fr); gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: start; }
.reg-fila:last-child { border-bottom: 0; }
.reg-hora { font-variant-numeric: tabular-nums; color: var(--muted); }
.reg-quien { font-weight: 600; overflow-wrap: anywhere; }
.reg-quien a { color: inherit; text-decoration: none; }
.reg-quien a:hover { text-decoration: underline; }
.reg-area { justify-self: start; white-space: nowrap; }
.reg-que { overflow-wrap: anywhere; }
.reg-que details { margin-top: 4px; }
.reg-ip { display: block; }
.reg-ad { border-collapse: collapse; margin-top: 6px; font-size: .85rem; }
.reg-ad th, .reg-ad td { text-align: left; padding: 3px 12px 3px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.reg-ad th { color: var(--muted); font-weight: 600; }
.reg-pag { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 16px 0; }
@media (max-width: 640px) {
  .reg-fila { grid-template-columns: 44px minmax(0, 1fr) max-content; }
  .reg-que { grid-column: 1 / -1; }
}
#resp-barra { width: 100%; height: 8px; margin-top: 6px; accent-color: var(--accent); }
#resp-barra[hidden] { display: none; }

/* Matriz: descarga a Excel */
.mv-excel { display: flex; margin: 0 0 12px; }
/* Botón verde de Excel en la fila de indicadores, alineado al borde derecho de la matriz (en celular va al pie: .mv-excel) */
.kpis > a.btn-excel { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 14px; min-height: 40px; background: var(--card); border: 1.5px solid #1D6F42; border-radius: 10px;
  color: #14522F; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 2px rgba(27, 31, 36, .06); }
.kpis > a.btn-excel:hover { background: #E7F3EC; border-color: #14522F; color: #14522F; }
.kpis > a.btn-excel svg { flex: none; }
@media (min-width: 761px) { .pag-matriz .kpis-matriz { flex: 1 1 100%; align-items: center; } }
@media (max-width: 760px) { .kpis > a.btn-excel { display: none; } }

/* ---- Alertas de fotos repetidas ---- */
.al-form { display: grid; gap: 12px; margin: 10px 0 16px; }
.al-form .check { align-items: flex-start; }
.al-form .check .mini { display: block; }
.al-dispositivo { border-top: 1px solid var(--line); padding-top: 12px; }
.al-dispositivo [data-estado] { display: block; margin-top: 2px; }
.al-correo input[type=email] { min-width: 200px; }
.ini-push { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 16px; border-left: 4px solid var(--accent); }
.ini-push[hidden] { display: none; }
.ini-push .mini { display: block; margin-top: 2px; }
.ini-push-acc { display: flex; gap: 8px; }
.btn[hidden] { display: none; }

/* Renovar el permiso de Google del respaldo */
.renovar-form { max-width: 560px; }
.renovar-form .renovar-chk { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.btn-renovar { margin-left: 6px; padding: 4px 12px; font-size: .9em; }



/* ---------- Fotos repetidas (v1.56): veredicto por foto ---------- */
.ver-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.vf-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: .82rem; white-space: nowrap; background: var(--warn-bg); color: var(--warn); }
.vf-chip.vf-duplicada { background: var(--bad-bg); color: var(--bad); }
.vf-chip.vf-ok { background: var(--ok-bg); color: var(--ok); }
.vf-botones { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.vf-btn { font: inherit; font-size: .85rem; font-weight: 700; border-radius: 9px; padding: 5px 11px; cursor: pointer; background: var(--card); min-height: 34px; }
.vf-btn.vf-dup { color: var(--bad); border: 1.5px solid #E8826B; }
.vf-btn.vf-ok { color: var(--ok); border: 1.5px solid #5DBB8A; }
.vf-btn.vf-guardar { color: var(--accent-text); background: var(--accent); border: 1.5px solid var(--accent); }
.vf-btn:hover { filter: brightness(.96); }
.vf-quien, .vf-motivo { font-size: .8rem; color: var(--muted); }
.vf-motivo { font-style: italic; flex-basis: 100%; }
.vf-links { display: inline-flex; gap: 10px; }
.vf-link { font: inherit; font-size: .8rem; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }
.vf-form { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; flex-basis: 100%; }
.vf-input { flex: 1; min-width: 180px; font: inherit; font-size: .88rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.vf-error { color: var(--bad); font-size: .8rem; flex-basis: 100%; }
.ver-foto.vf-guardando { opacity: .55; pointer-events: none; }
/* En la vista Comparar (fondo oscuro) */
.ver-foto.oscuro { justify-content: center; margin-top: 8px; }
.ver-foto.oscuro .vf-btn { font-size: .95rem; padding: 8px 15px; min-height: 42px; border: 0; }
.ver-foto.oscuro .vf-btn.vf-dup { background: #A83418; color: #fff; }
.ver-foto.oscuro .vf-btn.vf-ok { background: #1E8A6E; color: #fff; }
.ver-foto.oscuro .vf-quien, .ver-foto.oscuro .vf-motivo { color: #C9CDCF; }
.ver-foto.oscuro .vf-link { color: #A6E3D9; }
.ver-foto.oscuro .vf-input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; }
.ver-foto.oscuro .vf-chip.vf-pendiente { background: #FFF1D1; color: #7A4E00; }
.cmp-nota { display: block; margin-top: 8px; color: #C9CDCF; font-size: .85rem; }
.cmp-pie .cmp-sigpend { font: inherit; font-weight: 700; color: #1B1F24; background: #A6E3D9; border: 0; border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.cmp-pie .cmp-sigpend[hidden] { display: none; }

/* Página Fotos repetidas */
.fr-encab { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.fr-encab h1 { margin: 0; }
.fr-sub { margin: 2px 0 0; }
.fr-acc { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fr-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fr-kpi { border-radius: 12px; padding: 7px 13px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; }
.fr-kpi b { font-family: var(--display); font-size: 1.25rem; margin-right: 3px; }
.fr-kpi.on { border-color: currentColor; }
.fr-pendiente { background: var(--warn-bg); color: var(--warn); }
.fr-confirmada { background: var(--bad-bg); color: var(--bad); }
.fr-ok { background: var(--ok-bg); color: var(--ok); }
.fr-sin { background: var(--chip); color: var(--muted); }
.fr-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 8px; }
.fr-filtros .campo { display: grid; gap: 3px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.fr-filtros .campo input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); }
.fr-lugar { align-self: center; }
.fr-limpiar { align-self: center; font-size: .85rem; }
.fr-conteo { margin: 4px 2px 8px; }
.fr-tabla { padding: 4px 0; }
.fr-fila { display: grid; grid-template-columns: 190px 128px 128px minmax(170px, 1.2fr) minmax(120px, .8fr) minmax(230px, 1.3fr); gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fr-fila:last-child { border-bottom: 0; }
.fr-cab { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: 6px; padding-bottom: 6px; }
.fr-chip { display: inline-flex; border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: .82rem; }
.fr-foto { display: grid; gap: 3px; }
.fr-foto img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.fr-cuest img { outline: 3px solid var(--coral); outline-offset: -3px; }
.fr-datos { display: grid; gap: 2px; font-size: .9rem; }
.fr-otra { display: inline-block; background: var(--kpi-bg); color: var(--kpi-text); border-radius: 6px; padding: 0 6px; font-size: .72rem; font-weight: 700; }
.tag-local { display: inline-block; background: var(--local-bg); color: var(--local-text); border-radius: 6px; padding: 0 6px; font-weight: 700; font-size: .8rem; }
.fr-tipo { font-size: .9rem; }
.fr-comparar { font-size: .82rem; font-weight: 700; }
.fr-gris { background: var(--fin); color: var(--muted); }
.fr-gris img { opacity: .8; }
.fr-dialogo { border: 0; border-radius: 16px; padding: 18px 20px; width: min(540px, calc(100vw - 32px)); background: var(--card); color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.fr-dialogo::backdrop { background: rgba(16, 20, 21, .55); }
.fr-dialogo h2 { margin: 0 0 4px; }
.fr-dialogo form { display: grid; gap: 10px; }
.fr-dialogo .campo { display: grid; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.fr-dialogo input[type=text], .fr-dialogo textarea { font: inherit; font-weight: 400; color: var(--text); padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.fr-dest { display: grid; gap: 2px; }
.fr-dest .check { padding: 5px 0; border-bottom: 1px solid var(--line); }
.fr-sin-correo { opacity: .55; }
.fr-dialogo-acc { display: flex; gap: 8px; justify-content: flex-end; }
.u-permiso { display: block; margin-top: 4px; }
/* ---------- Informes · resumen analítico de fotos repetidas (v1.57) ---------- */
:root { --hm0: #F3F1EC; --hm0-t: #8A9096; --hm1: #FCEBD0; --hm1-t: #7A4E00; --hm2: #F9C98E; --hm2-t: #5A3A00; --hm3: #F08A63; --hm3-t: #3A1309; --hm4: #A83418; --hm4-t: #FFFFFF;
  --hm-raya: #E8E4DB; --an-c: #A83418; --an-p: #E9B949; --an-r: #EEE9DF; }
@media (prefers-color-scheme: dark) {
  :root { --hm0: #1F282A; --hm0-t: #7F888C; --hm1: #3A2E10; --hm1-t: #F4C66A; --hm2: #5C4210; --hm2-t: #FBD893; --hm3: #B04A2C; --hm3-t: #FFE9E3; --hm4: #F06A48; --hm4-t: #1B1F24;
    --hm-raya: #263033; --an-c: #FF8A6F; --an-p: #E0B04A; --an-r: #2A3437; }
}
.migas { font-size: .82rem; color: var(--muted); margin: 0 0 2px; }
.fr-titulo { margin: 22px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.an-fun { display: inline-block; background: var(--chip); color: var(--muted); border-radius: 6px; padding: 0 6px; font: 600 .72rem var(--body); vertical-align: 1px; }
.an-fun-h1 { font-size: .85rem; vertical-align: 5px; }
.an-ventana { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; background: var(--kpi-bg); color: var(--kpi-text); border-radius: 12px; padding: 9px 14px; margin: 0 0 10px; }
.an-ventana > div { display: grid; gap: 1px; flex: 1 1 380px; }
.an-ventana .mini { color: inherit; opacity: .9; }
.an-ventana-ico { font-size: 1.3rem; }
.an-ventana-aviso { font-size: .82rem; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 2px 8px; justify-self: start; margin-top: 3px; }
.an-rapidos { display: flex; gap: 4px; align-items: center; font-size: .82rem; font-weight: 700; flex-wrap: wrap; }
.an-rapidos a { text-decoration: none; padding: 3px 9px; border-radius: 8px; color: inherit; border: 1px solid currentColor; opacity: .85; }
.an-rapidos a.on { background: var(--card); opacity: 1; }
.an-excluidos { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 7px 12px; font-size: .88rem; margin: 0 0 10px; }
.an-excluidos a { font-weight: 700; }
.an-vacio { margin-bottom: 10px; }
.an-kpis { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.an-kpi { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; border: 1px solid var(--line); min-width: 0; }
.an-t { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.an-n { font: 700 1.85rem/1.15 var(--display); margin: 4px 0 4px; }
.an-n small { font: 600 .9rem var(--body); color: var(--muted); margin-left: 6px; }
.an-n .c, .txt-c { color: var(--an-c); } .an-n .p, .txt-p { color: var(--warn); } .an-n .a { font-size: 1.15rem; color: var(--muted); }
.an-kpi.malo .an-n { color: var(--an-c); }
.an-barra { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--an-r); margin: 4px 0; }
.an-barra i { display: block; height: 100%; } .an-barra i.c { background: var(--an-c); } .an-barra i.p { background: var(--an-p); } .an-barra i.r { background: var(--accent); }
.an-rango .an-barra { height: 12px; }
.an-esc { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin: -2px 0 4px; }
.an-ley { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: .78rem; color: var(--muted); margin: 6px 0; }
.an-ley i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid var(--line); }
.an-ley i.c { background: var(--an-c); } .an-ley i.p { background: var(--an-p); } .an-ley i.r0 { background: var(--an-r); }
.an-ley-barra { margin: 2px 2px 8px; }
.an-tabs { display: none; }
.an-top { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 12px; align-items: stretch; }
.an-top .an-mapa { grid-column: 1 / -1; }
.an-card { display: flex; flex-direction: column; margin: 0; }
.an-card h2, .an-mapa h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.an-card h2 .mini { margin-left: auto; font: 500 .75rem var(--body); }
.an-fila { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.an-fila:last-of-type { border-bottom: 0; }
.an-pos { font: 700 .95rem var(--display); color: var(--muted); grid-row: span 3; align-self: start; }
.an-nom { font-weight: 700; color: var(--accent); }
.an-fila .an-barra { grid-column: 2 / 4; margin: 2px 0; }
.an-pct { text-align: right; font: 700 1.05rem var(--display); grid-row: span 1; }
.an-pct small { display: block; font: 600 .7rem var(--body); color: var(--muted); white-space: nowrap; }
.an-det { grid-column: 2 / 4; font-size: .78rem; color: var(--muted); }
.an-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-size: .9rem; text-decoration: none; }
.an-patron { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.an-patron:last-of-type { border-bottom: 0; }
.an-pq { font-weight: 700; } .an-pq a { color: inherit; text-decoration: none; } .an-pq a:hover .an-nom { text-decoration: underline; }
.an-pd { font-size: .8rem; color: var(--muted); }
.an-ins { grid-row: span 2; align-self: center; font: 800 .75rem var(--body); background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 3px 8px; white-space: nowrap; max-width: 150px; white-space: normal; text-align: center; }
.an-ins.grave { background: var(--bad-bg); color: var(--bad); }
.an-como { margin-top: 8px; font-size: .8rem; } .an-como summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.an-mapa { margin: 0; }
.an-mapa-cab { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.an-mapa-cab h2 { margin: 0; }
.an-mapa-ayuda { margin-left: auto; }
.an-subtabs { display: inline-flex; background: var(--chip); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.an-subtabs button, .an-tabs button { font: 600 .82rem var(--body); border: 0; background: transparent; color: var(--muted); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.an-subtabs button.on, .an-tabs button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.an-mapa-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.an-hm-scroll { overflow-x: auto; }
table.an-hm { border-collapse: separate; border-spacing: 4px; width: 100%; }
table.an-hm th { font-size: .78rem; color: var(--muted); font-weight: 700; padding: 2px 4px; text-align: center; white-space: nowrap; }
table.an-hm th.hm-nom { text-align: left; color: var(--accent); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
table.an-hm th.hm-nom a { color: inherit; text-decoration: none; }
table.an-hm td { text-align: center; border-radius: 8px; height: 40px; min-width: 56px; padding: 2px; font-size: .82rem; }
table.an-hm td a { display: block; color: inherit; text-decoration: none; }
table.an-hm td b { display: block; font-weight: 700; } table.an-hm td small { display: block; font-size: .66rem; opacity: .85; }
.hm-n0 { background: var(--hm0); color: var(--hm0-t); } .hm-n1 { background: var(--hm1); color: var(--hm1-t); } .hm-n2 { background: var(--hm2); color: var(--hm2-t); }
.hm-n3 { background: var(--hm3); color: var(--hm3-t); } .hm-n4 { background: var(--hm4); color: var(--hm4-t); }
.hm-poco { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 4px, var(--hm-raya) 4px, var(--hm-raya) 8px); color: var(--muted); }
.hm-poco-q { color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); }
.hm-vacia { color: var(--muted); }
.an-ley i.hm-poco { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 3px, var(--hm-raya) 3px, var(--hm-raya) 6px); }
tr.hm-tot td { box-shadow: inset 0 0 0 1.5px var(--text); } tr.hm-tot th { color: var(--text) !important; }
.an-leer { background: var(--head); border-radius: 12px; padding: 10px 12px; font-size: .84rem; }
.an-leer p { margin: 6px 0; }
.an-ranking { margin-top: 12px; }
.an-ranking .an-mapa-cab a { margin-left: auto; font-weight: 700; }
table.an-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.an-tabla th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 7px 8px; border-bottom: 1px solid var(--line); background: var(--head); white-space: nowrap; }
table.an-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
table.an-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.an-ficha { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.an-ficha .tarjeta { margin: 0; }
.an-alerta { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 8px 12px; margin-top: 8px; font-size: .88rem; }
.an-alerta .an-ins { display: none; }
.an-alerta .an-pd { color: inherit; display: block; }
.an-sem { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; height: 170px; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.an-sem-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; min-width: 0; }
.an-sem-n { font-size: .72rem; font-weight: 700; color: var(--muted); min-height: 1em; }
.an-sem-b { width: 100%; max-width: 34px; background: var(--an-r); border-radius: 4px 4px 0 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 2px; flex: 0 0 auto; max-height: calc(100% - 34px); }
.an-sem-b i { display: block; width: 100%; } .an-sem-b i.c { background: var(--an-c); } .an-sem-b i.p { background: var(--an-p); }
.an-sem-f { font-size: .62rem; color: var(--muted); white-space: nowrap; height: 14px; }
.an-chip-dia { font: 700 .8rem var(--body); background: var(--kpi-bg); color: var(--kpi-text); border-radius: 999px; padding: 3px 10px; text-decoration: none; }
@media (max-width: 1100px) {
  .an-kpis { grid-template-columns: 1fr 1fr; }
  .an-top { grid-template-columns: 1fr 1fr; }
  .an-top .an-card[data-t="patrones"] { grid-column: 1 / -1; }
  .an-mapa-cuerpo, .an-ficha { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .an-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .an-rango { grid-column: 1 / -1; }
  .an-n { font-size: 1.45rem; }
  .an-tabs { display: flex; background: var(--chip); border-radius: 10px; padding: 3px; gap: 2px; margin: 4px 0 8px; position: sticky; top: 60px; z-index: 3; }
  .an-tabs button { flex: 1; }
  .an-top { grid-template-columns: 1fr; }
  .an-top > [data-t] { display: none; }
  .an-top[data-tab="personas"] > [data-t="personas"], .an-top[data-tab="locales"] > [data-t="locales"], .an-top[data-tab="patrones"] > [data-t="patrones"], .an-top[data-tab="dias"] > [data-t="dias"] { display: flex; }
  .an-top > .an-mapa[data-t="dias"] { display: none; }
  .an-top[data-tab="dias"] > .an-mapa[data-t="dias"] { display: block; }
  .an-mapa-ayuda, .an-leer { display: none; }
  table.an-hm { border-spacing: 2px; }
  table.an-hm td { min-width: 0; height: 36px; font-size: .62rem; letter-spacing: -.03em; padding: 1px; }
  table.an-hm td b { white-space: nowrap; }
  table.an-hm td small { display: none; }
  table.an-hm th.hm-nom { max-width: 76px; font-size: .7rem; }
  .an-ventana { padding: 8px 10px; }
}
.tabbar.tb6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tabbar.tb6 .tb-ico { width: 46px; }
.tabbar.tb6 a { font-size: .68rem; }
@media (max-width: 900px) {
  .fr-cab { display: none; }
  .fr-fila { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .fr-estado { grid-column: 1 / 2; grid-row: 1; } .fr-tipo { grid-column: 2 / 3; grid-row: 1; text-align: right; }
  .fr-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .fr-foto:not(.fr-cuest) { grid-row: 2; grid-column: 1; } .fr-cuest { grid-row: 2; grid-column: 2; }
  .fr-datos, .fr-rev { grid-column: 1 / -1; }
  .fr-acc { margin-left: 0; }
}
#telefono .en-linea label { display: inline-flex; align-items: center; gap: 6px; }
/* ---------- Cara de la persona (v1.58) ---------- */
.cara { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--local-bg); color: var(--local-text); font-weight: 700; vertical-align: middle; text-decoration: none; line-height: 1; }
.cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cara-xs { width: 20px; height: 20px; font-size: .55rem; } .cara-s { width: 28px; height: 28px; font-size: .68rem; }
.cara-m { width: 44px; height: 44px; font-size: .9rem; } .cara-l { width: 64px; height: 64px; font-size: 1.2rem; }
a.cara { cursor: zoom-in; } a.cara:hover, a.cara:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cara-ini { border: 1px dashed var(--local-text); background: var(--chip); color: var(--muted); }
.h1-cara { display: flex; align-items: center; gap: 12px; }
.an-quien { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; } .an-nom { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .an-nom span { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
table.an-tabla .an-nom { gap: 6px; }
.pd-titulo { display: flex; align-items: center; gap: 10px; }
.quien-cara { display: inline-flex; align-items: center; gap: 6px; }
.persona-foco { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin: 0 0 12px; }
.pf-txt { display: grid; gap: 1px; min-width: 0; }
.pf-nombre { font: 700 1.25rem var(--display); }
.pf-datos { color: var(--muted); font-size: .88rem; }
.pf-acc { margin-left: auto; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: .88rem; font-weight: 700; }
.cara-dialogo { border: 0; border-radius: 18px; padding: 14px; background: var(--card); color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,.3); text-align: center; }
.cara-dialogo::backdrop { background: rgba(16, 20, 21, .6); }
.cara-dialogo img { display: block; width: min(320px, 80vw); height: min(320px, 80vw); object-fit: cover; border-radius: 50%; margin: 0 auto 10px; }
.cara-dialogo b { font: 700 1.1rem var(--display); }
@media (max-width: 700px) { .cara-l { width: 52px; height: 52px; } .pf-acc { margin-left: 0; width: 100%; } }
/* Correos por usuario (v1.59): caben varios */
input.u-correos { min-width: 260px; width: 100%; }
.al-correo { flex-wrap: nowrap; }
@media (max-width: 700px) { input.u-correos { min-width: 0; } }
/* ---------- Comparar · Superponer (v1.60) ---------- */
.cmp-vista { display: inline-flex; background: rgba(255,255,255,.1); border-radius: 10px; padding: 3px; gap: 2px; margin-left: 8px; }
.cmp-barra .cmp-vista button { width: auto; height: auto; border-radius: 8px; background: transparent; color: #C9CDCF; font: 600 .88rem var(--body); padding: 6px 12px; }
.cmp-barra .cmp-vista button.on { background: #ECEAE4; color: #0C1012; }
.cmp-fotos[hidden] { display: none; }
.cmp-img { position: relative; overflow: hidden; padding: 5px; }
.cmp-img img { transition: transform .08s ease-out; cursor: zoom-in; }
.cmp-sup { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; padding: 4px 16px 8px; }
.cmp-sup[hidden] { display: none; }
.sup-escena { position: relative; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 12px; background: #080B0C; }
.sup-lienzo { position: relative; transform-origin: 0 0; flex: none; box-shadow: 0 0 0 2px #2A3437; border-radius: 6px; overflow: hidden; }
.sup-q, .sup-capa { position: absolute; inset: 0; overflow: hidden; }
.sup-q img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sup-p { position: absolute; overflow: hidden; }
.sup-p img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sup-dif { position: absolute; inset: 0; width: 100%; height: 100%; }
.sup-dif[hidden], .sup-capa[hidden], .sup-q[hidden], .sup-linea[hidden] { display: none; }
.sup-linea { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.6); pointer-events: none; }
.sup-linea span { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; color: #0C1012; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
.sup-etq { position: absolute; top: 8px; padding: 3px 9px; border-radius: 999px; font: 800 .68rem var(--body); letter-spacing: .04em; text-transform: uppercase; transition: opacity .1s; pointer-events: none; max-width: 48%; }
.sup-etq.a { left: 8px; background: rgba(0,0,0,.7); color: #fff; } .sup-etq.n { right: 8px; background: var(--coral); color: #1B1F24; }
.sup-etq b { font-weight: 700; text-transform: none; letter-spacing: 0; } .sup-etq i { font-style: normal; }
.sup-etq.apagada { opacity: .25; }
.sup-zoom { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); color: #fff; font-size: .8rem; padding: 3px 10px; border-radius: 99px; pointer-events: none; }
.sup-zoom[hidden] { display: none; }
.sup-panel { background: #161D1F; border: 1px solid #2A3437; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; color: #ECEAE4; }
.sup-modos { display: flex; background: #222B2E; border-radius: 10px; padding: 3px; gap: 2px; }
.sup-modos button { flex: 1; border: 0; background: transparent; color: #A7AFB3; font: 600 .84rem var(--body); padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.sup-modos button.on { background: #4FC1B5; color: #0B1413; }
.sup-ctl[hidden], .sup-ajuste[hidden] { display: none; }
.sup-tit { display: grid; gap: 6px; font: 700 .92rem var(--display); color: #ECEAE4; }
.sup-tit b { font-family: var(--body); color: #4FC1B5; }
.sup-tit input[type=range] { width: 100%; accent-color: #4FC1B5; height: 26px; }
.sup-fila { display: flex; justify-content: space-between; font-size: .72rem; color: #A7AFB3; margin-top: -2px; }
.sup-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sup-chip { border: 1px solid #2F3B3E; background: #222B2E; color: #D7D4CC; font: 700 .8rem var(--body); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.sup-chip.on { background: #173532; color: #A6E3D9; border-color: #4FC1B5; }
.sup-ayuda { margin: 6px 0 0; font-size: .8rem; color: #A7AFB3; line-height: 1.45; }
.sup-bloque { border-top: 1px solid #2A3437; padding-top: 10px; }
.sup-al-txt { margin: 4px 0 0; font-size: .82rem; color: #D7D4CC; }
.sup-dv { margin: 0; font-size: .9rem; } .sup-dv b { font-size: 1.05rem; }
.sup-bien { color: #FF9C85; font-weight: 700; } .sup-medio { color: #F4C66A; font-weight: 700; } .sup-mal { color: #7FD6A6; font-weight: 700; } .sup-orient { color: #7F888C; font-size: .75rem; }
.sup-link { border: 0; background: none; color: #A6E3D9; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
.sup-teclas { margin: 0; font-size: .74rem; color: #8A9296; line-height: 1.7; }
.sup-teclas kbd { background: #222B2E; border-radius: 4px; padding: 0 5px; font: 700 .7rem var(--body); color: #ECEAE4; }
.sup-ver { border-top: 1px solid #2A3437; padding-top: 10px; }
.sup-ver:empty { display: none; }
@media (max-width: 900px) {
  .cmp-vista { order: 10; margin: 0; }
  .cmp-barra { flex-wrap: wrap; }
  .cmp-sup { grid-template-columns: 1fr; grid-template-rows: 52vh auto; grid-template-rows: 52dvh auto; overflow-y: auto; padding: 4px 10px 8px; gap: 10px; }
  .sup-panel { overflow: visible; padding: 10px 12px; min-height: auto; }
  .cmp-sup { align-content: start; }
  .sup-teclas { display: none; }
  .sup-etq { font-size: .6rem; top: 6px; } .sup-etq i { display: none; }
  .sup-etq.a::before { content: 'Antes · '; } .sup-etq.n::before { content: 'Después · '; }
  .sup-modos { order: 0; } .sup-ctl { order: 1; } .sup-ver { order: 2; border-top: 0; padding-top: 0; } .sup-bloque { order: 3; }
  .sup-modos button { font-size: .76rem; }
}
.sup-p.parcial { outline: 2px dashed rgba(255, 107, 74, .9); outline-offset: -2px; }
/* Matriz · Comunicaciones (v1.61) */
.m-celda.m-com { background: var(--kpi-bg); color: var(--kpi-text); }
.com-form { display: grid; gap: 8px; margin-top: 8px; }
.com-form .check { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tabla-scroll { overflow-x: auto; }
.com-pasado { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.com-pasado summary { cursor: pointer; }
.com-form-pasado { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.com-form-pasado .campo { display: grid; gap: 3px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.com-form-pasado select, .com-form-pasado input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); }

/* v1.62: sesiones y equipos */
.u-acciones { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ses-equipos { margin-top: .8rem; }
.ses-equipos summary { cursor: pointer; font-weight: 600; }
.ses-equipos .tabla { margin-top: .5rem; }
.txt-malo { color: var(--bad); }

/* ---------- Conexión y estado (v1.64, diseño A+) ---------- */
.est-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; }
.est-titulo h1 { margin-bottom: .6rem; }
.est-banner { display: flex; align-items: center; gap: 16px; border-radius: 16px; padding: 18px 22px; margin-bottom: 22px; }
.est-banner.sev-ok { background: var(--ok-bg); color: var(--ok); }
.est-banner.sev-aviso { background: var(--warn-bg); color: var(--warn); }
.est-banner.sev-problema { background: var(--bad-bg); color: var(--bad); }
.est-banner-ico { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: currentColor; }
.est-banner-ico svg { width: 24px; height: 24px; color: var(--card); }
.est-banner-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.est-banner-txt b { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.3px; line-height: 1.2; }
.est-banner-txt span { font-size: .92rem; color: var(--text); }
.est-banner-txt a { color: inherit; font-weight: 600; }
.est-seccion { margin-bottom: 22px; }
.est-seccion > h2, .est-cab-sec h2 { font-size: 1.2rem; margin-bottom: .7rem; }
.est-sub { color: var(--muted); font-weight: 600; }
.est-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; }
.est-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 9px; min-width: 0; scroll-margin-top: 80px; }
.est-card.sev-ok { border-top-color: var(--ok); }
.est-card.sev-aviso { border-top-color: #C28B16; }
.est-card.sev-problema { border-top-color: var(--bad); background: linear-gradient(var(--bad-bg), var(--bad-bg)) top / 100% 3px no-repeat, var(--card); }
.est-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.est-lbl { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; min-width: 0; }
.est-ico { width: 17px; height: 17px; flex: none; }
.est-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.est-chip.sev-ok { background: var(--ok-bg); color: var(--ok); }
.est-chip.sev-aviso { background: var(--warn-bg); color: var(--warn); }
.est-chip.sev-problema { background: var(--bad-bg); color: var(--bad); }
.est-chip.sev-neutro { background: var(--chip); color: var(--text); }
.est-big { font-family: var(--display); font-weight: 800; font-size: 1.65rem; line-height: 1.12; letter-spacing: -.4px; overflow-wrap: anywhere; }
.est-det { font-size: .86rem; color: var(--muted); margin: 0; }
.est-pie { margin-top: auto; font-size: .8rem; }
.est-acc { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.est-acc form { margin: 0; }
.est-link-peligro { background: none; border: 0; padding: 0; color: var(--bad); font: inherit; font-size: .88rem; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 40px; }
.est-ver { font-size: .88rem; font-weight: 600; margin-top: auto; }
.est-acc .est-ver { margin-top: 0; }
.est-barra { display: block; height: 8px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.est-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.est-card.sev-ok .est-barra:not(.est-barra-fina) > span { background: var(--ok); }
.est-barra-fina { height: 6px; }
.est-tipos { display: flex; flex-direction: column; gap: 5px; }
.est-tipo { display: grid; grid-template-columns: 112px minmax(0, 1fr) 52px; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); }
.est-tipo .num { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.est-recordar { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.est-recordar input { width: 3.6em; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; font: inherit; background: var(--card); color: var(--text); }
.est-pasos { padding-left: 18px; }
.est-qr { width: 100%; max-width: 260px; align-self: center; background: #FFFFFF; border-radius: 10px; padding: 6px; }
.est-descargas { position: relative; }
.est-descargas summary { list-style: none; }
.est-descargas summary::-webkit-details-marker { display: none; }
.est-descargas ul { position: absolute; z-index: 3; right: 0; bottom: calc(100% + 6px); min-width: 280px; margin: 0; padding: 8px 12px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.est-descargas li { padding: 4px 0; white-space: nowrap; font-size: .86rem; }
.est-grupos { margin-bottom: 22px; }
.est-cab-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.est-tabla { display: table; }
.est-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-tabla td { vertical-align: middle; }
.est-tabla form { margin: 0; }
.est-nowrap { white-space: nowrap; }
.est-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; border: 0; border-radius: 999px; padding: 0 12px 0 8px; background: var(--chip); color: var(--text); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.est-switch.on { background: var(--ok-bg); color: var(--ok); }
.est-switch-pista { position: relative; width: 30px; height: 18px; border-radius: 99px; background: var(--muted); opacity: .55; flex: none; }
.est-switch.on .est-switch-pista { background: var(--ok); opacity: 1; }
.est-switch-pista span { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; transition: left .15s; }
.est-switch.on .est-switch-pista span { left: 15px; }
.est-mant { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.est-mant > div { flex: 1 1 360px; min-width: 0; }
.est-mant h2 { font-size: 1.02rem; margin-bottom: .2rem; }
.est-mant p { margin: 0; }
@media (max-width: 640px) {
  .est-opc { display: none; }
  .est-banner { padding: 14px 16px; gap: 12px; align-items: flex-start; }
  .est-banner-ico { width: 36px; height: 36px; }
  .est-banner-txt b { font-size: 1.2rem; }
  .est-descargas ul { right: auto; left: 0; min-width: 0; max-width: calc(100vw - 60px); }
  .est-descargas li { white-space: normal; overflow-wrap: anywhere; }
}
.est-cab { flex-wrap: wrap; }
.est-lbl { white-space: nowrap; }
.est-recordar label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 640px) {
  .est-switch { padding: 0 8px; }
  .est-switch-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .est-tabla td:first-child { overflow-wrap: anywhere; }
}

/* ---------- Mi cuenta y Usuarios (v1.65, diseño A) ---------- */
.cuenta-link { margin-left: 14px; color: var(--top-muted); font-size: .9rem; font-weight: 600; text-decoration: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.cuenta-link:hover, .cuenta-link.on { color: var(--top-text); background: var(--top-on); }
@media (max-width: 760px) { .top .cuenta-link { display: none; } }
.est-banner.sev-neutro { background: var(--chip); color: var(--text); }
.est-banner.sev-neutro .est-banner-ico { background: var(--muted); }
.cta-cab { display: flex; align-items: center; gap: 14px; margin: .2rem 0 1rem; }
.cta-cab h1 { margin: 0; line-height: 1.1; }
.cta-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--local-bg); color: var(--local-text); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 1.15rem; flex: none; }
.cta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.cta-grid .est-card { scroll-margin-top: 80px; }
.cta-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cta-form input[type=password], .cta-form input[type=text] { flex: 1 1 150px; min-width: 0; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; background: var(--card); color: var(--text); }
.cta-filas { display: flex; flex-direction: column; }
.cta-filas > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--chip); font-size: .9rem; }
.cta-filas > div:first-child { border-top: 0; }
.cta-filas .mini { white-space: nowrap; }
.cta-check { flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; color: var(--text) !important; font-size: .92rem !important; font-weight: 400 !important; }
.cta-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.cta-mas summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--accent); }
.cta-mas[open] summary { margin-bottom: 8px; }
/* Usuarios (administración) */
.usu-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: .8rem; }
.usu-cab h1 { margin: 0; }
.usu-crear { margin-bottom: 18px; }
.usu-crear > summary { list-style: none; display: inline-flex; }
.usu-crear > summary::-webkit-details-marker { display: none; }
.usu-crear[open] > summary { margin-bottom: 12px; }
.usu-crear-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.usu-crear-form input[type=text], .usu-crear-form input[type=password], .usu-crear-form input:not([type]) { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: inherit; background: var(--card); color: var(--text); }
.usu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.usu-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; min-width: 0; }
.usu-kpi b { font-family: var(--display); font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
.usu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; align-items: start; }
.usu-card.inactivo { opacity: .78; }
.usu-quien { display: flex; align-items: center; gap: 12px; min-width: 0; }
.usu-ini { width: 42px; height: 42px; border-radius: 50%; background: var(--local-bg); color: var(--local-text); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; flex: none; }
.usu-nombre { display: flex; flex-direction: column; min-width: 0; }
.usu-nombre b { font-size: 1.05rem; overflow-wrap: anywhere; }
.usu-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.usu-chips .est-chip.rol { background: var(--local-bg); color: var(--local-text); }
.usu-act { display: flex; flex-direction: column; gap: 5px; }
.usu-act-linea { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; flex-wrap: wrap; }
.usu-card .uso-franja { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); width: 100%; }
.usu-card .uso-franja i { width: auto; height: 12px; }
.usu-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: auto; }
.usu-acc form { margin: 0; }
.usu-acc details[open] { flex-basis: 100%; }
.usu-acc details[open] > summary { margin-bottom: 8px; }
.usu-acc details > summary { list-style: none; }
.usu-acc details > summary::-webkit-details-marker { display: none; }
.usu-panel { display: flex; flex-direction: column; gap: 10px; background: var(--bg); border-radius: 12px; padding: 12px; }
.usu-panel form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.usu-panel input[type=text], .usu-panel input[type=password] { flex: 1 1 180px; min-width: 0; min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; background: var(--card); color: var(--text); }
.usu-panel h4 { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.usu-nota { margin-top: 14px; }
.usu-crear:not([open]) { background: none; border: 0; box-shadow: none; padding: 0; }
.usu-acc .btn { min-height: 36px; padding: 0 12px; font-size: .88rem; }