/* =====================================================================================
   FEDEHACEB · Sistema de diseño 2026 (fedehaceb.css)
   Derivado del mockup aprobado (wwwroot/mockups/fedehaceb-home-aprobada.html).
   Se carga DESPUÉS de lib/bootstrap-fh (Bootstrap 4.5.2) y de font-awesome 4.7.
   Guía de uso y fragmentos Razor: docs/rediseno-2026/LineaGrafica.md

   Índice
    0. Tokens
    1. Base (tipografía, color, enlaces, foco, utilidades)
    2. Formas pétalo e íconos
    3. Shell: salto al contenido, barra superior, header, menú, desplegables, panel móvil, pastillas
    4. Footer
    5. Flotantes (WhatsApp, volver arriba)
    6. Página: fh-main, fh-page, fh-wrap, secciones, mensajes flash
    7. Componentes fh-: hero, encabezados, tarjetas, botones, chips/etiquetas/estados, listas,
       pasos, avisos, estado vacío, tabla, filtros, formulario, modal, paginación, migas
    8. Re-estilo de Bootstrap 4 (vistas aún sin migrar)
    9. DataTables 1.10 (integración Bootstrap 3)
   10. Compatibilidad con el tema kidz (clases que siguen en vistas sin migrar)
   11. Compatibilidad con Bootstrap 3 (panel, pull-*, col-xs-*, control-label…)
   12. Movimiento reducido e impresión
   ===================================================================================== */

/* ===================================================================================== 0. TOKENS */
:root {
    /* Tinta y texto */
    --ink: #0F2A1C;
    --ink-2: #2C4537;
    --muted: #4A6354;
    /* Verdes de marca */
    --verde: #00903D;
    --verde-d: #007A33;
    --bosque: #0B4A2B;
    --bosque-2: #125C37;
    --medio: #68C42B;
    --lima: #B4DB00;
    --lima-hoy: #B4D800; /* lima de los botones actuales */
    --lima-s: #E5F1B0;
    --lima-2: #C9E83F;
    /* Colores de línea */
    --menta: #0BB89B;
    --azul: #45B4D8;
    --rosa: #F05B71;
    --naranja: #F06313;
    --mango: #FF9500;
    --morado: #7B3FB5;
    /* Tintes suaves (fondos) */
    --verde-s: #D6EEDD;
    --menta-s: #D3F2EB;
    --azul-s: #D8EFF7;
    --rosa-s: #FDE0E4;
    --naranja-s: #FDE3D3;
    --mango-s: #FFEBCC;
    --morado-s: #EDE1F7;
    /* Texto accesible sobre blanco para cada color de línea (≥ 4.5:1) */
    --verde-t: #007A33;
    --menta-t: #00745F;
    --azul-t: #0B6E8A;
    --rosa-t: #B42335;
    --naranja-t: #A63C00;
    --mango-t: #8A4B00;
    /* Fondos neutros */
    --crema: #F6F8EE;
    --crema-2: #ECF3DA;
    --linea: #DCE6C8;
    --borde: #7D9384; /* borde de campos: 3.3:1 sobre blanco */
    --polla: #204028;
    /* Semánticos */
    --rojo: #B42335;  /* errores y acciones destructivas: 6.5:1 sobre blanco */
    --rojo-s: #FDE4E7;
    /* Tipografías */
    --display: "Bricolage Grotesque", "Poppins", system-ui, sans-serif;
    --body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hand: "Caveat", "Bricolage Grotesque", cursive;
    /* Radios (una esquina en punta = pétalo) */
    --r-pill: 999px 999px 999px 6px;
    --r-pill-r: 999px 999px 6px 999px;
    --r-xl: 48px 48px 48px 8px;
    --r-lg: 40px 40px 40px 8px;
    --r-md: 28px 28px 28px 6px;
    --r-sm: 18px 18px 18px 4px;
    --r-sub: 22px 22px 22px 4px;
    --petalo: 50% 50% 50% 0;     /* punta abajo-izquierda */
    --petalo-tl: 0 50% 50% 50%;
    --petalo-tr: 50% 0 50% 50%;
    --petalo-br: 50% 50% 0 50%;
    /* Sombras */
    --sh-1: 0 10px 24px -16px rgba(15, 42, 28, .4);
    --sh-2: 0 22px 44px -16px rgba(15, 42, 28, .3);
    --sh-3: 0 30px 50px -36px rgba(15, 42, 28, .6);
    /* Medidas */
    --wrap: 1360px;
    --gutter: 40px;
    --header-h: 86px;
    --chips-h: 0px;
    --ease-pop: cubic-bezier(.3, 1.6, .5, 1);
}

@media (max-width: 1200px) {
    :root { --chips-h: 65px; }
}

@media (max-width: 760px) {
    :root { --gutter: 18px; --header-h: 70px; }
}

/* ===================================================================================== 1. BASE */
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + var(--chips-h) + 16px);
}

body {
    margin: 0;
    background: var(--crema);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
    color: inherit;
}

h1, .h1 { font-weight: 800; letter-spacing: -.025em; }

p { color: inherit; }

a {
    color: var(--verde-d);
    text-decoration: none;
}

a:hover {
    color: var(--bosque);
    text-decoration: underline;
}

/* Enlaces dentro del texto: subrayado (no solo color) para distinguirlos */
.fh-main p a:not([class]),
.fh-main li a:not([class]),
.fh-main td a:not([class]),
.fh-prose a {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: .18em;
}

img, svg { vertical-align: middle; }

strong, b { font-weight: 700; }

small, .small { font-size: 87.5%; }

hr { border-top: 2px dashed var(--linea); }

code { color: var(--rosa-t); }

::selection { background: var(--lima); color: var(--ink); }

/* Foco visible y consistente */
:focus { outline: none; }

/* Bootstrap trae button:focus { outline: 5px auto -webkit-focus-ring-color } (más específica que :focus):
   tras un clic con el ratón los botones quedaban con el anillo nativo. Solo se quita cuando no es foco de teclado. */
button:focus:not(:focus-visible),
[type="button"]:focus:not(:focus-visible),
[type="submit"]:focus:not(:focus-visible) { outline: none; }

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.fh-topbar :focus-visible,
.fh-footer :focus-visible,
.fh-on-dark :focus-visible,
.breadcrumb-bg :focus-visible { outline-color: var(--lima); }

/* Respaldo para navegadores sin :focus-visible */
.fh-no-fv a:focus,
.fh-no-fv button:focus { outline: 3px solid var(--ink); outline-offset: 3px; }

.fh-sr,
.fh-sr-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.fh-nw { white-space: nowrap; }
.fh-hand { font-family: var(--hand); font-weight: 700; color: var(--verde-d); }
.fh-display { font-family: var(--display); }
.fh-muted { color: var(--muted); }

/* ===================================================================================== 2. PÉTALOS E ÍCONOS */
.fh-petalo, .pt-bl { border-radius: var(--petalo); }
.pt-tl { border-radius: var(--petalo-tl); }
.pt-tr { border-radius: var(--petalo-tr); }
.pt-br { border-radius: var(--petalo-br); }

/* Colores de línea: definen --c (fondo) y --ct (texto accesible) */
.c-verde, .fh-linea-verde { --c: var(--verde-d); --cs: var(--verde-s); --ct: var(--verde-t); }
.c-lima, .fh-linea-lima { --c: var(--lima); --cs: var(--lima-s); --ct: var(--verde-t); }
.c-medio { --c: var(--medio); --cs: var(--verde-s); --ct: var(--verde-t); }
.c-menta, .fh-linea-auxilios, .fh-linea-menta { --c: var(--menta); --cs: var(--menta-s); --ct: var(--menta-t); }
.c-azul, .fh-linea-ahorro, .fh-linea-azul { --c: var(--azul); --cs: var(--azul-s); --ct: var(--azul-t); }
.c-rosa, .fh-linea-credito, .fh-linea-rosa { --c: var(--rosa); --cs: var(--rosa-s); --ct: var(--rosa-t); }
.c-naranja, .fh-linea-actividades, .fh-linea-naranja { --c: var(--naranja); --cs: var(--naranja-s); --ct: var(--naranja-t); }
.c-mango, .fh-linea-mango { --c: var(--mango); --cs: var(--mango-s); --ct: var(--mango-t); }

/* Sprite de íconos (Views/Shared/_Icons.cshtml) */
.fh-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

svg.i {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.2em;
}

svg.i-sm { width: 16px; height: 16px; }
svg.i-lg { width: 28px; height: 28px; }

/* ===================================================================================== 3. SHELL */
.fh-wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Saltar al contenido --- */
.fh-skip {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--r-pill);
    transition: top .2s;
}

.fh-skip:focus,
.fh-skip:focus-visible { top: 8px; color: #fff; outline-color: var(--lima); }

/* --- Barra superior --- */
.fh-topbar {
    position: relative;
    z-index: 1035; /* sus desplegables quedan sobre el header fijo */
    background: var(--ink);
    color: #E4EEDC;
    font-size: 13px;
}

.fh-topbar__in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 46px;
}

.fh-topbar__info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    overflow: hidden; /* nunca se monta sobre el menú de usuario */
}

.fh-topbar__info li {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.fh-topbar svg.i { width: 16px; height: 16px; color: var(--lima); }

.fh-topbar a {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.fh-topbar a:hover { color: #fff; text-decoration: underline; }
.fh-topbar .tb-wa a { gap: .3em; }

.fh-topbar__user {
    display: flex;
    align-items: center;
    gap: 6px 16px;
    flex: none;
}

.fh-portal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font: 600 13px/1.2 var(--body);
    background: var(--lima);
    background-clip: padding-box;
    border: 5px solid transparent;
    color: var(--ink) !important;
    padding: 0 14px 0 10px;
    border-radius: 999px 999px 999px 8px;
    margin-right: -5px;
    cursor: pointer;
    white-space: nowrap;
}

.fh-topbar .fh-portal svg.i { color: var(--ink); }
.fh-portal:hover { background-color: var(--lima-2); text-decoration: none !important; }
.fh-portal .lng { display: inline; }
.fh-portal--dd .fh-caret { transition: transform .2s; }
.fh-portal--dd[aria-expanded="true"] .fh-caret { transform: rotate(180deg); }
.fh-portal--dd:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }

.fh-hola { white-space: nowrap; }
.fh-hola strong { color: #fff; font-weight: 600; }

.fh-salir { gap: 6px; font-weight: 600; }

/* --- Header fijo --- */
.fh-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--crema);
    box-shadow: 0 1px 0 var(--linea);
    transition: box-shadow .25s;
}

.fh-header.is-stuck { box-shadow: 0 1px 0 var(--linea), 0 14px 30px -24px rgba(15, 42, 28, .45); }

.fh-header__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--header-h);
}

.fh-brand { display: block; flex: none; }
.fh-brand img { width: 172px; height: auto; display: block; }
.fh-brand:focus-visible { outline-offset: 6px; border-radius: 8px; }

.fh-nav { min-width: 0; }

.fh-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.fh-menu > li { position: relative; }

.fh-menu__link {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    border-radius: var(--r-pill);
    font: 500 15px/1.2 var(--body);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.fh-menu__link:hover,
.fh-has-sub.show > .fh-menu__link,
.fh-has-sub:hover > .fh-menu__link { background: var(--crema-2); color: var(--ink); text-decoration: none; }

.fh-menu__link[aria-current="page"], .fh-menu__link[aria-current="true"] { background: var(--ink); color: #fff; } /* mismo padding que el resto: el menú no "salta" al navegar */
.fh-menu__link[aria-current="page"]:hover, .fh-menu__link[aria-current="true"]:hover { background: var(--bosque); color: #fff; }

.fh-menu__link .fh-caret { transition: transform .2s; }
.fh-has-sub.show > .fh-menu__link .fh-caret { transform: rotate(180deg); }

/* --- Desplegables (Bootstrap 4 dropdown + apertura por hover en escritorio) --- */
.fh-sub.dropdown-menu {
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 4px 0 0;
    padding: 10px;
    border: 0;
    border-radius: var(--r-sub);
    background: #fff;
    box-shadow: var(--sh-2), 0 0 0 1px rgba(15, 42, 28, .06);
    font-size: 14px;
    color: var(--ink);
    z-index: 1040;
}

.fh-sub.dropdown-menu-right { left: auto; right: 0; }

/* puente invisible para que el hover no se pierda entre el botón y el menú */
.fh-sub.dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.fh-sub ul { list-style: none; margin: 0; padding: 0; }

.fh-sub .dropdown-item,
.fh-sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    text-decoration: none;
}

.fh-sub .dropdown-item::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: var(--petalo);
    background: var(--lima);
}

.fh-sub .dropdown-item svg.i { color: var(--verde-d); }
.fh-sub .dropdown-item:has(svg.i)::before { display: none; }

.fh-sub .dropdown-item:hover,
.fh-sub .dropdown-item:focus {
    background: var(--crema);
    color: var(--ink);
    text-decoration: none;
}

.fh-sub .dropdown-item:active { background: var(--crema-2); color: var(--ink); }

.fh-sub .dropdown-item[aria-current="page"] { background: var(--crema-2); font-weight: 700; }

.fh-sub__title {
    margin: 6px 14px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--verde-d);
}

.fh-sub__col + .fh-sub__col { border-left: 2px dashed var(--linea); padding-left: 10px; }
.fh-sub__col ul + .fh-sub__title { margin-top: 12px; }

.fh-sub--mega.dropdown-menu.show,
.fh-sub--role.dropdown-menu.show { display: grid; }

.fh-sub--mega {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 4px;
    width: max-content;
    max-width: min(860px, calc(100vw - 40px));
}

.fh-sub--role {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    gap: 4px;
    width: max-content;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 70px);
    overflow: auto;
    font-size: 14px;
}

.fh-sub--role:not(:has(.fh-sub__col + .fh-sub__col)) { grid-template-columns: minmax(240px, 1fr); }

.fh-sub__foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 2px dashed var(--linea);
}

.fh-sub__foot .dropdown-item { flex: 0 0 auto; }
.fh-sub__hola { margin: 0 auto 0 14px; font-size: 13px; color: var(--muted); }
.fh-sub__hola strong { color: var(--ink); }

/* Hover en escritorio para el ratón (además del clic de Bootstrap). El teclado usa Bootstrap:
   Enter/Espacio abre, flechas recorren, Esc cierra y devuelve el foco (sin :focus-within, que impediría cerrar con Esc). */
@media (hover: hover) and (min-width: 1201px) {
    .fh-has-sub:hover > .dropdown-menu { display: block; }
    .fh-has-sub:hover > .fh-sub--mega { display: grid; }
}

.fh-header__cta { flex: none; }

/* --- Botón de menú (celular y tableta) --- */
.fh-burger {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    min-width: 46px;
    padding: 0 14px;
    border: 2px solid var(--ink);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink);
    font: 600 14px/1 var(--body);
    cursor: pointer;
}

.fh-burger:hover { background: var(--ink); color: #fff; }
.fh-burger__close { display: none; }
.fh-burger[aria-expanded="true"] { background: var(--ink); color: #fff; }
.fh-burger[aria-expanded="true"] .fh-burger__open { display: none; }
.fh-burger[aria-expanded="true"] .fh-burger__close { display: block; }

/* --- Panel del menú móvil --- */
.fh-mnav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--crema);
    border-top: 1px solid var(--linea);
    box-shadow: 0 30px 50px -30px rgba(15, 42, 28, .55);
    padding: 12px 0 28px;
}

.fh-mnav[hidden] { display: none; }

.fh-mnav__list,
.fh-mnav ul { list-style: none; margin: 0; padding: 0; }

.fh-mnav__list > li { border-bottom: 1px solid var(--linea); }

.fh-mnav__list > li > a,
.fh-mnav__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 6px 4px;
    font: 600 16px/1.25 var(--body);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.fh-mnav__group > summary::-webkit-details-marker { display: none; }
.fh-mnav__group > summary .fh-caret { transition: transform .2s; }
.fh-mnav__group[open] > summary .fh-caret { transform: rotate(180deg); }
.fh-mnav__list > li > a[aria-current="page"], .fh-mnav__list > li > a[aria-current="true"] { color: var(--verde-d); }
.fh-mnav__list > li > a[aria-current="page"]::after, .fh-mnav__list > li > a[aria-current="true"]::after { content: ""; width: 12px; height: 12px; border-radius: var(--petalo); background: var(--lima); }

.fh-mnav__group ul { padding: 0 0 10px 8px; }

.fh-mnav__group li a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
}

.fh-mnav__group li a:hover { background: var(--crema-2); }
.fh-mnav__group li a svg.i { color: var(--verde-d); }
.fh-mnav__group .fh-sub__title { margin: 8px 8px 2px; }
.fh-mnav__group .fh-sub__col + .fh-sub__col { border: 0; padding: 0; }

.fh-mnav__user {
    margin-top: 18px;
    padding: 6px 18px 16px;
    background: #fff;
    border-radius: var(--r-md);
}

.fh-mnav__user .fh-mnav__group + .fh-mnav__group { border-top: 1px solid var(--linea); }
.fh-mnav__hola { margin: 10px 4px 2px; font-size: 14px; color: var(--muted); }
.fh-mnav__hola strong { color: var(--ink); }

.fh-mnav__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fh-mnav__actions .fh-btn { flex: 1 1 200px; }

.fh-mnav__contact { margin-top: 18px !important; display: grid; gap: 2px; font-size: 14px; }
.fh-mnav__contact a,
.fh-mnav__contact span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); }
.fh-mnav__contact svg.i { color: var(--verde-d); }

/* --- Pastillas de secciones (celular y tableta) --- */
.fh-chips { display: none; }

/* --- Responsive del shell (equivalente a las container queries del mockup) --- */
@media (max-width: 1500px) {
    .fh-topbar--auth .tb-hor { display: none !important; }
}

@media (max-width: 1300px) {
    .fh-header__cta .long { display: none; }
}

@media (max-width: 1100px) {
    .fh-topbar--auth .tb-mail { display: none !important; }
}

@media (max-width: 1000px) {
    .fh-topbar .tb-mail { display: none !important; }
    .fh-hola { display: none !important; }
}

@media (max-width: 1260px) {
    .fh-menu__link { padding: 10px 7px; font-size: 14.5px; }
    .fh-brand img { width: 156px; }
    .fh-topbar .tb-hor { display: none !important; }
}

@media (max-width: 1200px) {
    .fh-nav { display: none; }
    .fh-burger { display: inline-flex; }
    .fh-header__in { gap: 12px; }
    .fh-brand { margin-right: auto; }

    .fh-chips {
        display: block;
        position: sticky;
        top: var(--header-h);
        z-index: 1029;
        background: var(--crema);
        border-bottom: 1px solid var(--linea);
    }

    .fh-chips ul {
        list-style: none;
        margin: 0;
        padding: 10px 40px 10px 0;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .fh-chips ul::-webkit-scrollbar { display: none; }

    .fh-chips a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 16px;
        border-radius: 999px 999px 999px 4px;
        background: #fff;
        color: var(--ink);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .fh-chips a:hover { background: var(--crema-2); color: var(--ink); }
    .fh-chips a[aria-current="page"], .fh-chips a[aria-current="true"] { background: var(--ink); color: #fff; }

    .fh-chips__fade {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 12px;
        background: linear-gradient(90deg, rgba(246, 248, 238, 0), var(--crema) 62%);
        pointer-events: none;
        color: var(--ink);
    }

    .fh-chips__fade svg.i { transform: rotate(-90deg); animation: fh-empuja 1.6s ease-in-out infinite; }
}

@media (max-width: 760px) {
    .fh-topbar { font-size: 13.5px; }
    .fh-topbar__in { min-height: 44px; gap: 10px; }
    .fh-topbar__info li:not(.tb-wa) { display: none !important; }
    .fh-portal .lng { display: none; }
    .fh-hola, .fh-salir { display: none !important; }
    .fh-topbar--auth .tb-wa__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .fh-topbar__user { gap: 6px; }
    .fh-brand { display: flex; align-items: center; min-height: 48px; }
    .fh-brand img { width: 128px; }
    .fh-header__cta.fh-btn { min-height: 46px; padding: 10px 14px; font-size: 14px; gap: 8px; }
    .fh-burger { padding: 0 12px; }
    .fh-chips ul { padding-left: 0; scroll-padding-left: 18px; }
    .fh-sub--role { grid-template-columns: minmax(0, 1fr); width: calc(100vw - 32px); right: -5px; }
    .fh-sub__col + .fh-sub__col { border-left: 0; padding-left: 0; border-top: 2px dashed var(--linea); padding-top: 6px; }
}

@media (max-width: 400px) {
    /* Texto «Menú»/«Cerrar» y la palabra «WhatsApp» ocultos solo a la vista: siguen dando el nombre accesible */
    .fh-burger__t,
    .fh-topbar .tb-wa__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .fh-burger { padding: 0; justify-content: center; }
    .fh-brand img { width: 118px; }
}

@media (max-width: 340px) {
    .fh-header__in { gap: 6px; }
    .fh-brand img { width: 108px; }
    .fh-header__cta.fh-btn { padding: 10px; gap: 6px; }
}

@keyframes fh-empuja { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ===================================================================================== 4. FOOTER */
.fh-footer {
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    background: var(--ink);
    color: #D5E3CF;
    padding: 84px 0 0;
    font-size: 14.5px;
}

.fh-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .85fr)) minmax(0, 1.35fr);
    gap: 40px;
}

.fh-footer__brand img { width: 200px; height: auto; margin-bottom: 18px; }
.fh-footer__brand p { font-size: 15px; line-height: 1.6; margin: 0 0 14px; color: #E8F1E2; }
.fh-footer__brand p b { color: #fff; }
.fh-footer__addr { display: flex; align-items: flex-start; gap: 10px; }
.fh-footer__addr svg.i { margin-top: 4px; color: var(--lima); }

/* Fila de contacto a todo el ancho, debajo de las columnas */
.fh-footer__contact {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    gap: 2px 26px;
}

.fh-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
    color: #E8F1E2;
}

.fh-footer__contact li > svg.i { margin-top: 13px; color: var(--lima); }
.fh-footer__contact li > span { padding: 10px 0; }
.fh-footer__contact li > a { display: inline-flex; align-items: center; min-height: 44px; }
.fh-footer__contact a { color: #fff; text-decoration: none; }
.fh-footer__contact a:hover { color: #fff; text-decoration: underline; }
.fh-footer__pbx a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.fh-footer__contact li.fh-footer__pbx > span { padding: 0 0 10px; }
.fh-footer__pbx b { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }

.fh-footer__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fh-footer__opts span {
    background: var(--bosque);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px 999px 999px 4px;
}

.fh-footer h2 {
    font-family: var(--body);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lima);
    margin: 6px 0 14px;
    font-weight: 700;
}

.fh-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.fh-footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #E8F1E2;
    text-decoration: none;
    line-height: 1.3;
}

.fh-footer__col a:hover { color: #fff; text-decoration: underline; }

.fh-footer__pay {
    background: var(--bosque);
    border-radius: var(--r-md);
    padding: 22px 22px 20px;
    align-self: start;
}

.fh-footer__pay h2 { margin-top: 0; }
.fh-footer__pay p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #E8F1E2; }
.fh-footer__pay p:last-child { margin-bottom: 0; }
.fh-footer__pay p a { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }

.fh-footer__banks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fh-footer__banks li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
    background: rgba(255, 255, 255, .08);
    border-radius: 16px 16px 16px 4px;
    padding: 8px 8px 8px 8px;
}

.fh-footer__bank {
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 999px 999px 999px 4px;
}

.fh-footer__acct {
    font-family: var(--display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .01em;
    color: #fff;
    padding-right: 6px;
    white-space: nowrap;
}

/* Nuestro equipo (plegable) */
.fh-team {
    margin-top: 28px;
    border-top: 1px solid #2A4A38;
    border-bottom: 1px solid #2A4A38;
}

.fh-team > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    cursor: pointer;
    list-style: none;
    color: #fff;
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
}

.fh-team > summary::-webkit-details-marker { display: none; }
.fh-team > summary .fh-caret { margin-left: auto; transition: transform .2s; color: var(--lima); }
.fh-team[open] > summary .fh-caret { transform: rotate(180deg); }

.fh-team__ico {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--petalo);
    background: var(--lima);
    color: var(--ink);
}

.fh-team__ico svg.i { width: 18px; height: 18px; }

.fh-team__list {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px 26px;
}

.fh-team__list li { display: grid; gap: 1px; align-content: start; padding-left: 20px; position: relative; line-height: 1.35; }
.fh-team__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: var(--petalo); background: var(--medio); }
.fh-team__list strong { color: #fff; font-weight: 600; }
.fh-team__list span { font-size: 13.5px; color: #C9DDC1; }
.fh-team__note { margin: 6px 0 18px; font-size: 14px; color: #E8F1E2; }
.fh-team__note a { color: #fff; text-decoration: underline; display: inline-flex; min-height: 44px; align-items: center; }

/* Palabra gigante FedeHaceb */
.fh-footer__word {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12em;
    margin: 56px 0 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: 14vw;
    font-size: 14.2cqi;
    line-height: .8;
    letter-spacing: -.04em;
    white-space: nowrap;
    user-select: none;
}

.fh-footer__word .fe { color: #245638; }
.fh-footer__word .hb { color: var(--lima); }

.fh-footer__clover { position: relative; display: block; width: .66em; height: .66em; flex: none; margin-bottom: .06em; }
.fh-footer__clover i { position: absolute; width: 47%; height: 47%; display: block; }
.fh-footer__clover .p1 { right: 0; top: 0; background: var(--lima); border-radius: 50% 50% 50% 0; }
.fh-footer__clover .p2 { right: 0; bottom: 0; background: var(--medio); border-radius: 0 50% 50% 50%; }
.fh-footer__clover .p3 { left: 0; bottom: 0; background: var(--verde); border-radius: 50% 0 50% 50%; }
.fh-footer__clover .p0 { left: 0; top: 0; border: .022em dashed var(--lima); border-radius: 50% 50% 0 50%; animation: fh-late 2.6s ease-in-out 3; }

.fh-footer__bottom {
    border-top: 1px solid #2A4A38;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px 20px;
    flex-wrap: wrap;
    padding: 14px 0 18px;
    margin-top: 28px;
    font-size: 13px;
    color: #BFD3B8;
}

.fh-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.fh-footer__social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--petalo);
    background: var(--bosque);
    color: #fff;
    transition: background-color .2s, color .2s, transform .25s;
}

.fh-footer__social a:hover { background: var(--lima); color: var(--ink); transform: translateY(-2px); }

.fh-footer__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; }

.fh-footer__legal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.fh-footer__legal:hover { color: #fff; text-decoration: underline; }
.fh-footer__legal svg.i { color: var(--lima); }

.fh-pausa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px 0 12px;
    border: 2px solid #3B6049;
    border-radius: 999px 999px 999px 4px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.fh-pausa:hover { border-color: var(--lima); }
.fh-pausa .pz { display: inline-flex; gap: 3px; }
.fh-pausa .pz i { display: block; width: 4px; height: 13px; border-radius: 2px; background: var(--lima); }
.fh-pausa .pl { display: none; width: 0; height: 0; border-left: 11px solid var(--lima); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.fh-pausa .t-on { display: none; }
#fh-pausa:checked + .fh-pausa { background: #1B3A28; border-color: var(--lima); }
#fh-pausa:checked + .fh-pausa .pz,
#fh-pausa:checked + .fh-pausa .t-off { display: none; }
#fh-pausa:checked + .fh-pausa .pl { display: block; }
#fh-pausa:checked + .fh-pausa .t-on { display: inline; }
#fh-pausa:focus-visible + .fh-pausa { outline: 3px solid var(--lima); outline-offset: 3px; }

body:has(#fh-pausa:checked) *,
body:has(#fh-pausa:checked) *::before,
body:has(#fh-pausa:checked) *::after { animation-play-state: paused !important; }

@media (max-width: 1140px) {
    .fh-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fh-footer__brand, .fh-footer__pay { grid-column: 1 / -1; }
    .fh-footer__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; column-gap: 26px; }
}

@media (max-width: 760px) {
    .fh-footer { padding-top: 56px; }
    .fh-footer__top { grid-template-columns: 1fr 1fr; gap: 26px; }
    .fh-footer__col--trans { grid-column: 1 / -1; }
    .fh-footer__col--trans ul { grid-template-columns: 1fr 1fr; column-gap: 26px; }
    .fh-footer__col a { font-size: 14px; }
    .fh-footer__contact { grid-template-columns: minmax(0, 1fr); }
    .fh-footer__word { margin-top: 40px; }
    .fh-footer__bottom { flex-direction: column; align-items: flex-start; }
    .fh-team__list { grid-template-columns: 1fr; }
}

/* ===================================================================================== 5. FLOTANTES */
.fh-float {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 1025;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.fh-float > * { pointer-events: auto; }

.fh-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    background: var(--medio);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--r-pill-r);
    box-shadow: 0 16px 34px -12px rgba(15, 42, 28, .55);
    transition: transform .25s;
}

.fh-wa:hover { transform: translateY(-3px); color: var(--ink); text-decoration: none; }
.fh-wa i { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.fh-wa svg.i { width: 24px; height: 24px; }
.fh-wa .lbl { display: none; }
.fh-wa:hover .lbl,
.fh-wa:focus-visible .lbl { display: inline; padding-right: 14px; }

.fh-totop {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-right: 5px;
    border-radius: var(--petalo-br);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 12px 26px -12px rgba(15, 42, 28, .55), 0 0 0 2px var(--linea);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s, background-color .2s;
}

.fh-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.fh-totop:hover { background: var(--lima); color: var(--ink); }

/* Con el footer en pantalla los flotantes se ocultan (fedehaceb.js): no tapan «Volver arriba» ni otros enlaces del pie */
.fh-wa { transition: transform .25s, opacity .25s, visibility .25s; }
.fh-float.is-off .fh-wa,
.fh-float.is-off .fh-totop { opacity: 0; visibility: hidden; transform: translateY(8px); }

@media (max-width: 760px) {
    .fh-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ===================================================================================== 6. PÁGINA */
.fh-main { display: block; outline: none; }
main.fh-main:focus,
main.fh-main:focus-visible { outline: none; } /* destino del enlace "Saltar al contenido" */

.fh-page {
    padding-top: 24px;
    padding-bottom: 72px;
    min-height: 40vh;
}

/* Las vistas antiguas traen su propio .container: dentro de .fh-page se alinea al ancho del sitio */
.fh-page .container,
.fh-page .container-fluid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* <flash> (Vereyon) se pinta como un elemento <flash> con las .alert dentro; vacío no ocupa espacio */
flash { display: block; }
.fh-flash .alert { margin-bottom: 20px; }
.fh-main--full .fh-flash .alert { margin-top: 16px; }

.fh-section { padding: 56px 0; }
.fh-section--tight { padding: 24px 0; }
.fh-section--white { background: #fff; border-radius: 64px 64px 64px 0; padding-left: 48px; padding-right: 48px; }

.fh-stack > * + * { margin-top: 20px; }

.fh-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 260px)), 1fr));
}

.fh-grid--2 { --min: 380px; }
.fh-grid--3 { --min: 280px; }
.fh-grid--4 { --min: 220px; }

.fh-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 28px;
    align-items: start;
}

@media (max-width: 980px) {
    .fh-split { grid-template-columns: minmax(0, 1fr); }
    .fh-section--white { padding-left: 22px; padding-right: 22px; border-radius: 40px 40px 40px 0; }
}

@media (max-width: 760px) {
    .fh-page { padding-top: 16px; padding-bottom: 56px; }
    .fh-section { padding: 40px 0; }
}

/* ===================================================================================== 7. COMPONENTES */

/* --- 7.1 Page hero (_PageHero.cshtml) --- */
.fh-hero {
    --a: var(--verde-d);
    --a-s: var(--verde-s);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #fff;
    border-radius: var(--r-xl);
    padding: 40px 48px 44px;
    margin: 0 0 32px;
}

.fh-hero--lima { --a: var(--lima); --a-s: var(--lima-s); }
.fh-hero--menta { --a: var(--menta); --a-s: var(--menta-s); }
.fh-hero--azul { --a: var(--azul); --a-s: var(--azul-s); }
.fh-hero--rosa { --a: var(--rosa); --a-s: var(--rosa-s); }
.fh-hero--naranja { --a: var(--naranja); --a-s: var(--naranja-s); }

.fh-hero::before {
    content: "";
    position: absolute;
    right: -100px;
    top: -120px;
    width: 460px;
    aspect-ratio: 1 / 1;
    background: var(--a-s);
    border-radius: var(--petalo);
    z-index: -1;
}

.fh-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.fh-hero__copy { min-width: 0; }

.fh-hero .fh-kicker { --kc: var(--a); margin-top: 18px; }

.fh-hero__title {
    margin: 10px 0 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.2vw, 3.8rem);
    line-height: .98;
    letter-spacing: -.03em;
    color: var(--ink);
    text-wrap: balance;
}

.fh-hero__sub {
    position: relative;
    max-width: 620px;
    margin: 20px 0 0;
    padding-top: 20px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: pretty;
}

.fh-hero__sub::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--verde) 0 33%, var(--medio) 33% 66%, var(--lima) 66%);
}

.fh-hero__art {
    position: relative;
    width: 170px;
    aspect-ratio: 1 / 1;
    margin-right: 12px;
}

.fh-hero__p { position: absolute; width: 47%; aspect-ratio: 1 / 1; display: block; }
.fh-hero__p--tr { right: 0; top: 0; background: var(--a); border-radius: 50% 50% 50% 0; animation: fh-brota .9s cubic-bezier(.2, .9, .25, 1.15) both .1s; transform-origin: 0 100%; }
.fh-hero__p--br { right: 0; bottom: 0; background: var(--medio); border-radius: 0 50% 50% 50%; animation: fh-brota .9s cubic-bezier(.2, .9, .25, 1.15) both .25s; transform-origin: 0 0; }
.fh-hero__p--bl { left: 0; bottom: 0; background: var(--verde); border-radius: 50% 0 50% 50%; animation: fh-brota .9s cubic-bezier(.2, .9, .25, 1.15) both .4s; transform-origin: 100% 0; }
.fh-hero__p--ghost { left: 0; top: 0; border: 4px dashed var(--ink); border-radius: 50% 50% 0 50%; opacity: .35; }
.fh-hero--lima .fh-hero__p--br { background: var(--verde-d); }

.fh-hero__media {
    position: relative;
    width: 270px;
    aspect-ratio: 1 / 1;
    margin: 0 10px 0 0;
    border-radius: 50% 50% 50% 0;
    overflow: hidden;
    box-shadow: 0 0 0 5px #fff, 0 0 0 11px var(--a), var(--sh-3);
}

.fh-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.fh-hero__fp { position: absolute; display: block; aspect-ratio: 1 / 1; z-index: -1; animation: fh-flota 7s ease-in-out 4; }
.fh-hero__fp--a { right: 30%; top: 18px; width: 22px; background: var(--rosa); border-radius: 50% 50% 50% 0; --r: -12deg; }
.fh-hero__fp--b { right: 4%; bottom: 22px; width: 18px; background: var(--azul); border-radius: 0 50% 50% 50%; --r: 8deg; animation-duration: 9s; animation-delay: -2s; }

/* Migas de pan */
.fh-crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    font-size: 14px;
    color: var(--muted);
}

.fh-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.fh-crumbs li + li::before { content: "›"; color: var(--muted); font-weight: 700; padding: 0 4px; }
.fh-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: from-font; }
.fh-crumbs [aria-current="page"] { color: var(--muted); }

@media (max-width: 980px) {
    .fh-hero__in { grid-template-columns: minmax(0, 1fr); }
    .fh-hero__art { display: none; }
    .fh-hero__media { width: 200px; justify-self: start; margin-top: 8px; }
}

@media (max-width: 760px) {
    .fh-hero { padding: 26px 22px 30px; border-radius: 36px 36px 36px 6px; margin-bottom: 24px; }
    .fh-hero::before { width: 200px; right: -60px; top: -60px; }
    .fh-hero__sub { font-size: 16px; }
    /* en celular la gota sube junto a las migas: se pasa a la esquina inferior para no montarse sobre el texto */
    .fh-hero__fp--a { right: 14%; top: auto; bottom: 14px; }
}

/* Páginas con formulario al pie (Login): en celular el WhatsApp flotante tapaba el botón "ver contraseña".
   La página ya ofrece el WhatsApp en su columna de ayuda. */
@media (max-width: 760px) {
    .fh-no-wa .fh-wa { display: none; }
}

@keyframes fh-brota { from { transform: scale(.55) rotate(-8deg); } to { transform: none; } }
@keyframes fh-flota { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(calc(var(--r, 0deg) + 8deg)); } }
@keyframes fh-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes fh-gira { to { transform: rotate(360deg); } }

/* --- 7.2 Encabezados de sección --- */
.fh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: var(--body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--verde-d);
}

.fh-kicker::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    background: var(--kc, var(--lima));
    border-radius: var(--petalo);
}

.fh-h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.fh-h3 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.1;
    letter-spacing: -.02em;
}

.fh-sub { font-size: 17px; color: var(--muted); max-width: 620px; margin: 14px 0 0; text-wrap: pretty; }

.fh-section__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-bottom: 28px;
}

.fh-section__head--center { flex-direction: column; align-items: center; text-align: center; }
.fh-section__head--center .fh-sub { margin-left: auto; margin-right: auto; }

.fh-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-top: 6px;
    border-bottom: 2px solid currentColor;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.fh-link-arrow:hover { color: var(--verde-d); text-decoration: none; }
.fh-link-arrow svg.i { transition: transform .25s; }
.fh-link-arrow:hover svg.i { transform: translateX(4px); }

/* --- 7.3 Tarjetas --- */
.fh-card {
    position: relative;
    background: #fff;
    color: var(--ink);
    border-radius: var(--r-md);
    padding: 28px;
    box-shadow: var(--sh-1);
}

.fh-card--flat { box-shadow: none; border: 2px solid var(--linea); }
.fh-card--crema { background: var(--crema-2); box-shadow: none; }
.fh-card--dark { background: var(--bosque); color: #fff; box-shadow: none; }
.fh-card--dark a:not(.fh-btn) { color: #fff; }
.fh-card--lg { padding: 40px; border-radius: var(--r-lg); }

.fh-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: -4px 0 20px;
    padding-bottom: 16px;
    border-bottom: 2px dashed var(--linea);
}

.fh-card__title {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.fh-card__ico {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: none;
    margin-bottom: 16px;
    border-radius: var(--petalo);
    background: var(--c, var(--lima));
    color: var(--ink);
}

.fh-card__ico svg.i { width: 26px; height: 26px; }
.fh-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }

/* Tarjeta pétalo: color de línea de fondo y una esquina en punta (como las baldosas del mockup) */
.fh-card--petal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--c, var(--lima));
    color: var(--ink);
    border-radius: 40px 40px 40px 8px;
    padding: 30px;
    box-shadow: var(--sh-3);
    text-decoration: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.fh-card--petal.pt-br { border-radius: 40px 40px 8px 40px; }
.fh-card--petal.pt-tr { border-radius: 40px 8px 40px 40px; }
.fh-card--petal.pt-tl { border-radius: 8px 40px 40px 40px; }
.fh-card--petal .fh-card__ico { background: #fff; }
.fh-card--petal p { color: var(--ink); }
.fh-card--petal.c-verde { color: #fff; }
.fh-card--petal.c-verde .fh-card__ico { color: var(--ink); }
.fh-card--petal.c-verde p { color: #fff; }

a.fh-card,
a.fh-card--petal { color: var(--ink); text-decoration: none; }

a.fh-card:hover,
a.fh-card--petal:hover { transform: translateY(-6px); text-decoration: none; color: var(--ink); }

.fh-card__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 0 18px;
    min-height: 46px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
}

.fh-card--petal .fh-card__go { margin-top: 18px; }
a.fh-card--petal:hover .fh-card__go svg.i { transform: translateX(4px); }
.fh-card__go svg.i { transition: transform .25s; }

/* Dato destacado */
.fh-stat { display: flex; flex-direction: column; gap: 2px; }
.fh-stat b { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: .95; letter-spacing: -.04em; }
.fh-stat span { font-size: 14px; font-weight: 600; }

/* --- 7.4 Botones --- */
.fh-btn {
    --b: var(--ink);
    --bt: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    background: var(--b);
    color: var(--bt);
    font: 600 15px/1.2 var(--body);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.fh-btn:hover { transform: translateY(-2px); color: var(--bt); text-decoration: none; filter: brightness(.96); }
.fh-btn:active { transform: none; }
.fh-btn .arr { transition: transform .25s ease; }
.fh-btn:hover .arr { transform: translateX(4px); }
.fh-btn[disabled], .fh-btn.disabled { opacity: .55; pointer-events: none; transform: none; }

.fh-btn--ink { --b: var(--ink); --bt: #fff; }
.fh-btn--ink:hover { --b: var(--bosque); filter: none; }
.fh-btn--verde { --b: var(--verde-d); --bt: #fff; }
.fh-btn--verde:hover { --b: var(--bosque); filter: none; }
.fh-btn--lima { --b: var(--lima); --bt: var(--ink); }
.fh-btn--lima:hover { --b: var(--lima-2); filter: none; }
.fh-btn--menta, .fh-btn--auxilios { --b: var(--menta); --bt: var(--ink); }
.fh-btn--azul, .fh-btn--ahorro { --b: var(--azul); --bt: var(--ink); }
.fh-btn--rosa, .fh-btn--credito { --b: var(--rosa); --bt: var(--ink); }
.fh-btn--naranja, .fh-btn--actividades { --b: var(--naranja); --bt: var(--ink); }
.fh-btn--mango { --b: var(--mango); --bt: var(--ink); }
.fh-btn--peligro { --b: var(--rojo); --bt: #fff; }
.fh-btn--blanco { --b: #fff; --bt: var(--ink); border-color: var(--linea); }
.fh-btn--blanco:hover { border-color: var(--ink); filter: none; }
.fh-btn--linea { --b: transparent; --bt: var(--ink); border-color: var(--ink); }
.fh-btn--linea:hover { --b: var(--ink); --bt: #fff; filter: none; }
.fh-btn--linea-w { --b: transparent; --bt: #fff; border-color: #fff; }
.fh-btn--linea-w:hover { --b: #fff; --bt: var(--ink); filter: none; }
.fh-btn--link { --b: transparent; --bt: var(--verde-d); padding-left: 6px; padding-right: 6px; text-decoration: underline; text-underline-offset: .2em; }

.fh-btn--lg { min-height: 58px; padding: 16px 28px; font-size: 16px; }
.fh-btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; gap: 8px; }
.fh-btn--block { display: flex; width: 100%; }
.fh-btn--icon { width: 44px; min-height: 44px; padding: 0; }
.fh-btn--icon.fh-btn--sm { width: 40px; min-height: 40px; }

@media (pointer: coarse) {
    .fh-btn--sm, .fh-btn--icon.fh-btn--sm { min-height: 44px; }
    .fh-btn--icon.fh-btn--sm { width: 44px; }
}

.fh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fh-actions--center { justify-content: center; }
.fh-actions--end { justify-content: flex-end; }

@media (max-width: 760px) {
    .fh-actions--stack { flex-direction: column; align-items: stretch; }
    .fh-actions--stack .fh-btn { width: 100%; white-space: normal; }
}

/* --- 7.5 Chips, etiquetas y estados --- */
.fh-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid var(--linea);
    border-radius: 999px 999px 999px 4px;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.fh-chip::before { content: ""; width: 11px; height: 11px; border-radius: var(--petalo); background: var(--c, var(--lima)); }
.fh-chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.fh-chip[aria-pressed="true"],
.fh-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.fh-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px 999px 999px 4px;
    background: var(--lima);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Estados de negocio: .fh-status + modificador. El texto del estado siempre visible (no solo color). */
.fh-status {
    --s: var(--crema-2);
    --st: var(--ink);
    --sd: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 9px;
    border-radius: 999px 999px 999px 4px;
    background: var(--s);
    color: var(--st);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    vertical-align: middle;
}

.fh-status::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: var(--petalo); background: var(--sd); }

.fh-status--nueva { --s: var(--azul-s); --sd: var(--azul-t); }
.fh-status--revision { --s: var(--morado-s); --sd: var(--morado); }
.fh-status--pendiente { --s: var(--mango-s); --sd: var(--mango-t); }
.fh-status--aprobada { --s: var(--verde-s); --sd: var(--verde-d); }
.fh-status--finalizada { --s: var(--menta-s); --sd: var(--menta-t); }
.fh-status--rechazada { --s: var(--rosa-s); --st: var(--rojo); --sd: var(--rojo); }
.fh-status--inactiva { --s: #E7EAE3; --st: var(--ink-2); --sd: var(--muted); }

/* --- 7.6 Listas de enlaces --- */
.fh-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.fh-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 6px 6px 6px 18px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--linea);
    transition: transform .25s, box-shadow .25s;
}

.fh-links a:hover { transform: translateX(5px); box-shadow: 0 0 0 2px var(--ink); color: var(--ink); text-decoration: none; }

.fh-links .ar {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
}

.fh-links .ar svg.i { width: 18px; height: 18px; }

.fh-links small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }

/* Lista numerada tipo "beneficios" */
.fh-numlist { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.fh-numlist li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 2px solid rgba(15, 42, 28, .18); font-weight: 600; font-size: 15px; line-height: 1.3; }
.fh-numlist li::before { counter-increment: n; content: counter(n, decimal-leading-zero); font-family: var(--display); font-weight: 800; font-size: 14px; min-width: 22px; }

/* Lista con marcas de verificación */
.fh-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fh-checks li { position: relative; padding-left: 34px; font-weight: 500; }
.fh-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* --- 7.7 Pasos --- */
.fh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.fh-step {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px;
    background: #fff;
    border-radius: var(--r-md);
}

.fh-step__n {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: var(--petalo);
    background: var(--c, var(--lima));
    font-family: var(--display);
    font-weight: 800;
    font-size: 26px;
}

.fh-step h3 { margin: 0 0 2px; font-size: 19px; letter-spacing: -.015em; line-height: 1.15; }
.fh-step p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.fh-step.is-done .fh-step__n { background: var(--verde-d); color: #fff; }
.fh-step.is-current { box-shadow: 0 0 0 3px var(--ink); }

/* Pasos horizontales (asistentes de varios pasos) */
.fh-progress { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 8px; counter-reset: p; }
.fh-progress li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px 8px 8px;
    border-radius: var(--r-pill);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.fh-progress li::before {
    counter-increment: p;
    content: counter(p);
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--petalo);
    background: var(--crema-2);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 800;
}

.fh-progress li.is-done { color: var(--ink); }
.fh-progress li.is-done::before { content: "✓"; background: var(--verde-d); color: #fff; }
.fh-progress li[aria-current="step"] { background: var(--ink); color: #fff; }
.fh-progress li[aria-current="step"]::before { background: var(--lima); color: var(--ink); }

@media (max-width: 760px) {
    .fh-step { grid-template-columns: 52px minmax(0, 1fr); }
    .fh-step__n { width: 52px; height: 52px; font-size: 22px; }
    .fh-step > :last-child:not(div) { grid-column: 1 / -1; }
    .fh-progress { flex-direction: column; }
}

/* --- 7.8 Avisos (componente propio; las .alert de Bootstrap se re-estilan en la sección 8) --- */
.fh-notice {
    --n: var(--azul);
    --ns: var(--azul-s);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    margin: 0 0 20px;
    border-radius: var(--r-sub);
    background: var(--ns);
    color: var(--ink);
    font-weight: 500;
}

.fh-notice__ico {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--petalo);
    background: var(--n);
    color: var(--ink);
}

.fh-notice__ico svg.i { width: 18px; height: 18px; }
.fh-notice__title { display: block; margin: 0 0 2px; font-family: var(--display); font-weight: 800; font-size: 17px; }
.fh-notice p { margin: 0; }
.fh-notice--ok { --n: var(--medio); --ns: var(--verde-s); }
.fh-notice--aviso { --n: var(--mango); --ns: var(--mango-s); }
.fh-notice--error { --n: var(--rosa); --ns: var(--rojo-s); }
.fh-notice--error .fh-notice__title { color: var(--rojo); }
.fh-notice--dark { --n: var(--lima); --ns: var(--bosque); color: #fff; }

/* --- 7.9 Estado vacío --- */
.fh-empty { text-align: center; padding: 48px 28px; }
.fh-empty__ico {
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: var(--petalo);
    background: var(--lima-s);
    color: var(--verde-d);
}

.fh-empty__ico--rosa { background: var(--rosa-s); color: var(--rojo); }
.fh-empty__title { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; }
.fh-empty__text { max-width: 520px; margin: 0 auto 14px; color: var(--muted); }
.fh-empty .fh-actions { margin-top: 22px; }

/* --- 7.10 Tabla de datos --- */
.fh-table-wrap {
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    padding: 8px;
    overflow-x: auto;
}

.fh-table-wrap > .table,
.fh-table-wrap .dataTables_wrapper { margin: 0; }

.fh-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14.5px;
    color: var(--ink);
}

.fh-table th,
.fh-table td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--linea); }
.fh-table thead th {
    background: var(--crema-2);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-bottom: 0;
    white-space: nowrap;
}

.fh-table thead th:first-child { border-radius: 18px 0 0 4px; }
.fh-table thead th:last-child { border-radius: 0 18px 0 0; }
.fh-table tbody tr:hover { background: var(--crema); }
.fh-table tbody tr:last-child td { border-bottom: 0; }
.fh-table .fh-num { text-align: right; font-variant-numeric: tabular-nums; }
.fh-table .fh-actions-cell { white-space: nowrap; text-align: right; }

/* --- 7.11 Barra de filtros --- */
.fh-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 14px 16px;
    align-items: end;
    padding: 20px;
    margin: 0 0 20px;
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
}

.fh-filters .fh-field { margin: 0; }
.fh-filters__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- 7.12 Formulario --- */
.fh-form { display: grid; gap: 4px; }
.fh-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 20px; }

.fh-field { display: grid; gap: 6px; margin-bottom: 16px; }
.fh-field > label,
.fh-label { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.fh-req { color: var(--rojo); font-weight: 700; }
.fh-help { font-size: 13px; color: var(--muted); line-height: 1.45; }

.fh-input,
.fh-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.fh-field select,
.fh-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    font: 400 15px/1.4 var(--body);
    color: var(--ink);
    background-color: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--r-sm);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.fh-field select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
}

.fh-field textarea { min-height: 120px; resize: vertical; }
.fh-input:focus,
.fh-field input:focus,
.fh-field select:focus,
.fh-field textarea:focus { border-color: var(--verde-d); box-shadow: 0 0 0 3px rgba(0, 122, 51, .22); outline: none; }

.fh-field .field-validation-error,
.fh-error { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--rojo); }

.fh-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; margin: 6px 0 16px; }
.fh-check input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--verde-d); }

.fh-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 2px dashed var(--borde);
    border-radius: var(--r-sm);
    background: var(--crema);
}

/* --- 7.13 Modal (sobre el modal de Bootstrap 4) --- */
.fh-modal__ico {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: none;
    margin-right: 12px;
    border-radius: var(--petalo);
    background: var(--lima);
    color: var(--ink);
    vertical-align: middle;
}

.fh-modal__ico--danger { background: var(--rosa-s); color: var(--rojo); }
.fh-modal__ico svg.i { width: 20px; height: 20px; }

/* --- 7.14 Paginación propia --- */
.fh-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 16px 0 0; padding: 0; }
.fh-pager a,
.fh-pager span {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px 999px 999px 6px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--linea);
}

.fh-pager a:hover { box-shadow: 0 0 0 2px var(--ink); text-decoration: none; color: var(--ink); }
.fh-pager [aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }

/* ===================================================================================== 8. RE-ESTILO DE BOOTSTRAP 4 */

/* --- Texto y fondos de utilidad (el tema tenía los colores cruzados: danger azul, info rosado…) --- */
.text-primary { color: var(--verde-d) !important; }
.text-success { color: var(--verde-t) !important; }
.text-info { color: var(--azul-t) !important; }
.text-warning { color: var(--mango-t) !important; }
.text-danger { color: var(--rojo) !important; }
.text-purple { color: var(--morado) !important; }
.text-pink { color: var(--rosa-t) !important; }
.text-dark, .text-black { color: var(--ink) !important; }
.text-muted, .text-secondary { color: var(--muted) !important; }
a.text-primary:hover, a.text-success:hover { color: var(--bosque) !important; }
a.text-danger:hover { color: #8E1726 !important; }

/* Títulos que el tema pintaba con .text-danger (era su "color de título"): ahora tinta */
h1.text-danger, h2.text-danger, h3.text-danger, h4.text-danger, h5.text-danger, h6.text-danger,
.section-title .text-danger { color: var(--ink) !important; }

.bg-primary { background-color: var(--verde-d) !important; }
.bg-success { background-color: var(--lima) !important; }
.bg-info { background-color: var(--azul) !important; }
.bg-warning { background-color: var(--mango) !important; }
.bg-danger { background-color: var(--rosa) !important; }
.bg-purple { background-color: #AC58E0 !important; }
.bg-pink { background-color: var(--rosa) !important; }
.bg-dark { background-color: var(--ink) !important; }
.bg-light { background-color: var(--crema) !important; }
.bg-secondary { background-color: var(--crema-2) !important; }
.bg-white { background-color: #fff !important; }

.border-success { border-color: var(--lima) !important; }
.border-info { border-color: var(--azul) !important; }
.border-danger { border-color: var(--rosa) !important; }
.border-warning { border-color: var(--mango) !important; }
.border-primary { border-color: var(--verde-d) !important; }

.lead { font-size: 1.15rem; font-weight: 400; color: var(--ink-2); }
.font-weight-bold { font-weight: 700 !important; }

/* --- Botones --- */
.btn {
    --b: #fff;
    --bt: var(--ink);
    --bb: var(--linea);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 20px;
    border: 2px solid var(--bb);
    border-radius: var(--r-pill);
    background-color: var(--b);
    color: var(--bt);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
}

.btn:not(.fa) { font-family: var(--body); }
.btn.fa { font-family: FontAwesome; font-weight: normal; font-size: 16px; }
.btn.fa::before { font-family: FontAwesome; }

.btn:hover { color: var(--bt); text-decoration: none; transform: translateY(-1px); filter: brightness(.95); }
.btn:active { transform: none; }
.btn:focus,
.btn.focus { box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: none; }
.btn.disabled, .btn:disabled { opacity: .55; transform: none; filter: none; }
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active { box-shadow: none; background-color: var(--b); color: var(--bt); border-color: var(--bb); filter: brightness(.9); }

.btn-primary { --b: var(--verde-d); --bt: #fff; --bb: var(--verde-d); }
.btn-secondary, .btn-default, .btn-light { --b: #fff; --bt: var(--ink); --bb: var(--linea); }
.btn-secondary:hover, .btn-default:hover, .btn-light:hover { --bb: var(--ink); filter: none; }
.btn-success { --b: var(--lima-hoy); --bt: var(--ink); --bb: var(--lima-hoy); }
.btn-info { --b: var(--azul); --bt: var(--ink); --bb: var(--azul); }
.btn-warning { --b: var(--mango); --bt: var(--ink); --bb: var(--mango); }
.btn-danger { --b: var(--rojo); --bt: #fff; --bb: var(--rojo); }
.btn-dark { --b: var(--ink); --bt: #fff; --bb: var(--ink); }
.btn-dark:hover { --b: var(--bosque); --bb: var(--bosque); filter: none; }
.btn-purple { --b: var(--morado); --bt: #fff; --bb: var(--morado); }
.btn-pink { --b: var(--rosa); --bt: var(--ink); --bb: var(--rosa); }
.btn-link { --b: transparent; --bt: var(--verde-d); --bb: transparent; text-decoration: underline; text-underline-offset: .2em; }
.btn-link:hover { text-decoration: underline; }

.btn-outline-primary { --b: transparent; --bt: var(--verde-d); --bb: var(--verde-d); }
.btn-outline-secondary, .btn-outline-dark { --b: transparent; --bt: var(--ink); --bb: var(--ink); }
.btn-outline-success { --b: transparent; --bt: var(--verde-t); --bb: var(--lima-hoy); }
.btn-outline-info { --b: transparent; --bt: var(--azul-t); --bb: var(--azul); }
.btn-outline-warning { --b: transparent; --bt: var(--mango-t); --bb: var(--mango); }
.btn-outline-danger { --b: transparent; --bt: var(--rojo); --bb: var(--rojo); }
[class*="btn-outline-"]:hover { --b: var(--ink); --bt: #fff; --bb: var(--ink); filter: none; }

.btn-lg, .btn-group-lg > .btn { min-height: 54px; padding: 13px 26px; font-size: 16px; }
.btn-sm, .btn-group-sm > .btn { min-height: 36px; padding: 6px 14px; font-size: 13.5px; gap: 6px; }
.btn-sm.fa { min-width: 36px; padding: 6px 10px; }
.btn-block { display: flex; width: 100%; }
.btn-group > .btn { border-radius: var(--r-pill); }
.btn-group { gap: 6px; flex-wrap: wrap; }
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) { margin-left: 0; }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:not(:first-child) { border-radius: var(--r-pill); }

@media (pointer: coarse) {
    .btn-sm, .btn-group-sm > .btn { min-height: 44px; }
    .btn-sm.fa { min-width: 44px; }
}

/* --- Formularios --- */
label { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.form-check-label, .custom-control-label { font-weight: 500; }
legend { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }

.form-control,
.custom-select {
    height: auto;
    min-height: 48px;
    padding: 10px 16px;
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    background-color: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--r-sm);
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}

.form-control::placeholder { color: #66796D; opacity: 1; }
.form-control:focus,
.custom-select:focus {
    color: var(--ink);
    background-color: #fff;
    border-color: var(--verde-d);
    box-shadow: 0 0 0 3px rgba(0, 122, 51, .22);
    outline: none;
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled { background-color: var(--crema-2); border-color: #A8B9A2; color: var(--ink-2); opacity: 1; }

textarea.form-control { min-height: 110px; }
select.form-control:not([size]):not([multiple]),
.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px 18px;
}

select.form-control:focus:not([size]):not([multiple]) { background-color: #fff; }
.form-control[type="file"] { padding: 9px 12px; }
.form-control-sm, .custom-select-sm { min-height: 40px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.form-control-lg, .custom-select-lg { min-height: 56px; font-size: 16px; }
.form-group { margin-bottom: 18px; }
.form-text, .form-group small.text-muted { font-size: 13px; color: var(--muted) !important; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.input-group-text { background: var(--crema-2); border: 2px solid var(--borde); border-radius: var(--r-sm); color: var(--ink); font-weight: 600; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--verde-d); }

.custom-control { min-height: 1.6rem; padding-left: 2rem; }
.custom-control-label::before,
.custom-control-label::after { top: .1rem; left: -2rem; width: 1.35rem; height: 1.35rem; }
.custom-control-label::before { border: 2px solid var(--borde); background-color: #fff; }
.custom-checkbox .custom-control-label::before { border-radius: 6px; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--verde-d); border-color: var(--verde-d); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(0, 122, 51, .25); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--verde-d); }
.custom-switch .custom-control-label::before { border-radius: 1rem; width: 2.4rem; left: -2.6rem; }
.custom-file-label { border: 2px solid var(--borde); border-radius: var(--r-sm); min-height: 48px; padding-top: 10px; }

/* Validación (ASP.NET unobtrusive): rojo accesible */
.field-validation-error,
.validation-summary-errors,
span.text-danger,
div.text-danger,
p.text-danger,
small.text-danger,
label.text-danger { color: var(--rojo) !important; font-size: 13.5px; font-weight: 600; }

.validation-summary-errors ul { margin: 6px 0 0; padding-left: 18px; }
.validation-summary-valid { display: none; }
.input-validation-error,
.form-control.input-validation-error { border-color: var(--rojo) !important; background-color: #FFF8F8; }
.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(180, 35, 53, .25) !important; }
.field-validation-error::before { content: "! "; font-weight: 800; }

/* --- Tablas --- */
.table { color: var(--ink); font-size: 14.5px; margin-bottom: 1rem; background-color: transparent; }
.table th,
.table td { padding: .6rem .75rem; vertical-align: middle; border-top: 1px solid var(--linea); }
.table thead th {
    vertical-align: bottom;
    background: var(--crema-2);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 0;
    border-top: 0;
}

.table thead th:first-child { border-top-left-radius: 16px; }
.table thead th:last-child { border-top-right-radius: 16px; }
.table-sm th, .table-sm td { padding: .4rem .5rem; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--linea); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(236, 243, 218, .55); }
.table-hover tbody tr:hover { background-color: var(--lima-s); color: var(--ink); }
.table-responsive { border-radius: 16px; }
.thead-dark th, .table .thead-dark th { background: var(--ink); color: #fff; }
.table-success, .table-success > td, .table-success > th { background-color: var(--verde-s); }
.table-danger, .table-danger > td, .table-danger > th { background-color: var(--rojo-s); }
.table-warning, .table-warning > td, .table-warning > th { background-color: var(--mango-s); }
.table-info, .table-info > td, .table-info > th { background-color: var(--azul-s); }

/* --- Tarjetas --- */
.card {
    border: 0;
    border-radius: var(--r-md);
    background-color: #fff;
    box-shadow: var(--sh-1);
}

.card > .list-group:first-child .list-group-item:first-child,
.card-header:first-child { border-radius: 28px 28px 0 0; }
.card-header { background: transparent; border-bottom: 2px dashed var(--linea); padding: 18px 24px; font-family: var(--display); font-weight: 700; }
.card-body { padding: 24px; }
.card-footer { background: transparent; border-top: 2px dashed var(--linea); padding: 16px 24px; }
.card-footer:last-child { border-radius: 0 0 28px 6px; }
.card-title { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.card-img-top { border-top-left-radius: 28px; border-top-right-radius: 28px; }

/* --- Modales --- */
.modal-backdrop { background-color: var(--ink); }
.modal-backdrop.show { opacity: .55; }
.modal-content { border: 0; border-radius: 32px 32px 32px 6px; box-shadow: 0 40px 80px -30px rgba(15, 42, 28, .6); }
.modal-header { align-items: center; border-bottom: 2px dashed var(--linea); padding: 18px 20px 16px 28px; }
.modal-title { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; }
.modal-header .close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -6px -6px -6px auto;
    padding: 0;
    border-radius: 50%;
    background: var(--crema-2);
    color: var(--ink);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
}

.modal-header .close:hover { background: var(--ink); color: #fff; opacity: 1; }
.modal-header.text-white .close,
.modal-header .close.text-white { color: var(--ink) !important; }
.modal-header.text-white .close:hover { color: #fff !important; }
.modal-body { padding: 24px 28px; }
.modal-footer { border-top: 0; padding: 4px 28px 26px; gap: 10px; }
.modal-footer > * { margin: 0; }
.modal-lg, .modal-xl { max-width: min(960px, calc(100vw - 24px)); }

@media (max-width: 575.98px) {
    .modal-dialog { margin: 12px; }
    .modal-body { padding: 20px; }
    .modal-header { padding: 16px 16px 14px 20px; }
    .modal-footer { padding: 4px 20px 20px; flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 auto; }
}

/* --- Alertas (incluida la salida de <flash>: div.alert.alert-info con botón .close) --- */
.alert {
    --n: var(--azul);
    --ns: var(--azul-s);
    position: relative;
    padding: 16px 20px 16px 62px;
    border: 0;
    border-radius: var(--r-sub);
    background-color: var(--ns);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.5;
    min-height: 60px;
}

.alert::before {
    content: "i";
    position: absolute;
    left: 16px;
    top: 13px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--petalo);
    background: var(--n);
    color: var(--ink);
    font-family: var(--display);
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
}

.alert-heading { font-family: var(--display); font-weight: 800; color: inherit; }
.alert a, .alert .alert-link { color: var(--ink); font-weight: 700; text-decoration: underline; }
.alert-info, .alert-primary { --n: var(--azul); --ns: var(--azul-s); color: var(--ink); }
.alert-light, .alert-secondary { --ns: #fff; padding-left: 20px; color: var(--ink); box-shadow: 0 0 0 2px var(--linea); }
.alert-secondary { --ns: var(--crema-2); box-shadow: none; }
.alert-light::before, .alert-secondary::before { display: none; }
.alert-success { --n: var(--medio); --ns: var(--verde-s); color: var(--ink); }
.alert-success::before { content: "✓"; }
.alert-warning { --n: var(--mango); --ns: var(--mango-s); color: var(--ink); }
.alert-warning::before { content: "!"; }
.alert-danger { --n: var(--rosa); --ns: var(--rojo-s); color: var(--ink); }
.alert-danger::before { content: "!"; }
.alert-dark { --n: var(--lima); --ns: var(--bosque); color: #fff; }
.alert-dark a { color: #fff; }
.alert-dismissible { padding-right: 64px; }
.alert-dismissible .close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    opacity: .85;
    text-shadow: none;
    font-size: 26px;
    font-weight: 400;
}

.alert-dismissible .close:hover { opacity: 1; background: rgba(255, 255, 255, .6); }
.alert-dark.alert-dismissible .close { color: #fff; }
.alert > :last-child { margin-bottom: 0; }

/* --- Badges (también los estados de las tablas: <h4><span class="badge badge-…">) --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .38em .85em;
    border-radius: 999px 999px 999px 4px;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .01em;
    white-space: nowrap;
    vertical-align: middle;
}

h1 > .badge, h2 > .badge, h3 > .badge, h4 > .badge, h5 > .badge, h6 > .badge { font-size: 12.5px; }
td > h4, td > h5, td > h3 { margin: 0; line-height: 1; }
.badge-primary { background: var(--verde-d); color: #fff; }
.badge-secondary, .badge-light { background: var(--crema-2); color: var(--ink); }
.badge-success { background: var(--medio); color: var(--ink); }
.badge-info { background: var(--azul); color: var(--ink); }
.badge-warning { background: var(--mango); color: var(--ink); }
.badge-danger { background: var(--rosa); color: var(--ink); }
.badge-dark { background: var(--ink); color: #fff; }
.badge-purple { background: var(--morado); color: #fff; }
.badge-pink { background: var(--rosa); color: var(--ink); }
.badge-pill { border-radius: 999px; }
a.badge:hover, a.badge:focus { filter: brightness(.95); text-decoration: none; }

/* --- Navegación: pills, tabs --- */
.nav-pills { gap: 8px; flex-wrap: wrap; }
.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid var(--linea);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.nav-pills .nav-link:hover { border-color: var(--ink); color: var(--ink); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background: var(--ink); border-color: var(--ink); color: #fff; }
.nav-tabs { border-bottom: 2px solid var(--linea); gap: 4px; }
.nav-tabs .nav-link { min-height: 44px; border: 0; border-radius: 16px 16px 0 0; color: var(--ink-2); font-weight: 600; }
.nav-tabs .nav-link:hover { background: var(--crema-2); color: var(--ink); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: #fff; color: var(--ink); box-shadow: inset 0 -3px 0 var(--verde-d); }
.tab-content > .tab-pane { padding-top: 12px; }

/* --- Migas de Bootstrap --- */
.breadcrumb { background: transparent; padding: 0; margin: 0 0 12px; font-size: 14px; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--muted); font-weight: 700; }
.breadcrumb-item a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.breadcrumb-item.active { color: var(--muted); }

/* --- Paginación de Bootstrap 4 --- */
.pagination { gap: 6px; flex-wrap: wrap; }
.page-link {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0 12px;
    border: 0;
    border-radius: 999px 999px 999px 6px !important;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 0 0 2px var(--linea);
}

.page-link:hover { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); text-decoration: none; }
.page-link:focus { box-shadow: 0 0 0 3px var(--ink); }
.page-item.active .page-link { background: var(--ink); color: #fff; box-shadow: none; }
.page-item.disabled .page-link { background: transparent; color: #7D8B82; box-shadow: 0 0 0 2px var(--linea); }

/* --- Dropdowns genéricos de Bootstrap --- */
.dropdown-menu { border: 0; border-radius: var(--r-sub); box-shadow: var(--sh-2), 0 0 0 1px rgba(15, 42, 28, .06); padding: 8px; font-size: 14px; }
.dropdown-item { border-radius: 10px; padding: 9px 14px; color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--crema); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--crema-2); color: var(--ink); }

/* --- Otros componentes --- */
.list-group-item { border-color: var(--linea); }
.list-group-item.active { background: var(--ink); border-color: var(--ink); }
.progress { height: 12px; border-radius: 999px; background: var(--crema-2); }
.progress-bar { background-color: var(--verde-d); }
.jumbotron { background: #fff; border-radius: var(--r-lg); }
.close { text-shadow: none; }
.close:hover { color: var(--ink); }
.img-thumbnail { border-color: var(--linea); border-radius: 18px 18px 18px 4px; }
.rounded { border-radius: 14px !important; }
.shadow-sm { box-shadow: var(--sh-1) !important; }
.blockquote-footer { color: var(--muted); }
.tooltip-inner { background: var(--ink); border-radius: 10px; }

/* ===================================================================================== 9. DATATABLES 1.10 (integración Bootstrap 3) */
/* La integración BS3 pone .form-inline al contenedor; en BS4 eso lo vuelve flex y deja las filas lado a lado */
div.dataTables_wrapper.form-inline { display: block; }
.dataTables_wrapper { font-size: 14px; }
.dataTables_wrapper .row { align-items: center; row-gap: 8px; }
/* Dentro de .fh-table-wrap (relleno 8px + overflow-x:auto) las .row de Bootstrap (margen -15px) se salían ~7px y
   aparecía una segunda barra horizontal; el buscador quedaba pegado al borde de la tarjeta */
.fh-table-wrap .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
.fh-table-wrap .dataTables_wrapper > .row > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); }

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    min-height: 44px;
    padding: 8px 14px;
    border: 2px solid var(--borde);
    border-radius: var(--r-sm);
    background-color: #fff;
    color: var(--ink);
    font: 400 14.5px/1.3 var(--body);
}

div.dataTables_wrapper div.dataTables_filter input { min-width: 220px; margin-left: 0; padding-left: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.4-4.4'/%3E%3C/svg%3E") no-repeat 12px center / 18px 18px; }
div.dataTables_wrapper div.dataTables_length select { width: auto; padding-right: 36px; -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px 16px; }
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus { border-color: var(--verde-d); box-shadow: 0 0 0 3px rgba(0, 122, 51, .22); outline: none; }

div.dataTables_wrapper div.dataTables_info { color: var(--muted); font-size: 13.5px; padding-top: 10px; white-space: normal; }

div.dataTables_wrapper div.dataTables_paginate ul.pagination,
.dataTables_paginate .pagination { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span,
.dataTables_paginate a.paginate_button {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px 999px 999px 6px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--linea);
    cursor: pointer;
}

.dataTables_paginate .pagination > li > a:hover,
.dataTables_paginate a.paginate_button:hover { box-shadow: 0 0 0 2px var(--ink); color: var(--ink); text-decoration: none; }
.dataTables_paginate .pagination > li.active > a,
.dataTables_paginate a.paginate_button.current { background: var(--ink); color: #fff; box-shadow: none; }
.dataTables_paginate .pagination > li.disabled > a,
.dataTables_paginate a.paginate_button.disabled { opacity: .45; cursor: default; box-shadow: 0 0 0 2px var(--linea); }

/* Íconos de orden: el CSS de DataTables para BS3 usa la fuente Glyphicons, que no se carga */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; position: relative; padding-right: 26px !important; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
    position: absolute;
    right: 8px;
    bottom: 50%;
    transform: translateY(50%);
    font-family: var(--body) !important;
    font-size: 13px;
    font-weight: 700;
    opacity: .35;
}

table.dataTable thead .sorting::after { content: "↕" !important; }
table.dataTable thead .sorting_asc::after { content: "↑" !important; opacity: .9; }
table.dataTable thead .sorting_desc::after { content: "↓" !important; opacity: .9; }

/* Filtros select en los encabezados (initComplete de AgreementCompany, CompensationCenter…) */
table.dataTable thead th select,
.dataTables_scrollHead thead th select {
    display: block;
    width: 100%;
    min-width: 110px;
    max-width: 220px;
    min-height: 36px;
    margin-top: 6px;
    padding: 4px 30px 4px 10px;
    border: 2px solid var(--borde);
    border-radius: 12px 12px 12px 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2A1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px 14px;
    -webkit-appearance: none;
    appearance: none;
    font: 500 13px/1.2 var(--body);
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
}

table.dataTable { border-collapse: separate !important; border-spacing: 0; }
table.dataTable tbody tr.selected { background: var(--lima-s); }
table.dataTable td.dataTables_empty { padding: 28px; color: var(--muted); font-weight: 600; }
div.dataTables_scrollHead { border-radius: 16px 16px 0 0; }
div.dataTables_scrollBody { border-bottom: 1px solid var(--linea); }
div.dataTables_processing { background: #fff; border-radius: var(--r-sm); box-shadow: var(--sh-2); color: var(--ink); font-weight: 600; }

@media (max-width: 767px) {
    div.dataTables_wrapper div.dataTables_filter input { min-width: 0; width: 100%; }
    div.dataTables_wrapper div.dataTables_filter label { width: 100%; }
}

/* ===================================================================================== 10. COMPATIBILIDAD TEMA KIDZ */
/* Clases del tema anterior que siguen en vistas sin migrar. Se mantienen con el nuevo aspecto
   para que esas vistas no se rompan. No usarlas en vistas nuevas: ver la guía de migración. */

.main-wrapper { display: block; }

/* Banda de título con foto (section.breadcrumb-bg > .container > .breadcrumb-holder > h1.breadcrumb-title) */
.breadcrumb-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 0 32px;
    border-radius: var(--r-xl);
    background-color: var(--bosque);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.breadcrumb-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(11, 74, 43, .94) 0%, rgba(11, 74, 43, .86) 42%, rgba(11, 74, 43, .45) 78%, rgba(11, 74, 43, .3) 100%);
}

.breadcrumb-bg::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 220px;
    aspect-ratio: 1 / 1;
    border: 30px solid var(--lima);
    border-radius: var(--petalo);
    opacity: .9;
    z-index: -1;
}

.breadcrumb-bg .container { padding-left: 48px !important; padding-right: 48px !important; }

/* Banners que ya traen el título dentro de la imagen (sin h1, p. ej. Feria de Emprendimiento): sin velo ni pétalo */
.breadcrumb-bg:not(:has(.breadcrumb-title))::before,
.breadcrumb-bg:not(:has(.breadcrumb-title))::after { display: none; }

.breadcrumb-bg .breadcrumb-holder,
.breadcrumb-holder {
    height: auto;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 0;
}

.breadcrumb-title {
    position: relative;
    margin: 0;
    padding-top: 30px;
    max-width: 820px;
    color: #fff;
    text-align: left;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(2.1rem, 4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.breadcrumb-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--lima) 0 33%, var(--medio) 33% 66%, #fff 66%);
}

/* Segunda línea (h2.breadcrumb-title usada como bajada, p. ej. fechas de inscripción) */
h2.breadcrumb-title,
.breadcrumb-title + .breadcrumb-title {
    margin-top: 14px;
    padding-top: 0;
    font-family: var(--body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.45;
    letter-spacing: 0;
    color: #E8F1E2;
}

h2.breadcrumb-title::before,
.breadcrumb-title + .breadcrumb-title::before { display: none; }

.breadcrumb-transparent { justify-content: flex-start; padding: 0; margin: 16px 0 0; background: transparent; }
.breadcrumb-transparent .breadcrumb-item,
.breadcrumb-transparent .breadcrumb-item a,
.breadcrumb-transparent .breadcrumb-item.active { color: #fff !important; font-weight: 600; }
.breadcrumb-transparent .breadcrumb-item.active { color: var(--lima) !important; }
.breadcrumb-transparent .breadcrumb-item + .breadcrumb-item::before { color: var(--lima); content: "›"; font-family: var(--body); }

@media (max-width: 760px) {
    .breadcrumb-bg { border-radius: 36px 36px 36px 6px; margin-bottom: 24px; }
    .breadcrumb-bg .container { padding-left: 22px !important; padding-right: 22px !important; }
    .breadcrumb-bg .breadcrumb-holder, .breadcrumb-holder { min-height: 160px; padding: 28px 0 56px; } /* el texto termina sobre el pétalo de la esquina */
    .breadcrumb-bg::after { width: 96px; border-width: 14px; right: -38px; bottom: -46px; }
    .breadcrumb-bg::before { background: linear-gradient(180deg, rgba(11, 74, 43, .9), rgba(11, 74, 43, .8)); }
}

/* Título de sección con "formas" (.section-title > .shape.shape-left + h2 + .shape.shape-right) */
.section-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    position: relative;
}

.section-title.justify-content-center { justify-content: center; text-align: center; }

.section-title h2,
.section-title h3 {
    order: 0;
    margin: 0;
    padding: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    text-transform: none;
    color: var(--ink);
}

.section-title .shape {
    position: static !important;
    transform: none !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: none;
    padding: 0;
    border-radius: var(--petalo);
    background-color: var(--lima) !important;
}

.section-title .shape.shape-right { border-radius: var(--petalo-br); background-color: var(--medio) !important; }
.section-title .shape::before,
.section-title .shape::after { display: none !important; }

/* Tipografía y utilidades del tema */
/* Vistas sin migrar (Home/Savings, Credits, SavingDetail, CreditDetail) usan <h5> como texto de cuerpo:
   sin la letra de titulares. Los colores y tamaños inline de esas vistas siguen mandando. */
.main-wrapper .media-body h5 { font-family: var(--body); font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.font-dosis { font-family: var(--body) !important; }
.font-weight-medium { font-weight: 600 !important; }
.font-normal { font-style: normal !important; }
.font-base { font-family: var(--body); }
.font-size-11 { font-size: .6875rem !important; }
.font-size-12 { font-size: .75rem !important; }
.font-size-13 { font-size: .8125rem !important; }
.font-size-14 { font-size: .875rem !important; }
.font-size-15 { font-size: .9375rem !important; }
.font-size-16 { font-size: 1rem !important; }
.font-size-18 { font-size: 1.125rem !important; }
.font-size-20 { font-size: 1.25rem !important; }
.font-size-22 { font-size: 1.375rem !important; }
.font-size-24 { font-size: 1.5rem !important; }
.font-size-28 { font-size: 1.75rem !important; }
.font-size-30 { font-size: 1.875rem !important; }
.font-size-32 { font-size: 2rem !important; }
.font-size-36 { font-size: 2.25rem !important; }
.font-size-40 { font-size: 2.5rem !important; }
.font-size-48 { font-size: 3rem !important; }
.mtn-80 { margin-top: -5rem !important; }
.line-hight-16 { line-height: 1.6; }

/* Fondos */
.bg-parallax { background-size: cover; background-position: center; background-attachment: scroll; }
.bg-repeat { background-repeat: repeat; }

@media (min-width: 992px) and (hover: hover) {
    .bg-parallax { background-attachment: fixed; }
}

/* Tarjetas de color con ícono (About: Misión/Visión) */
.card-hover { border-radius: 40px 40px 40px 8px; color: var(--ink); box-shadow: var(--sh-3); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.card-hover:hover { transform: translateY(-6px); }
.card-hover .text-white,
.card-hover .blockquote-footer { color: var(--ink) !important; }
.card-hover .blockquote-footer { font-family: var(--display); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-top: 8px; }
.card-hover .blockquote-footer::before { content: none; }
.card-hover p { color: var(--ink); font-size: 16px; }
.card-icon-border-large2 {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border: 6px solid;
    border-radius: var(--petalo);
    background-color: #fff;
    font-size: 1.9rem;
    color: var(--ink);
}

.card-icon-border-large2 img { max-width: 100%; border-radius: 50%; display: block; }
.card .card-header-lg h3 { font-size: 2rem; font-weight: 800; }
.blockquote-sm p { font-size: 1rem; font-weight: 400; }
.list-item-lg li { font-size: 1.1rem; margin-bottom: 1rem; color: var(--ink-2); }
.icon-rounded-circle-small { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--petalo); background: var(--lima); color: var(--ink); flex: none; }
.icon-header { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--petalo); }

/* Media (Galería y otras) */
.media-img-overlay { position: absolute; inset: 0; }
.media-hoverable { --media-r: 24px 24px 24px 4px; position: relative; overflow: hidden; margin-bottom: 1.5rem; border-radius: var(--media-r); background: #fff; box-shadow: var(--sh-1); }
.media-hoverable .media-img { display: block; transition: transform .8s ease-in-out; }
.media-hoverable .media-img-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--media-r); /* el velo y el anillo de foco siguen la curva de la tarjeta (el padre directo no tiene radio) */
    background-color: rgba(15, 42, 28, .55);
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.media-hoverable:hover .media-img,
.media-hoverable:focus-within .media-img { transform: scale(1.08); }
.media-hoverable:hover .media-img-overlay,
.media-hoverable .media-img-overlay:focus-visible { opacity: 1; }
.media-hoverable .media-img-overlay:focus-visible { outline: 3px solid var(--lima); outline-offset: -6px; }
.btn-squre { min-height: 48px; min-width: 48px; border: 0; border-radius: var(--petalo); background: var(--lima); --b: var(--lima); --bb: var(--lima); }
.btn-squre i { color: var(--ink); font-size: 1.1rem; }

/* Filtros de la galería (isotope: #filters.button-group .button) */
.button-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.button-group .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--linea);
    border-radius: 999px 999px 999px 4px;
    background: #fff;
    color: var(--ink);
    font: 600 14px/1 var(--body);
    cursor: pointer;
}

.button-group .button::before { content: ""; width: 11px; height: 11px; border-radius: var(--petalo); background: var(--lima); }
.button-group .button:hover { border-color: var(--ink); }
.button-group .button.is-checked { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Galería (Home/Gallery): dos fotos por fila en celular (col-xs-12 las ponía a todo el ancho). Isotope las
   posiciona en absoluto con este ancho. */
@media (max-width: 575px) {
    #gallery-grid > .row { margin-left: -6px; margin-right: -6px; }
    #gallery-grid .element-item { width: 50%; flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px; }
    #gallery-grid .media-hoverable { margin-bottom: 12px; --media-r: 18px 18px 18px 4px; }
}

/* Contador de cantidad (Cineprox / RoyalFilms / Cinemark: .add-cart .count-input .quantity + .incr-btn) */
.add-cart { display: flex; flex-direction: column; gap: 12px; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .add-cart { flex-direction: row; align-items: center; margin-bottom: 0; } }
.add-cart .count-input { display: inline-block; position: relative; margin-bottom: 0; }
.add-cart .count-input .quantity { min-height: 48px; padding-right: 44px; text-align: center; font-weight: 700; }
.add-cart .count-input .incr-btn {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 20px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 6px;
}

.add-cart .count-input .incr-btn:hover { background: var(--crema-2); }
.add-cart .count-input .incr-up { top: 4px; }
.add-cart .count-input .incr-down { bottom: 4px; }
.add-cart .count-input .incr-btn.inactive { opacity: .4; }
.add-cart .count-input .btn-primary { background: #fff !important; color: var(--ink); border: 2px solid var(--borde) !important; }

/* Campo con ícono (Login y formularios del tema) */
.form-group-icon { position: relative; }
.form-group-icon > i:not(.bi) { position: absolute; right: 16px; top: 15px; color: var(--muted); font-size: .9rem; }

/* Asistente de pasos de auxilios (.progress-wizard) */
.progress-wizard { margin: 2rem 0 3rem; padding: 0; }
.progress-wizard > .progress-wizard-step { padding: 0; position: relative; height: 150px; margin-bottom: 1rem; }
.progress-wizard > .progress-wizard-step > .progress { position: relative; height: 6px; margin: 1.25rem 0; border-radius: 999px; background: var(--crema-2); box-shadow: none; }
.progress-wizard > .progress-wizard-step > .progress > .progress-bar { width: 0; background: var(--verde-d); box-shadow: none; }
.progress-wizard > .progress-wizard-step.complete > .progress > .progress-bar { width: 100%; }
.progress-wizard > .progress-wizard-step.active > .progress > .progress-bar { width: 50%; }
.progress-wizard > .progress-wizard-step:first-child.active > .progress > .progress-bar { width: 0; }
.progress-wizard > .progress-wizard-step:last-child.active > .progress > .progress-bar { width: 100%; }
.progress-wizard > .progress-wizard-step:first-child > .progress { left: 50%; width: 50%; }
.progress-wizard > .progress-wizard-step:last-child > .progress { width: 50%; }
.progress-wizard > .progress-wizard-step.disabled a.progress-wizard-dot { pointer-events: none; }
.progress-wizard > .progress-wizard-step > .progress-wizard-dot {
    display: block;
    position: relative;
    width: 96px;
    margin: -2.2rem auto 0;
    padding: 5px;
    border: 4px solid var(--lima);
    border-radius: var(--petalo);
    background-color: #fff;
    text-align: center;
    color: var(--ink);
}

.progress-wizard > .progress-wizard-step > .progress-wizard-dot i {
    display: block;
    width: 78px;
    height: 78px;
    line-height: 78px;
    border-radius: var(--petalo);
    background-color: var(--crema-2);
    color: var(--verde-d);
    font-size: 1.5rem;
    text-align: center;
}

.progress-wizard > .progress-wizard-step.incomplete > .progress-wizard-dot { border-color: var(--linea); color: var(--muted); }
.progress-wizard > .progress-wizard-step.incomplete > .progress-wizard-dot i { color: var(--muted); }
.progress-wizard > .progress-wizard-step.complete > .progress-wizard-dot i,
.progress-wizard > .progress-wizard-step.active > .progress-wizard-dot i { background-color: var(--lima); color: var(--ink); }
.progress-wizard .progress-info { margin-top: 12px; text-align: center; font-weight: 600; font-size: 15px; color: var(--ink); }

/* Ícono de "ver contraseña" del Login (bootstrap-icons ya no se carga: se dibuja con una máscara SVG) */
.bi { display: inline-block; line-height: 1; }
.bi-eye::before,
.bi-eye-slash::before {
    content: "";
    display: block;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    -webkit-mask: var(--bi-icon) center / contain no-repeat;
    mask: var(--bi-icon) center / contain no-repeat;
}

.bi-eye { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.bi-eye-slash { --bi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5c1.6 0 3 .4 4.2 1.1M21.5 12s-3.5 6.5-9.5 6.5c-1.6 0-3-.4-4.2-1.1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2M4 20 20 4'/%3E%3C/svg%3E"); }
#togglePassword { display: grid; place-items: center; width: 44px; height: 44px; right: 4px !important; }

/* Botones "Ingresar" y "Olvidé mi Contraseña" del Login: traen height:40px inline (sin !important) y se apilaban
   pegados en celular. min-height le gana a height; el margen los separa en fila o apilados. */
.sign-up-or-login .form-group > .btn {
    min-height: 44px;
    margin: 0 8px 10px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Campos del Login: traen inline border-radius 0 50px 50px 0 (del ícono izquierdo de la plantilla vieja, que ya no
   existe); quedan en píldora como el resto del sistema. El de contraseña deja sitio al botón del ojo (44px). */
.sign-up-or-login .form-control { border-radius: 999px !important; padding-left: 20px; }
.sign-up-or-login #passwordInput { padding-right: 56px; }
.sign-up-or-login .form-control::placeholder { color: var(--verde-t) !important; opacity: 1; }
/* "Recordar Contraseña": casilla de 20px (la nativa medía 13px) y la etiqueta da el área táctil de 44px */
.sign-up-or-login .form-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-left: 0; }
.sign-up-or-login .form-check-input { position: static; flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--verde-d); }
.sign-up-or-login .form-check-label { padding: 10px 0; cursor: pointer; }
#togglePassword { border-radius: 50%; }
#togglePassword:focus-visible { outline-offset: -2px; }

/* Clases del tema/plantilla sin estilo propio que solo necesitan no estorbar */
.page-header { border: 0; }
.sticky-nav { position: static; }
.largerCheckbox, input.largerCheckbox { width: 22px; height: 22px; accent-color: var(--verde-d); }

/* Paneles de site.css (.headerBloque: texto blanco sobre menta no alcanzaba el contraste) */
.panel .headerBloque,
.panel-heading.headerBloque { color: var(--ink) !important; font-size: 14px !important; }
.panel.borderPanel { border-color: var(--linea) !important; }

/* ===================================================================================== 11. COMPATIBILIDAD BOOTSTRAP 3 */
.panel {
    margin-bottom: 24px;
    background: #fff;
    border: 0;
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
}

.panel > .panel-heading,
.panel-heading {
    display: flow-root;
    padding: 14px 20px;
    background: var(--crema-2);
    border-bottom: 2px dashed var(--linea);
    border-radius: 28px 28px 0 0;
    color: var(--ink);
}

.panel-success > .panel-heading { background: var(--menta-s); }
.panel-default > .panel-heading { background: var(--crema-2); }
.panel-info > .panel-heading { background: var(--azul-s); }
.panel-warning > .panel-heading { background: var(--mango-s); }
.panel-danger > .panel-heading { background: var(--rojo-s); }
.panel-primary > .panel-heading { background: var(--verde-d); color: #fff; }
.panel .panel { box-shadow: none; border: 2px solid var(--linea); border-radius: 22px 22px 22px 4px; }
.panel .panel > .panel-heading { border-radius: 20px 20px 0 0; }

.panel-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: inherit;
}

.panel-body { display: flow-root; padding: 20px; }
.panel-footer { padding: 14px 20px; border-top: 2px dashed var(--linea); background: transparent; border-radius: 0 0 28px 6px; }
.panel-hdr { padding: 14px 20px; border-bottom: 2px dashed var(--linea); }
.panel-container, .panel-content { display: flow-root; }

.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.col-xs-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }
.control-label { font-weight: 600; font-size: 14px; }
.help-block { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); }
.caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; }
.dl-horizontal dt { font-weight: 700; }
.glyphicon { display: inline-block; font-style: normal; }
.glyphicon-info-sign::before { content: "i"; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--azul); color: var(--ink); font-weight: 800; font-size: .8em; }
.btn-xs { min-height: 32px; padding: 4px 10px; font-size: 12.5px; }

@media (min-width: 768px) {
    .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dl-horizontal dd { margin-left: 180px; }
}

/* ===================================================================================== 12. MOVIMIENTO REDUCIDO E IMPRESIÓN */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .fh-btn:hover, .btn:hover, a.fh-card:hover, a.fh-card--petal:hover, .card-hover:hover { transform: none; }
}

@media print {
    .fh-topbar, .fh-header, .fh-chips, .fh-float, .fh-footer, .fh-skip, .loading { display: none !important; }
    body { background: #fff; }
    .fh-page { padding: 0; }
    .breadcrumb-bg, .fh-hero { border-radius: 0; box-shadow: none; }
}