/* Tema: la app está diseñada en claro. Cada página declara
   <html data-theme="light"> para que Pico NO siga el modo oscuro del
   navegador (si no, pone texto blanco sobre los fondos blancos de la app).
   Si se agrega una página nueva, incluir el atributo. */
:root{ --pico-font-size: 15px; }
nav.top{ position:sticky; top:0; z-index:10; backdrop-filter:blur(8px); background:rgba(255,255,255,.85); border-bottom:1px solid #e5e7eb}
.video-bg{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:brightness(.7)}
.video-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:-1}
.card{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.15)}
.filter-btn{ border:none; color:#fff; padding:.35rem .7rem; border-radius:999px; font-size:.8rem; cursor:pointer}
.fab{ position:fixed; bottom:20px; right:20px; z-index:999; width:46px; height:46px; border-radius:50%; border:none; background:#4F4F4D; color:#fff; font-size:20px; display:none; cursor:pointer}
.kpi{ border-left:4px solid var(--c, #3b82f6)}
/* ponytail: todos los botones gris oscuro como Buscar #4F4F4D, filtros mantienen su paleta por inline !important */
button:not(.filter-btn):not(.outline):not([role=tab]), [role="button"]:not(.filter-btn):not(summary):not(.outline){ background:#4F4F4D !important; border-color:#4F4F4D !important; color:#fff !important}

/* Tabs (admin): barra con indicador inferior, estética Pico.
   Excluidos del gris global de arriba vía :not([role=tab]). */
.tabs{ display:flex; gap:.25rem; flex-wrap:wrap; border-bottom:1px solid var(--pico-muted-border-color); margin:1rem 0; padding:0 }
.tabs [role=tab]{ background:transparent; border:0; border-radius:0; color:var(--pico-muted-color); padding:.6rem .9rem; margin:0 0 -1px; width:auto; font-weight:600; font-size:.95rem; cursor:pointer; border-bottom:2px solid transparent }
.tabs [role=tab]:hover{ color:var(--pico-primary) }
.tabs [role=tab][aria-selected="true"]{ color:var(--pico-primary); border-bottom-color:var(--pico-primary) }
.tabs [role=tab]:focus-visible{ outline:var(--pico-outline-width) solid var(--pico-primary-focus); outline-offset:2px }
/* Variante compacta (segmentados como el rango 24h/7d/30d). */
.tabs.compact{ margin:.6rem 0 }
.tabs.compact [role=tab]{ padding:.3rem .7rem; font-size:.85rem }

/* Acordeón (admin > Configuración): summary como botón outline (Pico).
   El relleno/borde/color los define Pico vía class="outline secondary";
   acá sólo dejamos el layout, el peso y la flecha. */
details > summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.5rem }
details > summary::-webkit-details-marker{ display:none }
details > summary[role="button"]{ font-weight:600 }
/* Flecha propia (Pico dibuja además un chevron de fondo: lo anulamos) */
details > summary::after{ content:"▾"; background-image:none; opacity:.7; font-size:1rem; line-height:1; transition:transform .2s ease }
details:not([open]) > summary::after{ transform:rotate(-90deg) }
details[open]{ margin-bottom:.6rem }

/* Tom Select (select con buscador del wizard de reportes) */
.ts-wrapper{ width:100% }
.ts-wrapper .ts-control{ border-radius:8px }
.ts-dropdown{ z-index:2000 }

/* Informe (Markdown renderizado en el drawer) */
.md h1{ font-size:1.2rem; margin:.2rem 0 .5rem }
.md h2{ font-size:1.05rem; margin:.9rem 0 .3rem }
.md h3{ font-size:.97rem; margin:.7rem 0 .2rem }
.md h4{ font-size:.92rem; margin:.7rem 0 .2rem }
.md ul{ margin:.3rem 0 .4rem 1.1rem }
.md p{ margin:.3rem 0 }
.md table{ width:100%; border-collapse:collapse; margin:.5rem 0; font-size:.82rem }
.md th,.md td{ border:1px solid #e5e7eb; padding:.35rem .5rem; text-align:left; vertical-align:top }
.md th{ background:#f3f4f6; font-weight:600 }
.md a{ color:#2563eb; word-break:break-all }