/* ============================================================
   Guardianes — Sistema de Seguridad Patrimonial
   Paleta: Blanco #FFF · Negro #000 · Arena #AC986A · Dorado #B89248
   Rojo #CE001E reservado exclusivamente para alertas
   ============================================================ */

:root {
  --bg:          #FAF8F3;
  --surface:     #FFFFFF;
  --surface-2:   #F4EFE4;
  --ink:         #181818;
  --ink-soft:    #5C574C;
  --ink-faint:   #948D7C;
  --primary:     #000000;
  --primary-2:   #1C1C1C;
  --primary-tint:#F1E7CF;
  --gold:        #B89248;
  --gold-dark:   #7A5F2E;
  --gold-soft:   #EFE0BE;
  --arena:       #AC986A;
  --border:      #E7E0CF;
  --border-soft: #F1ECDF;
  --success:     #2F7A4F;
  --success-bg:  #E3F0E7;
  --warning:     #95661C;
  --warning-bg:  #F3E7D0;
  --danger:      #CE001E;
  --danger-bg:   #FBE1E5;
  --info:        #3B6EA5;
  --info-bg:     #E4EDF6;
  --gray-ink:    #5F5750;
  --gray-bg:     #EEEAE5;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 1px 2px rgba(24,24,24,.06), 0 2px 8px rgba(24,24,24,.05);

  /* Escala tipográfica -- 3 tamaños para texto de contenido (tablas,
     celdas, notas). Encabezados, KPIs y badges tienen su propio tamaño
     por componente y no forman parte de esta escala. */
  --text-base: 13px; /* texto principal de tabla/lista */
  --text-sm:   12.5px; /* texto secundario dentro de una tabla */
  --text-xs:   11px; /* captions, anotaciones, códigos de sucursal */
}

/* ---- Modo oscuro ----
   El sidebar es parte fija de la identidad de marca (siempre negro) y NO
   usa estas variables -- sus colores están escritos directamente en las
   reglas .sidebar/.nav-item. Este bloque solo redefine las superficies de
   CONTENIDO (fondo de página, tarjetas, texto, bordes, colores de estado)
   para quien active el toggle. --primary/--gold/--arena/--danger no se
   redefinen: son acentos de marca fijos, no colores de superficie. */
html.theme-dark {
  --bg:          #17150F;
  --surface:     #211E16;
  --surface-2:   #2A2619;
  --ink:         #F2EEE3;
  --ink-soft:    #C7BFAC;
  --ink-faint:   #8D8570;
  --primary-tint:#3B331F;
  --gold-dark:   #E4C077;
  --gold-soft:   #3E351F;
  --border:      #3A3527;
  --border-soft: #2B2719;
  --success:     #6FC495;
  --success-bg:  #1E3325;
  --warning:     #E0AA55;
  --warning-bg:  #3A2C14;
  --danger-bg:   #3A1620;
  --info:        #7FACDD;
  --info-bg:     #1E2A3A;
  --gray-ink:    #B8AF9C;
  --gray-bg:     #2C2820;
  --shadow:      0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
button { font-family: inherit; }
a { text-decoration: none; }
.brand-logo-img { display: block; }

/* ---- Login ---- */
#view-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(600px 400px at 15% 10%, rgba(173,138,52,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(59,23,48,.08), transparent 60%),
    var(--bg);
  padding: 32px;
}

.login-card {
  width: 380px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 36px 32px;
  text-align: center;
}

.login-logo-row { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 8px; }
.login-title    { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: .5px; }
.login-sub      { font-size: 13px; color: var(--ink-soft); margin: 4px 0 28px; }

.btn-ad {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.btn-ad:hover { background: var(--primary-2); }

.login-hint {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 18px;
  line-height: 1.6;
}

.login-error {
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

/* ---- App shell ---- */
.shell { display: flex; min-height: 100vh; min-width: 1280px; }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}

.sidebar-brand           { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
.sidebar-brand .wordmark { font-size: 18px; font-weight: 600; letter-spacing: .5px; line-height: 1.1; color: #fff; }
.sidebar-brand .caption  { font-size: 10.5px; color: rgba(255,255,255,.55); letter-spacing: .3px; }

.nav-group-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,.4);
  padding: 14px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  margin-bottom: 2px;
  text-decoration: none;
  transition: background .12s;
}
.nav-item i        { width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; }
.nav-item:hover    { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active   { background: rgba(255,255,255,.10); color: #fff; border-left: 3px solid var(--gold); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.topbar-title { font-size: 16px; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 18px; }

.user-chip      { display: flex; align-items: center; gap: 9px; padding-left: 16px; border-left: 1px solid var(--border); }
.avatar         { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.user-chip .name { font-size: 13px; font-weight: 500; line-height: 1.2; }

.page-content { flex: 1; padding: 28px; overflow-y: auto; }

/* ---- Page head ---- */
.page-head          { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-head h1       { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
.page-head p        { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* ---- Cards ---- */
.card     { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px 20px; }

/* ---- Grid ---- */
.grid   { display: grid; gap: 16px; }
.grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- Section title ---- */
.section-title      { font-size: 14px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; }
.section-title .link { font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
th    { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); font-weight: 600; padding: 0 10px 10px; border-bottom: 1px solid var(--border-soft); }
td    { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td    { border-bottom: none; }
tr.hoverable        { cursor: pointer; }
tr.hoverable:hover td { background: var(--surface-2); }

/* ---- Badges ---- */
.badge         { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.badge .dot    { width: 6px; height: 6px; border-radius: 50%; }
.badge-gray    { background: var(--gray-bg); color: var(--gray-ink); } .badge-gray .dot    { background: #8A8078; }
.badge-info    { background: var(--info-bg); color: var(--info); }       .badge-info .dot    { background: var(--info); }
.badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-warning .dot { background: var(--warning); }
.badge-success { background: var(--success-bg); color: var(--success); } .badge-success .dot { background: var(--success); }
.badge-danger  { background: var(--danger-bg); color: var(--danger); }   .badge-danger .dot  { background: var(--danger); }
.badge-gold    { background: var(--gold-soft); color: var(--gold-dark); } .badge-gold .dot   { background: var(--gold-dark); }

/* ---- Buttons ---- */
.btn                  { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 9px 15px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); font-family: inherit; }
.btn-primary          { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover    { background: var(--primary-2); }
.btn-ghost, .btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--surface-2); }
.btn-sm               { padding: 6px 11px; font-size: 12px; }
.btn-danger           { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover     { background: #a8001a; }
.btn-danger-outline   { background: var(--surface); color: var(--danger); border-color: var(--danger-bg); }
.btn-danger-outline:hover { background: var(--danger-bg); }
.btn[disabled]        { opacity: .45; cursor: not-allowed; }

/* ---- Filters bar ---- */
.filters-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: nowrap; }
.select-fake, .input-fake {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 7px; cursor: pointer;
}

/* ---- Tabs ---- */
.tabs-line { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab-item  { padding: 9px 4px; margin-right: 20px; font-size: 13px; color: var(--ink-faint); cursor: pointer; border-bottom: 2px solid transparent; }
.tab-item.on { color: var(--primary); font-weight: 600; border-bottom: 2px solid var(--gold); }
.tab-panel     { display: none; }
.tab-panel.on  { display: block; }
.tab-periodo { background: transparent; border: 1px solid var(--border-soft); color: var(--ink-soft); font-size: 12px; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.tab-periodo.on { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }

/* ---- Registro — tabs en clústeres ---- */
.reg-tabs-bar { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; padding-bottom: 0; flex-wrap: nowrap; }
.reg-cluster-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); padding: 0 10px 10px 0; white-space: nowrap; }
.reg-cluster-sep { width: 1px; background: var(--border-soft); height: 28px; margin: 0 16px 10px; }
.reg-tabs { display: flex; gap: 0; }
.reg-tab { padding: 9px 14px; font-size: 13px; color: var(--ink-faint); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.reg-tab.on { color: var(--primary); font-weight: 600; border-bottom: 2px solid var(--gold); }
.badge-canal { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 6px; padding: 4px 10px; white-space: nowrap; }

/* ---- Misc ---- */
.mono      { font-family: 'IBM Plex Mono', monospace; }
.avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
.muted-note { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; margin-top: 10px; }

/* ---- Modal ---- */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(34,23,38,.45); z-index: 100;
  align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 560px;
  box-shadow: 0 20px 60px rgba(34,23,38,.25);
  animation: modalIn .15s ease-out;
}
@keyframes modalIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.modal-head  { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { margin: 0 0 3px; font-size: 17px; font-weight: 600; }
.modal-head p  { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.modal-close   { cursor: pointer; color: var(--ink-faint); font-size: 15px; padding: 4px; }
.modal-body    { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; max-height: 60vh; overflow-y: auto; }
.modal-foot    { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-soft); }

/* ---- Form fields ---- */
.field-group label         { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; display: block; }
.field-group label .req    { color: var(--danger); }
.field-group select,
.field-group input[type=text],
.field-group input[type=file],
.field-group input[type=datetime-local],
.field-group textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; color: var(--ink); background: var(--surface);
}
.field-group input[type=file] { padding: 7px 11px; cursor: pointer; }
.field-group textarea { resize: vertical; min-height: 64px; }
.field-group.invalid select,
.field-group.invalid input,
.field-group.invalid textarea { border-color: var(--danger); background: var(--danger-bg); }
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- Toggle Sí/No ---- */
.toggle-yn     { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: fit-content; }
.toggle-yn div { padding: 7px 18px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.toggle-yn div.on { background: var(--primary-tint); color: var(--primary); font-weight: 600; }

/* ---- Evidencia box ---- */
.evidence-box      { border: 1.5px dashed var(--border); border-radius: 10px; padding: 22px; text-align: center; color: var(--ink-faint); font-size: 12px; cursor: pointer; }
.evidence-box.done { border-style: solid; border-color: var(--success); color: var(--success); background: var(--success-bg); }

/* ---- Device rows (comprobación alarma) ---- */
.device-row       { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; align-items: center; font-size: 12.5px; margin-bottom: 6px; }
.device-row input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; }

/* ---- SLA / progress bar ---- */
.sla-bar-wrap { display: flex; flex-direction: column; gap: 5px; }
.sla-label    { font-size: 11.5px; color: var(--ink-soft); display: flex; justify-content: space-between; }
.sla-bar      { height: 6px; border-radius: 4px; background: var(--border-soft); overflow: hidden; }
.sla-fill     { height: 100%; border-radius: 4px; background: var(--gold); transition: width .3s; }
.sla-fill.ok  { background: var(--success); }
.sla-fill.warn { background: var(--warning); }
.sla-fill.over { background: var(--danger); }

/* ============================================================
   DASHBOARD — KPI cards
   ============================================================ */
.kpi-card        { min-height: 90px; }
.kpi-value       { font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink); }
.kpi-label       { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }
.kpi-card.skeleton { background: var(--surface-2); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ============================================================
   CHECKLISTS — punto de recorrido
   ============================================================ */
.check-circle {
  all: unset;
  cursor: pointer;
  font-size: 22px;
  color: var(--border);
  flex-shrink: 0;
  transition: color .15s;
}
.check-circle:hover        { color: var(--gold); }
.check-circle.checked      { color: var(--success); }

.opcion-pill {
  font-family: inherit; cursor: pointer; font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft);
  transition: background .15s, color .15s, border-color .15s;
}
.opcion-pill:hover { border-color: var(--gold); color: var(--ink); }
.opcion-pill.on    { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }

/* Tarjetas agrupadas: filas de una misma matriz (oficinas, salas, puertas...)
   juntas bajo un título común, en vez de una lista plana de ~50 renglones. */
/* Dos columnas balanceadas a mano (ver distribuirColumnas() en checklists.js):
   las tarjetas tienen alturas muy distintas (1 renglón vs 14), así que ni
   CSS grid (filas parejas) ni CSS multi-columna (balanceo automático del
   navegador) reparten bien el contenido -- ambos dejan una columna casi
   vacía y la otra con casi todo. */
.chk-grid  { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.chk-col   { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.chk-group { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.chk-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft);
}
.chk-count      { font-size: 11px; font-weight: 600; color: var(--ink-faint); background: var(--bg); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.chk-count.ok   { color: var(--success); background: var(--success-bg); }

.chk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft);
}
.chk-row:last-child      { border-bottom: none; }
.chk-row-stack           { flex-direction: column; align-items: stretch; gap: 6px; }
.chk-row-comment         { font-size: 11px; color: var(--ink-faint); }

.chk-attach     { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.chk-attach-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: var(--gold-dark);
}
.chk-attach-btn i         { font-size: 13px; }
.chk-attach.done .chk-attach-btn { color: var(--success); }

/* Matriz: filas con el mismo catálogo de opciones (Abierta/Cerrada...) --
   la palabra de cada opción va una sola vez en el encabezado, no repetida
   en cada fila; cada celda es solo un radio button. */
.chk-matrix-wrap { overflow-x: auto; }
.chk-matrix      { border-collapse: collapse; width: 100%; table-layout: fixed; }
.chk-matrix th {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink-faint); text-align: center; padding: 0 3px 6px; white-space: nowrap;
}
.chk-matrix th:first-child { text-align: left; }
.chk-matrix th.chk-matrix-sub { font-size: 9px; font-weight: 600; padding-bottom: 4px; }
.chk-matrix td   { padding: 5px 3px; text-align: center; border-top: 1px solid var(--border-soft); }
.chk-matrix-label {
  text-align: left !important; font-size: 12.5px; color: var(--ink-soft); padding-right: 6px !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chk-radio {
  all: unset; cursor: pointer; box-sizing: border-box;
  width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--border);
  transition: background .15s, border-color .15s;
}
.chk-radio:hover { border-color: var(--gold); }
.chk-radio.on    { border-color: var(--gold); background: var(--gold); }

/* ============================================================
   ALIASES — clases usadas en vistas que unifican con las base
   ============================================================ */

/* Modal inner box */
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 560px;
  box-shadow: 0 20px 60px rgba(34,23,38,.25); animation: modalIn .15s ease-out;
}

/* Modal close button */
.btn-close {
  cursor: pointer; color: var(--ink-faint); font-size: 15px; padding: 4px;
  background: none; border: none; font-family: inherit; line-height: 1;
}
.btn-close:hover { color: var(--ink); }

/* Incident list filters — never wrap */
.incident-list-head .filters-row { flex-wrap: nowrap; }

/* ============================================================
   SORTABLE TABLE HEADERS
   ============================================================ */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover { color: var(--ink); }
th.sort-asc::after  { content: ' ↑'; color: var(--gold); font-size: 10px; }
th.sort-desc::after { content: ' ↓'; color: var(--gold); font-size: 10px; }

/* ============================================================
   HORARIOS — grilla semanal de turnos / descansos
   ============================================================ */
.turno-leyenda { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.turno-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.turno-dot.turno-apertura   { background: var(--gold); }
.turno-dot.turno-intermedio { background: var(--arena); }
.turno-dot.turno-cierre     { background: var(--primary); }
.turno-dot.turno-descanso   { background: #8A8078; }

.tabla-horarios th, .tabla-horarios td { white-space: nowrap; }
.tabla-horarios th.col-dia { text-align: center; }
.tabla-horarios td.celda-dia { text-align: center; padding: 6px 8px; }
.col-personal-nombre { font-weight: 600; font-size: 13px; }
.col-personal-rol    { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }

.select-turno {
  width: 100%; min-width: 96px; text-align: center; cursor: pointer; appearance: none;
  border: 1px dashed var(--border); border-radius: 6px; padding: 6px 4px;
  font-size: 11.5px; font-weight: 600; font-family: inherit; color: var(--ink-faint); background: transparent;
}
.select-turno.v-apertura   { background: var(--gold-soft); color: var(--gold-dark); border-style: solid; border-color: transparent; }
.select-turno.v-intermedio { background: var(--surface-2); color: var(--ink-soft); border-style: solid; border-color: var(--border-soft); }
.select-turno.v-cierre     { background: var(--primary); color: #fff; border-style: solid; border-color: transparent; }
.select-turno.v-descanso   { background: var(--gray-bg); color: var(--gray-ink); border-style: solid; border-color: transparent; text-decoration: line-through; }
.select-turno.celda-cambiada { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ============================================================
   CAPTURA EN CAMPO — celular / tablet / escritorio
   ------------------------------------------------------------
   Solo aplica a las vistas que se incluyen con responsive:true
   (Checklists y Mis tareas): son las que se usan de pie, en el
   recorrido físico de apertura/cierre de Corporativo y Logística.
   Todo va anidado bajo .shell-responsive a propósito -- el resto
   del sistema sigue fijo a 1280px y NO debe verse afectado.
   ============================================================ */

.shell-responsive { min-width: 0; }

/* Botón de menú: no existe en escritorio, aparece solo en el
   breakpoint de abajo. */
.menu-toggle {
  all: unset; /* primero: 'all' reinicia el display si va después */
  display: none;
  cursor: pointer;
  font-size: 19px;
  color: var(--ink);
  padding: 8px;
  margin-right: 4px;
  line-height: 1;
}
#menu-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 150;
}
#menu-backdrop.show { display: block; }

@media (max-width: 820px) {
  .shell-responsive { flex-direction: column; }

  /* El sidebar pasa a cajón deslizable. Sigue siendo negro: es
     identidad de marca, no cambia por tamaño de pantalla. */
  .shell-responsive .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 82vw; max-width: 300px;
    z-index: 200;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease-out;
  }
  .shell-responsive .sidebar.open { transform: translateX(0); }

  .shell-responsive .menu-toggle { display: inline-flex; align-items: center; }

  .shell-responsive .topbar {
    position: sticky; top: 0; z-index: 90;
    padding: 0 12px;
    gap: 8px;
  }
  .shell-responsive .topbar-title {
    font-size: 15px;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* El nombre completo no cabe junto al título: queda el avatar,
     que ya identifica quién capturó (y el nombre está en el cajón). */
  .shell-responsive .user-chip { padding-left: 10px; }
  .shell-responsive .user-chip > div:not(.avatar) { display: none; }

  .shell-responsive .page-content { padding: 14px; }
  .shell-responsive .page-head    { margin-bottom: 16px; }
  .shell-responsive .page-head h1 { font-size: 19px; }
  .shell-responsive .page-head p  { font-size: 12.5px; }

  /* Cualquier rejilla del sistema se apila. */
  .shell-responsive .grid-3,
  .shell-responsive .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .shell-responsive .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Campos que van de dos en dos en escritorio: en 390px un select a mitad
     de ancho muestra "Sele..." y un nombre completo no cabe. */
  .shell-responsive .field-row-2 { grid-template-columns: minmax(0, 1fr); }

  /* Tablas de Mis tareas (protocolo / sucursal / estatus / acción): en
     390px las 4 columnas no caben, y dejarlas scrollear en horizontal
     esconde justo la columna del botón, que es la acción de la fila.
     Cada renglón se reacomoda en bloque de 2x2: protocolo y sucursal a
     la izquierda, estatus y botón a la derecha. Los !important son para
     ganarle a table-layout:fixed y a los anchos en % que están escritos
     inline en la vista. */
  .shell-responsive .tabla-tareas { table-layout: auto !important; }
  .shell-responsive .tabla-tareas thead { display: none; }
  .shell-responsive .tabla-tareas tbody,
  .shell-responsive .tabla-tareas tr { display: block; }
  .shell-responsive .tabla-tareas tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
  }
  .shell-responsive .tabla-tareas tr:last-child { border-bottom: none; }
  .shell-responsive .tabla-tareas td {
    display: block;
    width: auto !important;
    padding: 0;
    border: none;
  }
  .shell-responsive .tabla-tareas td:nth-child(1) { grid-area: 1 / 1; font-weight: 600; }
  .shell-responsive .tabla-tareas td:nth-child(2) { grid-area: 2 / 1; }
  .shell-responsive .tabla-tareas td:nth-child(3) { grid-area: 1 / 2; text-align: right; }
  .shell-responsive .tabla-tareas td:nth-child(4) { grid-area: 2 / 2; text-align: right; }
  /* Un renglón vacío ("Sin rondas asignadas") ocupa las 2 columnas. */
  .shell-responsive .tabla-tareas td[colspan] { grid-area: 1 / 1 / 2 / 3; text-align: center; }

  /* Registro: las barras de tabs y de filtros están en nowrap para que en
     escritorio queden en un solo renglón; en celular tienen que doblar. */
  .shell-responsive .reg-tabs-bar,
  .shell-responsive .filters-bar { flex-wrap: wrap; }
  .shell-responsive .reg-tabs-bar { gap: 4px; padding-bottom: 6px; }
  .shell-responsive .reg-cluster-sep { display: none; }
  .shell-responsive .filters-bar > .input-fake { max-width: none !important; flex: 1 1 100%; }
  .shell-responsive .filters-bar > .btn { flex: 1 1 100%; justify-content: center; }

  /* La tabla de registros trae hasta 7 columnas (fecha, sucursal, tipo,
     empleado, área, objeto, guardia): no hay reacomodo que la vuelva legible
     en 390px, así que scrollea en horizontal dentro de su tarjeta. Es una
     tabla de consulta -- la acción principal es el botón "Nuevo registro". */
  .shell-responsive #reg-tabla-wrap { overflow-x: auto !important; }
  .shell-responsive #reg-tabla-wrap table { min-width: 640px; }

  /* Toques: 15px de radio o 22px de círculo no se aciertan con el
     pulgar. Se agrandan solo aquí, no en escritorio (donde la
     densidad alta sí conviene: son ~50 puntos en pantalla). */
  .shell-responsive .chk-radio  { width: 26px; height: 26px; border-width: 2px; }
  .shell-responsive .chk-matrix td { padding: 9px 4px; }
  .shell-responsive .chk-matrix th { font-size: 10.5px; }
  .shell-responsive .check-circle  { font-size: 30px; }
  .shell-responsive .chk-row       { padding: 12px 0; }
  .shell-responsive .opcion-pill   { padding: 11px 18px; font-size: 14px; }
  .shell-responsive .chk-attach    { padding-top: 12px; }
  .shell-responsive .chk-attach-btn { font-size: 13.5px; padding: 6px 0; }
  .shell-responsive .btn           { min-height: 44px; padding: 11px 16px; }
  .shell-responsive .btn-sm        { min-height: 40px; }

  /* La matriz se sustituye por filas con pills (renderMatrizCompacta en
     checklists.js) -- ver ahí el motivo. */

  /* iOS hace zoom automático al enfocar un input de menos de 16px, y
     al volver deja la página descuadrada. */
  .shell-responsive input,
  .shell-responsive select,
  .shell-responsive textarea { font-size: 16px !important; }

  /* Modal casi a pantalla completa, anclado abajo (al alcance del
     pulgar): en 390px un modal centrado con max-height 60vh deja el
     formulario en una ventanita. */
  .shell-responsive .modal-overlay { padding: 0; align-items: flex-end; }
  .shell-responsive .modal-overlay .modal,
  .shell-responsive .modal-overlay .modal-box {
    max-width: none !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .shell-responsive .modal-overlay .modal-body { max-height: 72vh; }
}

/* Fila de matriz en celular: etiqueta arriba y las opciones como pills
   debajo, agrupadas por prefijo (PUERTA / CERRADURA) cuando lo hay.
   Solo se pinta en el breakpoint compacto (lo decide el JS). */
.chk-mrow {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.chk-mrow:last-child   { border-bottom: none; }
.chk-mrow-label        { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.chk-mrow-grupo        { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.chk-mrow-pref {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); min-width: 62px; flex-shrink: 0;
}
.chk-mrow-pills        { display: flex; flex-wrap: wrap; gap: 6px; }
.chk-mrow .opcion-pill[disabled] { opacity: .4; }
/* La opción viene "Puerta abierta": al quitarle el prefijo queda en
   minúscula, mientras que las simples ya vienen "Abierta". */
.chk-mrow-grupo .opcion-pill { text-transform: capitalize; }

/* Tira de fotos tomadas con la cámara, antes de confirmar el punto.
   Con la cámara cada toma llega de una en una, así que el usuario
   necesita ver qué lleva acumulado (y poder quitar una mala). */
.foto-strip      { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foto-thumb      { position: relative; width: 68px; height: 68px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.foto-thumb img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-thumb .doc { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-faint); font-size: 20px; }
.foto-thumb-del  {
  all: unset; cursor: pointer; position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   Exportar a PDF (window.print()) — deja solo el contenido de la
   página, sin sidebar/topbar/filtros/botones ni sombras/bordes de
   pantalla. Usado por exportarPDF() en export-utils.js.
   ============================================================ */
@media print {
  .sidebar, .topbar, .filters-bar, .page-head button,
  .btn, button, .modal-overlay { display: none !important; }
  body, .shell, .main, .page-content { min-width: 0 !important; overflow: visible !important; }
  .page-content { padding: 0 !important; }
  .card { box-shadow: none !important; border: none !important; }
  table { width: 100% !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Accesos › Tiendas — lista + ficha en una sola pantalla.

   El modulo se pivoteo en la tienda y de paso se fue de los modales
   apilados: editar una regla vivia dentro de un popup que vivia dentro
   de otro popup. Aqui la lista se queda a la vista mientras se trabaja
   la ficha, que es lo que se hace de verdad -- comparar tiendas y
   corregirlas de corrido.
   ───────────────────────────────────────────────────────────────────── */
.tiendas-split {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.tiendas-lista { padding: 0; overflow: hidden; }
.tiendas-filtros { padding: 12px; border-bottom: 1px solid var(--border-soft); }
/* Altura fija con scroll propio: son 172 y la ficha no debe salirse de
   la vista cuando la lista es larga. */
.tiendas-scroll { max-height: calc(100vh - 340px); overflow-y: auto; }

.tienda-item {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.tienda-item:hover { background: var(--primary-tint); }
.tienda-item.on { background: var(--gold-soft); box-shadow: inset 3px 0 0 var(--gold); }
.tienda-item .cod { font-size: 11px; color: var(--ink-faint); min-width: 30px; }
.tienda-item .nom { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.tienda-item .sub { font-size: 11px; color: var(--ink-faint); }
/* El renglón de "qué pide": se distingue del nombre de la plaza para que
   la lista se pueda barrer buscando un canal sin leerla entera. */
.tienda-item .qpide { color: var(--gold-dark); margin-top: 1px; }

.tiendas-ficha { padding: 0; min-height: 420px; }
.ficha-head { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.ficha-cuerpo { padding: 14px 18px 18px; }

/* Cada regla es una fila con su procedencia a la derecha. La procedencia
   importa tanto como el valor: "24 h" no significa lo mismo si lo puso la
   plaza que si es la regla general porque la plaza nunca lo declaro. */
.regla-fila {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 10px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.regla-fila .etq { font-size: 12px; color: var(--ink-faint); padding-top: 2px; }
.regla-fila .val { font-size: 13px; }
.regla-editor { grid-column: 1 / -1; padding: 12px; margin-top: 8px;
                background: var(--bg); border-radius: 10px; }

@media (max-width: 1200px) {
  .tiendas-split { grid-template-columns: 260px minmax(0, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────
   Sidebar colapsable (escritorio).

   Se colapsa a un riel de iconos, no se esconde: el negro del sidebar es
   identidad de marca y desaparecerlo por completo dejaria la pantalla
   sin el anclaje visual que la distingue. Ademas, un riel conserva la
   navegacion a un clic; un sidebar oculto la convierte en dos.

   La clase vive en <html> y no en .shell para poder aplicarse antes de
   que exista el body, que es lo que evita el parpadeo en cada carga.

   El texto de los enlaces son nodos sueltos (`<i></i> Dashboard`), sin
   elemento propio que ocultar. Por eso se apaga con font-size:0 en el
   contenedor y se le devuelve tamaño al icono: la alternativa era envolver
   en <span> los ~30 enlaces de los cuatro sidebars por rol.
   ───────────────────────────────────────────────────────────────────── */
.sidebar-collapsed .shell { min-width: 1114px; }   /* 1280 - (230 - 64) */

.sidebar-collapsed .sidebar {
  width: 64px;
  padding-left: 10px;
  padding-right: 10px;
}
.sidebar-collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .brand-text    { display: none; }

/* La etiqueta de grupo se vuelve un separador: sin ella, los tres bloques
   del menu se leen como una sola lista de 15 iconos. */
.sidebar-collapsed .nav-group-label {
  font-size: 0;
  padding: 10px 6px 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.sidebar-collapsed .nav-item {
  font-size: 0;
  gap: 0;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.sidebar-collapsed .nav-item i { font-size: 15px; width: auto; }
/* El activo se marcaba con un borde izquierdo de 3px que, ya centrado el
   icono, lo empujaba y lo dejaba fuera de eje. Se cambia por fondo. */
.sidebar-collapsed .nav-item.active {
  border-left: none;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.sidebar-collapsed .sidebar-footer .nav-item > div:not(.avatar) { display: none; }
.sidebar-collapsed .avatar { font-size: 12px; }   /* font-size:0 del padre no debe comerse las iniciales */

.sidebar-toggle { cursor: pointer; }

@media (max-width: 820px) {
  /* En el cajón de celular el riel no aplica: ahí el sidebar ya se
     esconde entero y se abre completo. Si el colapso siguiera activo, el
     cajón se abriría mostrando solo iconos. */
  .shell-responsive .sidebar,
  .sidebar-collapsed .shell-responsive .sidebar { width: 82vw; max-width: 300px; padding: 20px 14px; }
  .sidebar-collapsed .shell-responsive .brand-text,
  .sidebar-collapsed .shell-responsive .sidebar-footer .nav-item > div:not(.avatar) { display: block; }
  .sidebar-collapsed .shell-responsive .nav-item      { font-size: 13.5px; gap: 11px; justify-content: flex-start; padding: 10px 12px; }
  .sidebar-collapsed .shell-responsive .nav-group-label { font-size: 10.5px; border-bottom: none; }
  .sidebar-collapsed .shell-responsive .sidebar-brand { justify-content: flex-start; }
  .sidebar-collapsed .shell-responsive .nav-item.active { border-left: 3px solid var(--gold); background: rgba(255,255,255,.10); }
  .shell-responsive .sidebar-toggle { display: none; }   /* el cajón ya tiene su propio botón */
}