/* ═══════════════════════════════════════════════════════════════════════════
   ZONAS COMUNES y VIGILANTES (2-oct-2026) — zonas.js. Se apoya en bitacora.css (.bt-*: cabecera, tira de días,
   semana, mes, interruptores, hoja) y en las variables --x-* de informes.css (identidad SGS). Prefijo propio .zc-*.
   Celular primero: toques de 44 px o más, campos de 16 px, sin tablas.
   ═══════════════════════════════════════════════════════════════════════════ */
.zc-pane, #sgxHoja { --zc-ok:#2e8b69; --zc-al:#b8741f; --zc-ne:#8a9ba0; }

/* ── Reserva en el cronograma ─────────────────────────────────────────────── */
.zc-rc { display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border-radius:12px; background:#fff; border:1px solid var(--x-linea);
  border-left:4px solid var(--zc-ok); cursor:pointer; transition:box-shadow .15s; min-width:0; }
.zc-rc:hover { box-shadow:var(--bt-sombra-h); }
.zc-rc:focus-visible { outline:2px solid var(--x-menta); outline-offset:2px; }
.zc-rc.e-por_aprobar { border-left-color:var(--zc-al); background:#fffaf1; }
.zc-rc.e-cancelada, .zc-rc.e-rechazada { border-left-color:var(--zc-ne); background:#f6f6f3; }
.zc-rc.e-cancelada .zc-rc-t b, .zc-rc.e-rechazada .zc-rc-t b { text-decoration:line-through; color:var(--x-gris); }
.zc-rc.pend { border-style:dashed; border-left-style:solid; opacity:.8; cursor:default; }
.zc-rc-i { font-size:17px; line-height:1.25; flex:none; }
.zc-rc-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.zc-rc-t b { font-size:13.5px; font-weight:600; color:var(--x-navy); line-height:1.3; overflow-wrap:anywhere; }
.zc-rc-t small { font-size:12px; color:var(--x-gris); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zc-rc-t .zc-est { align-self:flex-start; margin-top:3px; }
.bt-dia .zc-rc, .bt-mes-g.pc .zc-rc { padding:7px 8px; gap:6px; }
.bt-dia .zc-rc-i, .bt-mes-g.pc .zc-rc-i { font-size:14px; }
.bt-dia .zc-rc-t b, .bt-mes-g.pc .zc-rc-t b { font-size:12.5px; }
.bt-dia .zc-rc-t small, .bt-mes-g.pc .zc-rc-t small { font-size:11.5px; }
.bt-dia-b .zc-rc + .zc-rc, .bt-cg .zc-rc + .zc-rc { margin-top:0; }
.bt-mes-g.pc .bt-mc-b { display:flex; flex-direction:column; gap:5px; padding:0 6px 8px; }

/* Estado (píldora) */
.zc-est { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:700; font-style:normal; letter-spacing:.01em; white-space:nowrap; }
.zc-est.ok { background:var(--x-ok-bg); color:var(--zc-ok); }
.zc-est.al { background:var(--x-al-bg); color:#8a5300; }
.zc-est.ne { background:var(--x-ne-bg); color:var(--x-gris); }

/* Zona cerrada */
.zc-bl { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:7px 10px; border-radius:10px; background:#fff6e6; border:1px dashed #e8c88d; color:#6d4300; font-size:12.5px; line-height:1.35; }
.zc-bl b { font-weight:700; }
.zc-bl-p { font-size:12px; margin-left:2px; }

/* Filtro por zona y leyenda */
.zc-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; margin-bottom:6px; scrollbar-width:thin; flex-wrap:nowrap; }
#sgxHoja .zc-chips { flex-wrap:wrap; overflow:visible; }
.zc-leyenda { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:12px; color:var(--x-gris); }
.zc-leyenda span { display:inline-flex; align-items:center; gap:6px; }
.zc-leyenda i { width:12px; height:12px; border-radius:3px; background:var(--zc-ok); }
.zc-leyenda i.al { background:var(--zc-al); } .zc-leyenda i.ne { background:var(--zc-ne); }

/* ── Ficha de la reserva (hoja) ───────────────────────────────────────────── */
.zc-ficha-top { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.zc-tag { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; background:var(--x-crema); color:var(--x-texto); font-size:12px; line-height:1.4; }
.zc-cuando { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; background:#eef6f2; border:1px solid #cfe5da; margin-bottom:12px; }
.zc-cuando b { font-family:var(--x-serif); font-size:19px; color:var(--x-navy); font-weight:600; }
.zc-cuando span { font-size:15px; color:var(--x-texto); }
.zc-dl { margin:0 0 6px; display:grid; gap:0; }
.zc-dl > div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:9px 2px; border-bottom:1px solid var(--x-linea); }
.zc-dl dt { font-size:12px; color:var(--x-gris); font-weight:600; padding-top:1px; }
.zc-dl dd { margin:0; font-size:14.5px; color:var(--x-texto); overflow-wrap:anywhere; }
.zc-dl a { color:var(--x-navy); font-weight:600; }
.zc-ok { color:var(--zc-ok); font-weight:600; }
.zc-hist { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; }
.zc-hist small { display:block; color:var(--x-gris); font-size:11.5px; }
.zc-p { font-size:13.5px; color:var(--x-texto); line-height:1.5; margin:0 0 12px; }
.zc-nota { font-size:12.5px; color:var(--x-gris); line-height:1.45; margin:4px 0 10px; }
.zc-adv { margin:8px 0 4px; }

/* ── Formulario de reserva ────────────────────────────────────────────────── */
.zc-fichas { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.zc-ficha { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 12px; border-radius:12px; border:1px solid var(--x-linea); background:#fff;
  color:var(--x-texto); font:inherit; font-size:14px; text-align:left; cursor:pointer; min-width:0; overflow-wrap:anywhere; }
.zc-ficha span { font-size:19px; flex:none; }
.zc-ficha:hover { border-color:var(--x-navy2); }
.zc-ficha.sel { background:var(--x-navy); border-color:var(--x-navy); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(34,65,74,.22); }
.zc-dias { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.zc-dias input[type=date] { flex:1 1 150px; min-width:0; max-width:100%; min-height:40px; border:1px solid var(--x-linea); border-radius:999px; padding:0 14px; font:inherit; font-size:16px; background:#fff; color:var(--x-texto); }
.zc-turnos { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.zc-tu { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; padding:6px 4px; border-radius:12px;
  border:1px solid #cfe5da; background:#f4faf7; color:var(--x-navy); font:inherit; cursor:pointer; }
.zc-tu b { font-size:15px; font-weight:700; }
.zc-tu small { font-size:11.5px; color:var(--x-gris); }
.zc-tu:hover:not(:disabled) { border-color:var(--x-verde); }
.zc-tu.sel { background:var(--x-navy); border-color:var(--x-navy); color:#fff; box-shadow:0 4px 12px rgba(34,65,74,.25); }
.zc-tu.sel small { color:#d6e8e0; }
.zc-tu.no { background:#f3f2ee; border-color:#e6e2d8; color:#a6aeae; cursor:not-allowed; }
.zc-tu.no b { text-decoration:line-through; font-weight:600; }
.zc-tu.plazo:not(.sel) { border-style:dashed; border-color:#d8b46c; background:#fffaf1; }
.zc-tu.esq { border:0; background:linear-gradient(90deg,#eef1ef 0%,#f7f8f6 50%,#eef1ef 100%); background-size:200% 100%; animation:zcEsq 1.2s infinite linear; }
@keyframes zcEsq { from { background-position:200% 0; } to { background-position:0 0; } }
.zc-sug { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:-4px 0 10px; }
.zc-sug small { font-size:12px; color:var(--x-gris); width:100%; }
.zc-num { display:inline-flex; align-items:stretch; border:1px solid var(--x-linea); border-radius:12px; overflow:hidden; background:#fff; width:max-content; max-width:100%; }
.zc-num button { width:48px; min-height:46px; border:0; background:var(--x-crema); color:var(--x-navy); font-size:22px; cursor:pointer; }
.zc-num button:active { background:#e9e4d8; }
.zc-num input { width:70px; border:0 !important; text-align:center; font:inherit; font-size:17px !important; font-weight:700; color:var(--x-navy); min-height:46px; padding:0 !important; border-radius:0 !important; }

/* ── Configuración ─────────────────────────────────────────────────────────── */
.zc-enlace .zc-url { background:var(--x-fondo); border:1px dashed var(--x-linea); border-radius:10px; padding:10px 12px; margin-bottom:10px; overflow-wrap:anywhere; }
.zc-enlace code { font-family:ui-monospace,Consolas,monospace; font-size:13px; color:var(--x-navy); }
.zc-botones { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; align-items:center; }
.zc-botones .x-btn { text-decoration:none; display:inline-flex; align-items:center; }
.zc-link { border:0; background:none; padding:6px 0; color:var(--x-navy2); font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.zc-link.confirmar, .x-btn.confirmar { color:#b3261e; font-weight:600; }
.zc-tgs { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.bt-panel .bt-panel-h { margin-bottom:8px; }
.zc-sec-h { display:flex; align-items:center; gap:8px; margin:18px 0 10px; }
.zc-sec-h h3 { margin:0; font-size:19px; }
.zc-sec-h span { background:var(--x-crema); color:var(--x-gris); font-size:12px; border-radius:999px; padding:2px 9px; }
.zc-zonas, .zc-vigs { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
@media (min-width:760px){ .zc-zonas, .zc-vigs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1300px){ .zc-zonas { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.zc-zona, .zc-vig { background:#fff; border:1px solid var(--x-linea); border-radius:16px; padding:14px; box-shadow:var(--bt-sombra); display:flex; flex-direction:column; gap:10px; min-width:0; }
.zc-zona.inactiva, .zc-vig.inactiva { opacity:.7; background:#faf9f6; }
.zc-zona-h { display:flex; gap:10px; align-items:flex-start; }
.zc-zona-h > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.zc-zona-h b { font-family:var(--x-serif); font-size:17px; color:var(--x-navy); font-weight:600; overflow-wrap:anywhere; }
.zc-zona-h small { font-size:12.5px; color:var(--x-gris); line-height:1.4; }
.zc-zona-i { width:44px; height:44px; flex:none; border-radius:12px; background:var(--x-crema); display:flex; align-items:center; justify-content:center; font-size:22px; }
.zc-tags { display:flex; flex-wrap:wrap; gap:6px; }
.zc-bls { display:flex; flex-direction:column; gap:6px; }
.zc-bls .zc-bl { justify-content:space-between; }
.zc-x { border:0; background:transparent; color:inherit; width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; flex:none; }
.zc-x:hover { background:rgba(0,0,0,.06); }
.zc-x.confirmar { width:auto; padding:0 8px; color:#b3261e; font-weight:700; }
.zc-zona-b { display:flex; justify-content:flex-end; gap:8px; margin-top:auto; flex-wrap:wrap; }

/* Editor de horario */
.zc-horario { display:flex; flex-direction:column; gap:6px; }
.zc-hd { display:flex; gap:10px; align-items:flex-start; padding:6px; border-radius:12px; background:var(--x-fondo); border:1px solid var(--x-linea); }
.zc-hd.on { background:#f4faf7; border-color:#cfe5da; }
.zc-hd-d { flex:none; width:58px; min-height:44px; border-radius:10px; border:1px solid var(--x-linea); background:#fff; color:var(--x-gris); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.zc-hd.on .zc-hd-d { background:var(--x-navy); border-color:var(--x-navy); color:#fff; }
.zc-hd-f { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; min-height:44px; }
.zc-hd-f > small { color:var(--x-gris); font-size:13px; }
.zc-fr { display:inline-flex; align-items:center; gap:6px; flex-wrap:nowrap; max-width:100%; }
.zc-fr i { font-style:normal; color:var(--x-gris); font-size:12.5px; }
.zc-fr input[type=time] { width:auto; min-width:0; max-width:118px; min-height:42px; border:1px solid var(--x-linea); border-radius:10px; padding:0 8px; font:inherit; font-size:16px; background:#fff; color:var(--x-texto); }
.zc-otra { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--x-gris); }
.zc-otra input { width:74px !important; min-height:40px !important; border-radius:999px !important; text-align:center; }
@media (max-width:560px){
  .zc-hd { flex-wrap:wrap; }
  .zc-hd.on .zc-hd-f { flex-basis:100%; }
  .zc-hd:not(.on) .zc-hd-f { flex:1; }
  .zc-fr { width:100%; }
  .zc-fr input[type=time] { flex:1 1 0; max-width:none; }
}

/* Vigilantes */
.zc-vig { flex-direction:row; flex-wrap:wrap; align-items:center; }
.zc-vig-a { width:46px; height:46px; flex:none; border-radius:50%; background:var(--x-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; letter-spacing:.02em; }
.zc-vig-t { flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.zc-vig-t b { font-size:15px; color:var(--x-navy); overflow-wrap:anywhere; }
.zc-vig-t small { font-size:12.5px; color:var(--x-gris); }
.zc-vig-b { display:flex; gap:8px; flex-wrap:wrap; width:100%; justify-content:flex-end; }
.zc-vig-b a { text-decoration:none; display:inline-flex; align-items:center; }
/* Registrar cobro (4-oct-2026): botón ancho dentro de la ficha (el pie ya tiene 3 acciones) */
.zc-cobrar { width:100%; min-height:48px; margin-top:12px; justify-content:center; }