/* 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;
  --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;
    --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; }
.version { margin-left: auto; 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; }
  .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: 200px; }
.matriz .m-local, .matriz .m-nombre { position: sticky; z-index: 1; text-align: left; padding: 6px 12px; font-weight: 400; }
.matriz .m-local { left: 0; width: var(--w-local); min-width: var(--w-local); max-width: var(--w-local); vertical-align: top; padding-top: 9px; border-right: 1px solid var(--line); }
.matriz .m-nombre { left: var(--w-local); width: var(--w-nombre); min-width: var(--w-nombre); max-width: var(--w-nombre); border-right: 1px solid var(--line); }
.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: 176px; 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: 176px; 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-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); }