/* Estilos auxiliares del dashboard municipal */
/* Paleta alineada con la app mobile (constants/colors.ts):
   brand  → primary  #1F3A5F (azul oscuro)
   accent → secondary #3BA99C (verde jade)
*/

/* ─────────────────────────────────────────────────────────────
   Tokens de diseño + estilos globales.
   Movidos desde el <style> inline de base.html para habilitar una CSP
   sin 'unsafe-inline' en style-src. Los tokens (--ink-*, --brand*,
   --shadow-*) viven acá y los consumen tanto este archivo como los
   atributos style="..." de los templates.
   ───────────────────────────────────────────────────────────── */
:root {
    --ink-900:#0B1C3D; --ink-800:#12284C; --ink-700:#1E3A66;
    --ink-600:#2E4E82; --ink-500:#546A8C; --ink-400:#8A99B3;
    --ink-300:#B9C3D4; --ink-200:#DCE2ED; --ink-100:#EEF1F6;
    --ink-50:#F6F8FB;
    --brand:#14B8A6; --brand-dark:#0E8F80;
    --brand-soft:#CFF4EF; --brand-tint:#E9FAF7;
    --accent:#6366F1; --accent-soft:#E4E6FD; --accent-tint:#F0F1FE;
    --ok:#10B981; --ok-soft:#D6F5E6;
    --warn:#F59E0B; --warn-soft:#FDECCF;
    --err:#EF4444; --err-soft:#FBDADA;
    --violet:#8B5CF6; --violet-soft:#EADEFB;
    --shadow-sm:0 1px 2px rgba(11,28,61,.06),0 1px 4px rgba(11,28,61,.04);
    --shadow-md:0 4px 16px rgba(11,28,61,.08),0 2px 6px rgba(11,28,61,.04);
    --shadow-lg:0 20px 50px rgba(11,28,61,.15),0 8px 20px rgba(11,28,61,.08);
    --shadow-brand:0 10px 30px rgba(20,184,166,.35);
}
body { font-family:'Inter',system-ui,sans-serif; }
.htmx-indicator { opacity:0; transition:opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity:1; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--ink-300); border-radius:3px; }
[x-cloak] { display:none !important; }
@keyframes toast-in  { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toast-out { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }
.toast-enter { animation:toast-in .3s ease-out; }
.toast-exit  { animation:toast-out .3s ease-in forwards; }
/* Indicador activo del sidebar */
.nav-active {
    background:linear-gradient(90deg,rgba(20,184,166,.18) 0%,rgba(20,184,166,0) 100%);
    color:#fff !important;
}
.nav-active::before {
    content:''; position:absolute;
    left:0; top:6px; bottom:6px;
    width:3px; border-radius:0 4px 4px 0;
    background:var(--brand);
}
/* Ícono del item activo en teal (antes era un style inline condicional). */
.nav-active i { color:var(--brand); }
/* Skip-to-content */
.skip-link {
    position:absolute; top:-99px; left:8px;
    background:var(--brand); color:#fff;
    padding:8px 14px; border-radius:0 0 8px 8px;
    font-size:13px; font-weight:600; z-index:9999;
}
.skip-link:focus { top:0; outline:2px solid var(--brand-dark); }
/* Focus visible */
*:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ─────────────────────────────────────────────────────────────
   Calendario de actividad del mes (Overview)
   Diseño compacto: cada celda es pequeña; el único énfasis visual
   dentro de la grilla es el día de hoy.
   ───────────────────────────────────────────────────────────── */
.activity-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Encapsula tanto las stats como la grilla del calendario bajo un
       mismo ancho máximo para que ambos bloques alineen horizontalmente. */
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.a-stat {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: 10px;
    padding: 8px 10px;
}
.a-stat .lbl {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--ink-400);
    font-weight: 700;
    letter-spacing: .4px;
    margin-bottom: 3px;
}
.a-stat .val {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -.2px;
    line-height: 1.2;
}
.a-stat .meta {
    font-size: 10px;
    color: var(--ink-500);
    margin-top: 1px;
}
.a-stat.hot  .val { color: var(--err); }
.a-stat.cool .val { color: var(--brand-dark); }

.heatcal-month {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Hereda el ancho del ``.activity-wrap`` que ya acota a 400px. */
}
.heatcal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--ink-400);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.heatcal-grid-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.heatcal-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    background: var(--ink-100);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-600);
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
a.heatcal-cell { cursor: pointer; }
a.heatcal-cell:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
    z-index: 2;
}
.heatcal-cell .d {
    font-family: 'Inter', sans-serif;
    line-height: 1;
    pointer-events: none;
}

/* Escala de intensidad (cuantiles sobre días con datos). */
.heatcal-cell.l0 { background: var(--ink-100); color: var(--ink-500); }
.heatcal-cell.l1 { background: var(--brand-soft); color: var(--brand-dark); }
.heatcal-cell.l2 { background: #7DD9CC; color: var(--ink-900); }
.heatcal-cell.l3 { background: var(--brand); color: #fff; }
.heatcal-cell.l4 { background: var(--brand-dark); color: #fff; }
.heatcal-cell.l5 { background: #08665B; color: #fff; }

/* Relleno (antes del día 1 o después del último) — no visible. */
.heatcal-cell.empty {
    background: transparent;
    pointer-events: none;
}
/* Días futuros del mes — visibles pero atenuados y no clickeables. */
.heatcal-cell.future {
    background: var(--ink-50);
    color: var(--ink-300);
    border: 1px dashed var(--ink-200);
    pointer-events: none;
}
/* Hoy: único énfasis dentro de la grilla. Doble anillo (blanco fino interior +
   teal exterior) para que sea visible sobre cualquier nivel de intensidad
   (incluido ``l3``/``l5`` que ya tienen fondo teal). */
.heatcal-cell.today {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--brand);
    font-weight: 800;
    z-index: 3;
}

.heatcal-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 10px;
    color: var(--ink-500);
    margin-top: 2px;
    gap: 12px;
    flex-wrap: wrap;
}
.heatcal-legend .scale {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}
.heatcal-legend .scale .lbl {
    font-size: 9px;
    color: var(--ink-400);
    margin: 0 4px;
}
.heatcal-legend .scale .sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────
   Banner de filtro por día en la lista de denuncias
   ───────────────────────────────────────────────────────────── */
.day-filter-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}
.day-filter-banner i { width: 14px; height: 14px; }
.day-filter-banner a {
    margin-left: auto;
    color: var(--brand-dark);
    font-weight: 700;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   Mapa de calor (heatmap.html)
   Movido desde el <style> inline para habilitar CSP sin unsafe-inline.
   ───────────────────────────────────────────────────────────── */
/* Altura explícita para el contenedor del mapa */
.heatmap-shell {
    height: calc(100vh - 130px);
    min-height: 560px;
}
#heatmap { width: 100%; height: 100%; }
/* Deshabilitar visualmente filas de categoría cuando "Todas" está activo */
.cat-row-disabled { opacity: 0.4; pointer-events: none; }
/* Asegurar que Leaflet se vea por encima de overlays */
.leaflet-container { z-index: 1; background: var(--ink-50); }

/* ─────────────────────────────────────────────────────────────
   Pills de filtro (complaint_list.html)
   Movido desde el <style> inline para habilitar CSP sin unsafe-inline.
   ───────────────────────────────────────────────────────────── */
.pill { padding:.375rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:600; transition:all .18s ease; cursor:pointer; border:0 }
.pill[data-v="all"]         { background:var(--ink-100);  color:var(--ink-600) }
.pill[data-v="all"].on      { background:var(--ink-900);  color:#fff }
.pill[data-v="submitted"]   { background:#EFF6FF;         color:#1D4ED8 }
.pill[data-v="submitted"].on{ background:#1D4ED8;         color:#fff }
.pill[data-v="in_review"]   { background:#FFFBEB;         color:#B45309 }
.pill[data-v="in_review"].on{ background:#B45309;         color:#fff }
.pill[data-v="in_progress"]   { background:#F5F3FF;       color:#5B21B6 }
.pill[data-v="in_progress"].on{ background:#5B21B6;       color:#fff }
.pill[data-v="resolved"]    { background:#ECFDF5;         color:#047857 }
.pill[data-v="resolved"].on { background:#047857;         color:#fff }
.pill[data-v="rejected"]    { background:#FEF2F2;         color:#B91C1C }
.pill[data-v="rejected"].on { background:#B91C1C;         color:#fff }
.pill[data-v="high"]        { background:#FFF7ED;         color:#C2410C }
.pill[data-v="high"].on     { background:#C2410C;         color:#fff }
.pill[data-v="medium"]      { background:#FFFBEB;         color:#B45309 }
.pill[data-v="medium"].on   { background:#B45309;         color:#fff }
.pill[data-v="low"]         { background:#F8FAFC;         color:#475569 }
.pill[data-v="low"].on      { background:#475569;         color:#fff }
.pill[data-v="urgent"]      { background:#FEF2F2;         color:#B91C1C }
.pill[data-v="urgent"].on   { background:#B91C1C;         color:#fff }
/* Categorías: tonos azules (no verdes) para mantener la familia cromática del navy base. */
.pill[data-v="brand"]       { background:#DBEAFE; color:#1E40AF }
.pill[data-v="brand"].on    { background:#1E40AF; color:#fff }
.pill.on { box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04) }

/* ─────────────────────────────────────────────────────────────
   Focus / hover declarativos (reemplazan handlers inline on*).
   El anillo de focus se hace con box-shadow (no pelea con el
   border inline de los inputs) para no necesitar !important.
   ───────────────────────────────────────────────────────────── */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--brand), 0 0 0 3px rgba(20, 184, 166, .2);
}

/* Fila clickeable de la tabla de denuncias (antes onmouseover/out). */
.row-hover { transition: background-color .15s; }
.row-hover:hover { background: var(--ink-50); }

/* Botón primario del login (antes onmouseover/out + background inline). */
.btn-auth {
    background: #14B8A6;
    box-shadow: 0 10px 30px rgba(20, 184, 166, .3);
}
.btn-auth:hover { background: #0E8F80; }

/* Ítems del panel de notificaciones (antes onmouseover/out + background inline). */
.notif-item { background: #fff; transition: background-color .15s; }
.notif-item:hover { background: var(--ink-50); }
.notif-item.unread { background: var(--ink-200); }
.notif-item.unread:hover { background: var(--ink-300); }

/* ─────────────────────────────────────────────────────────────
   Clases componente (Fase 4): reemplazan atributos style="..." inline
   multi-propiedad, gradientes y glass que no mapean a una sola utilidad
   Tailwind. Habilitan quitar 'unsafe-inline' de style-src.
   ───────────────────────────────────────────────────────────── */
/* Card base: usada en decenas de paneles (antes el style más repetido). */
.card { box-shadow: var(--shadow-sm); border: 1px solid var(--ink-100); }

/* Gradientes de marca. */
.grad-sidebar { background: linear-gradient(180deg, #0B1C3D 0%, #0A1932 100%); }
.grad-brand   { background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%); box-shadow: var(--shadow-brand); }
.grad-avatar  { background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%); }
.grad-heat-legend { background: linear-gradient(90deg, #3BA99C 0%, #F59E0B 50%, #991b1b 100%); }

/* Superficies "glass" (blur + fondo translúcido). */
.glass     { background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.glass-88  { background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.topbar    { background: rgba(230, 238, 248, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ink-200); }
.loading-veil { background: rgba(230, 238, 248, .7); backdrop-filter: blur(4px); }

/* Chips / tarjetas sobre el sidebar navy (texto blanco translúcido). */
.usercard  { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.chip-navy { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .2); }

/* Popover de notificaciones y dropdowns sobre fondo claro. */
.popover   { background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--ink-200); }