/* estilos.css — Portal del hotel (ASA SRL)
   Para el encargado de calidad: entra a confirmar que el servicio se hizo y a
   reportar un problema. Nada de edición, nada de menús anidados.
   Paleta de marca: azul #32539C, azul claro #BAC9E1, verde #609C63. */

:root{
  --azul:#32539C;
  --azul-osc:#24407C;
  --azul-medio:#4A6FB5;
  --azul-claro:#BAC9E1;
  --azul-pastel:#EAF0F8;
  --verde:#4A7D4D;
  --verde-claro:#EDF5EE;
  --verde-borde:#609C63;
  --rojo:#b91c1c;
  --rojo-claro:#fef2f2;
  --ambar:#b45309;
  --ambar-claro:#fef3c7;
  --texto:#1c2433;
  --suave:#64748b;
  --borde:#e3e8ef;
  --fondo:#f5f7fa;
  --blanco:#fff;
  --radio:12px;
  --sombra:0 1px 3px rgba(31,45,77,.07),0 1px 2px rgba(31,45,77,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fondo);color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}
img{max-width:100%}

/* ── Login ───────────────────────────────────────────────────────────────*/
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,var(--azul-osc) 0%,var(--azul) 55%,var(--verde-borde) 100%);
}
.login-card{
  background:var(--blanco);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.2);
  width:100%;max-width:390px;padding:34px 30px;
}
.login-card img{display:block;max-width:220px;margin:0 auto 18px}
.login-card p.sub{text-align:center;color:var(--suave);font-size:13.5px;margin:0 0 22px}
.login-card label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.login-card input{
  width:100%;padding:11px 12px;border:1px solid var(--borde);border-radius:9px;
}
.login-card input:focus{outline:none;border-color:var(--azul)}
.btn-entrar{
  width:100%;margin-top:22px;padding:12px;border:none;border-radius:9px;color:#fff;
  background:linear-gradient(135deg,var(--azul),var(--verde-borde));font-weight:700;font-size:15px;
}
.btn-entrar:disabled{opacity:.6;cursor:default}
.error{
  margin-top:14px;background:var(--rojo-claro);border:1px solid #fecaca;color:var(--rojo);
  padding:9px 11px;border-radius:8px;font-size:13px;
}

/* ── Marco ───────────────────────────────────────────────────────────────*/
.barra{
  position:sticky;top:0;z-index:20;background:var(--blanco);
  border-bottom:1px solid var(--borde);box-shadow:inset 0 -3px 0 var(--azul-claro);
  padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.barra img{height:34px;width:auto}
.barra .quien{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--suave)}
.sel-planta{
  padding:8px 11px;border:1px solid var(--borde);border-radius:9px;background:var(--blanco);
  font-weight:600;max-width:60vw;
}
.btn-salir{
  background:none;border:1px solid var(--borde);border-radius:8px;padding:7px 12px;
  font-size:12.5px;color:var(--suave);
}
.btn-salir:hover{background:var(--rojo-claro);border-color:#fecaca;color:var(--rojo)}

.pestanas{
  display:flex;gap:2px;background:var(--blanco);border-bottom:1px solid var(--borde);
  padding:0 10px;overflow-x:auto;position:sticky;top:57px;z-index:19;
}
.pestana{
  background:none;border:none;border-bottom:2px solid transparent;padding:11px 15px;
  font-size:14px;font-weight:600;color:var(--suave);white-space:nowrap;
}
.pestana.activa{color:var(--azul);border-bottom-color:var(--azul)}

.contenido{padding:18px 16px 40px;max-width:1100px;margin:0 auto}
.cargando,.vacio{text-align:center;color:var(--suave);padding:40px 16px}
.vacio .emoji{display:block;font-size:34px;margin-bottom:10px}

.tarjeta{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:16px;margin-bottom:14px;
}
.tarjeta h2{font-size:15px;margin:0 0 12px}

/* ── Indicadores ─────────────────────────────────────────────────────────*/
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:14px;box-shadow:var(--sombra)}
.kpi .n{font-size:28px;font-weight:700;line-height:1.1;color:var(--azul-osc)}
.kpi .t{font-size:12px;color:var(--suave);margin-top:4px}
.kpi.ok .n{color:var(--verde)}
.kpi.mal .n{color:var(--rojo)}

.progreso{height:9px;background:var(--borde);border-radius:99px;overflow:hidden;margin:8px 0}
.progreso>span{display:block;height:100%;background:var(--verde-borde);border-radius:99px}

/* ── Habitaciones ────────────────────────────────────────────────────────*/
.rejilla-hab{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px}
.hab{
  border:1.5px solid transparent;border-radius:8px;padding:9px 5px;text-align:center;
  font-size:13px;font-weight:700;
}
.hab.si{background:var(--verde-claro);border-color:var(--verde-borde);color:var(--verde)}
.hab.no{background:var(--rojo-claro);border-color:#fca5a5;color:var(--rojo)}

/* ── Listas ──────────────────────────────────────────────────────────────*/
.registro{border-bottom:1px solid var(--borde);padding:12px 0}
.registro:last-child{border-bottom:none}
.registro .cab{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.registro .punto{font-weight:700;font-size:14px}
.registro .fecha{font-size:12px;color:var(--suave)}
.registro .meta{font-size:12.5px;color:var(--suave);margin-top:3px}
.registro .fotos{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.registro .fotos img{width:66px;height:66px;object-fit:cover;border-radius:8px;border:1px solid var(--borde);cursor:pointer}

.marca{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700}
.marca.ok{background:var(--verde-claro);color:var(--verde)}
.marca.alerta{background:var(--ambar-claro);color:var(--ambar)}
.marca.mal{background:var(--rojo-claro);color:var(--rojo)}
.marca.neutra{background:var(--azul-pastel);color:var(--azul-osc)}

/* ── Botones y formulario ────────────────────────────────────────────────*/
.btn{
  background:var(--blanco);border:1px solid var(--borde);border-radius:9px;
  padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--texto);
}
.btn:hover{border-color:var(--azul-claro)}
.btn.principal{background:var(--azul);border-color:var(--azul);color:#fff}
.btn.principal:hover{background:var(--azul-osc)}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

.campo{display:block;margin-bottom:14px;font-size:13px;font-weight:600}
.campo input,.campo select,.campo textarea{
  display:block;width:100%;margin-top:5px;padding:10px 12px;font-weight:400;
  border:1px solid var(--borde);border-radius:9px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul)}
.campo small{display:block;margin-top:5px;font-weight:400;color:var(--suave);font-size:11.5px}

.visor{
  position:fixed;inset:0;background:rgba(15,23,42,.9);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.visor img{max-width:100%;max-height:100%;border-radius:10px}

.aviso-ok{
  background:var(--verde-claro);border:1px solid var(--verde-borde);color:var(--verde);
  padding:12px 14px;border-radius:var(--radio);margin-bottom:14px;font-size:13.5px;
}

@media (max-width:560px){
  .barra img{height:28px}
  .contenido{padding:14px 12px 36px}
}

/* Nota bajo los botones de reporte: explica qué trae el PDF antes de que el
   encargado de calidad espere un minuto sin saber qué está pidiendo. */
.nota-reporte {
  margin: 8px 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--suave, #475569);
}

/* ═══════════════════════════════════════════════════════════════════════
   FICHA DE UN SERVICIO, HOJA A PANTALLA COMPLETA E IMPRESIÓN
   ═══════════════════════════════════════════════════════════════════════ */

/* Una revisión de la lista se puede tocar */
.registro.clicable{cursor:pointer;border-radius:10px;padding:12px 10px;margin:0 -10px;transition:background .12s}
.registro.clicable:hover{background:var(--azul-pastel,#EAF0F8)}
.registro.clicable:active{background:var(--borde)}

.tarjeta.borde-rojo{border-left:4px solid var(--rojo)}
.tarjeta.borde-rojo h2{color:var(--rojo)}

/* Cabecera de día en el historial */
.dia-cabecera{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--suave);background:var(--azul-pastel,#EAF0F8);
  padding:7px 10px;border-radius:8px;margin:16px -10px 6px;
}
.dia-cabecera:first-child{margin-top:0}

/* La hoja: cubre la pantalla completa. En el celular, un modal a medias
   obliga a hacer zoom para leer la tabla del checklist. */
.hoja{
  position:fixed;inset:0;z-index:60;background:var(--fondo,#f8fafc);
  display:flex;flex-direction:column;
}
.hoja-barra{
  display:flex;gap:10px;align-items:center;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:var(--blanco);border-bottom:1px solid var(--borde);
}
.hoja-barra .principal{margin-left:auto}
.hoja-cuerpo{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px calc(28px + env(safe-area-inset-bottom));
  max-width:900px;width:100%;margin:0 auto;
}

.ficha h3{font-size:14px;margin:20px 0 8px;color:var(--azul)}
.ficha p{font-size:13.5px;line-height:1.55;margin:0}

.fs-cabecera{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:13px 14px;border-radius:12px;background:var(--verde-claro);
  border-left:4px solid var(--verde-borde);
}
.fs-cabecera.no-hecho{background:var(--rojo-claro);border-left-color:var(--rojo)}
.fs-titulo{font-size:17px;font-weight:700}
.fs-sub{font-size:12.5px;color:var(--suave);margin-top:2px}
.fs-estado{text-align:right;font-weight:700;font-size:13px;color:var(--verde);white-space:nowrap}
.fs-estado.rojo{color:var(--rojo)}
.fs-estado small{display:block;font-weight:400;color:var(--suave);font-size:11.5px;margin-top:2px}

.fs-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px 18px;margin-top:14px}
.fs-datos>div{display:flex;flex-direction:column}
.fs-datos span{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave)}
.fs-datos strong{font-size:13.5px}

.fs-alerta{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--rojo-claro);color:#7f1d1d;font-size:13.5px;line-height:1.5}

.fs-tabla{width:100%;border-collapse:collapse;font-size:13px}
.fs-tabla th{
  text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--suave);background:var(--azul-pastel,#EAF0F8);
}
.fs-tabla td{padding:9px 10px;border-bottom:1px solid var(--borde);vertical-align:top}
.fs-tabla tr.sobre-umbral td{background:var(--rojo-claro);color:#7f1d1d}

.fs-hallazgos{margin:0;padding-left:18px;font-size:13.5px}
.fs-hallazgos li{margin-bottom:9px}

.fs-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.fs-fotos figure{margin:0}
.fs-fotos img{
  width:100%;height:130px;object-fit:cover;display:block;cursor:pointer;
  border-radius:9px;border:1px solid var(--borde);background:var(--borde);
}
.fs-fotos figcaption{font-size:10.5px;color:var(--suave);margin-top:4px;text-align:center}

/* Impresión: la capa solo existe mientras dura, y se esconde todo lo demás.
   Así no hay que duplicar la ficha en otra ventana — que con fotos en base64
   es lo que traba el navegador. */
#area-impresion{display:none}
.imp-encabezado{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  border-bottom:3px solid var(--azul);padding-bottom:12px;margin-bottom:18px;
}
.imp-encabezado h1{font-size:19px;margin:0;color:var(--azul)}
.imp-encabezado p{margin:2px 0 0;color:var(--suave);font-size:12.5px}

@media print{
  @page{margin:14mm}
  body>*:not(#area-impresion){display:none !important}
  #area-impresion{
    display:block !important;background:#fff;color:#0f172a;
    font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
  #area-impresion .fs-fotos figure,
  #area-impresion .fs-cabecera,
  #area-impresion tr{break-inside:avoid;page-break-inside:avoid}
  #area-impresion h3{break-after:avoid;page-break-after:avoid}
  #area-impresion .fs-fotos{grid-template-columns:repeat(3,1fr)}
  #area-impresion .fs-fotos img{height:110px;cursor:default}
  /* Los fondos de color se imprimen: el rojo del "no realizado" es
     información, no decoración. */
  #area-impresion *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── Por hacer: semáforo verde / rojo por área ───────────────────────────*/
.tarjeta h2 .marca{margin-left:6px;vertical-align:middle}
.semaforo{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.celda{
  border:1.5px solid transparent;border-radius:8px;padding:9px 4px;text-align:center;
  font-size:12.5px;font-weight:700;word-break:break-word;
}
.celda.verde{background:#e8f5e9;border-color:#66a36a;color:#2e6b32}
.celda.rojo{background:#fdecec;border-color:#ef4444;color:var(--rojo)}
.celda.clicable{cursor:pointer}
.celda.clicable:hover{filter:brightness(.96)}
.leyenda-semaforo{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--suave);margin:0 0 12px}
.leyenda-semaforo i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.punto-verde{background:#66a36a}
.punto-rojo{background:#ef4444}

/* ── Solicitudes (listas de habitaciones y reportes) ─────────────────────*/
.barra-sol{height:6px;background:var(--rojo-claro);border-radius:20px;overflow:hidden;margin:6px 0 2px;max-width:320px}
.barra-sol span{display:block;height:100%;background:#66a36a;border-radius:20px}
.pasos{display:flex;gap:6px;margin:4px 0 12px;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--suave);padding:4px 10px;border-radius:20px;background:var(--fondo);border:1px solid var(--borde)}
.paso span{width:9px;height:9px;border-radius:50%;background:var(--borde)}
.paso.ok{color:var(--verde);border-color:#bcdcbe;background:#f3f9f3;font-weight:700}
.paso.ok span{background:#66a36a}
.celda.gris{background:var(--fondo);border-color:var(--borde);color:var(--suave);text-decoration:line-through}
.celda.punteado{border-style:dashed}
.celda small{display:block;font-weight:500;font-size:10px;line-height:1.2;margin-top:2px}
button.celda{font:inherit;font-weight:700;cursor:pointer;background:var(--blanco);border-color:var(--borde);color:var(--texto)}
.celda.elegible.elegida{background:var(--azul);border-color:var(--azul);color:#fff}
.grupo-hab{margin-bottom:12px}
.grupo-hab-titulo{font-size:12px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.fila-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.fila-campos{grid-template-columns:1fr}}
.hilo{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;margin-bottom:10px}
.msg{align-self:flex-start;max-width:85%;background:var(--fondo);border:1px solid var(--borde);border-radius:12px;padding:8px 12px;font-size:14px}
.msg .txt{white-space:pre-wrap}
.msg.mio{align-self:flex-end;background:#eaf0f8;border-color:#bac9e1}
.msg .autor{font-size:11.5px;font-weight:700;color:var(--suave);margin-bottom:2px}
.msg .hora{font-size:11px;color:var(--suave);margin-top:3px;text-align:right}
.sol-enviar{display:flex;gap:8px;align-items:flex-end}
.sol-enviar textarea{flex:1;border:1px solid var(--borde);border-radius:10px;padding:8px 10px;font:inherit;resize:vertical}
.capa-modal{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:80;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px}
.capa-caja{width:100%;max-width:720px}

/* ── Mapa del hotel ──────────────────────────────────────────────────────*/
a.btn{text-decoration:none;display:inline-flex;align-items:center}
.mapa-pdf{border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:var(--blanco);margin-bottom:10px}
.mapa-pdf iframe{width:100%;height:70vh;min-height:420px;border:0;display:block}
.mapa-img{position:relative;border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:var(--blanco)}
.mapa-img img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Zoom con los dedos: la capa (plano + pines) se agranda con transform */
.mapa-img{touch-action:pan-y;cursor:grab}
.mapa-img-capa{position:relative;transform-origin:0 0;will-change:transform}
.mapa-img-capa .mapa-pin{transform:translate(-50%,-50%) scale(calc(1 / var(--zoom, 1)))}
.mapa-zoom-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:12.5px;color:var(--suave)}
.mapa-zoom-barra .btn{min-width:40px;font-size:18px;padding:4px 10px}
.mapa-pin{
  position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;padding:0;cursor:pointer;
  transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.mapa-pin.verde{background:#43a047}
.mapa-pin.rojo{background:#e53935}
.mapa-pin.activo{width:24px;height:24px;z-index:2;outline:3px solid rgba(50,83,156,.45)}
.mapa-info{margin:10px 0 16px;font-size:13.5px;color:var(--suave);text-align:center;min-height:20px}

/* ── Documentos ──────────────────────────────────────────────────────────*/
.doc-fila,.doc-prod{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--borde)}
.tarjeta h2 + .doc-fila,.tarjeta h2 + .doc-buscar,#doc-productos .doc-prod:first-child{border-top:0}
.doc-ic{font-size:22px;line-height:1}
.doc-info{flex:1;min-width:0}
.doc-tit{font-weight:700;font-size:14.5px}
.doc-sub{font-size:12.5px;color:var(--suave);margin-top:3px}
.doc-acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.doc-vig{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:4px;vertical-align:middle}
.doc-vig.ok{background:var(--verde-claro);color:var(--verde)}
.doc-vig.aviso{background:var(--ambar-claro);color:var(--ambar)}
.doc-vig.mal{background:var(--rojo-claro);color:var(--rojo)}
.doc-buscar{width:100%;border:1px solid var(--borde);border-radius:10px;padding:9px 12px;font:inherit;margin-bottom:6px}
@media (max-width:560px){
  .doc-fila,.doc-prod{flex-wrap:wrap}
  .doc-acc{width:100%;justify-content:flex-start}
}

/* Cronograma (extras.js) */
.cr-semana-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cr-dia-p.hoy{border-color:var(--azul);box-shadow:0 0 0 2px rgba(50,83,156,.15)}
.cr-item-p{border-left:3px solid var(--azul);padding:6px 8px;margin-bottom:8px;background:#f8fafc;border-radius:6px;font-size:13px}
.cr-item-p.realizado{border-left-color:var(--verde)}
.cr-item-p.cancelado{opacity:.55;text-decoration:line-through}
.cr-item-p .h{font-weight:700}
.cr-item-p .s,.cr-dia-p .s{color:var(--suave);font-size:12px}

/* No se pudo hacer: amarillo y pendiente, no verde ni "hecho" */
.celda.amarillo{background:#fefce8;border-color:#eab308;color:#a16207;border-style:dashed}
.marca.nopudo{background:#fef9c3;color:#a16207}
.fs-estado.amarillo{color:#a16207}
.punto-amarillo{background:#eab308}

/* ── Estadísticas de plagas (Historial) ─────────────────────────────────── */
.pl-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pl-cab h2{margin:0}
.pl-sub{font-size:14px;color:var(--azul-osc);margin:20px 0 10px}
.pl-nota{color:var(--suave);font-size:12.5px;margin:-4px 0 10px}
.kpi .n.pl-nombre{font-size:20px;text-transform:capitalize;word-break:break-word}
.pl-tipos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pl-tipo{border:1px solid var(--borde);border-radius:10px;padding:10px 12px}
.pl-tipo-cab{display:flex;justify-content:space-between;gap:8px;font-size:13.5px}
.pl-tipo-cab strong{font-size:16px;color:var(--azul-osc)}
.pl-barra{height:6px;background:var(--azul-pastel);border-radius:4px;margin:6px 0;overflow:hidden}
.pl-barra span{display:block;height:100%;border-radius:4px}
.pl-tipo-pie{font-size:11.5px;color:var(--suave)}
.pl-grafica{width:100%;height:auto;display:block;background:#fbfcfe;border-radius:8px}
.pl-leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 4px;font-size:12px;color:var(--suave)}
.pl-leyenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.pl-tabla-scroll{overflow-x:auto}
.pl-tabla{width:100%;border-collapse:collapse;font-size:13px}
.pl-tabla th,.pl-tabla td{padding:7px 8px;border-bottom:1px solid var(--borde);text-align:right;white-space:nowrap}
.pl-tabla th:first-child,.pl-tabla td:first-child{text-align:left;white-space:normal}
.pl-tabla th{color:var(--suave);font-weight:600;font-size:12px}