/* Paleta de la marca: la de gideons.org (su hoja template_main.css, leída el 30-10-2026) —verde azulado oscuro #00303A en la barra superior,
   #18697C en enlaces y botones, naranja #FB991C solo para lo que se destaca—. El naranja NO sirve como texto sobre
   fondo claro (2,0:1): para eso hay un naranja oscuro (--gz-oro).

   Gedeones Zona 3 · piel JF sobre AdminLTE 4.
   La MISMA piel del sistema Comercial (codigo/comercial/public/css/comercial.css, commit 1b3a296, 18-10-2026): fondo y tarjeta en tonos
   distintos, relieve suave, etiquetas diminutas en mayúsculas, cifras grandes en rejilla de líneas finas y un solo acento. Aquí el acento
   es el verde azulado de gideons.org. Dos diferencias deliberadas, ambas de contraste: el texto secundario es #675f52 (el del Comercial, #7a7366,
   da 4,39:1 sobre la tarjeta y 3,99:1 sobre el fondo: por debajo de AA para etiquetas de 11 px) y la tipografía es Atkinson Hyperlegible,
   la de la identidad del ministerio. AdminLTE y Bootstrap viven en public/vendor/ y no se tocan; todo lo demás es de este archivo.
   Ninguna vista escribe un color, un style="" ni un <style>. */

/* ── Tokens ─────────────────────────────────────────────────────────────────────────────────────── */
:root {
  --fondo: #f1ece3;
  --tarjeta: #faf7f1;
  --c: #18697C;
  --gz-lateral: #00303A;
  --gz-lateral-suave: #9fc3cc;
  --naranja: #FB991C;
  --radio: .75rem;
  --sombra: 0 1px 2px rgba(70, 50, 20, .03), 0 4px 14px -8px rgba(70, 50, 20, .07);
  --sombra-alta: 0 2px 4px rgba(70, 50, 20, .04), 0 8px 22px -10px rgba(70, 50, 20, .11);
  /* Espacios: una escala, no valores sueltos */
  --e1: .25rem; --e2: .5rem; --e3: 1rem; --e4: 1.5rem; --e5: 2rem; --e6: 3rem;
  --margen-pagina: clamp(1rem, 3vw, 2.25rem);

  --bs-body-font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: .97rem;
  --bs-body-color: #2b2823;
  --bs-body-color-rgb: 43, 40, 35;
  --bs-secondary-color: #675f52;
  --bs-border-color: #e3dccf;
  --bs-tertiary-bg: #efe9de;
  --bs-primary: #18697C;
  --bs-primary-rgb: 24, 105, 124;
  --bs-primary-text-emphasis: #0d4251;
  --bs-primary-bg-subtle: #dcecf0;
  --bs-primary-border-subtle: #a9cdd6;
  --bs-link-color: #18697C;
  --bs-link-color-rgb: 24, 105, 124;
  --bs-link-hover-color: #0d4251;
  --bs-link-hover-color-rgb: 13, 66, 81;
  --bs-success: #1e6b3e; --bs-success-rgb: 30, 107, 62; --bs-success-text-emphasis: #145230; --bs-success-bg-subtle: #e5f3ea; --bs-success-border-subtle: #b3d9c1;
  --bs-danger: #a8261c; --bs-danger-rgb: 168, 38, 28; --bs-danger-text-emphasis: #7d1c14; --bs-danger-bg-subtle: #fbe9e7; --bs-danger-border-subtle: #eeb9b3;
  --bs-warning: #9a5600; --bs-warning-rgb: 154, 86, 0; --bs-warning-text-emphasis: #6b3b00; --bs-warning-bg-subtle: #fdf0dc; --bs-warning-border-subtle: #f3cf9a;
  --gz-oro: #9a5600;
}

[data-bs-theme="dark"] {
  --fondo: #151412;
  --tarjeta: #1e1c19;
  --c: #8fc0cc;
  --sombra: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 16px -10px rgba(0, 0, 0, .35);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .25), 0 10px 24px -10px rgba(0, 0, 0, .45);
  --bs-body-color: #ece7dd;
  --bs-body-color-rgb: 236, 231, 221;
  --bs-secondary-color: #a39b8d;
  --bs-border-color: #34302a;
  --bs-tertiary-bg: #26231f;
  --bs-primary: #8fc0cc;
  --bs-primary-rgb: 143, 192, 204;
  --bs-primary-text-emphasis: #b7d8e0;
  --bs-primary-bg-subtle: #17323a;
  --bs-primary-border-subtle: #2a525d;
  --bs-link-color: #8fc0cc;
  --bs-link-color-rgb: 143, 192, 204;
  --bs-link-hover-color: #b7d8e0;
  --bs-link-hover-color-rgb: 183, 216, 224;
  --bs-success: #7fd3a0; --bs-success-rgb: 127, 211, 160; --bs-success-text-emphasis: #9be0b6; --bs-success-bg-subtle: #15301f; --bs-success-border-subtle: #1f5a38;
  --bs-danger: #ff9b8f; --bs-danger-rgb: 255, 155, 143; --bs-danger-text-emphasis: #ffb8af; --bs-danger-bg-subtle: #3a1d1b; --bs-danger-border-subtle: #7a342d;
  --bs-warning: #FB991C; --bs-warning-rgb: 251, 153, 28; --bs-warning-text-emphasis: #fdb95a; --bs-warning-bg-subtle: #3a2410; --bs-warning-border-subtle: #6b4414;
  --gz-oro: #FB991C;
}

/* La tipografía trae solo 400 y 700: los pesos intermedios caen en 400 y los títulos quedarían sin fuerza */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-header .card-title, .login-card-body h1 { font-weight: 700; color: var(--bs-body-color); }

/* ── Superficies: la página y las tarjetas en tonos distintos ───────────────────────────────────── */
body, .app-wrapper, .app-main { background-color: var(--fondo) !important; }
.card, .modal-content, .dropdown-menu, .app-footer { background-color: var(--tarjeta) !important; --bs-body-bg: var(--tarjeta); }
.card {
  border: 1px solid color-mix(in srgb, var(--bs-border-color) 45%, transparent);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: var(--e4);
}
.card-header, .card-footer { background-color: transparent !important; border-color: var(--bs-border-color); padding: var(--e3) 1.25rem; }
.card-header .card-title { font-size: .98rem; margin: 0; }
.card-header.d-flex::after { display: none; } /* el clearfix de AdminLTE se vuelve un tercer elemento flex y manda el contenido de la derecha al centro */
.card-body { padding: 1.25rem; }
.card > .list-group > .list-group-item { padding: .85rem 1.25rem; background: transparent; border-color: color-mix(in srgb, var(--bs-border-color) 70%, transparent); }
.card.mb-2, .card.mb-3 { margin-bottom: var(--e3) !important; } /* tarjetas que son filas de una lista: más juntas que las secciones */
.card.mb-4 { margin-bottom: var(--e4) !important; }
.dropdown-menu { border-radius: .7rem; box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--bs-border-color) 70%, transparent); }
.dropdown-item { border-radius: .4rem; padding: .45rem .75rem; }
.table { --bs-table-bg: transparent; }
.alert { border-radius: var(--radio); }

/* ── Barra superior y lateral: el verde azulado de gideons.org. La barra superior queda siempre visible (body.fixed-header) ─── */
.app-header, .app-sidebar { background-color: var(--gz-lateral) !important; color: #fff; }
.app-header {
  --bs-navbar-color: #fff; --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 6px 16px -12px rgba(0, 24, 30, .55);
}
/* Mismos márgenes laterales que el contenido (--margen-pagina): el glifo de la izquierda queda sobre el borde del título y el menú de usuario sobre el borde derecho de las tarjetas */
.app-header > .container-fluid { padding-inline: calc(var(--margen-pagina) - .5rem - 4px) calc(var(--margen-pagina) - .5rem); }
.app-header .nav-link { color: #fff; border-radius: 0; }
.app-header .navbar-nav:first-child .nav-link { padding-inline: .5rem; }
.app-header .nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.app-header .nav-link:focus-visible, .tema-btn:focus-visible { box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--naranja) 60%, transparent); outline: 0; }
.tema-btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .3rem .75rem; border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent;
  color: var(--gz-lateral-suave); font-size: .84rem; line-height: 1.2;
}
.tema-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.app-sidebar, [data-bs-theme] .app-sidebar {
  border-right: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--sombra);
  /* AdminLTE pinta la barra lateral con variables por tema (oscuras en claro): aquí es verde azulado en los dos */
  --lte-sidebar-color: #e6f0f2; --lte-sidebar-hover-color: #fff; --lte-sidebar-active-color: #fff;
  --lte-sidebar-hover-bg: rgba(255, 255, 255, .08);
  --lte-sidebar-menu-active-color: #fff; --lte-sidebar-menu-active-bg: color-mix(in srgb, var(--naranja) 16%, transparent);
  --lateral-x: 1.5rem;
}
/* La marca mide lo que la barra superior (56 px + su línea) para que las dos líneas horizontales sigan siendo una sola */
.sidebar-brand { height: calc(3.5rem + 1px); padding: 0 var(--lateral-x); justify-content: flex-start; border-bottom: 1px solid rgba(255, 255, 255, .12) !important; }
.brand-link { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-link .brand-text, .sidebar-brand .brand-text { margin-left: 0; }
.sidebar-brand .brand-link, .sidebar-brand .brand-text, .sidebar-brand .brand-text:hover { color: #fff; }
.brand-mark { display: block; width: 34px; height: 34px; flex: 0 0 auto; }
.brand-text b { display: block; font-weight: 700; line-height: 1.1; letter-spacing: .01em; }
.brand-text small { display: block; font-size: .7rem; color: var(--bs-secondary-color); letter-spacing: .1em; text-transform: uppercase; }
.sidebar-brand .brand-text small { color: var(--gz-lateral-suave); }
.login-logo .brand-link { color: var(--bs-body-color); }
.sidebar-wrapper, .sidebar-wrapper nav, .sidebar-menu { padding: 0; }
.sidebar-menu { padding-block: .5rem 1rem; }
.sidebar-wrapper .sidebar-menu > .nav-item { margin: 0; }
/* Filas planas a todo el ancho, sin esquinas redondeadas ni márgenes: el ítem activo lleva una barra naranja a la izquierda (sombra interior: el contenedor recorta lo que se salga) */
.sidebar-menu .nav-item > .nav-link { border-radius: 0; margin: 0; padding: .75rem var(--lateral-x); }
.sidebar-menu .nav-link .nav-icon { justify-content: flex-start; color: var(--gz-lateral-suave); }
.sidebar-menu .nav-link.active { font-weight: 700; box-shadow: inset 3px 0 0 var(--naranja); }
.sidebar-menu .nav-link.active .nav-icon { color: var(--naranja); }
.sidebar-menu .nav-link:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--naranja) 70%, transparent); outline: 0; }
.sidebar-menu .nav-link.active:focus-visible { box-shadow: inset 3px 0 0 var(--naranja), inset 0 0 0 2px color-mix(in srgb, var(--naranja) 70%, transparent); }

/* Menú de usuario: la cabecera con la marca (como la barra superior del sitio) y las opciones en la tarjeta */
.dropdown-menu-cuenta { min-width: min(19rem, calc(100vw - 1.5rem)); padding: 0 0 .5rem; overflow: hidden; }
.menu-usuario-cab { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; margin-bottom: .45rem; background: var(--gz-lateral); color: #fff; }
.menu-usuario-cab > div { min-width: 0; }
.menu-usuario-cab .nombre { font-weight: 700; color: #fff; }
.menu-usuario-cab .correo { font-size: .82rem; color: var(--gz-lateral-suave); }
.menu-usuario-cab .badge { background-color: color-mix(in srgb, var(--naranja) 24%, transparent) !important; color: #ffd9a3 !important; border-color: color-mix(in srgb, var(--naranja) 55%, transparent) !important; margin-top: .3rem; }
.app-header .avatar, .menu-usuario-cab .avatar { background: var(--naranja); color: var(--gz-lateral); }
.dropdown-menu-cuenta .dropdown-item { margin: 0 .4rem; width: auto; padding: .5rem .75rem; }
.dropdown-menu-cuenta .dropdown-item:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--bs-body-color); }
.dropdown-menu-cuenta .dropdown-item.active { background: color-mix(in srgb, var(--naranja) 18%, transparent); color: var(--bs-body-color); font-weight: 700; }

/* ── Contenido: margen amplio y ritmo de espacios ───────────────────────────────────────────────── */
.app-main .app-content-header { padding: var(--e4) var(--margen-pagina) var(--e3); }
.app-main .app-content-header > .container-fluid, .app-main .app-content > .container-fluid { padding-inline: 0; max-width: 1480px; margin-inline: auto; }
.app-main .app-content { padding: 0 var(--margen-pagina) var(--e5); }
.app-content-header h1 { font-size: 1.4rem; letter-spacing: -.01em; margin: 0; }
.app-content-header .breadcrumb { font-size: .85rem; }
.app-content .row { --bs-gutter-x: var(--e4); --bs-gutter-y: 0; }
.app-footer { font-size: .8rem; color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color); padding-inline: var(--margen-pagina); }
.lead-corto, .ayuda-larga, .vacio p { max-width: 68ch; }

/* ── Cifras: una rejilla de celdas separadas por una línea fina (como el panel del Comercial) ──── */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--bs-border-color); border-top: 1px solid var(--bs-border-color); }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.metrica { display: block; background: var(--tarjeta); padding: 1rem 1.15rem; color: inherit; text-decoration: none; min-width: 0; }
a.metrica:hover { background: color-mix(in srgb, var(--c) 4%, var(--tarjeta)); }
.metrica .rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 650; }
.metrica .valor { font-size: 1.9rem; font-weight: 650; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.metrica .pie { font-size: .82rem; color: var(--bs-secondary-color); margin-top: .1rem; }
.metrica.alerta .valor { color: var(--bs-danger); }
.avance { padding: 1rem 1.15rem 1.15rem; border-top: 1px solid var(--bs-border-color); }
.avance .rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 650; }
.track { display: block; width: 100%; height: .4rem; border-radius: 99px; background: var(--bs-tertiary-bg); overflow: hidden; margin: .6rem 0 .5rem; }
.track .ok { fill: var(--bs-success); }
.track .mal { fill: var(--bs-danger); }
.track .prox { fill: var(--gz-oro); }
.keys { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--bs-secondary-color); font-size: .86rem; }
.keys span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; }
.keys .k-ok::before { background: var(--bs-success); }
.keys .k-mal::before { background: var(--bs-danger); }
.keys .k-prox::before { background: var(--gz-oro); }

/* ── Tablas: encabezados en etiqueta diminuta, cifras alineadas ─────────────────────────────────── */
.table > :not(caption) > * > * { vertical-align: middle; padding: .7rem .85rem; }
.table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); font-weight: 650; border-bottom-width: 1px; background: transparent; }
.table-hover > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--c) 5%, transparent); }
.tabla-datos td.n, .tabla-datos th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-datos td:not(.cero).n { font-weight: 650; }
.tabla-datos td.cero { color: var(--bs-secondary-color); font-weight: 400; }
.tabla-datos td.alerta { color: var(--bs-danger); }
.tabla-datos tr.sel > * { background: color-mix(in srgb, var(--c) 8%, transparent); }
.tabla-datos tfoot > tr > * { border-top: 2px solid var(--bs-border-color); background: var(--bs-tertiary-bg); font-weight: 650; }
.tabla-datos th[scope="row"] a { text-decoration: none; font-weight: 650; }
.tabla-datos th[scope="row"] a:hover { text-decoration: underline; }
.fila-acc { display: block; width: max-content; font-weight: 650; font-size: .88rem; }

/* ── Etiquetas (insignias): tinte del color con borde, no bloques de color pleno ────────────────── */
.badge { font-weight: 650; font-size: .74rem; padding: .3em .6em; border-radius: .45rem; border: 1px solid transparent; }
.badge.rounded-pill { border-radius: 99px; }
.badge.text-bg-primary { background-color: color-mix(in srgb, var(--bs-primary) 14%, transparent) !important; color: var(--bs-primary-text-emphasis) !important; border-color: color-mix(in srgb, var(--bs-primary) 28%, transparent); }
.badge.text-bg-success { background-color: color-mix(in srgb, var(--bs-success) 14%, transparent) !important; color: var(--bs-success-text-emphasis) !important; border-color: color-mix(in srgb, var(--bs-success) 30%, transparent); }
.badge.text-bg-danger { background-color: color-mix(in srgb, var(--bs-danger) 12%, transparent) !important; color: var(--bs-danger-text-emphasis) !important; border-color: color-mix(in srgb, var(--bs-danger) 30%, transparent); }
.badge.text-bg-warning, .badge.text-bg-oro { background-color: color-mix(in srgb, var(--gz-oro) 14%, transparent) !important; color: var(--bs-warning-text-emphasis) !important; border-color: color-mix(in srgb, var(--gz-oro) 35%, transparent); }
.badge.text-bg-secondary { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-secondary-color) !important; border-color: color-mix(in srgb, var(--bs-border-color) 80%, transparent); }
.badge.bg-body-secondary { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: color-mix(in srgb, var(--bs-border-color) 80%, transparent) !important; }

/* ── Controles ──────────────────────────────────────────────────────────────────────────────────── */
.btn { border-radius: .55rem; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--c); --bs-btn-border-color: var(--c); --bs-btn-hover-bg: color-mix(in srgb, var(--c) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--c) 86%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--c) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--c) 78%, #000); --bs-btn-disabled-bg: var(--c); --bs-btn-disabled-border-color: var(--c); --bs-btn-focus-shadow-rgb: 24, 105, 124; }
.btn-outline-primary { --bs-btn-color: var(--c); --bs-btn-border-color: color-mix(in srgb, var(--c) 55%, transparent); --bs-btn-hover-bg: var(--c); --bs-btn-hover-border-color: var(--c); --bs-btn-active-bg: var(--c); --bs-btn-active-border-color: var(--c); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: color-mix(in srgb, var(--bs-border-color) 90%, transparent); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-active-bg: var(--bs-tertiary-bg); --bs-btn-active-color: var(--bs-body-color); }
.btn-outline-success { --bs-btn-color: var(--bs-success); --bs-btn-border-color: color-mix(in srgb, var(--bs-success) 45%, transparent); --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-bg: var(--bs-success); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger); --bs-btn-border-color: color-mix(in srgb, var(--bs-danger) 45%, transparent); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-bg: var(--bs-danger); }
[data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn-outline-primary:hover, [data-bs-theme="dark"] .btn-outline-success:hover, [data-bs-theme="dark"] .btn-outline-danger:hover { --bs-btn-color: #151412; --bs-btn-hover-color: #151412; --bs-btn-active-color: #151412; --bs-btn-disabled-color: #151412; }
.form-control, .form-select { border: 1px solid color-mix(in srgb, var(--bs-border-color) 90%, transparent); border-radius: .55rem; background-color: color-mix(in srgb, var(--c) 3%, var(--tarjeta)); color: var(--bs-body-color); }
.form-control:focus, .form-select:focus, .btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, .tema-btn:focus-visible {
  border-color: var(--c); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--c) 28%, transparent); outline: 0;
}
.form-label { font-size: .85rem; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--c); gap: .25rem; }
.nav-pills .nav-link { border-radius: .55rem; color: var(--bs-secondary-color); font-weight: 600; }
.nav-pills .nav-link:not(.active):hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .nav-pills { --bs-nav-pills-link-active-color: #151412; }
details > summary { cursor: pointer; }
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "＋"; float: right; color: var(--bs-secondary-color); }
details.card[open] > summary::after { content: "−"; }
.desplegar { cursor: pointer; min-height: 2.25rem; display: inline-block; }

/* ── Lo que el navegador dibuja por su cuenta, con la marca ─────────────────────────────────────── */
:root { accent-color: var(--c); scrollbar-color: color-mix(in srgb, var(--bs-secondary-color) 45%, transparent) transparent; scrollbar-width: thin; }
::selection { background: color-mix(in srgb, var(--c) 24%, transparent); }
.table, .metrica .valor, .badge { font-variant-numeric: tabular-nums; }

/* ── Lo propio de Gedeones ──────────────────────────────────────────────────────────────────────── */
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 700; font-size: .8rem; line-height: 1; user-select: none; }
.avatar.grande { width: 3.25rem; height: 3.25rem; font-size: 1.15rem; }
.avatar.enorme { width: 5.5rem; height: 5.5rem; font-size: 1.9rem; }
.versiculo { border-left: 3px solid var(--gz-oro); padding-left: .85rem; margin: 0; }
.versiculo q { font: italic 1.06rem/1.55 Literata, Georgia, serif; quotes: "“" "”"; }
.versiculo cite { display: block; font-style: normal; font-weight: 650; color: var(--gz-oro); font-size: .9rem; }
.numero-motivo { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-weight: 700; flex: 0 0 auto; }
.json { font: .88rem/1.5 ui-monospace, Menlo, monospace; background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .6rem .8rem; white-space: pre-wrap; overflow-x: auto; }
.fecha-tile { min-width: 3.4rem; background: var(--bs-tertiary-bg) !important; }
.barra-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .6rem; padding: .75rem 0; background: var(--fondo); border-top: 1px solid var(--bs-border-color); }
.error-codigo { margin: 0; color: var(--bs-secondary-color); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; }
.login-page { min-height: 100vh; }
.login-box { width: min(26rem, 100% - 2rem); }

/* En el celular las seis columnas de «Por campamento» tienen que caber sin desplazar */
@media (max-width: 575.98px) {
  .tabla-datos > :not(caption) > * > * { padding: .5rem .3rem; }
  .tabla-datos { font-size: .9rem; }
  .tabla-datos th:first-child, .tabla-datos td:first-child { padding-left: .85rem; max-width: 7.5rem; }
  .tabla-datos th:last-child, .tabla-datos td:last-child { padding-right: .85rem; }
  .tabla-datos th[scope="row"] a { text-decoration: none; }
  .metrica .valor { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }