/* Hoja de estilos propia y autocontenida (sin dependencias externas, salvo los
   íconos que viven en static/vendor). Rediseño: interfaz clara y minimalista, con
   el color de la agencia (Personalización) como único acento. */
:root {
  --color-primario: #1f4e78;
  --color-primario-oscuro: #16395a;
  --fondo: #f5f6f8;
  --superficie: #ffffff;
  --borde: #e6e8ec;
  --borde-fuerte: #d5d9df;
  --texto: #111827;
  --texto-2: #4b5563;
  --texto-3: #6b7280;
  --acento-suave: color-mix(in srgb, var(--color-primario) 9%, #fff);
  --acento-suave-2: color-mix(in srgb, var(--color-primario) 16%, #fff);
  --radio: 12px;
  --sombra-1: 0 1px 2px rgba(16,24,40,.05);
  --sombra-2: 0 8px 28px rgba(16,24,40,.12);
  --wa-verde: #00a884;
  --wa-verde-oscuro: #008069;
  --wa-saliente: #d9fdd3;
  --wa-fondo-chat: #efeae2;
  --sidebar-ancho: 248px;
}
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  background:var(--fondo); margin:0; color:var(--texto);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--color-primario); }
h4, h5, h6 { margin:0 0 .5rem 0; color:var(--texto); letter-spacing:-.01em; }
h4 { font-size:1.35rem; font-weight:650; }
h5 { font-size:1.1rem; font-weight:650; }
h6 { font-size:.95rem; font-weight:650; }
p { margin:0 0 .75rem 0; }
hr { border:none; border-top:1px solid var(--borde); margin:.75rem 0; }
code { background:#f1f3f5; padding:.1em .35em; border-radius:5px; font-size:.88em; }
::selection { background:var(--acento-suave-2); }

/* ---------- layout helpers ---------- */
.d-flex { display:flex; } .d-block { display:block; } .d-inline-block { display:inline-block; } .d-none { display:none; }
.flex-column { flex-direction:column; }
.flex-grow-1 { flex:1 1 auto; min-width:0; }
.flex-wrap { flex-wrap:wrap; }
.align-items-center { align-items:center; }
.align-items-end { align-items:flex-end; }
.align-items-start { align-items:flex-start; }
.justify-content-between { justify-content:space-between; }
.justify-content-center { justify-content:center; }
.justify-content-end { justify-content:flex-end; }
.justify-content-start { justify-content:flex-start; }
.gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:1rem; }
.text-center { text-align:center; } .text-end { text-align:right; } .text-start { text-align:left; }
.text-muted { color:var(--texto-3); } .text-dark { color:var(--texto); }
.text-danger { color:#d92d20; } .text-success { color:#079455; }
.text-info-emphasis { color:#0c5464; }
.text-warning-emphasis { color:#b54708; }
.text-decoration-none { text-decoration:none; }
.text-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fw-bold { font-weight:700; } .fw-semibold { font-weight:600; } .fw-normal { font-weight:400; }
.fs-3 { font-size:1.75rem; letter-spacing:-.02em; }
.small { font-size:.85rem; }
.align-middle { vertical-align:middle; } .align-baseline { vertical-align:baseline; }
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}
.px-3{padding-left:1rem;padding-right:1rem}
.py-4{padding-top:1.5rem;padding-bottom:1.5rem}
.w-100{width:100%}
.opacity-25{opacity:.25}
.border{border:1px solid var(--borde)}
.border-bottom{border-bottom:1px solid var(--borde)}
.border-light{border-color:#f1f3f5!important}
.border-start{border-left:1px solid var(--borde)}
.border-4{border-width:0 0 0 4px!important; border-style:solid;}
.border-danger{border-color:#f04438!important}
.border-warning{border-color:#f79009!important}
.border-success{border-color:#12b76a!important}
.rounded-pill{border-radius:50rem}
.shadow-sm{box-shadow:var(--sombra-1)}
.bg-white{background:#fff}

/* ---------- grid ---------- */
.row { display:flex; flex-wrap:wrap; margin:0 -8px; }
.row > [class*="col"] { padding:0 8px; margin-bottom:1rem; }
.row.g-2 > [class*="col"] { margin-bottom:.5rem; }
.col, .col-md { flex:1 1 0; }
.col-md-1 { flex:0 0 8.3333%; max-width:8.3333%; }
.col-md-2 { flex:0 0 16.6667%; max-width:16.6667%; }
.col-md-3 { flex:0 0 25%; max-width:25%; }
.col-md-4 { flex:0 0 33.3333%; max-width:33.3333%; }
.col-md-5 { flex:0 0 41.6667%; max-width:41.6667%; }
.col-md-6 { flex:0 0 50%; max-width:50%; }
.col-md-7 { flex:0 0 58.3333%; max-width:58.3333%; }
.col-md-8 { flex:0 0 66.6667%; max-width:66.6667%; }
.col-md-9 { flex:0 0 75%; max-width:75%; }
.col-md-10 { flex:0 0 83.3333%; max-width:83.3333%; }
.col-md-12, .col-12 { flex:0 0 100%; max-width:100%; }
@media (max-width:1100px){ .col-md-3 { flex:0 0 50%; max-width:50%; } .col-md-2 { flex:0 0 33.3333%; max-width:33.3333%; } }
@media (max-width:720px){ [class*="col-md-"] { flex:0 0 100%; max-width:100%; } }

/* ---------- estructura general ---------- */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-ancho); flex:0 0 var(--sidebar-ancho); background:var(--superficie);
  border-right:1px solid var(--borde); position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; z-index:40;
}
.brand {
  display:flex; align-items:center; gap:.6rem; min-height:64px; padding:.9rem 1.15rem;
  font-weight:700; font-size:1rem; color:var(--texto); border-bottom:1px solid var(--borde);
}
.brand img { max-height:36px; max-width:190px; border-radius:6px; }
.brand-icono {
  width:34px; height:34px; border-radius:10px; background:var(--color-primario); color:#fff;
  display:grid; place-items:center; font-size:1rem; flex:0 0 auto;
}
.sidebar-nav { padding:.75rem .7rem 1rem; overflow-y:auto; flex:1 1 auto; }
.nav-titulo {
  font-size:.68rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:#9aa1ac; padding:.9rem .65rem .35rem;
}
.sidebar a {
  display:flex; align-items:center; gap:.7rem; color:var(--texto-2); text-decoration:none;
  padding:.5rem .65rem; border-radius:9px; font-weight:500; font-size:.92rem; margin-bottom:2px;
  transition:background .12s, color .12s;
}
.sidebar a .bi { font-size:1.05rem; width:1.2rem; text-align:center; color:#8b93a0; transition:color .12s; }
.sidebar a:hover { background:#f3f4f6; color:var(--texto); }
.sidebar a.active { background:var(--acento-suave); color:var(--color-primario); font-weight:600; }
.sidebar a.active .bi { color:var(--color-primario); }
.sidebar a .badge { margin-left:auto; }
.sidebar-pie {
  border-top:1px solid var(--borde); padding:.75rem .9rem; display:flex; align-items:center; gap:.65rem;
}
.sidebar-pie .usuario-nombre { font-weight:600; font-size:.88rem; line-height:1.2; }
.sidebar-pie .usuario-rol { font-size:.75rem; color:var(--texto-3); text-transform:capitalize; }
.sidebar-pie a { margin:0 0 0 auto; padding:.45rem; color:var(--texto-3); }
.avatar {
  width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-weight:650; font-size:.8rem; color:#fff; background:var(--color-primario); letter-spacing:.02em;
}
.app-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.navbar, .topbar {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem 1.5rem; min-height:64px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde); position:sticky; top:0; z-index:30;
}
.topbar-titulo { font-weight:650; font-size:1rem; letter-spacing:-.01em; }
.topbar-sub { color:var(--texto-3); font-size:.8rem; }
.btn-menu { display:none; }
.app-content { padding:1.6rem 1.75rem 2.5rem; flex:1 1 auto; min-width:0; }
.app-content.sin-margen { padding:0; display:flex; min-height:0; }
.sidebar-velo { display:none; }
@media (max-width:960px){
  .sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; box-shadow:var(--sombra-2); }
  body.menu-abierto .sidebar { transform:none; }
  body.menu-abierto .sidebar-velo { display:block; position:fixed; inset:0; background:rgba(17,24,39,.35); z-index:35; }
  .btn-menu { display:inline-grid; }
  .app-content { padding:1.1rem 1rem 2rem; }
  .navbar, .topbar { padding:.6rem 1rem; }
}

/* ---------- avisos flotantes ---------- */
.avisos { position:fixed; top:76px; right:20px; z-index:80; display:flex; flex-direction:column; gap:.5rem; width:min(420px, calc(100vw - 40px)); }
.avisos .alert { box-shadow:var(--sombra-2); margin:0; animation:aviso-entra .25s ease-out; }
@keyframes aviso-entra { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* ---------- cards ---------- */
.card { background:var(--superficie); border-radius:var(--radio); border:1px solid var(--borde); }
.card-kpi { border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra-1); overflow:hidden; }
.card-kpi.p-3 { overflow:visible; }
.card-body { padding:1.25rem; }
.kpi { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:1.1rem 1.15rem; text-decoration:none; color:inherit; height:100%; transition:box-shadow .15s, transform .15s, border-color .15s; }
a.kpi:hover { box-shadow:0 6px 20px rgba(16,24,40,.08); transform:translateY(-1px); border-color:var(--borde-fuerte); }
.kpi-etiqueta { color:var(--texto-3); font-size:.82rem; font-weight:500; }
.kpi-valor { font-size:1.9rem; font-weight:700; letter-spacing:-.03em; line-height:1.15; margin-top:.2rem; font-variant-numeric:tabular-nums; }
.kpi-icono { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.1rem; flex:0 0 auto; background:var(--acento-suave); color:var(--color-primario); }
.kpi-icono.verde { background:#e7f8f0; color:#079455; }
.kpi-icono.rojo { background:#fef0ee; color:#d92d20; }
.kpi-icono.ambar { background:#fff4e5; color:#b54708; }
.kpi-icono.wa { background:#e2f7f1; color:var(--wa-verde-oscuro); }
.pagina-cabecera { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.pagina-cabecera p { margin:0; color:var(--texto-3); }
.accesos { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.75rem; }
.acceso { display:flex; align-items:center; gap:.7rem; padding:.8rem .9rem; border:1px solid var(--borde); border-radius:var(--radio); background:#fff; text-decoration:none; color:var(--texto); font-weight:550; font-size:.9rem; transition:border-color .12s, background .12s; }
.acceso:hover { border-color:var(--color-primario); background:var(--acento-suave); }
.acceso .bi { color:var(--color-primario); font-size:1.1rem; }
.barra { height:6px; border-radius:99px; background:#eef0f3; overflow:hidden; min-width:90px; }
.barra > span { display:block; height:100%; border-radius:99px; background:var(--color-primario); }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-weight:550; text-align:center; vertical-align:middle;
  cursor:pointer; border:1px solid transparent; padding:.5rem .95rem; font-size:.9rem; font-family:inherit; line-height:1.3;
  border-radius:9px; text-decoration:none; background:#eef0f3; color:var(--texto); transition:background .12s, border-color .12s, box-shadow .12s, opacity .12s; }
.btn:hover { opacity:.92; }
.btn:focus-visible, .form-control:focus, .form-select:focus { outline:none; box-shadow:0 0 0 3px var(--acento-suave-2); border-color:var(--color-primario); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-sm { padding:.32rem .7rem; font-size:.82rem; border-radius:8px; }
.btn-primary { background:var(--color-primario); color:#fff; box-shadow:var(--sombra-1); }
.btn-primary:hover { background:var(--color-primario-oscuro); opacity:1; }
.btn-success { background:#079455; color:#fff; }
.btn-warning { background:#f79009; color:#fff; }
.btn-danger { background:#d92d20; color:#fff; }
.btn-secondary { background:#4b5563; color:#fff; }
.btn-link { background:transparent; color:var(--color-primario); }
.btn-outline-primary { background:#fff; color:var(--color-primario); border-color:color-mix(in srgb, var(--color-primario) 45%, #fff); }
.btn-outline-primary:hover { background:var(--acento-suave); opacity:1; }
.btn-outline-secondary { background:#fff; color:var(--texto-2); border-color:var(--borde-fuerte); }
.btn-outline-secondary:hover { background:#f6f7f9; opacity:1; }
.btn-outline-success { background:#fff; color:#079455; border-color:#75d6ab; }
.btn-outline-danger { background:#fff; color:#d92d20; border-color:#f7a8a1; }
.btn-outline-warning { background:#fff; color:#b54708; border-color:#f9c57a; }
.btn-close { background:transparent; border:none; font-size:1rem; cursor:pointer; color:var(--texto-3); line-height:1; padding:.15rem; }
.btn-close::before { content:"✕"; }
.btn-icono { width:38px; height:38px; padding:0; border-radius:50%; display:inline-grid; place-items:center; background:transparent; border:none; color:var(--texto-2); font-size:1.15rem; cursor:pointer; text-decoration:none; transition:background .12s; }
.btn-icono:hover { background:rgba(17,24,39,.07); }
.btn-icono:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- badges ---------- */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.2em .6em; font-size:.72rem; font-weight:600; border-radius:99px; color:#fff; background:#6b7280; line-height:1.5; white-space:nowrap; }
.badge-pend { background:#f04438; }
.estado-badge { font-size:.72rem; }
.bg-primary{background:var(--color-primario)!important}
.bg-secondary{background:#eef0f3!important;color:#374151!important}
.bg-success{background:#dcfae6!important;color:#067647!important}
.bg-warning{background:#fef0c7!important;color:#93370d!important}
.bg-danger{background:#f04438!important;color:#fff!important}
.bg-dark{background:#1f2937!important}
.bg-info{background:#e0f2fe!important;color:#075985!important}
.bg-info-subtle{background:#e0f2fe!important;color:#075985!important}
.bg-light{background:#f6f7f9!important;color:var(--texto)!important}

/* ---------- tables ---------- */
.table { width:100%; border-collapse:collapse; margin-bottom:0; }
.table th, .table td { padding:.7rem .9rem; border-bottom:1px solid var(--borde); text-align:left; vertical-align:middle; }
.table thead { background:#fafbfc; }
.table thead th { font-size:.72rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3); border-bottom:1px solid var(--borde); white-space:nowrap; }
.table tbody tr:last-child td { border-bottom:none; }
.table-sm th, .table-sm td { padding:.45rem .6rem; font-size:.88rem; }
.table-bordered th, .table-bordered td { border:1px solid var(--borde); }
.table-hover tbody tr { transition:background .1s; }
.table-hover tbody tr:hover { background:#f9fafb; }
.table-light { background:#fafbfc; }
.table-danger { background:#fef3f2; }
.table-warning { background:#fffaeb; }
.table-success { background:#ecfdf3; }
.table-responsive { overflow-x:auto; }
.card-kpi > .table, .card > .table { border-radius:var(--radio); }
.card-kpi:has(> .table) { overflow-x:auto; }

/* ---------- forms ---------- */
.form-label { display:block; font-weight:600; margin-bottom:.3rem; font-size:.85rem; color:#374151; }
.form-control, .form-select {
  display:block; width:100%; padding:.52rem .75rem; font-size:.92rem; font-family:inherit;
  border:1px solid var(--borde-fuerte); border-radius:9px; background:#fff; color:var(--texto);
  transition:border-color .12s, box-shadow .12s;
}
.form-control::placeholder { color:#9aa1ac; }
.form-control-sm, .form-select-sm { padding:.34rem .6rem; font-size:.85rem; border-radius:8px; }
.form-text { font-size:.8rem; color:var(--texto-3); margin-top:.25rem; }
.form-check-input { width:16px; height:16px; accent-color:var(--color-primario); cursor:pointer; vertical-align:middle; }
.form-check { display:flex; align-items:center; gap:.5rem; }
textarea.form-control { line-height:1.45; }

/* ---------- alerts ---------- */
.alert { padding:.8rem 1rem; border-radius:var(--radio); margin-bottom:1rem; border:1px solid transparent;
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; font-size:.9rem; }
.alert-success { background:#ecfdf3; color:#085d3a; border-color:#abefc6; }
.alert-danger { background:#fef3f2; color:#912018; border-color:#fecdca; }
.alert-warning { background:#fffaeb; color:#93370d; border-color:#fedf89; }
.alert-info { background:#eff8ff; color:#175cd3; border-color:#b2ddff; }
.alert-light { background:#fafbfc; color:var(--texto-2); border-color:var(--borde); display:block; }

/* ---------- login ---------- */
.login-fondo { min-height:100vh; display:grid; place-items:center; padding:2rem 1rem; background:var(--fondo); }
.login-caja { width:min(380px, 100%); }
.login-marca { display:flex; justify-content:center; margin-bottom:1.5rem; }
.login-marca img { max-height:64px; max-width:200px; mix-blend-mode:multiply; }
.login-marca .brand-icono { width:44px; height:44px; border-radius:12px; font-size:1.25rem; }
.login-tarjeta { background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio); padding:1.75rem; box-shadow:var(--sombra-1); }
.login-titulo { font-size:1.2rem; font-weight:650; letter-spacing:-.01em; margin:0 0 .2rem; color:var(--texto); }
.login-sub { font-size:.86rem; color:var(--texto-3); margin:0 0 1.4rem; }
.login-tarjeta .form-label { font-size:.8rem; font-weight:550; color:var(--texto-2); }
.login-campo { position:relative; margin-bottom:1rem; }
.login-campo > .bi { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:#9aa1ac; font-size:1rem; pointer-events:none; }
.login-campo .form-control { padding:.62rem .75rem .62rem 2.3rem; background:#fff; }
.login-campo .form-control:focus + .login-ver, .login-campo:focus-within > .bi { color:var(--color-primario); }
.login-campo .form-control:-webkit-autofill { -webkit-box-shadow:0 0 0 40px #fff inset; -webkit-text-fill-color:var(--texto); }
#login-clave { padding-right:2.6rem; }
.login-ver { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; background:transparent;
  border-radius:8px; color:#9aa1ac; cursor:pointer; display:grid; place-items:center; font-size:1rem; }
.login-ver:hover { background:#f3f4f6; color:var(--texto-2); }
.login-boton { width:100%; justify-content:center; padding:.66rem 1rem; margin-top:.4rem; font-weight:600; gap:.4rem; }
.login-boton .bi { transition:transform .15s; }
.login-boton:hover .bi { transform:translateX(2px); }
.login-pie { text-align:center; font-size:.78rem; color:var(--texto-3); margin:1.25rem 0 0; }
.login-pie .bi { margin-right:.2rem; }

/* =====================================================================
   WhatsApp — bandeja en paneles, como WhatsApp Web
   ===================================================================== */
.wa-shell { display:flex; flex:1 1 auto; min-width:0; height:calc(100vh - 64px); background:#fff; }
.wa-lista { width:380px; flex:0 0 380px; display:flex; flex-direction:column; border-right:1px solid var(--borde); background:#fff; min-height:0; }
.wa-lista-cab { display:flex; align-items:center; justify-content:space-between; padding:.75rem .9rem .35rem 1.1rem; }
.wa-lista-cab h5 { margin:0; font-size:1.3rem; font-weight:700; }
.wa-menu { position:relative; }
.wa-menu-panel { display:none; position:absolute; right:0; top:110%; min-width:230px; background:#fff; border:1px solid var(--borde); border-radius:12px; box-shadow:var(--sombra-2); padding:.35rem; z-index:50; }
.wa-menu.abierto .wa-menu-panel { display:block; }
.wa-menu-panel a { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:8px; color:var(--texto); text-decoration:none; font-size:.9rem; }
.wa-menu-panel a:hover { background:#f3f4f6; }
.wa-menu-panel a .bi { color:var(--texto-3); }
.wa-buscar { margin:.35rem .9rem .5rem; position:relative; }
.wa-buscar .bi { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#8b93a0; font-size:.9rem; }
.wa-buscar input { width:100%; border:1px solid transparent; background:#f0f2f5; border-radius:99px; padding:.5rem .9rem .5rem 2.3rem; font-size:.9rem; font-family:inherit; color:var(--texto); }
.wa-buscar input:focus { outline:none; background:#fff; border-color:var(--wa-verde); box-shadow:0 0 0 3px rgba(0,168,132,.14); }
.wa-chips { display:flex; gap:.4rem; padding:0 .9rem .6rem; overflow-x:auto; scrollbar-width:none; align-items:center; }
.wa-chips::-webkit-scrollbar { display:none; }
.wa-chip { border:none; background:#f0f2f5; color:var(--texto-2); border-radius:99px; padding:.3rem .8rem; font-size:.82rem; font-weight:550; cursor:pointer; white-space:nowrap; font-family:inherit; display:inline-flex; align-items:center; gap:.35rem; }
.wa-chip:hover { background:#e6e9ed; }
.wa-chip.activo { background:#d9fdd3; color:#0b5c49; }
.wa-chip-num { font-size:.72rem; opacity:.8; }
select.wa-chip { appearance:none; padding-right:1.6rem; max-width:150px; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; }
.wa-asignar-barra { display:none; align-items:center; gap:.5rem; padding:.55rem .9rem; background:var(--acento-suave); border-top:1px solid var(--borde); border-bottom:1px solid var(--borde); flex-wrap:wrap; }
.wa-asignar-barra.visible { display:flex; }
.wa-asignar-barra .form-select { flex:1 1 140px; width:auto; }
.wa-items { flex:1 1 auto; overflow-y:auto; min-height:0; }
.wa-item { display:flex; align-items:center; position:relative; border-bottom:1px solid #f1f3f5; }
.wa-item:hover { background:#f5f6f6; }
.wa-item.activo { background:#f0f2f5; }
.wa-item.oculto { display:none; }
.wa-item .wa-check-conversacion { position:absolute; left:.55rem; top:50%; transform:translateY(-50%); width:17px; height:17px; opacity:0; z-index:2; accent-color:var(--wa-verde); cursor:pointer; }
.wa-items.seleccionando .wa-check-conversacion, .wa-item:hover .wa-check-conversacion, .wa-check-conversacion:checked { opacity:1; }
.wa-items.seleccionando .wa-item-link, .wa-item:has(.wa-check-conversacion):hover .wa-item-link { padding-left:2.2rem; }
.wa-item-link { display:flex; align-items:center; gap:.8rem; padding:.7rem .95rem .7rem 1.1rem; flex:1 1 auto; min-width:0; text-decoration:none; color:inherit; transition:padding .12s; }
.wa-avatar { width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:650; font-size:.95rem; color:#fff;
  background:hsl(var(--h, 200) 42% 52%); }
.wa-avatar .bi { font-size:1.25rem; opacity:.95; }
.wa-avatar.chico { width:40px; height:40px; font-size:.85rem; }
.wa-avatar.grande { width:84px; height:84px; font-size:1.7rem; }
.wa-item-cuerpo { flex:1 1 auto; min-width:0; }
.wa-item-fila { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.wa-item-nombre { font-weight:500; font-size:.98rem; color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-item-hora { font-size:.74rem; color:var(--texto-3); flex:0 0 auto; }
.wa-item-resumen { font-size:.86rem; color:var(--texto-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.wa-item-no-leido .wa-item-nombre { font-weight:700; }
.wa-item-no-leido .wa-item-resumen { color:var(--texto); font-weight:550; }
.wa-item-no-leido .wa-item-hora { color:var(--wa-verde-oscuro); font-weight:650; }
.wa-contador { background:var(--wa-verde); color:#fff; border-radius:99px; min-width:20px; height:20px; padding:0 6px; font-size:.72rem; font-weight:700; display:inline-grid; place-items:center; flex:0 0 auto; }
.wa-item-etqs { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.25rem; }
.wa-etq { font-size:.68rem; font-weight:600; padding:.08rem .5rem; border-radius:99px; background:#eef0f3; color:#4b5563; white-space:nowrap; display:inline-flex; align-items:center; gap:.25rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.wa-etq.color { color:#fff; }
.wa-etq.ambar { background:#fef0c7; color:#93370d; }
.wa-etq.azul { background:#e0f2fe; color:#075985; }
.wa-vacio-lista { padding:2.5rem 1.5rem; text-align:center; color:var(--texto-3); font-size:.9rem; }

.wa-principal { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0; background:var(--wa-fondo-chat); position:relative; }
.wa-bienvenida { flex:1; display:grid; place-items:center; background:#f7f8fa; text-align:center; padding:2rem; border-bottom:6px solid var(--wa-verde); }
.wa-bienvenida .wa-logo { width:92px; height:92px; border-radius:50%; background:#e2f7f1; color:var(--wa-verde-oscuro); display:grid; place-items:center; font-size:2.6rem; margin:0 auto 1.2rem; }
.wa-bienvenida h4 { font-weight:500; font-size:1.6rem; color:#41525d; }
.wa-bienvenida p { color:var(--texto-3); max-width:440px; margin:0 auto .4rem; }
.wa-estado-api { display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--texto-3); margin-top:1rem; }
.wa-punto { width:8px; height:8px; border-radius:50%; background:#12b76a; box-shadow:0 0 0 3px rgba(18,183,106,.18); }
.wa-punto.apagado { background:#f04438; box-shadow:0 0 0 3px rgba(240,68,56,.18); }

.wa-cab { display:flex; align-items:center; gap:.8rem; padding:.55rem 1rem; background:#f0f2f5; border-bottom:1px solid var(--borde); min-height:60px; flex:0 0 auto; }
.wa-cab-datos { flex:1 1 auto; min-width:0; cursor:pointer; }
.wa-cab-nombre { font-weight:600; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-cab-sub { font-size:.8rem; color:var(--texto-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-volver { display:none; }
.wa-hilo { flex:1 1 auto; overflow-y:auto; min-height:0; padding:1rem 6% 1rem;
  background-color:var(--wa-fondo-chat);
  background-image:radial-gradient(rgba(17,27,33,.045) 1px, transparent 1.2px), radial-gradient(rgba(17,27,33,.03) 1px, transparent 1.2px);
  background-size:22px 22px, 22px 22px; background-position:0 0, 11px 11px; }
.wa-dia { display:flex; justify-content:center; margin:.7rem 0 .8rem; position:sticky; top:.2rem; z-index:3; pointer-events:none; }
.wa-dia span { background:#fff; color:#54656f; font-size:.74rem; font-weight:500; padding:.3rem .75rem; border-radius:8px; box-shadow:0 1px .5px rgba(11,20,26,.13); text-transform:uppercase; letter-spacing:.02em; }
.wa-msg { display:flex; margin-bottom:.2rem; }
.wa-msg.saliente { justify-content:flex-end; }
.wa-msg + .wa-msg.cambia { margin-top:.6rem; }
.wa-burbuja { max-width:min(65%, 620px); min-width:96px; padding:.4rem .55rem .3rem .6rem; border-radius:8px; background:#fff; box-shadow:0 1px .5px rgba(11,20,26,.13); position:relative; font-size:.9rem; line-height:1.4; color:#111b21; overflow-wrap:anywhere; }
.wa-msg.entrante .wa-burbuja { border-top-left-radius:0; }
.wa-msg.saliente .wa-burbuja { background:var(--wa-saliente); border-top-right-radius:0; }
.wa-msg.entrante .wa-burbuja::before, .wa-msg.saliente .wa-burbuja::before { content:""; position:absolute; top:0; width:8px; height:12px; }
.wa-msg.entrante .wa-burbuja::before { left:-8px; background:linear-gradient(to top right, transparent 49%, #fff 51%); }
.wa-msg.saliente .wa-burbuja::before { right:-8px; background:linear-gradient(to top left, transparent 49%, var(--wa-saliente) 51%); }
.wa-autor { font-size:.76rem; font-weight:600; color:var(--wa-verde-oscuro); margin-bottom:.1rem; }
.wa-msg-contenido { white-space:pre-wrap; }
.wa-cita { border-left:4px solid var(--wa-verde); background:rgba(11,20,26,.06); padding:.3rem .55rem; border-radius:6px; margin-bottom:.3rem; font-size:.82rem; }
.wa-cita-autor { font-weight:600; color:var(--wa-verde-oscuro); }
.wa-cita-texto { color:#54656f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-burbuja img, .wa-burbuja video { max-width:300px; max-height:300px; width:auto; border-radius:6px; display:block; }
.wa-burbuja audio { max-width:270px; width:270px; height:40px; display:block; }
.wa-doc { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#111b21; background:rgba(11,20,26,.05); padding:.55rem .7rem; border-radius:6px; }
.wa-doc .bi { font-size:1.6rem; color:#667781; }
.wa-meta { display:flex; justify-content:flex-end; align-items:center; gap:.3rem; font-size:.69rem; color:#667781; margin-top:.1rem; line-height:1.2; float:none; }
.wa-meta .wa-estado-check { font-size:.85rem; line-height:1; }
.wa-diag { font-size:.7rem; color:#667781; margin-top:.2rem; }
.wa-acciones { position:absolute; top:-12px; right:6px; display:flex; gap:2px; background:#fff; border-radius:99px; box-shadow:0 1px 4px rgba(11,20,26,.22); padding:2px; opacity:0; pointer-events:none; transition:opacity .12s; z-index:4; }
.wa-msg.entrante .wa-acciones { right:auto; left:6px; }
.wa-burbuja:hover .wa-acciones, .wa-acciones:focus-within { opacity:1; pointer-events:auto; }
.wa-acciones button { border:none; background:transparent; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#54656f; font-size:.85rem; padding:0; }
.wa-acciones button:hover { background:#f0f2f5; color:#111b21; }
@media (hover:none) { .wa-acciones { opacity:1; pointer-events:auto; position:static; box-shadow:none; background:transparent; justify-content:flex-end; padding:0; } }
.wa-aviso-ventana { background:#fff8e6; border-top:1px solid #fedf89; padding:.7rem 1rem; font-size:.85rem; color:#7a4a05; max-height:45%; overflow-y:auto; flex:0 0 auto; }
.wa-aviso-ventana summary { cursor:pointer; font-weight:600; display:flex; align-items:center; gap:.5rem; list-style:none; }
.wa-aviso-ventana summary::-webkit-details-marker { display:none; }
.wa-aviso-config { background:#fef3f2; border-bottom:1px solid #fecdca; color:#912018; padding:.5rem 1rem; font-size:.83rem; flex:0 0 auto; }
.wa-compositor { background:#f0f2f5; padding:.5rem .8rem .6rem; flex:0 0 auto; border-top:1px solid var(--borde); display:flex; flex-direction:column; gap:.4rem; }
.wa-compositor-fila { display:flex; align-items:flex-end; gap:.25rem; }
.wa-compositor .btn-icono { width:42px; height:42px; font-size:1.3rem; color:#54656f; flex:0 0 auto; }
.wa-compositor textarea { flex:1 1 auto; border:1px solid transparent; border-radius:22px; padding:.6rem 1rem; font-size:.95rem; font-family:inherit; resize:none; overflow-y:hidden; max-height:140px; background:#fff; color:#111b21; line-height:1.4; min-height:42px; }
.wa-compositor textarea:focus { outline:none; border-color:rgba(0,168,132,.5); }
.wa-enviar { width:42px; height:42px; border-radius:50%; border:none; background:var(--wa-verde); color:#fff; display:grid; place-items:center; font-size:1.1rem; cursor:pointer; flex:0 0 auto; transition:background .12s; }
.wa-enviar:hover { background:var(--wa-verde-oscuro); }
.wa-enviar:disabled { opacity:.45; cursor:not-allowed; }
.wa-grabando { background:#fee4e2!important; color:#d92d20!important; animation:wa-pulso 1.2s infinite; }
@keyframes wa-pulso { 50% { box-shadow:0 0 0 6px rgba(240,68,56,.18); } }
.wa-respondiendo { display:flex; align-items:center; gap:.5rem; border-left:4px solid var(--wa-verde); background:#fff; padding:.4rem .7rem; border-radius:8px; font-size:.84rem; }
.wa-adjunto-preview { background:#fff; border-radius:8px; padding:.4rem .7rem; font-size:.84rem; color:var(--texto-2); }
.wa-flotante { display:none; position:absolute; bottom:115%; left:0; background:#fff; border:1px solid var(--borde); border-radius:12px; box-shadow:var(--sombra-2); z-index:20; padding:.5rem; }
#wa-emoji-panel.wa-flotante { width:236px; gap:2px; flex-wrap:wrap; }
#wa-emoji-panel.wa-flotante .btn { background:transparent; padding:.3rem; width:34px; height:34px; }
#wa-emoji-panel.wa-flotante .btn:hover { background:#f0f2f5; }
#wa-rr-panel.wa-flotante { width:300px; max-height:280px; overflow-y:auto; }

.wa-info { width:340px; flex:0 0 340px; border-left:1px solid var(--borde); background:#fff; overflow-y:auto; min-height:0; display:none; flex-direction:column; }
.wa-shell.info-abierta .wa-info { display:flex; }
.wa-info-cab { display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; min-height:60px; background:#f0f2f5; border-bottom:1px solid var(--borde); font-weight:600; flex:0 0 auto; }
.wa-info-perfil { text-align:center; padding:1.5rem 1rem 1.1rem; border-bottom:8px solid #f0f2f5; }
.wa-info-perfil .wa-avatar { margin:0 auto .8rem; }
.wa-info-perfil .nombre { font-size:1.15rem; font-weight:600; }
.wa-info-perfil .sub { color:var(--texto-3); font-size:.88rem; }
.wa-info-seccion { padding:1rem 1.1rem; border-bottom:8px solid #f0f2f5; }
.wa-info-seccion:last-child { border-bottom:none; }
.wa-info-titulo { font-size:.74rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-3); margin-bottom:.6rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.wa-dato { display:flex; flex-direction:column; margin-bottom:.6rem; }
.wa-dato span:first-child { font-size:.76rem; color:var(--texto-3); }
.wa-dato span:last-child { font-size:.92rem; }

@media (max-width:1280px){
  .wa-lista { width:320px; flex-basis:320px; }
  .wa-info { position:absolute; right:0; top:0; bottom:0; z-index:25; box-shadow:var(--sombra-2); width:min(340px, 100%); }
  .wa-shell { position:relative; }
}
@media (max-width:860px){
  .wa-shell { height:calc(100vh - 57px); }
  .wa-lista { width:100%; flex-basis:100%; border-right:none; }
  .wa-shell.con-chat .wa-lista { display:none; }
  .wa-shell:not(.con-chat) .wa-principal { display:none; }
  .wa-volver { display:inline-grid; }
  .wa-hilo { padding:1rem .8rem; }
  .wa-burbuja { max-width:86%; }
}
/* Compatibilidad: fila sin leer en tablas antiguas */
.wa-fila-no-leida { background:#ecfdf3; }
@media (max-width:720px){ .solo-escritorio { display:none; } .pagina-cabecera { align-items:flex-start; } h4 { font-size:1.2rem; } }
/* Tablas anchas: en pantallas pequeñas se desplazan dentro de su tarjeta, nunca la página */
.card-kpi, .card { max-width:100%; }
@media (max-width:960px){ .card-kpi:has(> .table), .card:has(> .table), .card-kpi:has(> form > .table) { overflow-x:auto; -webkit-overflow-scrolling:touch; } .table { min-width:560px; } .table.table-sm { min-width:0; } }
img, video { max-width:100%; }
.app-content form .d-flex { flex-wrap:wrap; }
.col-6 { flex:0 0 50%; max-width:50%; }
.d-inline { display:inline; }
.form-check-inline { display:inline-flex; margin-right:1rem; }
.form-check-label { font-size:.9rem; cursor:pointer; }
.form-switch .form-check-input { width:34px; height:19px; appearance:none; background:#d5d9df; border-radius:99px; position:relative; transition:background .15s; flex:0 0 auto; }
.form-switch .form-check-input::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.form-switch .form-check-input:checked { background:var(--color-primario); }
.form-switch .form-check-input:checked::after { transform:translateX(15px); }
.fs-6 { font-size:1rem; }
.rounded { border-radius:9px; }
.text-nowrap { white-space:nowrap; }
.text-uppercase { text-transform:uppercase; letter-spacing:.04em; }
.btn-icono.btn-menu { display:none; }
@media (max-width:960px){ .btn-icono.btn-menu { display:inline-grid; } }
.wa-lista-cab, .wa-buscar, .wa-chips, .wa-asignar-barra { flex:0 0 auto; }
.wa-chips { padding-top:2px; }
.wa-aviso-ventana[open] summary .btn { display:none; }
.wa-aviso-ventana summary { flex-wrap:wrap; }
@media (max-width:720px){
  .card-kpi.p-3, .card-kpi.p-4 { overflow-x:auto; }
  .app-content .d-flex.justify-content-between { flex-wrap:wrap; gap:.6rem; }
  .app-content .text-end { text-align:left; }
  .app-content td.text-end, .app-content th.text-end { text-align:right; }
  .btn { white-space:normal; }
}
.table-responsive { -webkit-overflow-scrolling:touch; max-width:100%; }
/* WhatsApp ocupa exactamente el alto de la pantalla (incluye barras del navegador móvil) */
@supports selector(:has(a)) {
  .app-main:has(.wa-shell) { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  .app-main:has(.wa-shell) .wa-shell { height:auto; }
  .app-main:has(.wa-shell) .topbar { position:static; flex:0 0 auto; }
}
@media (max-width:860px){ .app-main:has(.wa-shell.con-chat) .topbar { display:none; } }
.wa-aviso-ventana summary { flex-wrap:nowrap; align-items:center; }
@media (hover:none) {
  .wa-acciones { position:absolute; top:-12px; opacity:0; pointer-events:none; background:#fff; box-shadow:0 1px 4px rgba(11,20,26,.22); padding:2px; }
  .wa-burbuja.tocada .wa-acciones { opacity:1; pointer-events:auto; }
  .wa-acciones button { width:32px; height:32px; font-size:.95rem; }
}
@media (max-width:480px){
  .wa-compositor { padding:.4rem .4rem .5rem; }
  .wa-compositor .btn-icono { width:36px; height:42px; font-size:1.2rem; }
  .wa-compositor-fila { gap:0; }
  .wa-compositor textarea { margin:0 .25rem; padding:.6rem .85rem; }
  .wa-lista-cab { padding-left:.9rem; }
  .wa-burbuja img, .wa-burbuja video { max-width:100%; }
  .wa-burbuja audio { width:230px; max-width:100%; }
}
@media (max-width:860px){ .wa-info { width:100%; } }

.wa-etq.fuego { background:#fee4e2; color:#b42318; }

/* =====================================================================
   Demo Santorini: panel del aparta hotel, disponibilidad y reservas
   ===================================================================== */
.hotel-aptos { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.6rem; padding:.2rem 1.15rem 1.1rem; }
.hotel-apto { border:1px solid var(--borde); border-radius:10px; padding:.65rem .75rem; background:#fff; }
.hotel-apto-nombre { font-weight:600; font-size:.9rem; }
.hotel-apto-estado { font-size:.78rem; margin-top:.15rem; color:var(--texto-3); }
.hotel-apto.libre { border-color:#abefc6; background:#f6fef9; }
.hotel-apto.libre .hotel-apto-estado { color:#067647; }
.hotel-apto.libre .bi { font-size:.5rem; vertical-align:middle; }
.hotel-apto.ocupado { background:#f9fafb; }
.badge-hoy { background:var(--color-primario); color:#fff; border-radius:99px; padding:.15rem .55rem; font-size:.72rem; font-weight:600; }
.canal { font-size:.78rem; padding:.15rem .5rem; border-radius:99px; background:#f2f4f7; color:var(--texto-2); white-space:nowrap; }
.canal.ota { background:#fef0e6; color:#b54708; }
.agente-card { border-color:#b7e4d8; background:linear-gradient(180deg, #f2fbf8, #fff 60%); }
.agente-card h6 .bi { color:#00a884; }
.agente-cifra { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; }
.agente-fila { display:flex; justify-content:space-between; font-size:.88rem; padding:.3rem 0; border-bottom:1px dashed var(--borde); }
.agente-reserva { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.82rem; padding:.35rem 0; color:var(--texto); text-decoration:none; }
.canal-fila { margin-bottom:.55rem; }
.estado-reserva { font-size:.74rem; font-weight:600; padding:.18rem .55rem; border-radius:99px; white-space:nowrap; background:#f2f4f7; color:var(--texto-2); }
.estado-reserva.e-pendiente-de-pago { background:#fffaeb; color:#b54708; }
.estado-reserva.e-pago-recibido { background:#eff8ff; color:#175cd3; }
.estado-reserva.e-creada-en-lobby { background:#ecfdf3; color:#067647; }
.estado-reserva.e-cancelada { background:#fef3f2; color:#b42318; }
.reservas-lista { display:flex; flex-direction:column; gap:.8rem; }
.reserva-card { padding:1rem 1.15rem; }
.reserva-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.reserva-codigo { font-weight:650; font-size:1rem; }
.reserva-datos { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.6rem 1rem; margin:.9rem 0; }
.reserva-datos span { display:block; font-size:.74rem; color:var(--texto-3); }
.reserva-datos b { font-weight:600; font-size:.9rem; word-break:break-word; }
.reserva-acciones { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; border-top:1px solid var(--borde); padding-top:.8rem; }
.reserva-acciones form { margin:0; }
.acceso.activo { border-color:var(--color-primario); color:var(--color-primario); background:var(--acento-suave); }
.disp-tabla { font-size:.82rem; }
.disp-tabla th { text-align:center; font-weight:600; font-size:.75rem; color:var(--texto-2); line-height:1.2; }
.disp-tabla th span { font-weight:500; color:var(--texto-3); }
.disp-tabla th:first-child { text-align:left; }
.disp-tabla th.finde { color:var(--color-primario); }
.disp-apto { white-space:nowrap; font-weight:600; }
.disp-celda { text-align:center; font-weight:600; font-size:.78rem; border-left:2px solid #fff; }
.disp-celda.libre { background:#ecfdf3; color:#067647; }
.disp-celda.ocupado { background:#f2f4f7; color:#98a2b3; }
.disp-ley { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:middle; }
.disp-ley.libre { background:#ecfdf3; border:1px solid #abefc6; }
.disp-ley.ocupado { background:#f2f4f7; border:1px solid var(--borde); }