/* ══════════════════════════════════════════════════════════════════
   Optimal Markets — paleta corporativa 2026
   Extraída de docs/Logo/ y de las dos PPT de docs/ (ambas comparten
   paleta). Azul de marca #006ab4 · marino #123a52 · IBM Plex Sans.
   Reemplaza al teal anterior (sacado del sitio web viejo).
   ══════════════════════════════════════════════════════════════════ */

/* IBM Plex Sans self-hosted: el CSP es `font-src 'self'` y el CDN de Google
   Fonts se eliminó a propósito (docs/seguridad.md) — no reintroducir uno. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --om-azul:         #006ab4;   /* azul de marca (icono, sidebar, primarios) */
  --om-azul-oscuro:  #005897;   /* hover de botones primarios */
  --om-azul-claro:   #6aa2d5;   /* acento secundario (parte clara del icono) */
  --om-marino:       #123a52;   /* títulos */
  --om-marino-suave: #1e6fa8;   /* wordmark */
  --om-fondo:        #eff3f8;
  --om-superficie:   #ffffff;   /* tarjetas, inputs */
  --om-hover:        #f6f9fc;   /* hover de filas, paneles internos */
  --om-texto:        #24374a;
  --om-texto-suave:  #5b6b7a;
  --om-borde:        #dce3ea;
  --om-grilla:       #e6ecf2;   /* grillas de gráficos */
  --om-enlace:       #006ab4;
  --om-chip-bg:      #e2edf7;
  --om-chip-texto:   #005897;
  --om-chip-gris-bg: #eceff3;
  --om-exito:        #2e7d32;
  --om-error:        #c62828;
  --om-alerta:       #ef6c00;
}

/* Modo oscuro: superficies derivadas del marino de marca, mismos acentos
   azules. Se activa con data-theme en <html> (localStorage, ver base.html).
   La superficie #16293a es la que se usó para validar la paleta de series
   con la skill dataviz — si cambia, hay que revalidarla. */
:root[data-theme="dark"] {
  --om-fondo:        #0d1a26;
  --om-superficie:   #16293a;
  --om-hover:        #1e3648;
  --om-texto:        #e3eaf1;
  --om-texto-suave:  #9fb1c1;
  --om-borde:        #2b4257;
  --om-grilla:       #24394c;
  --om-enlace:       #6aa2d5;
  --om-chip-bg:      rgba(106, 162, 213, .18);
  --om-chip-texto:   #8dbce4;
  --om-chip-gris-bg: #1f3346;
  --om-exito:        #66bb6a;
  --om-error:        #ef5350;
  --om-alerta:       #ffa726;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  background: var(--om-fondo);
  color: var(--om-texto);
  font-size: 15px;
}

a { color: var(--om-enlace); text-decoration: none; }
a:hover { opacity: .85; }

h1 { font-weight: 500; font-size: 1.6rem; margin-bottom: 1rem; }
h2 { font-weight: 400; font-size: 1.25rem; margin: 1.2rem 0 .8rem; }

/* ── Layout con sidebar ─────────────────────────────────────────── */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  /* Marino, no el azul de marca: sobre este fondo oscuro el logo se lee con
     sus colores reales (ver scripts/generar_logo_sidebar.py) y el azul queda
     libre para lo que de verdad es accionable — botones y enlaces. */
  background: var(--om-marino);
  /* En modo oscuro el marino queda a 1,5:1 del fondo de la página: sin este
     borde el sidebar se funde con el contenido. En claro no estorba. */
  border-right: 1px solid rgba(255,255,255,.08);
  color: #fff;
  display: flex;
  flex-direction: column;
  /* Inmóvil al hacer scroll: siempre se ve completo (logo → cerrar sesión) */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* La marca va sobre el marino del sidebar: se usa `logo-sidebar.svg`, generado
   para ese fondo (trazo engrosado y contorno fino; solo "Optimal" pasa a
   blanco, la campana conserva el azul de marca). Ver
   scripts/generar_logo_sidebar.py y docs/ui.md. */
.sidebar-brand {
  padding: 1.2rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.brand-logo { max-width: 100%; height: auto; display: block; }
.brand-texto { font-size: 1.15rem; font-weight: 500; letter-spacing: .3px; }

.sidebar-nav { flex: 1; padding: 1rem 0; }

.nav-item {
  display: block;
  padding: .7rem 1.2rem;
  color: rgba(255,255,255,.85);
  font-weight: 400;
}
/* Hover/activo se distinguen con una capa blanca translúcida, no con otra
   variable de color: sobre el marino cualquier azul de la paleta quedaría
   demasiado cerca del fondo. */
.nav-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-item.active {
  background: rgba(255,255,255,.20);
  color: #fff;
  border-left: 3px solid #fff;
  padding-left: calc(1.2rem - 3px);
}

.sidebar-footer {
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.nav-boton {
  background: none; border: none; width: 100%; text-align: left;
  font-family: inherit; font-size: inherit; cursor: pointer;
}

/* Elementos visibles solo en un tema (ej: variante del logo en login) */
.solo-oscuro { display: none; }
:root[data-theme="dark"] .solo-claro { display: none; }
:root[data-theme="dark"] .solo-oscuro { display: inline; }

.btn-tema-flotante {
  position: fixed; top: 1rem; right: 1rem; z-index: 20;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 20px;
  padding: .4rem .9rem; font-family: inherit; font-size: .85rem; cursor: pointer;
}
.btn-tema-flotante:hover { background: rgba(255,255,255,.22); }
.usuario-info { padding: 0 1.2rem .6rem; display: flex; flex-direction: column; }
.usuario-nombre { font-weight: 500; font-size: .95rem; }
.usuario-email { font-size: .8rem; color: rgba(255,255,255,.5); }

.contenido {
  flex: 1;
  padding: 2rem 2.5rem;
  max-width: 1300px;
  margin: 0 auto;   /* centrado en el espacio a la derecha del sidebar */
  width: 100%;
}

/* ── Login ──────────────────────────────────────────────────────── */

.login-fondo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--om-azul-claro) 0%, var(--om-azul) 45%, var(--om-marino) 110%);
}

.login-card {
  background: var(--om-superficie);
  padding: 2.5rem 2.8rem;
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  text-align: center;
}
.login-logo { max-width: 220px; margin-bottom: .6rem; }
.login-titulo { color: var(--om-marino); font-weight: 500; }
.login-subtitulo { color: var(--om-texto-suave); font-size: .9rem; margin: .4rem 0 1.6rem; }

.login-card form { text-align: left; }
.login-card label {
  display: block; font-size: .85rem; font-weight: 500;
  color: var(--om-texto-suave); margin: .9rem 0 .3rem;
}
.login-card input {
  width: 100%; padding: .65rem .8rem;
  border: 1px solid var(--om-borde); border-radius: 6px; font-size: .95rem;
  background: var(--om-superficie); color: var(--om-texto);
}
.login-card input:focus { outline: 2px solid var(--om-azul); border-color: transparent; }

/* ── Botones ────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: .55rem 1.2rem;
  border: none; border-radius: 6px;
  font-size: .9rem; font-weight: 500; font-family: inherit;
  cursor: pointer;
}
.btn-primario { background: var(--om-azul); color: #fff; }
.btn-primario:hover { background: var(--om-azul-oscuro); color: #fff; }
.btn-secundario {
  background: var(--om-superficie); color: var(--om-enlace);
  border: 1px solid var(--om-azul);
}
.btn-secundario:hover { background: var(--om-chip-bg); }
.btn-peligro { background: var(--om-superficie); color: var(--om-error); border: 1px solid var(--om-error); }
.btn-peligro:hover { background: var(--om-hover); }
.btn-block { width: 100%; margin-top: 1.4rem; }
.btn-chico { padding: .3rem .7rem; font-size: .8rem; }

/* ── Tarjetas y tablas ──────────────────────────────────────────── */

.card {
  background: var(--om-superficie);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 1px 4px rgba(22,28,45,.08);
}

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-weight: 500; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--om-texto-suave);
  padding: .6rem .8rem; border-bottom: 2px solid var(--om-borde);
}
td { padding: .6rem .8rem; border-bottom: 1px solid var(--om-borde); }
tr:hover td { background: var(--om-hover); }

.chip {
  display: inline-block;
  background: var(--om-chip-bg); color: var(--om-chip-texto);
  border-radius: 20px; padding: .15rem .6rem;
  font-size: .75rem; font-weight: 500; margin: 0 .2rem .2rem 0;
}
.chip-gris { background: var(--om-chip-gris-bg); color: var(--om-texto-suave); }

.badge-ok { color: var(--om-exito); font-weight: 500; }
.badge-off { color: var(--om-texto-suave); }

/* ── Flash messages ─────────────────────────────────────────────── */

.flash-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 1000;
  display: flex; flex-direction: column; gap: .5rem; max-width: 420px;
}
.flash {
  padding: .8rem 1.1rem; border-radius: 6px;
  background: var(--om-marino); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: .9rem;
}
.flash-success { background: var(--om-exito); }
.flash-error   { background: var(--om-error); }
.flash-warning { background: var(--om-alerta); }

/* ── Formularios admin ──────────────────────────────────────────── */

.form-grupo { margin-bottom: 1rem; }
.form-grupo label {
  display: block; font-size: .85rem; font-weight: 500;
  color: var(--om-texto-suave); margin-bottom: .3rem;
}
.form-grupo input[type="text"],
.form-grupo input[type="email"],
.form-grupo input[type="password"],
.form-grupo select {
  width: 100%; max-width: 420px;
  padding: .55rem .8rem;
  border: 1px solid var(--om-borde); border-radius: 6px;
  font-size: .95rem; font-family: inherit;
  background: var(--om-superficie); color: var(--om-texto);
}
.form-grupo input:focus, .form-grupo select:focus {
  outline: 2px solid var(--om-azul); border-color: transparent;
}
.form-check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.form-check input { accent-color: var(--om-azul); width: 16px; height: 16px; }

/* ── Selector de valores (barras/centrales) ─────────────────────── */

.tipo-bloque {
  border: 1px solid var(--om-borde); border-radius: 8px;
  padding: 1rem 1.2rem; margin-bottom: 1rem;
}
.tipo-bloque.deshabilitado { opacity: .55; }
.tipo-encabezado { display: flex; align-items: center; gap: .6rem; }
.tipo-encabezado h3 { font-weight: 500; font-size: 1.05rem; }
.tipo-encabezado .nota { font-size: .8rem; color: var(--om-texto-suave); }

.valores-panel { margin-top: .8rem; }
.dimension-bloque { margin-bottom: 1rem; }
.dimension-bloque:last-child { margin-bottom: 0; }
.dimension-bloque h4 {
  font-size: .85rem; font-weight: 600; color: var(--om-texto-suave);
  margin: 0 0 .35rem;
}
.valores-busqueda {
  width: 100%; max-width: 320px;
  padding: .45rem .7rem; margin-bottom: .5rem;
  border: 1px solid var(--om-borde); border-radius: 6px; font-family: inherit;
  background: var(--om-superficie); color: var(--om-texto);
}
.valores-lista {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--om-borde); border-radius: 6px;
  padding: .5rem .8rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .1rem .8rem;
  background: var(--om-hover);
}
.valores-acciones {
  margin: .5rem 0 0; display: flex; gap: 1rem; align-items: center;
  font-size: .85rem;
}
.contador-seleccion { color: var(--om-texto-suave); }

/* ── Filtros del dashboard ──────────────────────────────────────── */

.filtros-fila {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
}
.filtro label {
  display: block; font-size: .78rem; font-weight: 500;
  color: var(--om-texto-suave); margin-bottom: .25rem;
}
.filtro select {
  padding: .45rem .7rem; border: 1px solid var(--om-borde); border-radius: 6px;
  font-family: inherit; font-size: .9rem;
  background: var(--om-superficie); color: var(--om-texto);
}
.filtro-boton { margin-left: auto; }

/* Descargas de la publicación completa (bases y resultados). Van juntas y
   arriba, separadas de las descargas "de lo que se ve" que acompañan a las
   vistas: son cosas distintas y no deben leerse como formatos de lo mismo. */
.filtro-descargas {
  display: flex; flex-wrap: wrap; gap: .4rem;
  align-items: center; justify-content: flex-end;
}

.dropdown { position: relative; }
.dropdown summary {
  list-style: none; cursor: pointer;
  padding: .45rem .8rem; border: 1px solid var(--om-borde); border-radius: 6px;
  background: var(--om-superficie); font-size: .9rem; user-select: none;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary::after { content: " ▾"; color: var(--om-texto-suave); }
.dropdown-panel {
  position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
  min-width: 240px; max-height: 280px; overflow-y: auto;
  background: var(--om-superficie);
  border: 1px solid var(--om-borde); border-radius: 8px;
  padding: .6rem .9rem;
  box-shadow: 0 8px 24px rgba(22,28,45,.25);
}

/* ── KPIs por barra ─────────────────────────────────────────────── */

.kpi-fila {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem; margin-bottom: 1.4rem;
}
.kpi {
  background: var(--om-superficie); border-radius: 8px;
  padding: .9rem 1.1rem;
  box-shadow: 0 1px 4px rgba(22,28,45,.08);
}
.kpi-titulo {
  font-size: .82rem; font-weight: 500; color: var(--om-texto-suave);
  display: flex; align-items: center; gap: .45rem;
}
.punto-serie {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  flex-shrink: 0;
}
.kpi-valor { font-size: 1.45rem; font-weight: 500; margin-top: .25rem; }
.kpi-unidad { font-size: .72rem; font-weight: 400; color: var(--om-texto-suave); }
.kpi-sub { font-size: .78rem; color: var(--om-texto-suave); margin-top: .15rem;
           font-variant-numeric: tabular-nums; }

/* ── Gráficos ───────────────────────────────────────────────────── */

.chart-wrap { position: relative; height: 340px; }

/* Tortas comparativas (Generación → Matriz por año): una por año elegido,
   en fila y que envuelvan en móvil. */
.graficos-torta { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; }
.torta-item { flex: 1 1 260px; max-width: 340px; }
.torta-item h3 { text-align: center; font-size: .95rem; margin: 0 0 .5rem; }
.torta-item .chart-wrap { height: 260px; }

/* Gráfico + selector de tecnologías lado a lado (Generación → Por
   tecnología / Banda horaria): el selector usa el mismo alto que el
   gráfico, compacto (fuente chica, sin tarjetas con borde) para que quepan
   las 5 familias sin scroll interno en la mayoría de las pantallas. */
.grafico-con-selector { display: flex; gap: 1.2rem; align-items: stretch; }
.grafico-con-selector .chart-wrap { flex: 2 1 0; min-width: 0; height: 460px; }
.selector-tecnologias {
  flex: 1 1 240px; max-width: 300px; height: 460px;
  overflow-y: auto; padding-right: .4rem; font-size: .8rem;
}
.selector-tecnologias .tipo-bloque {
  border: none; border-radius: 0;
  padding: 0 0 .5rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--om-borde);
}
.selector-tecnologias .tipo-bloque:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.selector-tecnologias .tipo-encabezado { gap: .4rem; margin-bottom: .15rem; }
.selector-tecnologias .tipo-encabezado h3 { font-size: .8rem; font-weight: 600; }
.selector-tecnologias .tipo-encabezado .btn { padding: .12rem .5rem; font-size: .68rem; }
.selector-tecnologias .opciones-inline { gap: .1rem .7rem; }
.selector-tecnologias .form-check { margin: .12rem 0; }
.selector-tecnologias .form-check input { width: 13px; height: 13px; }

/* Mayores variaciones (Generación → Matriz por año) */
#genMatrizMovers { display: flex; gap: 2rem; flex-wrap: wrap; }
.movers-col { flex: 1 1 220px; }
.movers-col h4 { margin: 0 0 .5rem; font-size: .85rem; color: var(--om-texto-suave); }
.valor-mover {
  display: flex; align-items: center; gap: .5rem; padding: .35rem 0;
  border-bottom: 1px solid var(--om-borde); font-size: .85rem;
}
.mover-tipo { flex: 1; }
.mover-delta { font-weight: 600; white-space: nowrap; }

/* ── Dashboard tabs ─────────────────────────────────────────────── */

.tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--om-borde); margin-bottom: 1.4rem; }
.tab {
  padding: .6rem 1.2rem; cursor: pointer;
  color: var(--om-texto-suave); font-weight: 500;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tab.active { color: var(--om-azul); border-bottom-color: var(--om-azul); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Sub-tabs de vista dentro de un tab (evolución / horaria / hidrología) ── */

/* Las vistas a la izquierda y las descargas a la derecha, en la MISMA línea:
   exportar aplica a la vista activa, así que los dos controles se leen juntos. */
.subtabs-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.subtabs-acciones {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto;
  align-items: center;
}
.acciones-etiqueta {
  font-size: .78rem; color: var(--om-texto-suave); margin-right: .1rem;
}
/* Texto con explicación en `title`: la pista visual de que hay algo que leer. */
.con-ayuda {
  border-bottom: 1px dotted var(--om-texto-suave); cursor: help;
}
.subtabs {
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.subtab {
  padding: .45rem 1rem;
  border: 1px solid var(--om-borde); border-radius: 20px;
  background: var(--om-superficie); color: var(--om-texto-suave);
  font-size: .88rem; cursor: pointer; user-select: none;
}
.subtab:hover { background: var(--om-hover); }
.subtab.active {
  background: var(--om-azul); border-color: var(--om-azul);
  color: #fff; font-weight: 500;
}
.vista-panel { display: none; }
.vista-panel.active { display: block; }

/* ── Selector de nivel de suscripción (admin) ──────────────────────── */

.niveles-opciones {
  display: grid; gap: .8rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.nivel-opcion {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1rem; cursor: pointer;
  border: 1px solid var(--om-borde); border-radius: 8px;
  background: var(--om-superficie);
}
.nivel-opcion:hover { background: var(--om-hover); }
.nivel-opcion.seleccionado {
  border-color: var(--om-azul);
  box-shadow: inset 0 0 0 1px var(--om-azul);
}
.nivel-opcion input { accent-color: var(--om-azul); margin-top: .2rem; }
.nivel-opcion div { display: flex; flex-direction: column; gap: .2rem; }
.nivel-opcion .nota { font-size: .8rem; }

/* ── Grupo de checkboxes en línea (ej. escenarios de combustible) ──── */

.opciones-inline {
  display: flex; gap: .9rem; flex-wrap: wrap; align-items: center;
  padding: .35rem 0;
}
.opciones-inline .form-check { margin: 0; white-space: nowrap; }

/* ── Rejilla de datos (resumen de suscripción) ─────────────────────── */

.datos-grid {
  display: grid; gap: 1rem; margin-top: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.dato {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 1rem;
  background: var(--om-hover);
  border: 1px solid var(--om-borde); border-radius: 8px;
}
.dato-etiqueta {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
  color: var(--om-texto-suave);
}
.dato-valor { font-size: 1.35rem; font-weight: 500; color: var(--om-marino); }
.dato-valor-chico { font-size: 1rem; font-weight: 500; color: var(--om-marino); }
.dato-unidad { font-size: .85rem; font-weight: 400; color: var(--om-texto-suave); }
:root[data-theme="dark"] .dato-valor,
:root[data-theme="dark"] .dato-valor-chico { color: var(--om-texto); }

.sub-titulo {
  font-size: 1rem; font-weight: 500; margin: 1.6rem 0 .6rem;
  color: var(--om-texto-suave);
}

/* ── Campo de contraseña con botón mostrar/ocultar ─────────────────── */

.campo-password { display: flex; gap: .5rem; align-items: stretch; }
.campo-password input { flex: 1; }
.campo-password button { white-space: nowrap; }

/* ── Barra de suplantación ("viendo como…") ────────────────────────── */

.barra-suplantacion {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1rem;
  background: var(--om-alerta); color: #fff;
  font-size: .88rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.barra-suplantacion form { margin: 0; }
.btn-volver {
  background: rgba(255,255,255,.95); color: var(--om-alerta);
  border: none; font-weight: 500;
}
.btn-volver:hover { background: #fff; }

/* ── Aviso de cuenta de demostración ──────────────────────────────── */
/* No es fija: va al principio del contenido y baja con el scroll. Con la
   marca de agua en cada gráfico basta para que "es demo" sea evidente. */
.aviso-demo {
  margin-bottom: 1.1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--om-borde);
  border-left: 4px solid var(--om-alerta);
  border-radius: 6px;
  background: var(--om-hover);
  color: var(--om-texto);
  font-size: .9rem;
  line-height: 1.4;
}

/* El contenido baja para no quedar tapado por la barra fija. */
body.suplantando .contenido { padding-top: 3.2rem; }
body.suplantando .sidebar { top: 2.4rem; height: calc(100vh - 2.4rem); }
@media (max-width: 900px) {
  body.suplantando .mobile-topbar { top: 2.4rem; }
  body.suplantando .contenido { padding-top: calc(52px + 3.2rem); }
}

/* ── Bloque de código/estructura (admin de publicaciones) ──────────── */

.codigo-bloque {
  background: var(--om-hover);
  border: 1px solid var(--om-borde); border-radius: 6px;
  padding: .9rem 1rem; margin-top: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.6; color: var(--om-texto-suave);
  overflow-x: auto;   /* nunca desborda la página en móvil */
}

.encabezado-pagina {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.2rem;
}

.estado-generando {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--om-alerta); font-weight: 500; font-size: .9rem;
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--om-alerta); border-top-color: transparent;
  animation: girar 1s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Tablas con scroll horizontal (móvil/tablet) ────────────────── */

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll table { min-width: 560px; }

/* ── Topbar móvil + overlay ─────────────────────────────────────── */

.mobile-topbar {
  display: none;               /* visible solo bajo el breakpoint */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--om-marino);
  align-items: center;
  gap: .6rem;
  padding: 0 .8rem;
  z-index: 150;
  box-shadow: 0 2px 8px rgba(22,28,45,.25);
}
.hamburger {
  background: none; border: none; cursor: pointer;
  color: #fff; padding: .3rem; line-height: 0; border-radius: 6px;
}
.hamburger:hover { background: rgba(255,255,255,.15); }
.topbar-logo { height: 30px; width: auto; }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 199;
}
.sidebar-overlay.visible { display: block; }

/* ── Responsive ─────────────────────────────────────────────────── */

/* Tablet vertical y celular: sidebar off-canvas + topbar con hamburguesa.
   El sidebar debe ser position:fixed (nunca relative): si ocupa espacio en
   el flujo genera overflow horizontal y los elementos fixed "se mueven"
   con el scroll en móvil (ver ProgramaEjemplo/Descubrimientos.md). */
@media (max-width: 900px) {
  .mobile-topbar { display: flex; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 250px;
    transform: translateX(-250px);
    transition: transform .25s;
    z-index: 200;
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }

  .contenido {
    padding: 1.2rem;
    padding-top: calc(52px + 1.2rem);   /* no quedar bajo el topbar */
    max-width: 100%;
  }

  .encabezado-pagina {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }

  .flash-container { left: 1rem; right: 1rem; max-width: none; top: calc(52px + .6rem); }

  .card { padding: 1.1rem 1.2rem; }
  .form-grupo input[type="text"],
  .form-grupo input[type="email"],
  .form-grupo input[type="password"],
  .form-grupo select { max-width: 100%; }

  .valores-busqueda { max-width: 100%; }
  .valores-lista { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; }

  .login-card { margin: 1rem; padding: 2rem 1.6rem; }

  .grafico-con-selector { flex-direction: column; }
  .selector-tecnologias { max-width: 100%; height: auto; max-height: 340px; }
}

/* Celulares chicos */
@media (max-width: 420px) {
  .contenido { padding: .8rem; padding-top: calc(52px + .8rem); }
  .filtros-fila { gap: .6rem; }
  .filtro { width: calc(50% - .3rem); }
  .filtro select, .dropdown summary { width: 100%; }
  .filtro-boton { width: 100%; margin-left: 0; }
  /* En un filtro de media pantalla, "Sensibilidad (+10% combustibles)" no cabe
     en una línea y el `nowrap` del escritorio empujaba la página a scroll
     horizontal. Acá el texto rompe línea. */
  .opciones-inline .form-check { white-space: normal; }
  .chart-wrap { height: 260px; }
  .valores-lista { grid-template-columns: 1fr; max-height: 220px; }
  .valores-acciones { flex-wrap: wrap; gap: .6rem; }
  .btn { padding: .55rem 1rem; }
  .tipo-bloque { padding: .8rem .9rem; }
  .tipo-encabezado { flex-wrap: wrap; }
}

/* ── Verificación previa de una publicación (admin) ─────────────────── */

.verificacion {
  margin-top: 1.2rem; padding: .9rem 1.1rem;
  border-radius: 8px; border: 1px solid var(--om-borde);
  background: var(--om-hover);
}
.verificacion h3 { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; }
.verificacion p { margin: .35rem 0; font-size: .88rem; }
.verif-caja-ok     { border-color: var(--om-exito); }
.verif-caja-alerta { border-color: var(--om-alerta); }
.verif-caja-error  { border-color: var(--om-error); }
.verif-ok     { color: var(--om-exito); font-weight: 500; }
.verif-alerta { color: var(--om-alerta); font-weight: 500; }
.verif-error  { color: var(--om-error); font-weight: 500; }
.verif-nota   { color: var(--om-texto-suave); }
.verif-lista {
  margin: .2rem 0 .6rem 1.2rem; font-size: .85rem;
  color: var(--om-texto-suave);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Enlace-botón inhabilitado (un <a> no admite `disabled`). Se usa en la
   cuenta demo: los botones de descarga se ven pero no se pueden apretar.
   `pointer-events: none` corta el clic incluso si el JS le pone un href. */
.btn.btn-inhabilitado {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}