/* Registro de huéspedes · Zenya Host — misma identidad del portal de mantenimiento:
   tinta verde casi negra, crema, terracota y arena; títulos en Archivo expandido, texto en Inter. */
:root{
  --ink:#1E2724; --ink-2:#141E1B; --cream:#FBF7F1; --sand:#EAE1D2; --sand-line:#E1D5C0;
  --terra:#C05B32; --terra-dark:#9A4726; --terra-light:#F3DCCB; --text:#22302B; --muted:#5C6862; --faint:#8A938E;
  --surface:#FFFDF9; --surface-2:#F4EDE2;
  --err:#B8432A; --err-bg:#F6DDD3; --warn:#A88A2A; --warn-bg:#F3EBCD; --ok:#3F7A5A; --ok-bg:#DDEBE2;
  --sombra:0 24px 60px -24px rgba(20,30,27,.28);
  --display:"Archivo",system-ui,sans-serif; --body:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --rail:236px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--text);font:14px/1.5 var(--body)}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--ink);text-wrap:balance}
h1{font-size:clamp(24px,3.2vw,38px);font-weight:850;font-stretch:125%;text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
h2{font-size:15px;font-weight:800;font-stretch:118%;text-transform:uppercase;letter-spacing:.05em}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.eyebrow::before{content:"";width:28px;height:1.5px;background:currentColor}
.nota{margin:0;color:var(--muted);font-size:13px;max-width:72ch}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.grande{width:30px;height:30px;stroke-width:1.5}

/* ── ingreso ── */
.ingreso{min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(80% 60% at 100% 0%,rgba(192,91,50,.14),transparent 60%),var(--cream)}
.ingreso-caja{width:min(400px,100%);background:var(--surface);border:1px solid var(--sand-line);border-radius:22px;padding:34px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sombra)}
.ingreso-caja img{align-self:center}
.ingreso-caja h1{text-align:center;font-size:24px}
.ingreso-caja p{margin:0;text-align:center;font-size:13px}
.error{color:var(--err);font-size:13px;margin:0}

/* ── marco ── */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;background:var(--ink-2);color:#E9E3D8;display:flex;flex-direction:column;padding:26px 16px 18px;gap:6px;
  background-image:radial-gradient(120% 60% at 0% 100%,rgba(192,91,50,.18),transparent 60%)}
.rail-marca{display:flex;justify-content:center;padding:4px 0 6px}
.rail-marca img{width:86px;height:auto}
.rail-titulo{text-align:center;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--terra-light);opacity:.75;margin-bottom:22px}
nav.tabs{display:flex;flex-direction:column;gap:2px}
nav.tabs button{display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:12px;padding:10px 12px;color:#B9C2BC;font-weight:600;cursor:pointer;text-align:left;position:relative}
nav.tabs button:hover{background:rgba(255,255,255,.05);color:#fff}
nav.tabs button[aria-selected="true"]{background:rgba(251,247,241,.08);color:#fff}
nav.tabs button[aria-selected="true"]::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--terra)}
nav.tabs .count{margin-left:auto;font:500 11px var(--mono);padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.08)}
nav.tabs .count:empty{display:none}
.rail-pie{margin-top:auto;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.estado-srv{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;background:var(--surface-2);white-space:nowrap}
.rail .chip{background:rgba(255,255,255,.06);color:#C9D0CB}
.dot{width:7px;height:7px;border-radius:50%;background:#6B7570;display:inline-block}
.dot.on{background:#79C79A}.dot.medio{background:#E2B65A}
.who{display:flex;align-items:center;gap:9px;font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--terra);color:#fff;display:grid;place-items:center;font:800 12px var(--display);font-stretch:120%}
.lnk{margin-left:auto;background:none;border:0;color:var(--terra-light);cursor:pointer;font-size:12.5px;padding:4px}

main{padding:34px clamp(16px,3vw,44px) 70px;min-width:0;max-width:1400px}
section.view{display:flex;flex-direction:column;gap:18px}
.vista-h{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}

/* ── botones y campos ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;border:1px solid transparent;padding:10px 16px;font-weight:650;cursor:pointer;transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.primario{background:var(--ink);color:#fff}
.btn.primario:hover{background:var(--terra-dark)}
.btn.primario:disabled{background:#B9BFBB;cursor:not-allowed}
.btn.suave{background:var(--surface);border-color:var(--sand-line);color:var(--ink)}
.btn.suave:hover{background:var(--surface-2)}
.btn.peligro{background:var(--surface);border-color:#E5BBAA;color:var(--err)}
.btn.ancho{width:100%}.btn.grande{padding:14px 18px;font-size:15px}
.lnk-in{background:none;border:0;padding:0;color:var(--terra-dark);font-weight:600;font-size:12.5px;cursor:pointer;text-transform:none;letter-spacing:0}
.lnk-in:hover{text-decoration:underline}

.formulario{display:flex;flex-direction:column;gap:16px;min-width:0}
.bloque{border:1px solid var(--sand-line);background:var(--surface);border-radius:18px;padding:18px 18px 20px;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.bloque legend{float:left;width:100%;display:flex;align-items:center;gap:10px;font:800 13px var(--display);font-stretch:118%;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);padding:0;margin-bottom:4px}
.bloque legend b{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px}
.fila{display:grid;gap:12px;min-width:0}
.f2{grid-template-columns:repeat(2,minmax(0,1fr))}
.f3{grid-template-columns:repeat(3,minmax(0,1fr))}
.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}
.sep{margin-top:6px;padding-top:14px;border-top:1px dashed var(--sand-line)}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>span{font-size:12px;font-weight:650;color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.campo input,.campo select,.campo textarea,.filtros input,.filtros select{width:100%;border:1px solid var(--sand-line);background:#fff;border-radius:10px;padding:9px 11px;min-height:40px;transition:border-color .15s,background .3s}
.campo textarea{resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--terra);outline:none;box-shadow:0 0 0 3px rgba(192,91,50,.14)}
.campo .ia,.campo input.ia,.campo select.ia{background:#FDF0E7;border-color:#E8B79C}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.check input{accent-color:var(--terra);width:16px;height:16px}

/* ── fotos ── */
.zona{display:flex;align-items:center;gap:16px;border:1.5px dashed #D3C2A6;border-radius:14px;padding:20px;background:var(--surface-2);cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s}
.zona:hover,.zona.sobre{border-color:var(--terra);background:#F8EADF}
.miniaturas{display:flex;flex-wrap:wrap;gap:10px}
.miniaturas:empty{display:none}
.mini{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--sand-line);background:#fff}
.mini img{width:100%;height:100%;object-fit:cover}
.mini button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(20,30,27,.75);color:#fff;display:grid;place-items:center;cursor:pointer}
.mini button .ic{width:14px;height:14px}
.lectura{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--terra-dark);background:var(--terra-light);border-radius:10px;padding:9px 12px}
.lectura.ok{background:var(--ok-bg);color:var(--ok)}
.lectura.mal{background:var(--err-bg);color:var(--err)}
.lectura.ok .giro,.lectura.mal .giro{display:none}
.giro{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.texto-crudo summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.texto-crudo pre{white-space:pre-wrap;font:12px/1.45 var(--mono);background:var(--surface-2);border-radius:10px;padding:10px;max-height:220px;overflow:auto}

/* ── adjuntos ── */
.opcional{font:600 11px var(--body);text-transform:none;letter-spacing:0;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 8px}
.zona.chica{padding:14px 16px;gap:12px}
.adjuntos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.adjuntos:empty{display:none}
.adjuntos li{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:6px 6px 6px 12px;font-size:13px;min-width:0}
.adjuntos .adj-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.quitar.chico{width:30px;height:30px}
.adj-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}

/* ── huéspedes ── */
.huespedes{display:flex;flex-direction:column;gap:10px}
.huesped{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(104px,.9fr) minmax(0,1.3fr) minmax(0,1.1fr) 36px;gap:10px;align-items:end;padding:12px;border-radius:12px;background:var(--surface-2);position:relative}
.quitar{width:36px;height:40px;border-radius:10px;border:1px solid var(--sand-line);background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.quitar:hover{color:var(--err);border-color:#E5BBAA}
.noches{margin:0;font-size:12.5px}

/* ── destinatarios ── */
.dest{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start}
.dest-l{font-size:12px;font-weight:650;color:var(--muted);padding-top:7px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.correo-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--sand-line);background:#fff;border-radius:999px;padding:5px 11px 5px 8px;font-size:13px;cursor:pointer;user-select:none;max-width:100%}
.correo-chip span{overflow:hidden;text-overflow:ellipsis}
.correo-chip input{accent-color:var(--terra);margin:0}
.correo-chip:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
.correo-chip:has(input:checked) input{accent-color:#fff}
.agregar-correo{border:1px dashed var(--sand-line);background:transparent;border-radius:999px;padding:5px 12px;font-size:13px;min-width:190px;flex:1;max-width:280px}
.agregar-correo:focus{outline:none;border-color:var(--terra);border-style:solid;background:#fff}

/* ── columna lateral ── */
.nuevo-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:22px;align-items:start}
.lado{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}
.pdf-marco{background:var(--ink-2);border-radius:18px;padding:10px;box-shadow:var(--sombra)}
.pdf-barra{display:flex;justify-content:space-between;align-items:center;color:#E9E3D8;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px 9px}
.pdf-barra .lnk-in{color:var(--terra-light);text-transform:none;letter-spacing:0}
#pdf{width:100%;height:min(66vh,640px);border:0;border-radius:10px;background:#fff;display:block}
.pdf-paginas{height:min(66vh,640px);overflow:auto;border-radius:10px;background:#3A4440;padding:8px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pdf-paginas canvas{display:block;width:100%;height:auto;background:#fff;border-radius:3px;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.pdf-cargando{margin:auto;color:#C9D0CB;font-size:13px}
.pista{font-weight:500;color:var(--faint)}
.pendientes{list-style:none;margin:0;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--sand-line);display:flex;flex-direction:column;gap:5px;font-size:13px}
.pendientes li{display:flex;gap:8px;align-items:center}
.pendientes li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.pendientes li.ok{color:var(--ok);font-weight:600}
.pendientes li.ok::before{background:var(--ok)}

/* ── histórico ── */
.filtros{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
.tabla-marco{background:var(--surface);border:1px solid var(--sand-line);border-radius:18px;overflow:auto}
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--sand-line);white-space:nowrap;background:var(--surface-2)}
.tabla td{padding:12px 14px;border-bottom:1px solid #EFE6D7;vertical-align:top}
.tabla tbody tr{cursor:pointer}
.tabla tbody tr:hover{background:#FBF3EA}
.tabla .sub{display:block;color:var(--muted);font-size:12px}
.estado{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:650}
.estado.enviado{background:var(--ok-bg);color:var(--ok)}
.estado.pendiente{background:var(--warn-bg);color:#7F6716}
.estado.error{background:var(--err-bg);color:var(--err)}
.vacio{padding:30px;text-align:center;color:var(--muted);margin:0}

/* ── edificios ── */
.acciones{display:flex;gap:10px}
.edificios{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.edificio{background:var(--surface);border:1px solid var(--sand-line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .15s,transform .15s}
.edificio:hover{border-color:var(--terra);transform:translateY(-2px)}
.edificio.inactivo{opacity:.6}
.edificio h2{font-size:16px}
.edificio .meta{display:flex;flex-wrap:wrap;gap:6px}
.edificio .linea{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.edificio .linea b{color:var(--ink);font-weight:650}
.falta{color:var(--err);font-weight:600}

/* ── tarjetas y cajón ── */
.tarjeta{background:var(--surface);border:1px solid var(--sand-line);border-radius:18px;padding:20px}
.estrecho{max-width:760px}
.servicio{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--sand-line)}
.servicio:last-child{border-bottom:0}
.servicio p{margin:2px 0 0;color:var(--muted);font-size:13px}
.velo{position:fixed;inset:0;background:rgba(20,30,27,.35);z-index:20}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--cream);z-index:21;overflow:auto;padding:26px 24px 40px;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:16px}
.cajon-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cerrar{border:1px solid var(--sand-line);background:var(--surface);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;flex:none}
.dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px 14px;margin:0;font-size:13.5px}
.dl dt{color:var(--muted);font-weight:600}
.dl dd{margin:0;overflow-wrap:anywhere}
.botones{display:flex;flex-wrap:wrap;gap:8px}
.unidad-fila{display:grid;grid-template-columns:110px minmax(0,1fr) 36px;gap:8px;align-items:center}
.unidades{display:flex;flex-direction:column;gap:8px}

.aviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;z-index:40;box-shadow:var(--sombra);max-width:calc(100% - 32px)}
.aviso.mal{background:var(--err)}

/* ── responsive ── */
@media (max-width:1100px){
  .nuevo-grid{grid-template-columns:minmax(0,1fr)}
  .lado{position:static}
  .pdf-paginas,#pdf{height:min(78vh,760px)}
}
/* tablet y celular: el huésped pasa a tarjeta con la X en la esquina */
@media (max-width:900px){
  .huesped{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 12px 14px}
  .huesped .n{grid-column:1 / -1;padding-right:44px}
  .huesped .quitar{position:absolute;top:10px;right:10px;width:34px;height:34px}
}
@media (max-width:820px){
  :root{--barra:64px}
  .app{grid-template-columns:minmax(0,1fr)}
  /* barra superior: marca y salida */
  .rail{position:sticky;top:0;height:auto;z-index:10;flex-direction:row;align-items:center;justify-content:space-between;padding:8px 16px;gap:10px;background-image:none}
  .rail-marca{padding:0}.rail-marca img{width:36px}
  .rail-titulo{display:block;margin:0 auto 0 4px;font-size:10px;letter-spacing:.22em;text-align:left;opacity:.85}
  .rail-pie{margin:0;border:0;padding:0;flex-direction:row}
  .rail-pie .estado-srv,.rail-pie #quien{display:none}
  .who{gap:10px}.lnk{margin:0;padding:8px 4px}
  /* pestañas abajo, al alcance del pulgar */
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:15;flex-direction:row;gap:0;background:var(--ink-2);border-top:1px solid rgba(255,255,255,.08);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  nav.tabs button{flex:1;flex-direction:column;gap:3px;padding:7px 2px;font-size:11px;border-radius:10px;justify-content:center;align-items:center;text-align:center;min-width:0}
  nav.tabs button .ic{display:block;width:22px;height:22px}
  nav.tabs button[aria-selected="true"]::before{display:none}
  nav.tabs button[aria-selected="true"]{color:#fff;background:rgba(251,247,241,.1)}
  nav.tabs button[aria-selected="true"] .ic{color:var(--terra-light)}
  nav.tabs .count{position:absolute;top:2px;left:calc(50% + 8px);margin:0;font-size:9.5px;padding:0 5px;background:var(--terra);color:#fff}
  main{padding:22px 16px calc(var(--barra) + 40px + env(safe-area-inset-bottom))}
  .aviso{bottom:calc(var(--barra) + 16px + env(safe-area-inset-bottom))}
  .cajon{padding:20px 16px calc(30px + env(safe-area-inset-bottom))}
  .f3,.f4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filtros{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .filtros input{grid-column:1 / -1}
  .dest{grid-template-columns:minmax(0,1fr);gap:4px}
  .agregar-correo{max-width:none;min-width:0;width:100%;flex:1 1 100%}
  .campo>span{flex-wrap:wrap}
  /* 16 px en campos evita el zoom automático de iPhone al escribir */
  .campo input,.campo select,.campo textarea,.filtros input,.filtros select,.agregar-correo,.unidad-fila input{font-size:16px}
  .bloque{padding:16px 14px 18px;border-radius:16px}
  .zona{padding:16px}
  .edificios{grid-template-columns:minmax(0,1fr)}
  /* histórico: cada registro como tarjeta */
  .tabla-marco{background:none;border:0;border-radius:0;overflow:visible}
  .tabla,.tabla tbody{display:block}
  .tabla thead{display:none}
  .tabla tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;background:var(--surface);border:1px solid var(--sand-line);border-radius:16px;padding:14px 16px;margin-bottom:10px}
  .tabla td{display:block;padding:0;border:0}
  .tabla td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:1px}
  .tabla .c-folio,.tabla .c-estado{grid-row:1}
  .tabla .c-folio::before,.tabla .c-estado::before{display:none!important}
  .tabla .c-estado{justify-self:end}
  .tabla .c-folio{font-size:13px;font-weight:500;color:var(--terra-dark)}
  .tabla .c-edificio,.tabla .c-huespedes,.tabla .c-para{grid-column:1 / -1}
  .tabla .c-creado{grid-column:2;grid-row:4;text-align:right}
  .tabla .c-estadia{grid-column:1;grid-row:4}
  .vacio{background:var(--surface);border:1px solid var(--sand-line);border-radius:16px}
}
@media (max-width:480px){
  .f2,.f3,.f4{grid-template-columns:minmax(0,1fr)}
  .span2{grid-column:auto}
  .filtros{grid-template-columns:minmax(0,1fr)}
  .rail-titulo{display:none}
  .dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .dl dd{margin-bottom:8px}
  .botones .btn{flex:1 1 100%}
  .pdf-paginas,#pdf{height:min(72vh,620px)}
  h1{font-size:26px}
  .unidad-fila{grid-template-columns:80px minmax(0,1fr) 36px}
  .huesped{grid-template-columns:repeat(2,minmax(0,1fr))}
}