:root{
  --navy:#3D8FC4; --navy-700:#2F7BAD; --navy-900:#24557A; --navy-50:#EAF5FB;
  --celeste-lateral:#F1F8FC; --celeste-borde:#D6EAF5;
  --rose:#E8B59A; --rose-50:#FBF1EB;
  --bg:#F6FAFD; --surface:#FFFFFF;
  --line:#E1E6ED; --line-strong:#CBD3DE;
  --text:#1E2733; --muted:#5F6B7A; --faint:#8A95A3;
  --ok:#2E7D4F; --ok-50:#E7F6EC; --warn:#9A5B0B; --warn-50:#FFF4E3; --danger:#B42318; --danger-50:#FBEAEA;
  --smart:#E08A2E; --smart-50:#FFF4E6;
  --radius:10px;
  --font:'Work Sans',sans-serif; --font-brand:'Cormorant Garamond',serif;
  --shadow:0 1px 2px rgba(30,39,51,.04), 0 6px 16px rgba(30,39,51,.06);
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.4;}
button{font-family:inherit;}
a{color:var(--navy-700);text-decoration:none;}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--navy-900),var(--navy));padding:16px;}
.login-caja{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:34px 30px;width:100%;max-width:360px;}
.marca-login{font-family:var(--font-brand);font-weight:600;font-size:22px;color:var(--navy-900);text-align:center;margin-bottom:4px;}
.marca-login small{display:block;font-family:var(--font);font-size:11.5px;color:var(--muted);font-weight:500;margin-top:2px;}
.login-caja form{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.login-caja label{font-size:12.5px;font-weight:600;color:var(--navy-900);display:flex;flex-direction:column;gap:5px;}
.login-caja input{border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;}
.login-caja input:focus{outline:2px solid var(--navy);outline-offset:1px;}
.login-error{background:var(--danger-50);color:var(--danger);border-radius:8px;padding:9px 12px;font-size:12.5px;}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh;}
.lateral{width:252px;flex:none;background:var(--celeste-lateral);border-right:1px solid var(--celeste-borde);display:flex;flex-direction:column;padding:18px 14px;}
.marca{display:flex;align-items:center;gap:10px;padding:4px 6px 18px;border-bottom:1px solid var(--celeste-borde);margin-bottom:10px;}
.marca .logo-dot{width:34px;height:34px;border-radius:9px;background:linear-gradient(160deg,var(--navy-900),var(--navy));display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-weight:700;}
.marca-plataforma{font-family:var(--font-brand);font-weight:600;font-size:17px;color:var(--navy-900);line-height:1.15;}
.marca-plataforma small{display:block;font-family:var(--font);font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.02em;}
.menu{display:flex;flex-direction:column;gap:2px;flex:1;}
.menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text);font-size:13.5px;font-weight:500;cursor:pointer;}
.menu a:hover{background:#fff;}
.menu a.activo{background:var(--navy);color:#fff;}
.usuario-caja{border-top:1px solid var(--celeste-borde);padding-top:12px;margin-top:10px;}
.usuario-nombre{font-weight:600;font-size:13.5px;}
.usuario-rol{color:var(--muted);font-size:12px;margin-top:1px;}
.enlace-lateral{background:none;border:none;color:var(--navy-700);font-size:12px;font-weight:600;cursor:pointer;padding:0;margin-top:8px;}
.principal{flex:1;min-width:0;display:flex;flex-direction:column;}
.contenido{flex:1;padding:22px 26px 40px;max-width:1280px;width:100%;}

/* ---------- genéricos ---------- */
.vista-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.vista-cab h1{font-size:19px;margin:0 0 3px;}
.vista-cab p{margin:0;color:var(--muted);font-size:13px;}
.boton{border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.boton-primario{background:var(--navy);border-color:var(--navy);color:#fff;}
.boton-outline{background:var(--surface);}
.boton-peligro{background:var(--danger-50);border-color:var(--danger-50);color:var(--danger);}
.boton-pequeno{padding:5px 10px;font-size:12px;}
.boton[disabled]{opacity:.5;cursor:not-allowed;}
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;}
.tabla-envoltura{overflow-x:auto;}
.tabla{width:100%;border-collapse:collapse;font-size:13px;}
.tabla thead th{background:var(--navy-900);color:#fff;text-align:left;padding:9px 12px;font-weight:600;font-size:12px;white-space:nowrap;}
.tabla tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.tabla tbody tr:nth-child(even){background:var(--celeste-lateral);}
.tabla tr.clic{cursor:pointer;}
.tabla tr.clic:hover{background:var(--navy-50);}
.der{text-align:right;}
.cen{text-align:center;}
.numero{font-variant-numeric:tabular-nums;}
.sub{display:block;color:var(--faint);font-size:11.5px;margin-top:2px;}
.vacio{padding:26px;text-align:center;color:var(--muted);font-size:13px;}
.cargando{padding:26px;text-align:center;color:var(--muted);}

.insignia{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;}
.insignia .punto{width:6px;height:6px;border-radius:50%;background:currentColor;}
.est-atendida{background:#FFF2A8;color:#6B5300;}
.est-espera_a_tiempo{background:#F9D3DA;color:#8A2740;}
.est-espera_tarde{background:#D3E3F8;color:#1F4E8C;}
.est-programada{background:#E9EEF5;color:#34537A;}
.est-no_asistio{background:#FDE2DE;color:#A12A1B;}
.est-cancelada{background:#ECEDEF;color:#5B626B;text-decoration:line-through;}
.est-reprogramada{background:#EDE5F7;color:#5B3B8C;}
.est-sin_estado{background:#F3F4F6;color:#6B7280;}
.mod{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;background:var(--navy-50);color:var(--navy-700);margin-left:4px;}
.tag-app{background:var(--navy-50);color:var(--navy-900);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;}
.tag-app-ok{background:var(--ok-50);color:var(--ok);}

.aviso-app{border-left:3px solid var(--navy);background:var(--navy-50);color:var(--navy-900);padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px;}
.comprobante-app-caja{display:flex;align-items:center;gap:10px;background:var(--navy-50);border:1px solid var(--celeste-borde);border-radius:8px;padding:10px 12px;color:var(--navy-900);margin-bottom:10px;}

/* ---------- barra de filtros ---------- */
.filtros-dia{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.filtros-dia input[type=date]{border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit;}
.filtros-dia select{border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit;}

/* ---------- ficha / modal ---------- */
.modal-fondo{position:fixed;inset:0;background:rgba(30,39,51,.45);display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto;z-index:300;}
.modal{background:var(--surface);border-radius:14px;width:100%;max-width:640px;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.modal.chico{max-width:420px;}
.modal-cab{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px;border-bottom:1px solid var(--line);}
.modal-cab h2{margin:0;font-size:17px;}
.modal-cab p{margin:2px 0 0;color:var(--muted);font-size:12.5px;}
.boton-icono{border:none;background:none;cursor:pointer;color:var(--muted);padding:4px;}
.modal-cuerpo{padding:18px 22px;max-height:70vh;overflow-y:auto;}
.modal-pie{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:1px solid var(--line);gap:10px;flex-wrap:wrap;}
.modal-pie .lado{display:flex;gap:8px;flex-wrap:wrap;}
.bloque{margin-bottom:16px;}
.bloque-titulo{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--navy-700);font-weight:700;margin-bottom:9px;}
.bloque-titulo.pastilla{background:var(--navy);color:#fff;display:inline-block;padding:5px 12px;border-radius:999px;text-transform:none;letter-spacing:0;}
.cita-resumen{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.cr-fecha{font-weight:700;font-size:14px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;}
.chip.activo{background:var(--navy);border-color:var(--navy);color:#fff;}
.rejilla{display:grid;gap:12px;}
.rejilla.r2{grid-template-columns:1fr 1fr;}
.campo.col-2{grid-column:span 2;}
@media (max-width: 760px){ .campo.col-2{grid-column:span 1;} }
.campo{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--navy-900);}
.campo input,.campo textarea,.campo select{border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;color:var(--text);}
.campo input[disabled],.campo textarea[disabled]{background:var(--celeste-lateral);color:var(--muted);}
.segmentado{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;}
.segmentado button{border:none;background:var(--surface);padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--muted);}
.segmentado button.activo{background:var(--navy);color:#fff;}
.lectura{color:var(--muted);font-size:12.5px;}

@media (max-width: 760px){
  .app{flex-direction:column;}
  .lateral{width:100%;flex-direction:row;flex-wrap:wrap;padding:12px;}
  .menu{flex-direction:row;flex-wrap:wrap;}
  .rejilla.r2{grid-template-columns:1fr;}
}