/* styles.css — Ambiente y Salud RD (ASA SRL) — Panel administrativo
   Paleta tomada del logo oficial: azul #32539C, azul claro #BAC9E1,
   verde #609C63. Los nombres de variable antiguos se conservan como alias
   para que el resto de la hoja adopte la marca sin reescribirse. */

:root{
  /* ── Marca ASA ── */
  --asa-azul:#32539C;
  --asa-azul-osc:#24407C;
  --asa-azul-medio:#4A6FB5;
  --asa-azul-claro:#BAC9E1;
  --asa-azul-pastel:#EAF0F8;
  --asa-verde:#609C63;
  --asa-verde-osc:#4A7D4D;
  --asa-verde-pastel:#EDF5EE;

  /* ── Alias de compatibilidad (no borrar: los usan reglas más abajo) ── */
  --asa-green:var(--asa-verde);
  --asa-green-dark:var(--asa-verde-osc);
  --asa-cyan:var(--asa-azul);
  --asa-cyan-dark:var(--asa-azul-osc);
  --asa-teal:var(--asa-azul-medio);

  --bg:#f5f7fa;
  --card:#ffffff;
  --border:#e3e8ef;
  --text:#1c2433;
  --text-muted:#64748b;
  --danger:#dc2626;
  --warning:#d97706;
  --ok:var(--asa-verde);
  --radius:10px;
  --shadow: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{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--asa-cyan-dark)}

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--asa-azul-osc) 0%,var(--asa-azul) 55%,var(--asa-verde) 100%);
  padding:20px;
}
.login-card{
  background:var(--card);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.18);
  width:100%;max-width:380px;padding:36px 32px;
}
.login-logo{
  display:block;width:100%;max-width:230px;height:auto;margin:0 auto 20px;
}
.login-card h1{font-size:19px;text-align:center;margin:0 0 4px}
.login-card p.sub{text-align:center;color:var(--text-muted);font-size:13px;margin:0 0 24px}
.login-card label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.login-card input{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
}
.login-card input:focus{outline:none;border-color:var(--asa-cyan)}
.btn-login{
  width:100%;margin-top:22px;padding:11px;border:none;border-radius:8px;
  background:linear-gradient(135deg,var(--asa-azul) 0%,var(--asa-verde) 100%);
  color:#fff;font-weight:700;font-size:15px;
}
.btn-login:disabled{opacity:.6;cursor:default}
.login-error{
  margin-top:14px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  padding:8px 10px;border-radius:8px;font-size:13px;display:none;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:236px;flex:0 0 236px;background:var(--asa-azul-osc);color:#dfe7f4;
  display:flex;flex-direction:column;
}
.sidebar-brand{
  background:#fff;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar-brand img{display:block;width:100%;height:auto}

.nav-section{margin:14px 0 4px;padding:0 12px}
.nav-section:first-child{margin-top:4px}
.nav-section-title{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.45);padding:0 0 6px;
}

.nav{flex:1;overflow-y:auto;padding:10px 8px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:#c6d4ea;cursor:pointer;margin-bottom:2px;user-select:none;
}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.active{background:var(--asa-verde);color:#fff;font-weight:600}
.nav-item .ic{width:18px;text-align:center}

.sidebar-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.45)}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:58px;flex:0 0 58px;background:var(--card);
  border-bottom:1px solid var(--border);box-shadow:inset 0 -3px 0 var(--asa-azul-claro);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
}
.topbar .titulo{font-size:15px;font-weight:700}
.topbar .quien{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-muted)}
.topbar .rol-badge{
  background:var(--asa-azul-pastel);color:var(--asa-azul-osc);padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700;
}
.btn-logout{
  background:none;border:1px solid var(--border);border-radius:7px;padding:6px 12px;font-size:12.5px;color:var(--text-muted);
}
.btn-logout:hover{background:#fef2f2;border-color:#fecaca;color:#b91c1c}

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

/* ── Componentes genéricos ───────────────────────────────────────────────*/
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card + .card{margin-top:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.card-head h2{font-size:15.5px;margin:0}
.card-head .actions{display:flex;gap:8px;flex-wrap:wrap}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.kpi-card .lbl{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi-card .val{font-size:26px;font-weight:800;margin-top:6px}
.kpi-card.g .val{color:var(--asa-green-dark)}
.kpi-card.c .val{color:var(--asa-cyan-dark)}
.kpi-card.t .val{color:var(--asa-teal)}
.kpi-card.w .val{color:var(--warning)}

.subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.subtab{
  padding:6px 13px;border-radius:20px;font-size:12.5px;font-weight:600;border:1px solid var(--border);
  background:#fff;color:var(--text-muted);
}
.subtab.active{background:var(--asa-green);border-color:var(--asa-green);color:#fff}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar input[type=text],.toolbar input[type=search],.toolbar select{
  padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;
}

.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{
  text-align:left;padding:9px 10px;background:#f7faf8;color:var(--text-muted);
  font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--border);white-space:nowrap;
}
table.data td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
table.data tbody tr:hover{background:#fbfdfb}
table.data tbody tr.clickable{cursor:pointer}
.empty-row{text-align:center;color:var(--text-muted);padding:26px 0}

.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700}
.badge-gray{background:#eef1f0;color:#4b5a52}
.badge-green{background:#e8f5e2;color:var(--asa-green-dark)}
.badge-cyan{background:#e3f4fc;color:var(--asa-cyan-dark)}
.badge-teal{background:#e1f5f2;color:var(--asa-teal)}
.badge-warn{background:#fef3e0;color:var(--warning)}
.badge-red{background:#fdecec;color:var(--danger)}

.btn{border:1px solid var(--border);background:#fff;border-radius:7px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--text)}
.btn:hover{background:#f7faf8}
.btn-sm{padding:4px 9px;font-size:11.5px}
.btn-primary{background:var(--asa-green);border-color:var(--asa-green);color:#fff}
.btn-primary:hover{background:var(--asa-green-dark)}
.btn-cyan{background:var(--asa-cyan);border-color:var(--asa-cyan);color:#fff}
.btn-cyan:hover{background:var(--asa-cyan-dark)}
.btn-danger{background:#fff;border-color:#fecaca;color:#b91c1c}
.btn-danger:hover{background:#fef2f2}
.btn[disabled]{opacity:.55;cursor:default}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,25,20,.5);display:flex;align-items:flex-start;
  justify-content:center;padding:5vh 16px;overflow-y:auto;z-index:50;
}
.modal{
  background:#fff;border-radius:12px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal.modal-lg{max-width:760px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{margin:0;font-size:15px}
.modal-close{background:none;border:none;font-size:20px;color:var(--text-muted);line-height:1}
.modal-body{padding:18px 20px;max-height:70vh;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
.form-group label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:7px;
}
.form-group textarea{resize:vertical;min-height:60px}
.form-hint{font-size:11.5px;color:var(--text-muted);margin-top:4px}
.form-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:7px;padding:8px 10px;font-size:12.5px;margin-bottom:10px}

.items-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.item-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:20px;right:20px;background:#16281f;color:#fff;padding:12px 18px;
  border-radius:9px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:100;
  opacity:0;transform:translateY(8px);transition:.2s;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:#7f1d1d}

.muted{color:var(--text-muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.center-msg{text-align:center;padding:60px 20px;color:var(--text-muted)}


/* ── Estado de habitaciones / puntos del día ─────────────────────────────*/
.estado-chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;
  font-size:12px;font-weight:700;line-height:1.6;
}
.estado-chip.hecho{background:var(--asa-verde-pastel);color:var(--asa-verde-osc)}
.estado-chip.pendiente{background:#fef2f2;color:#b91c1c}
.estado-chip.fuera{background:#f1f5f9;color:var(--text-muted)}

.grid-habitaciones{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;
}
.hab{
  border:1.5px solid transparent;border-radius:8px;padding:10px 6px;text-align:center;
  font-size:13px;font-weight:700;cursor:pointer;
}
.hab.hecho{background:var(--asa-verde-pastel);border-color:var(--asa-verde);color:var(--asa-verde-osc)}
.hab.pendiente{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
.hab.fuera{background:#f8fafc;border-color:var(--border);color:#94a3b8}
.hab small{display:block;font-weight:500;font-size:10.5px;opacity:.8;margin-top:2px}

/* ── Sidebar en pantallas chicas ─────────────────────────────────────────*/
@media (max-width:860px){
  .app-shell{flex-direction:column}
  .sidebar{width:100%;flex:0 0 auto}
  .nav{display:flex;flex-wrap:wrap;gap:4px;padding:8px}
  .nav-section{width:100%;padding:0 4px;margin:8px 0 2px}
  .nav-item{margin-bottom:0}
}

/* ── Módulo Plantas ──────────────────────────────────────────────────────*/
.text-muted{color:var(--text-muted);font-size:13px}

.grid-plantas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;
}
.planta-card{
  border:1px solid var(--border);border-left:4px solid var(--asa-azul);
  border-radius:var(--radius);padding:14px 16px;cursor:pointer;background:var(--card);
  transition:box-shadow .15s,border-color .15s;
}
.planta-card:hover{box-shadow:0 4px 14px rgba(31,45,77,.10);border-left-color:var(--asa-verde)}
.planta-nombre{font-weight:700;font-size:14.5px;line-height:1.3}
.planta-cliente{color:var(--text-muted);font-size:12.5px;margin-top:2px}
.planta-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.planta-dir{color:var(--text-muted);font-size:11.5px;margin-top:8px}

.chip{
  display:inline-block;background:var(--asa-azul-pastel);color:var(--asa-azul-osc);
  padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;
}

/* Pestañas dentro de una ficha */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap}
.tab{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:9px 14px;font-size:13.5px;color:var(--text-muted);font-weight:600;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--asa-azul);border-bottom-color:var(--asa-azul)}

.resumen-dia{margin-bottom:16px}
.resumen-dia .barra{
  height:8px;background:var(--border);border-radius:20px;overflow:hidden;margin:8px 0;
}
.resumen-dia .barra span{display:block;height:100%;background:var(--asa-verde);border-radius:20px}
.resumen-dia .leyenda{display:flex;gap:8px;margin-top:8px}

.dia-bloque{margin-bottom:20px}
.dia-cabecera{
  font-size:13px;font-weight:700;color:var(--asa-azul-osc);
  padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--border);
}

/* ── Formularios de los modales de administración ────────────────────────*/
.campo{display:block;margin-bottom:14px}
.campo > span,.campo{font-size:13px;font-weight:600}
.campo input,.campo select,.campo textarea{
  display:block;width:100%;margin-top:5px;padding:9px 11px;
  border:1px solid var(--border);border-radius:8px;font-weight:400;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--asa-azul);
}
.campo input[readonly]{background:#f8fafc;color:var(--text-muted)}
.campo .ayuda{display:block;margin-top:5px;font-weight:400;font-size:11.5px;color:var(--text-muted)}
.campo-check{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:10px}
.campo-check input{width:auto}
.qr-fijo{
  display:inline-block;margin-top:5px;background:var(--asa-azul-pastel);
  color:var(--asa-azul-osc);padding:5px 10px;border-radius:6px;font-size:12.5px;
}
.btn-danger{color:#b91c1c;border-color:#fecaca}
.btn-danger:hover{background:#fef2f2}
.toolbar-sep{flex:1}

.resumen-import{
  margin-top:14px;padding:12px 14px;background:var(--asa-azul-pastel);
  border-radius:8px;font-size:13px;line-height:1.9;
}

/* ── Preguntas de una estrategia ─────────────────────────────────────────*/
.grupo-preguntas{margin-bottom:20px}
.pregunta{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--border);border-radius:8px;margin-bottom:6px;
}
.pregunta-texto{flex:1;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.pregunta-meta{font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.pregunta-acciones{display:flex;gap:6px}

/* ── Histograma ──────────────────────────────────────────────────────────*/
.hist-svg{width:100%;height:190px;display:block;background:#fbfcfe;border-radius:8px}
.hist-ejes{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:6px}
.hist-leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px}
.hist-leyenda .serie{display:flex;align-items:center;gap:6px}
.hist-leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ── Dashboard ───────────────────────────────────────────────────────────*/
.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.dos-columnas > .card{margin-top:0}
@media (max-width:1100px){ .dos-columnas{grid-template-columns:1fr} }

.mini-kpis{display:flex;flex-wrap:wrap;gap:22px}
.mini-kpis > div{display:flex;flex-direction:column}
.mk-val{font-size:26px;font-weight:700;color:var(--asa-azul-osc);line-height:1.1}
.mk-lbl{font-size:12px;color:var(--text-muted);margin-top:3px;max-width:180px}

.barra{height:8px;background:var(--border);border-radius:20px;overflow:hidden;margin-top:6px}
.barra > span{display:block;height:100%;background:var(--asa-verde);border-radius:20px}

/* Ranking de plagas */
.lista-barras{display:flex;flex-direction:column;gap:9px}
.fila-barra{display:grid;grid-template-columns:1fr 2fr auto auto;gap:10px;align-items:center;font-size:13px}
.fb-nombre{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-pista{height:9px;background:var(--border);border-radius:20px;overflow:hidden}
.fb-pista > span{display:block;height:100%;border-radius:20px}
.fb-valor{font-weight:700;min-width:44px;text-align:right}
.fb-tend{font-size:11.5px;font-weight:700;min-width:62px;text-align:right}
.fb-tend.sube{color:#b91c1c}
.fb-tend.baja{color:var(--asa-verde-osc)}
.fb-tend.estable{color:var(--text-muted)}
.fb-tend.nueva{color:var(--warning)}

/* ── Mapa / planos ───────────────────────────────────────────────────────*/
.mapa-wrap{display:grid;grid-template-columns:1fr 280px;gap:16px}
@media (max-width:1000px){ .mapa-wrap{grid-template-columns:1fr} }

.plano{position:relative;display:inline-block;max-width:100%;line-height:0}
.plano img{max-width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:8px;cursor:crosshair}
.pin{
  position:absolute;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;cursor:pointer;padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.pin:hover{transform:translate(-50%,-50%) scale(1.25);z-index:2}

.mapa-lateral{display:flex;flex-direction:column;gap:10px;min-width:0}
.mapa-lateral input[type="search"]{
  padding:8px 11px;border:1px solid var(--border);border-radius:8px;width:100%;
}
.mapa-ayuda{
  background:var(--asa-azul-pastel);border-radius:8px;padding:10px 12px;
  font-size:12.5px;color:var(--asa-azul-osc);
}
.mapa-ayuda.activa{background:var(--asa-verde-pastel);color:var(--asa-verde-osc);font-weight:600}
#mapa-pendientes{max-height:520px;overflow-y:auto}
.pto-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  cursor:pointer;border:1px solid transparent;
}
.pto-item:hover{background:var(--asa-azul-pastel)}
.pto-item.armado{background:var(--asa-verde-pastel);border-color:var(--asa-verde)}
.pto-cod{font-size:13px;font-weight:700}
.pto-area{font-size:11px;color:var(--text-muted)}

/* Lista de plantas asignables a una cuenta de hotel */
.lista-plantas{
  max-height:260px;overflow-y:auto;border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;margin-top:5px;
}
.lista-plantas .campo-check{margin-bottom:4px;font-weight:400}

/* ── Qué lleva cada tipo de punto: sus estrategias y sus plagas ──────────
   Dos bloques de casillas dentro del modal del tipo. Se separan con una línea
   arriba porque son otra cosa que los datos del tipo: uno define QUÉ ES el
   punto, el otro QUÉ SE HACE con él. */
.bloque-config{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--border);
}
.bloque-config h4{font-size:14px;margin-bottom:4px}
.bloque-config h5{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted);margin:0 0 4px;
}
.bloque-config .text-muted{margin-bottom:10px}
.campo-check.lista-check{
  align-items:flex-start;gap:9px;padding:7px 9px;margin-bottom:5px;
  border:1px solid var(--border);border-radius:8px;line-height:1.35;
}
.campo-check.lista-check:hover{background:var(--asa-azul-pastel)}
.campo-check.lista-check input{margin-top:2px}
.campo-check.lista-check small{color:var(--text-muted);font-size:11.5px}
.plagas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.grupo-plagas .campo-check.lista-check{margin-bottom:4px}

/* ── Vista previa de la app del técnico ──────────────────────────────────*/
.previa-tel{
  max-width:360px;margin:10px auto 0;background:#f5f7fa;
  border:1px solid var(--border);border-radius:16px;padding:12px;
}
.previa-fija{
  background:var(--asa-azul-osc);color:#fff;border-radius:10px;
  padding:10px 12px;font-size:12.5px;font-weight:600;text-align:center;margin-bottom:10px;
}
.previa-preg{background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 12px;margin-bottom:9px}
.previa-texto{font-size:13.5px;font-weight:600;margin-bottom:8px}
.previa-obl{color:var(--danger)}
.previa-opciones{display:flex;flex-wrap:wrap;gap:6px}
.previa-btn{
  border:1px solid var(--border);border-radius:8px;padding:6px 11px;
  font-size:12.5px;background:#fff;
}
.previa-campo{
  border:1px solid var(--border);border-radius:8px;padding:8px 11px;
  font-size:12.5px;color:var(--text-muted);background:#fff;
}
.previa-nota{font-size:11px;color:var(--warning);margin-top:7px}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICIOS DEL DÍA, DESGLOSE Y NO REALIZADOS   (servicios.js)
   ═══════════════════════════════════════════════════════════════════════ */

/* Pestaña en rojo: la de "no realizados" tiene que verse distinta desde la
   barra, porque es la que nadie quiere abrir y es la que hay que abrir. */
.tab.tab-rojo { color: #b91c1c; }
.tab.tab-rojo.active { color: #b91c1c; border-bottom-color: #b91c1c; }

.card-rojo { border-left: 4px solid #b91c1c; }
.card-rojo .card-head h2 { color: #b91c1c; }

/* Tarjetas de servicio: se leen de un golpe y se tocan bien en una tableta */
.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.serv-card {
  border: 1px solid var(--linea, #e2e8f0);
  border-left: 4px solid #4A7D4D;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
  transition: transform .08s ease, box-shadow .12s ease;
}
.serv-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.10); }
.serv-card.fuera { border-left-color: #d97706; }
.serv-card.pendiente { border-left-color: #dc2626; }
.serv-cod  { font-weight: 700; font-size: 14px; }
.serv-area { font-size: 12px; color: #64748b; margin-top: 2px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serv-pie  { display: flex; gap: 6px; align-items: center; margin-top: 8px;
             font-size: 11.5px; color: #94a3b8; }

/* Ficha del servicio — la misma en pantalla y al imprimir */
.ficha-servicio h4 { margin: 18px 0 8px; font-size: 14px; color: #32539C; }
.fs-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 12px 14px; border-radius: 10px; background: #EAF0F8;
  border-left: 4px solid #4A7D4D;
}
.fs-cabecera.no-hecho { background: #fee2e2; border-left-color: #b91c1c; }
.fs-titulo { font-size: 17px; font-weight: 700; }
.fs-sub    { font-size: 12.5px; color: #475569; margin-top: 2px; }
.fs-estado { text-align: right; font-weight: 700; color: #4A7D4D; font-size: 13px; white-space: nowrap; }
.fs-estado.rojo { color: #b91c1c; }
.fs-estado small { display: block; font-weight: 400; color: #475569; font-size: 11.5px; margin-top: 2px; }

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

.fs-alerta {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: #fee2e2; color: #7f1d1d; font-size: 13.5px; line-height: 1.5;
}
.fs-tabla { width: 100%; }
.fs-hallazgos { margin: 0; padding-left: 18px; font-size: 13.5px; }
.fs-hallazgos li { margin-bottom: 8px; }

/* Fotos: tamaño parejo y con pie. Un reporte de auditoría con fotos sin decir
   de qué punto son no prueba nada, por eso el figcaption no es opcional. */
.fs-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.fs-fotos figure { margin: 0; }
.fs-fotos img {
  width: 100%; height: 150px; object-fit: cover;
  border-radius: 8px; border: 1px solid #e2e8f0; display: block; background: #f1f5f9;
}
.fs-fotos figcaption { font-size: 11px; color: #94a3b8; margin-top: 4px; text-align: center; }

/* Vista previa de un plano en PDF dentro del panel. Alto fijo y generoso: un
   plano de hotel en un recuadro pequeño no se revisa, se adivina. */
.plano-pdf { border: 1px solid var(--linea, #e2e8f0); border-radius: 10px; overflow: hidden; background: #f8fafc; }
.plano-pdf iframe { width: 100%; height: 66vh; min-height: 460px; border: 0; display: block; }

/* Bloque plegable de coordenadas al subir un plano */
.bloque-geo { border: 1px solid var(--linea, #e2e8f0); border-radius: 10px; padding: 10px 12px; margin-top: 4px; }
.bloque-geo summary { cursor: pointer; font-weight: 600; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   IMPRESIÓN DEL COMPROBANTE DE SERVICIO
   
   La capa #area-impresion solo existe mientras dura la impresión. En
   pantalla está escondida; al imprimir, se esconde todo lo demás y queda
   ella sola. Así no hay que duplicar la ficha en otra ventana — que era
   justo lo que tumbaba el navegador cuando el servicio traía fotos en
   base64.
   ═══════════════════════════════════════════════════════════════════════ */
#area-impresion { display: none; }

.imp-encabezado {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  border-bottom: 3px solid #32539C; padding-bottom: 12px; margin-bottom: 18px;
}
.imp-encabezado h1 { font-size: 19px; margin: 0; color: #32539C; }
.imp-encabezado p  { margin: 2px 0 0; color: #475569; font-size: 12.5px; }

@media print {
  @page { margin: 14mm; }

  /* Fuera el armazón del panel: barra lateral, topbar, modales y avisos */
  body > *:not(#area-impresion) { display: none !important; }

  #area-impresion {
    display: block !important;
    position: static;
    padding: 0;
    background: #fff;
    color: #0f172a;
    font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Que una foto o una fila de tabla no se parta entre dos hojas */
  #area-impresion .fs-fotos figure,
  #area-impresion .fs-cabecera,
  #area-impresion tr { break-inside: avoid; page-break-inside: avoid; }
  #area-impresion h4 { break-after: avoid; page-break-after: avoid; }

  /* Tres fotos por fila al imprimir: a dos salen enormes y gastan páginas */
  #area-impresion .fs-fotos { grid-template-columns: repeat(3, 1fr); }
  #area-impresion .fs-fotos img { height: 120px; }

  /* 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; }
}

/* ── Pendientes por área y días anteriores ───────────────────────────────*/
.kpi-card.r .val{color:var(--danger)}
.estado-chip.aldia{background:#f3f9f3;color:var(--asa-verde);border:1px solid #cfe5d0}
.estado-chip.norealizado{background:#fefce8;color:#a16207;border:1.5px dashed #eab308}
.hab.aldia{background:#f6fbf6;border-color:#bcdcbe;color:var(--asa-verde)}
.hab.norealizado{background:#fefce8;border:1.5px dashed #eab308;color:#a16207}
.hab[data-insp]{cursor:pointer}
.hab:not([data-insp]){cursor:default}
.resumen-dia .leyenda{flex-wrap:wrap}
.dia-cabecera .estado-chip{margin:0 6px}

.lista-dias{display:flex;flex-direction:column;gap:8px}
.dia-fila{
  position:relative;border:1px solid var(--border);border-left:4px solid var(--asa-verde);
  border-radius:var(--radius);padding:12px 40px 12px 14px;background:var(--card);cursor:pointer;
  transition:box-shadow .15s;
}
.dia-fila:hover{box-shadow:0 4px 14px rgba(31,45,77,.10)}
.dia-fecha{font-weight:700;text-transform:capitalize;margin-bottom:6px}
.dia-datos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.dia-flecha{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--text-muted)}

/* ── Solicitudes de los hoteles ──────────────────────────────────────────*/
.nav-item{position:relative}
.nav-badge{
  margin-left:auto;background:#dc2626;color:#fff;border-radius:20px;min-width:20px;height:20px;
  padding:0 6px;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
}
.sol-hilo{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;padding:4px}
.sol-msg{max-width:80%;border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:13.5px;background:#f8fafc}
.sol-msg .txt{white-space:pre-wrap}
.sol-msg.hotel{align-self:flex-start;background:#fff7ed;border-color:#fed7aa}
.sol-msg.tecnico{align-self:flex-start;background:var(--asa-verde-pastel);border-color:#cfe5d0}
.sol-msg.asa{align-self:flex-end;background:var(--asa-azul-pastel);border-color:var(--asa-azul-claro)}
.sol-msg .autor{font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:2px}
.sol-msg .hora{font-size:10.5px;color:var(--text-muted);text-align:right;margin-top:2px}

/* ── Etiquetas QR impresas ───────────────────────────────────────────────*/
.et-seccion{border-top:1px solid var(--border);padding-top:12px;margin-top:12px}
.et-seccion:first-child{border-top:0;margin-top:0;padding-top:0}
.et-seccion h4{margin:0 0 4px}
.et-caja{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:#f8fafc;line-height:1.8}
.et-resultados{max-height:260px;overflow:auto;margin-top:6px}
.et-item{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border:1px solid var(--border);border-radius:7px;margin-bottom:5px;cursor:pointer;background:#fff}
.et-item:hover{border-color:var(--asa-verde);background:var(--asa-verde-pastel)}
.et-fila{display:flex;gap:8px;align-items:center;margin:4px 0}

/* ── Semáforo de mantenimiento (flota) ─────────────────────────────────── */
.sem-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.sem-chip.sem-verde{background:#dcfce7;color:#166534}
.sem-chip.sem-amarillo{background:#fef9c3;color:#854d0e;border:1px solid #facc15}
.sem-chip.sem-rojo{background:#fee2e2;color:#b91c1c;border:1px solid #ef4444}
.sem-chip.sem-gris{background:#f1f5f9;color:#64748b}
.sem-txt{font-weight:600}
.sem-txt.sem-verde{color:#166534}
.sem-txt.sem-amarillo{color:#a16207}
.sem-txt.sem-rojo{color:#b91c1c}
.sem-txt.sem-gris{color:#64748b}
tr.sem-fila-rojo td:first-child{box-shadow:inset 4px 0 0 #ef4444}
tr.sem-fila-amarillo td:first-child{box-shadow:inset 4px 0 0 #facc15}
tr.sem-fila-verde td:first-child{box-shadow:inset 4px 0 0 #22c55e}
tr.sem-fila-rojo{background:#fef2f2}
tr.sem-fila-amarillo{background:#fefce8}

/* ── Técnicos (tecnicos.js) ───────────────────────────────────────────── */
.oculto-panel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kpi-de{font-size:15px;font-weight:600;color:var(--text-muted)}
.kpi-nombre{font-size:19px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sub{font-size:12px;color:var(--text-muted);margin-top:4px}
.aviso-tec{margin-top:4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-left:4px solid #b91c1c}
.aviso-tec.ok{border-left-color:var(--asa-verde-osc);color:var(--asa-verde-osc)}
.tabla-tec td{vertical-align:middle}
.tabla-tec tr.clickable{cursor:pointer}
.tabla-tec tr.clickable:focus-visible{outline:2px solid var(--asa-azul);outline-offset:-2px}
.tec-puesto{font-size:18px;text-align:center;width:40px}
.tec-nombre{font-weight:700}
.tec-sub{font-size:11.5px;color:var(--text-muted)}
.tec-barra-celda{display:flex;align-items:center;gap:8px;min-width:150px}
.tec-barra{flex:1;height:8px;background:var(--border);border-radius:20px;overflow:hidden}
.tec-barra > span{display:block;height:100%;background:var(--asa-azul-medio);border-radius:20px}
.tec-componentes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
@media (max-width:760px){ .tec-componentes{grid-template-columns:1fr} }
.tec-comp-cab{display:flex;justify-content:space-between;font-size:13px}
.tec-h4{margin:18px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}
.tec-chips{display:flex;flex-wrap:wrap;gap:6px}

/* ── Plagas encontradas (plagas.js) ───────────────────────────────────── */
.pl-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pl-tarjeta{border:1px solid var(--border);border-left:5px solid var(--asa-azul);border-radius:10px;padding:12px 14px;background:#fff}
.pl-n{font-size:28px;font-weight:800;line-height:1.1}
.pl-nombre{font-weight:700;margin-top:2px}
.pl-sub{font-size:12px;color:var(--text-muted);margin:4px 0}

/* ── Chinche / código rosa (incidencias.js) ───────────────────────────── */
.btn-danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn-danger:hover{background:#991b1b}
.btn-success{background:#15803d;border-color:#15803d;color:#fff}
.btn-success:hover{background:#166534}
.btn:disabled{opacity:.5;cursor:not-allowed}
.inc-cert{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px 14px;margin-top:6px}
.inc-cert .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inc-lista{display:flex;flex-direction:column;gap:6px}
.inc-item{display:grid;grid-template-columns:minmax(220px,2fr) minmax(140px,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:13px}
.inc-item.hecho{background:#f3f9f3;border-color:#cfe5d0}
.inc-item label{display:flex;gap:8px;align-items:center;cursor:pointer}
.inc-item input[type=checkbox]{width:auto;transform:scale(1.15)}
.inc-paso{grid-template-columns:auto 140px minmax(200px,2fr) minmax(120px,1fr) auto auto}
.inc-quien{font-size:11.5px;white-space:nowrap}
.inc-botones{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.inc-guardar{display:flex;justify-content:flex-end;margin:-4px 0 16px}
.inc-log{font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--border)}
.inc-fila-cond,.inc-fila-dir{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.inc-fila-cond .pc-texto,.inc-fila-dir .pd-texto{flex:1;min-width:220px}
.pd-dia input{width:64px}
.pd-niv,.pd-dia{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap}
.pd-niv input{width:auto}
@media (max-width:760px){.inc-item,.inc-paso{grid-template-columns:1fr}}

/* ── Cronograma (cronograma.js) ───────────────────────────────────────── */
.cr-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cr-dia{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:8px;min-height:120px;display:flex;flex-direction:column;gap:6px}
.cr-dia.hoy{border-color:var(--asa-azul);box-shadow:0 0 0 2px rgba(50,83,156,.15)}
.cr-dia-tit{font-weight:800;font-size:12.5px;display:flex;justify-content:space-between}
.cr-dia-tit span{color:var(--text-muted);font-weight:600}
.cr-item{background:#fff;border:1px solid var(--border);border-left:4px solid var(--asa-azul);border-radius:7px;padding:6px 7px;cursor:pointer;font-size:12px}
.cr-item:hover{box-shadow:var(--shadow)}
.cr-item.realizado{background:#f3f9f3}
.cr-item.cancelado{opacity:.55;text-decoration:line-through}
.cr-hora{font-weight:800}
.cr-planta{font-weight:700;font-size:11px;text-transform:uppercase}
.cr-tit{margin-top:2px;line-height:1.3}
.cr-sub{color:var(--text-muted);font-size:10.5px;margin-top:2px}
.cr-vacio{color:var(--text-muted);text-align:center;font-size:12px;margin-top:10px}
.cr-punto{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
@media (max-width:1100px){.cr-semana{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cr-semana{grid-template-columns:1fr}}

/* Tipos de punto: editar y agregar plagas */
.plagas-acciones{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.plaga-fila{display:flex;align-items:center;gap:4px}
.plaga-fila .lista-check{flex:1;margin-bottom:4px}
.btn-icono{background:none;border:0;cursor:pointer;font-size:13px;padding:4px 6px;border-radius:6px;opacity:.55}
.btn-icono:hover{opacity:1;background:var(--asa-azul-pastel)}
.plaga-editor{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 10px;width:100%}
.plaga-editor input,.plaga-editor select{flex:1;min-width:110px}
.plaga-sugeridas{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:12px;background:#fbfcfe}
.plaga-sugeridas h5{margin:10px 0 4px}
.plaga-sug-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 10px}

/* Crear puntos por áreas */
.pa-lista{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:#fbfcfe}
.pa-lista .campo-check{display:block;margin:4px 0}

/* ── Técnicos en vivo (rastreo.js) ─────────────────────────────────────── */
.rt-grid{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
@media (max-width:900px){.rt-grid{grid-template-columns:1fr}}
.rt-lista{display:flex;flex-direction:column;gap:6px;max-height:620px;overflow:auto}
.rt-tec{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;font:inherit}
.rt-tec:hover{background:#f8fafc}
.rt-tec.activo{border-color:var(--asa-azul);box-shadow:0 0 0 2px rgba(50,83,156,.15)}
.rt-tec[disabled]{opacity:.55;cursor:default}
.rt-tec-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.rt-tec-txt small{color:var(--text-muted,#64748b);font-size:12px}
.rt-punto{width:12px;height:12px;border-radius:50%;margin-top:4px;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.08)}
.rt-mapa{height:520px;border-radius:12px;border:1px solid var(--border);background:#e2e8f0}
@media (max-width:900px){.rt-mapa{height:380px}}
.rt-mapa.rt-fijando{cursor:crosshair;outline:3px dashed var(--asa-azul);outline-offset:2px}
.rt-marca{position:relative}
.rt-marca-punto{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:translate(-50%,-50%)}
.rt-marca-nombre{position:absolute;left:12px;top:-10px;white-space:nowrap;background:rgba(15,23,42,.85);color:#fff;font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px}
.rt-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:600px){.rt-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rt-kpis div{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.rt-kpis strong{display:block;font-size:17px;color:var(--asa-azul-osc,#24407C)}
.rt-kpis span{font-size:12px;color:var(--text-muted,#64748b)}