/* ============================================================
   AquaFormula — Sistema de diseño institucional
   CITEpesquero, Acuícola y Agroindustrial Piura — ITP
   Paleta SÓLIDA (sin degradados). Homogénea login ↔ layout.
   ============================================================ */

/* Escala global compacta: baja la raíz a 15px → todo lo que usa rem se
   reduce ~6% de forma uniforme (letras y controles más densos, mejor uso
   del espacio) sin tocar cientos de reglas individuales. */
html { font-size: 15px; }

:root {
    /* --- Color institucional (evolución marina) --- */
    --af-azul:           #0a4d8c;   /* azul institucional principal */
    --af-azul-d:         #003667;   /* azul marino profundo (sidebar, header) */
    --af-azul-dd:        #001c3a;   /* azul más profundo (contraste) */
    --af-azul-medio:     #285f9f;   /* hover / acentos */
    --af-azul-claro:     #e5eefe;   /* fondos suaves azulados */
    --af-azul-cont:      #d4e3ff;   /* contenedor primario claro */
    --af-agua:           #006875;   /* turquesa institucional (secundario) */
    --af-agua-claro:     #1aa3b5;
    --af-agua-suave:     #d8f1f5;
    --af-gris-fondo:     #f8f9ff;   /* fondo general (surface) */
    --af-gris-borde:     #dae3f2;   /* outline-variant */
    --af-gris-texto:     #424750;   /* on-surface-variant */
    --af-texto-fuerte:   #131c27;   /* on-surface */
    --af-gris-suave:     #eef4ff;   /* surface-container-low */
    --af-ok:             #1c9d5b;
    --af-warn:           #e0902a;
    --af-alert:          #ba1a1a;

    /* --- Espaciado (escala 4px) --- */
    --af-sp-1: 4px; --af-sp-2: 8px; --af-sp-3: 12px; --af-sp-4: 16px;
    --af-sp-5: 24px; --af-sp-6: 32px; --af-sp-7: 40px;

    /* --- Radios --- */
    --af-radius-sm: .375rem; --af-radius: .625rem; --af-radius-md: .75rem;
    --af-radius-lg: 1rem; --af-radius-xl: 1.5rem; --af-radius-pill: 9999px;

    /* --- Tipografía --- */
    --af-font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --af-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    --af-fs-xs: .72rem; --af-fs-sm: .8rem; --af-fs-base: .875rem;
    --af-fs-lg: 1rem; --af-fs-xl: 1.25rem; --af-fs-2xl: 1.5rem; --af-fs-3xl: 2rem;
    --af-fw-regular: 400; --af-fw-medium: 500; --af-fw-semibold: 600; --af-fw-bold: 700;

    /* --- Sombras --- */
    --af-shadow-sm:      0 1px 2px rgba(0,28,58,.06);
    --af-shadow:         0 2px 10px rgba(0,28,58,.08);
    --af-shadow-md:      0 4px 16px rgba(0,28,58,.10);
    --af-shadow-lg:      0 10px 34px rgba(0,28,58,.14);

    /* --- Motion --- */
    --af-dur-fast: .12s; --af-dur: .2s; --af-dur-slow: .32s;
    --af-ease: cubic-bezier(.4,0,.2,1);

    /* --- Layout --- */
    --af-sidebar-w:      258px;
    --af-topbar-h:       64px;
}

* { box-sizing: border-box; }
body {
    background: var(--af-gris-fondo);
    font-family: var(--af-font-body);
    font-size: var(--af-fs-base); color: var(--af-gris-texto); margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.af-display { font-family: var(--af-font-display); }
a { color: var(--af-azul); }

/* ============================================================
   SHELL
   ============================================================ */
#layout-wrapper { min-height: 100vh; }

/* ---------- Sidebar (TEMA CLARO) ---------- */
.vertical-menu {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--af-sidebar-w); z-index: 1002;
    background: #fff;
    border-right: 1px solid var(--af-gris-borde);
    display: flex; flex-direction: column;
    transition: width var(--af-dur) var(--af-ease), transform .25s var(--af-ease);
}
.navbar-brand-box {
    height: var(--af-topbar-h); display: flex; align-items: center;
    padding: 0 1.2rem; border-bottom: 1px solid var(--af-gris-borde); flex-shrink: 0;
}
.navbar-brand-box .logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.af-logo-mark {
    height: 40px; width: auto; flex-shrink: 0; display: block;
}
.af-logo-text { color: var(--af-azul-d); font-weight: 700; font-size: 1.08rem; line-height: 1; }
.af-logo-text small { display:block; font-weight: 400; font-size: .6rem; color: #8a94a6; letter-spacing: .04em; margin-top: 3px; }

#sidebar-menu { flex: 1; overflow-y: auto; padding: .5rem 0 1rem; }
#sidebar-menu::-webkit-scrollbar { width: 6px; }
#sidebar-menu::-webkit-scrollbar-thumb { background: #d6dee9; border-radius: 3px; }
#sidebar-menu .menu-title {
    color: #9aa6b5; font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .11em; padding: 1.1rem 1.3rem .4rem;
}
/* Cabecera de sección colapsable */
#sidebar-menu .menu-section { list-style: none; }
#sidebar-menu .menu-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: transparent; border: none; cursor: pointer;
    color: #9aa6b5; font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .11em; padding: 1.05rem 1.3rem .45rem; margin: 0;
    transition: color var(--af-dur-fast) var(--af-ease);
}
#sidebar-menu .menu-toggle:hover { color: var(--af-azul); }
#sidebar-menu .menu-chevron {
    font-size: 1rem; transition: transform var(--af-dur-fast) var(--af-ease); opacity: .8;
}
/* Contenido colapsable por max-height (robusto con múltiples hijos). Cada sección
   tiene pocos items; 640px cubre de sobra. Al colapsar → 0 + fade. */
#sidebar-menu .menu-items {
    list-style: none; padding: 0; margin: 0;
    max-height: 640px; overflow: hidden; opacity: 1;
    transition: max-height var(--af-dur) var(--af-ease), opacity var(--af-dur-fast) var(--af-ease);
}
/* Sección colapsada: chevron apunta a la derecha y el contenido se contrae */
#sidebar-menu .menu-section.collapsed .menu-chevron { transform: rotate(-90deg); }
#sidebar-menu .menu-section.collapsed .menu-items { max-height: 0; opacity: 0; }
#sidebar-menu ul { list-style: none; padding: 0; margin: 0; }
#sidebar-menu ul li a {
    display: flex; align-items: center; gap: .8rem; margin: 1px .6rem;
    padding: .58rem .8rem; border-radius: var(--af-radius);
    color: #4a5568; text-decoration: none; font-size: .865rem; font-weight: 500;
    transition: all var(--af-dur-fast) var(--af-ease);
}
#sidebar-menu ul li a i { font-size: 1.2rem; opacity: .7; flex-shrink: 0; width: 20px; text-align: center; }
#sidebar-menu ul li a:hover { color: var(--af-azul-d); background: var(--af-gris-suave); }
#sidebar-menu ul li a:hover i { opacity: 1; }
#sidebar-menu ul li a.active {
    color: var(--af-azul); font-weight: 600; background: var(--af-azul-claro);
}
#sidebar-menu ul li a.active i { color: var(--af-azul); opacity: 1; }
.sidebar-footer {
    padding: .8rem 1.3rem; flex-shrink: 0;
    border-top: 1px solid var(--af-gris-borde); color: #9aa6b5; font-size: .7rem;
}

/* ---------- Topbar ---------- */
#page-topbar {
    position: fixed; top: 0; right: 0; left: var(--af-sidebar-w);
    height: var(--af-topbar-h); z-index: 1001; background: #fff;
    box-shadow: var(--af-shadow-sm); border-bottom: 1px solid var(--af-gris-borde);
    transition: left var(--af-dur) var(--af-ease);
}
.navbar-header { height: var(--af-topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 1.4rem; }
.af-toggle { background: transparent; border: none; color: var(--af-azul); font-size: 1.5rem; cursor: pointer; padding: .25rem .5rem; border-radius: .4rem; line-height: 1; }
.af-toggle:hover { background: var(--af-azul-claro); }
.af-page-name { font-size: .98rem; font-weight: 600; color: var(--af-azul-d); margin: 0; }

.af-topbar-actions { display: flex; align-items: center; gap: .3rem; }
.af-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
    color: #5a6b80; font-size: 1.25rem; cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.af-icon-btn:hover { background: var(--af-gris-suave); color: var(--af-azul); }
.af-icon-btn .af-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--af-alert); border: 2px solid #fff; }

.af-user-btn { display: flex; align-items: center; gap: .6rem; background: transparent; border: none; cursor: pointer; padding: .25rem .5rem; border-radius: .5rem; }
.af-user-btn:hover { background: var(--af-gris-suave); }
.af-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--af-azul); color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.af-user-meta { text-align: left; line-height: 1.15; }
.af-user-meta .nombre { font-size: .82rem; font-weight: 600; color: var(--af-azul-d); }
.af-user-meta .rol { font-size: .68rem; color: #8794a5; }

/* ---------- Main ---------- */
.main-content { margin-left: var(--af-sidebar-w); padding-top: var(--af-topbar-h); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--af-dur) var(--af-ease); }
.page-content { flex: 1; padding: 1.5rem 1.7rem; }
.footer { padding: .9rem 1.7rem; background: #fff; border-top: 1px solid var(--af-gris-borde); color: #97a2b2; font-size: .78rem; }

/* ============================================================
   COMPONENTES
   ============================================================ */
.page-title-box { padding-bottom: 1.1rem; margin-bottom: .3rem; }
.page-title-box h4 { color: var(--af-azul-d); font-weight: 700; font-size: 1.1rem; position: relative; padding-left: .85rem; margin: 0; }
.page-title-box h4::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--af-agua); }
.page-title-box .af-subtitle { font-size: .82rem; color: #8794a5; padding-left: .85rem; margin-top: 3px; }
.breadcrumb { font-size: .8rem; margin: 0; }
.breadcrumb-item.active { color: var(--af-azul); font-weight: 500; }
.breadcrumb-item a { color: #97a2b2; text-decoration: none; }

.card { border: 1px solid var(--af-gris-borde); border-radius: 12px; box-shadow: var(--af-shadow-sm); background: #fff; margin-bottom: 1.3rem; }
.card-header { background: #fff; border-bottom: 1px solid var(--af-gris-borde); padding: .9rem 1.15rem; border-radius: 12px 12px 0 0; position: relative; }
.card-header .card-title { color: var(--af-azul-d); font-weight: 700; font-size: .94rem; padding-left: .75rem; margin: 0; }
.card-header .card-title::before { content: ''; position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 2px; background: var(--af-agua); }
.card-body { padding: 1.15rem; }

/* Header de bienvenida (tono CLARO) */
.af-welcome {
    position: relative; overflow: hidden;
    margin-bottom: var(--af-sp-5);
    padding: var(--af-sp-5) var(--af-sp-6);
    border-radius: var(--af-radius-lg);
    background: linear-gradient(120deg, var(--af-azul-d) 0%, var(--af-azul) 70%);
    color: #fff; box-shadow: var(--af-shadow);
}
.af-welcome > * { position: relative; z-index: 2; }
.af-welcome::before, .af-welcome::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(70px); z-index: 1; pointer-events: none;
}
.af-welcome::before { width: 280px; height: 280px; right: -60px; bottom: -120px; background: var(--af-agua); opacity: .45; }
.af-welcome::after { width: 200px; height: 200px; right: 120px; top: -100px; background: var(--af-agua-claro); opacity: .3; }
.af-welcome h2 { font-family: var(--af-font-display); font-size: var(--af-fs-3xl); font-weight: 700; margin: 0; color: #fff; }
.af-welcome p { color: rgba(255,255,255,.82); margin: .3rem 0 0; font-size: var(--af-fs-base); text-transform: capitalize; }
.af-welcome .btn-accent { background: #fff; color: var(--af-azul-d); border: none; font-weight: 700; }
.af-welcome .btn-accent:hover { background: var(--af-agua-suave); color: var(--af-azul-d); }

/* KPI cards (tarjeta limpia con tendencia) */
.af-kpi { display: flex; flex-direction: column; gap: .5rem; padding: .85rem 1rem;
    border-radius: var(--af-radius-md); border: 1px solid var(--af-gris-borde); background: #fff;
    box-shadow: var(--af-shadow-sm); height: 100%; transition: box-shadow var(--af-dur), transform var(--af-dur); }
.af-kpi:hover { box-shadow: var(--af-shadow-md); transform: translateY(-2px); }
.af-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.af-kpi__icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.af-kpi__label { font-size: .68rem; font-weight: var(--af-fw-semibold); text-transform: uppercase;
    letter-spacing: .04em; color: #8a94a6; margin: 0; }
.af-kpi__value { font-family: var(--af-font-display); font-size: 1.5rem; font-weight: 700;
    color: var(--af-texto-fuerte); line-height: 1; margin: 0; }
.af-kpi__trend { display: inline-flex; align-items: center; gap: 2px; font-size: var(--af-fs-xs);
    font-weight: var(--af-fw-semibold); padding: 2px 8px; border-radius: var(--af-radius-pill); }
.af-kpi__trend.up { color: var(--af-ok); background: #def1e5; }
.af-kpi__trend.down { color: var(--af-alert); background: #fde3e3; }
.af-kpi__trend.flat { color: #6b7686; background: var(--af-gris-suave); }
.af-trend-chip { display: inline-flex; align-items: center; gap: 1px; font-size: .65rem; font-weight: 700;
    padding: 1px 6px; border-radius: var(--af-radius-pill); margin-top: 3px; line-height: 1.4; }
.af-trend-chip i { font-size: .82rem; }
.af-trend-chip.up   { color: var(--af-ok);    background: #def1e5; }
.af-trend-chip.down { color: var(--af-alert); background: #fde3e3; }
.af-cob-pill { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700;
    padding: 2px 9px; border-radius: var(--af-radius-pill); white-space: nowrap; }
.af-cob-pill i { font-size: .85rem; }
.af-cob--success { color: var(--af-ok);    background: #def1e5; }
.af-cob--warning { color: var(--af-warn);  background: #fbecd6; }
.af-cob--danger  { color: var(--af-alert); background: #fde3e3; }
.af-kpi--blue  .af-kpi__icon { color: var(--af-azul);  background: var(--af-azul-claro); }
.af-kpi--agua  .af-kpi__icon { color: var(--af-agua);  background: var(--af-agua-suave); }
.af-kpi--green .af-kpi__icon { color: var(--af-ok);    background: #def1e5; }
.af-kpi--warn  .af-kpi__icon { color: var(--af-warn);  background: #fbeed6; }

/* Botones */
.btn { font-weight: 500; border-radius: 8px; font-size: .85rem; padding: .4rem .85rem; }
/* Botones grandes menos prominentes (se veían demasiado grandes). */
.btn-lg { font-size: .92rem !important; padding: .5rem 1.1rem !important; }
/* Inputs y selects más compactos y consistentes en todo el sistema. */
.form-control, .form-select { font-size: .85rem; }
.form-label { font-size: .82rem; margin-bottom: .3rem; }
.btn-primary { --bs-btn-bg: var(--af-azul); --bs-btn-border-color: var(--af-azul); --bs-btn-hover-bg: var(--af-azul-medio); --bs-btn-hover-border-color: var(--af-azul-medio); --bs-btn-active-bg: var(--af-azul-d); --bs-btn-active-border-color: var(--af-azul-d); }
.btn-success { --bs-btn-bg: var(--af-ok); --bs-btn-border-color: var(--af-ok); --bs-btn-hover-bg:#188a4f; --bs-btn-hover-border-color:#188a4f; }
.btn-accent { --bs-btn-bg: var(--af-agua); --bs-btn-border-color: var(--af-agua); --bs-btn-color:#fff; --bs-btn-hover-bg:#15909f; --bs-btn-hover-border-color:#15909f; --bs-btn-hover-color:#fff; }
.btn-soft-primary { color: var(--af-azul); background: var(--af-azul-claro); border: none; }
.btn-soft-primary:hover { color: #fff; background: var(--af-azul); }
.btn-outline-primary { --bs-btn-color: var(--af-azul); --bs-btn-border-color: #c4d6ea; --bs-btn-hover-bg: var(--af-azul); --bs-btn-hover-border-color: var(--af-azul); }

/* Tablas */
.table { font-size: .85rem; }
.table > thead th, .table > thead.table-light th { background: var(--af-azul-d); color: #fff; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--af-agua); padding: .55rem .7rem; }
.table-sm > :not(caption) > * > * { padding: .48rem .65rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--af-gris-suave); }
.table-hover > tbody > tr:hover > * { background: var(--af-azul-claro); }

/* Badges suaves */
.bg-success-subtle { background: #def1e5 !important; } .text-success { color: var(--af-ok) !important; }
.bg-warning-subtle { background: #fbeed6 !important; } .text-warning { color: var(--af-warn) !important; }
.bg-danger-subtle  { background: #fbe2e1 !important; } .text-danger  { color: var(--af-alert) !important; }
.bg-primary-subtle { background: var(--af-azul-claro) !important; } .text-primary { color: var(--af-azul) !important; }
.bg-info-subtle    { background: var(--af-agua-suave) !important; } .text-info { color: var(--af-agua) !important; }
.badge { font-weight: 600; font-size: .72rem; padding: .35em .6em; border-radius: 6px; }

/* Forms */
.form-label { font-weight: 600; font-size: .82rem; color: #5a6573; margin-bottom: .3rem; }
.form-control, .form-select { border-color: #d8e0ea; border-radius: 8px; font-size: .88rem; }
.form-control:focus, .form-select:focus { border-color: var(--af-agua); box-shadow: 0 0 0 .2rem rgba(26,163,181,.14); }
.input-group-text { background: var(--af-azul-claro); border-color: #d8e0ea; color: var(--af-azul); }

/* Alerts */
.alert { border: none; border-left: 4px solid; border-radius: 8px; }
.alert-success { background: #e7f6ee; border-left-color: var(--af-ok); color: #156c3e; }
.alert-danger  { background: #fceceb; border-left-color: var(--af-alert); color: #9b332f; }
.alert-warning { background: #fdf4e3; border-left-color: var(--af-warn); color: #8a6116; }
.alert-info    { background: var(--af-agua-suave); border-left-color: var(--af-agua); color: #0f6674; }

.af-ok  { color: var(--af-ok); font-weight: 600; }
.af-bad { color: var(--af-alert); font-weight: 600; }

/* Tabs institucionales */
.nav-tabs { border-bottom: 1px solid var(--af-gris-borde); gap: 2px; }
.nav-tabs .nav-link { color: #607590; font-weight: 500; font-size: .85rem; border: none; border-bottom: 3px solid transparent; padding: .6rem 1rem; }
.nav-tabs .nav-link:hover { color: var(--af-azul); background: var(--af-gris-suave); }
.nav-tabs .nav-link.active { color: var(--af-azul-d); font-weight: 600; background: transparent; border-bottom: 3px solid var(--af-agua); }

/* ============================================================
   LOGIN — paleta SÓLIDA idéntica al layout (sin degradado)
   ============================================================ */
.af-login-body { min-height: 100vh; margin: 0; background: var(--af-azul-dd); display: flex; }
/* CAPTCHA de acceso: altura fija + width auto +
   object-fit contain para NO estirar ni cortar los 6 caracteres (proporción 260:80). */
.af-captcha-img { height: 80px; width: auto; aspect-ratio: 260 / 80; object-fit: contain;
    display: block; border: 1.5px solid #CFD8DC; border-radius: 8px; background: #F4F7FB; }
.af-captcha-refresh { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    height: 44px; width: 44px; border: 1.5px solid #CFD8DC; border-radius: 8px;
    color: var(--af-azul-d); background: #fff; font-size: 1.3rem; text-decoration: none; transition: background .15s var(--af-ease); }
.af-captcha-refresh:hover { background: #EAF2FB; color: var(--af-azul-d); }
.af-captcha-input { letter-spacing: .18em; font-weight: 600; text-transform: uppercase; }
.af-captcha-input::placeholder { letter-spacing: normal; font-weight: 400; text-transform: none; }
/* Requisitos de contraseña (reset) con feedback en vivo */
.af-pass-reqs { list-style: none; margin: 0; padding: 0; }
.af-pass-reqs li { display: flex; align-items: center; gap: .15rem; font-size: .76rem; color: #9aa6b6; line-height: 1.6; }
.af-pass-reqs li i { font-size: 1rem; }
.af-pass-reqs li.ok { color: var(--af-ok); }
/* Sufijo de unidad en inputs de perfil (para leer el formato correcto según unidad) */
.af-unit-suffix { font-size: .68rem; color: #8794a5; background: var(--af-gris-suave);
    border-color: #d8e0ea; min-width: 52px; justify-content: center; }
.af-login-split { display: flex; width: 100%; min-height: 100vh; }
/* ---------------------------------------------------------------
   Panel institucional — FONDO BLANCO. Sin degradados, sin circulo.
   Solo una linea vertical (border-right) separa el panel del form.
   --------------------------------------------------------------- */
.af-login-aside {
    flex: 1; color: var(--af-azul-d);
    background-color: #ffffff;
    display: flex; flex-direction: column; justify-content: space-between; padding: 3rem 3.5rem;
    position: relative; overflow: hidden;
    border-right: 1px solid var(--af-gris-borde);
}
/* (Patrón de puntos eliminado a pedido del usuario: se veía como "líneas punteadas") */
/* Franja de acento vertical junto a la línea divisoria */
.af-login-aside::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0;
    width: 2px; background-color: var(--af-agua); pointer-events: none;
}
.af-login-hero { position: relative; z-index: 1; margin: auto 0; max-width: 460px; }
/* Píldoras de características del sistema (colores sólidos institucionales) */
.af-login-features { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.af-login-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background-color: var(--af-agua-suave); color: var(--af-azul-d);
    border: 1px solid #cfeaf0; border-radius: 999px;
    padding: .38rem .85rem; font-size: .8rem; font-weight: 600;
}
.af-login-chip i { color: var(--af-agua); font-size: 1rem; }
.af-login-wave { margin-bottom: 1.6rem; position: relative; }
.af-login-wave img {
    position: relative;
    height: auto !important; width: 100%; max-width: 340px; display: block;
    border-radius: 0 !important; box-shadow: none !important;
}
.af-login-aside h1 { font-family: var(--af-font-display); font-size: 2.4rem; font-weight: 800; margin: 0; color: var(--af-azul-d); letter-spacing: -.5px; }
.af-login-sep { width: 60px; height: 4px; background: var(--af-agua); border-radius: 2px; margin: 1.1rem 0; }
.af-login-lead { color: #234b6e; font-size: 1.08rem; line-height: 1.5; margin: 0 0 1rem; font-weight: 500; }
.af-login-sub { color: #5b7590; font-size: .92rem; line-height: 1.6; margin: 0; }
.af-login-foot { position: relative; z-index: 1; display: flex; flex-direction: column; }
.af-login-foot-mark { font-family: var(--af-font-display); font-weight: 700; font-size: 1.05rem; color: var(--af-azul-d); letter-spacing: .02em; }
.af-login-foot small { color: #7c93a8; font-size: .72rem; }

.af-login-panel { width: 480px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
.af-login-card { width: 100%; max-width: 370px; }
.af-login-brand { color: var(--af-azul-d); font-weight: 700; font-family: var(--af-font-display); }
.af-login-forgot { font-size: .78rem; color: var(--af-azul); text-decoration: none; }
.af-login-forgot:hover { text-decoration: underline; }
.af-login-inst { display: flex; align-items: center; gap: .5rem; justify-content: center;
    padding: .6rem; border: 1px solid var(--af-gris-borde); border-radius: var(--af-radius);
    background: var(--af-gris-suave); color: var(--af-azul-d); font-weight: 600; font-size: .82rem; }
.af-login-inst i { color: var(--af-agua); font-size: 1.1rem; }
@media (max-width: 860px) { .af-login-aside { display: none; } .af-login-panel { width: 100%; } }

/* ============================================================
   GALERÍA / CATÁLOGO / COMUNIDAD (cards de contenido)
   ============================================================ */
.af-tile { background:#fff; border:1px solid var(--af-gris-borde); border-radius:12px; overflow:hidden; box-shadow:var(--af-shadow-sm); transition:box-shadow .2s, transform .2s; height:100%; }
.af-tile:hover { box-shadow:var(--af-shadow); transform:translateY(-3px); }
.af-tile__img { height:140px; background:var(--af-azul-claro); display:flex; align-items:center; justify-content:center; color:var(--af-azul); font-size:3rem; }
.af-tile__body { padding:.9rem 1rem; }
.af-tile__title { font-weight:600; color:var(--af-azul-d); font-size:.95rem; margin:0 0 .25rem; }
.af-tile__meta { font-size:.78rem; color:#8794a5; }

/* Cards del Centro de reportes: dato real + acción, sin bloque vacío */
.af-rep-card { background:#fff; border:1px solid var(--af-gris-borde); border-radius:12px; padding:1.1rem 1.15rem 1rem;
    box-shadow:var(--af-shadow-sm); transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column;
    border-top:3px solid var(--af-azul); }
.af-rep-card:hover { box-shadow:var(--af-shadow); transform:translateY(-3px); }
.af-rep-card--pdf { border-top-color:var(--af-alert); }
.af-rep-card--xls { border-top-color:var(--af-ok); }
.af-rep-card--tag { border-top-color:var(--af-azul); }
.af-rep-card__head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.af-rep-card__icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; flex-shrink:0; }
.af-rep-card--pdf .af-rep-card__icon { background:#fde3e3; color:var(--af-alert); }
.af-rep-card--xls .af-rep-card__icon { background:#def1e5; color:var(--af-ok); }
.af-rep-card--tag .af-rep-card__icon { background:var(--af-azul-claro); color:var(--af-azul); }
.af-rep-card__stat { text-align:right; line-height:1.1; }
.af-rep-card__stat b { display:block; font-family:var(--af-font-display); font-size:1.45rem; font-weight:700; color:var(--af-texto-fuerte); }
.af-rep-card__stat span { font-size:.68rem; color:var(--af-gris-texto); text-transform:uppercase; letter-spacing:.02em; }
.af-rep-card__title { font-weight:700; color:var(--af-azul-d); font-size:.98rem; margin:0 0 .3rem; }
.af-rep-card__meta { font-size:.8rem; color:var(--af-gris-texto); line-height:1.5; margin:0 0 .9rem; flex-grow:1; }
.af-rep-card__foot { display:flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:600; color:var(--af-azul);
    padding-top:.65rem; border-top:1px dashed var(--af-gris-borde); }
.af-rep-card__foot i { font-size:1rem; }

.af-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:20px; font-size:.72rem; font-weight:500; background:var(--af-azul-claro); color:var(--af-azul); }

/* Timeline (etapas) */
.af-stage { display:flex; gap:1rem; padding:1.2rem 1.3rem; border:1px solid var(--af-gris-borde); border-radius:14px; background:#fff; box-shadow:var(--af-shadow-sm); margin-bottom:1.1rem; position:relative; transition:box-shadow .2s var(--af-ease), transform .2s var(--af-ease); }
.af-stage:hover { box-shadow:var(--af-shadow-md); transform:translateY(-2px); }
.af-stage__num { width:54px; height:54px; border-radius:14px; background:var(--af-agua-suave); color:var(--af-agua); display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
/* Timeline conectada: línea vertical entre etapas (guía de etapas) */
.af-etapas-tl { position:relative; padding-left:8px; }
.af-etapas-tl .af-stage::before { content:""; position:absolute; left:38px; top:-1.1rem; height:1.1rem; width:2px; background:var(--af-gris-borde); }
.af-etapas-tl .af-stage:first-child::before { display:none; }
.af-stage__num--1 { background:var(--af-agua-suave); color:var(--af-agua); }
.af-stage__num--2 { background:var(--af-azul-claro); color:var(--af-azul); }
.af-stage__num--3 { background:#e8f5e9; color:#2e7d32; }
.af-stage__num--4 { background:#fff3e0; color:#e0902a; }
.af-stage__req { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:var(--af-radius-pill);
    font-size:.72rem; font-weight:600; background:var(--af-gris-suave); color:var(--af-gris-texto); }

/* Post comunidad */
.af-post { background:#fff; border:1px solid var(--af-gris-borde); border-radius:12px; padding:1.1rem 1.2rem; margin-bottom:1rem; box-shadow:var(--af-shadow-sm); transition:box-shadow .2s var(--af-ease), transform .2s var(--af-ease); }
.af-post:hover { box-shadow:var(--af-shadow-md); transform:translateY(-2px); }
.af-post__head { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.af-post__avatar { width:40px; height:40px; border-radius:12px; background:var(--af-azul); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; }
.af-post__avatar--a { background:linear-gradient(135deg,var(--af-azul-d),var(--af-azul-medio)); }
.af-post__avatar--b { background:linear-gradient(135deg,var(--af-agua),var(--af-agua-claro)); }
.af-post__avatar--c { background:linear-gradient(135deg,#2e7d32,#66bb6a); }
.af-post__avatar--d { background:linear-gradient(135deg,#e0902a,#f3b14e); }
.af-post__title { color:var(--af-azul-d); font-family:var(--af-font-display); font-weight:600; font-size:1.05rem; text-decoration:none; }
.af-post__title:hover { text-decoration:underline; }
.af-post__foot { display:flex; gap:1.2rem; align-items:center; padding-top:.7rem; margin-top:.4rem; border-top:1px solid var(--af-gris-borde); font-size:.82rem; color:var(--af-gris-texto); }
.af-widget { background:#fff; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-md); padding:1.1rem; box-shadow:var(--af-shadow-sm); margin-bottom:1rem; }
.af-widget__title { font-family:var(--af-font-display); font-size:1rem; font-weight:600; color:var(--af-azul-d); margin:0 0 .8rem; display:flex; align-items:center; justify-content:space-between; }
.af-trend-item { display:flex; align-items:center; justify-content:space-between; padding:.5rem .6rem; border-radius:var(--af-radius); text-decoration:none; transition:background .15s var(--af-ease); }
.af-trend-item:hover { background:var(--af-gris-suave); }
.af-trend-item b { color:var(--af-azul); font-weight:600; font-size:.88rem; }
.af-trend-item span { color:#9aa6b6; font-size:.76rem; }
/* Tip informativo estático (no es link, no finge navegación) */
.af-tip { display:flex; align-items:flex-start; gap:.55rem; padding:.45rem .2rem; }
.af-tip > i { color:var(--af-ok); font-size:1.05rem; margin-top:1px; flex-shrink:0; }
.af-tip b { display:block; color:var(--af-texto-fuerte); font-weight:600; font-size:.85rem; line-height:1.3; }
.af-tip span { color:#9aa6b6; font-size:.76rem; }
/* Fila de parámetro configurable (Admin → Parámetros) */
.af-param { display:flex; align-items:flex-start; gap:.75rem; padding:.85rem 0; border-bottom:1px dashed var(--af-gris-borde); }
.af-param:last-child { border-bottom:none; padding-bottom:0; }
.af-param__icon { width:38px; height:38px; border-radius:10px; background:var(--af-azul-claro); color:var(--af-azul);
    display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.af-param__body { flex-grow:1; min-width:0; }
.af-param__name { display:block; font-weight:600; color:var(--af-texto-fuerte); font-size:.88rem; margin:0; }
.af-param__desc { font-size:.74rem; color:var(--af-gris-texto); line-height:1.4; }
.af-param__control { width:190px; flex-shrink:0; }
.af-param__code { text-align:right; margin-top:3px; }
.af-param__code code { font-size:.62rem; color:#9aa6b6; }
/* Paginación cliente reutilizable (data-paginate) */
.af-pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
    padding:.7rem 1rem; border-top:1px solid var(--af-gris-borde); }
.af-pager__info { font-size:.78rem; color:var(--af-gris-texto); }
.af-pager__btns { display:flex; align-items:center; gap:.5rem; }
.af-pager__pos { font-size:.78rem; color:var(--af-gris-texto); }
.af-pager__btn { padding:.3rem .7rem; font-size:.78rem; font-weight:600; border:1px solid var(--af-gris-borde);
    background:#fff; color:var(--af-azul); border-radius:var(--af-radius); cursor:pointer; transition:background .15s var(--af-ease); }
.af-pager__btn:hover:not(:disabled) { background:var(--af-azul-claro); }
.af-pager__btn:disabled { color:#b8c1cd; cursor:default; }
.af-online-dot { width:8px; height:8px; border-radius:50%; background:var(--af-ok); display:inline-block; }

/* ============================================================
   FORMULADOR — componentes ricos
   ============================================================ */
/* Tarjeta de especie seleccionable */
/* --- Selector de especie COMPACTO (chips en dos niveles) --- */
/* Tabs de grupo de animal */
.af-grupo-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; border-bottom:1px solid var(--af-gris-borde); padding-bottom:.7rem; }
.af-grupo-tab { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:var(--af-radius-pill);
    font-size:.82rem; font-weight:600; color:var(--af-gris-texto); background:var(--af-gris-suave);
    border:1px solid transparent; text-decoration:none; transition:all .15s var(--af-ease); cursor:pointer; }
.af-grupo-tab i { font-size:1rem; }
.af-grupo-tab:hover { background:var(--af-azul-claro); color:var(--af-azul-d); }
.af-grupo-tab.sel { background:var(--af-azul); color:#fff; box-shadow:var(--af-shadow-sm); }
.af-grupo-tab .af-grupo-tab__n { font-size:.66rem; opacity:.7; }
.af-grupo-tab.sel .af-grupo-tab__n { opacity:.85; }

/* Chips de especie (compactos, no cards grandes) */
.af-especie-grid { display:flex; flex-wrap:wrap; gap:.5rem; }
.af-especie { display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .85rem;
    border:1.5px solid var(--af-gris-borde); border-radius:var(--af-radius); background:#fff;
    cursor:pointer; transition:all .15s var(--af-ease); text-decoration:none; min-width:0; }
.af-especie:hover { border-color:var(--af-azul-medio); background:var(--af-gris-suave); }
.af-especie.sel { border-color:var(--af-azul); background:var(--af-azul-claro); box-shadow:var(--af-shadow-sm); }
.af-especie__img { width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:var(--af-agua-suave); display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; color:var(--af-agua); transition:all .15s var(--af-ease); }
.af-especie.sel .af-especie__img { background:var(--af-azul); color:#fff; }
.af-especie__txt { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.af-especie__name { font-weight:600; color:var(--af-azul-d); font-size:.86rem; white-space:nowrap; }
.af-especie__sci { font-size:.68rem; color:#8a94a6; font-style:italic; white-space:nowrap; }

/* Pills de etapa */
.af-pills { display: flex; flex-wrap: wrap; gap: var(--af-sp-2); }
.af-pill { padding: .5rem 1.1rem; border: 1px solid var(--af-gris-borde); border-radius: var(--af-radius-pill);
    background: #fff; color: #5a6573; font-size: .85rem; font-weight: 500; cursor: pointer; transition: all var(--af-dur-fast); }
.af-pill:hover { border-color: var(--af-azul-medio); color: var(--af-azul); }
.af-pill.sel { background: var(--af-azul); border-color: var(--af-azul); color: #fff; }
/* CONTRASTE en estado seleccionado con fondo AZUL SÓLIDO: el texto secundario
   dentro (.text-muted, small, el sufijo "(–+ g)", el contador) debe verse
   blanco, no gris. El gris de Bootstrap sobre azul quedaba ILEGIBLE.
   Solo aplica a controles con fondo azul sólido (pills y tabs de grupo). */
.af-pill.sel,
.af-pill.sel *,
.af-pill.sel .text-muted,
.af-pill.sel small,
.af-grupo-tab.sel,
.af-grupo-tab.sel *,
.af-grupo-tab.sel .af-grupo-tab__n {
    color: rgba(255,255,255,.85) !important;
}
.af-pill.sel > *:first-child { color: #fff !important; }

/* Fila de ingrediente con slider */
.af-ing-row { display: flex; align-items: center; gap: var(--af-sp-3); padding: var(--af-sp-3) 0;
    border-bottom: 1px solid var(--af-gris-suave); }
.af-ing-row__icon { width: 40px; height: 40px; border-radius: var(--af-radius); flex-shrink: 0;
    background: var(--af-azul-claro); color: var(--af-azul); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.af-ing-row__info { flex: 1; min-width: 0; }
.af-ing-row__name { font-weight: 600; color: var(--af-texto-fuerte); font-size: .88rem; }
.af-ing-row__meta { font-size: .74rem; color: #8a94a6; }
.af-ing-row__pct { font-weight: 700; color: var(--af-azul); font-size: 1rem; min-width: 56px; text-align: right; }
/* Número de orden del insumo en la composición */
.af-ing-row__num { flex-shrink:0; width:24px; height:24px; border-radius:50%;
    background:var(--af-azul-claro); color:var(--af-azul-d); font-size:.72rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; }

/* ---- Paso 3 (resultado): composición scrollea; costo+semáforo fijos ---- */
.af-result-body { overflow: visible; }               /* no scroll global en el paso 3 */
.af-result-row { align-items: flex-start; }
/* La columna derecha (costo + semáforo) queda fija al hacer scroll de la página.
   Se ACOTA su alto al viewport y se organiza como flex-column: el panel de costo es
   fijo y el card del semáforo toma el resto y scrollea internamente si hiciera falta,
   de modo que NUNCA se corte la última fila (p. ej. "Proteína Bruta"). */
@media (min-width: 992px) {
    .af-result-col--fija { position: sticky; top: .25rem; align-self: flex-start;
        display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
    .af-result-col--fija > .af-cost-panel { flex: 0 0 auto; }
    .af-result-col--fija > .card { flex: 1 1 auto; display: flex; flex-direction: column;
        min-height: 0; overflow: hidden; }
    .af-result-col--fija > .card > .card-header { flex: 0 0 auto; }
    .af-result-col--fija > .card > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto;
        scrollbar-width: thin; }
    .af-result-col--fija > .card > .card-body::-webkit-scrollbar { width: 8px; }
    .af-result-col--fija > .card > .card-body::-webkit-scrollbar-thumb { background: var(--af-gris-borde); border-radius: 4px; }
}
/* La tarjeta de composición es un CONTENEDOR CERRADO (borde + header sólido, igual que
   "Ajustes avanzados"). Limita su alto al de la columna derecha (costo + semáforo) para
   que ambas columnas queden a la par, y su cuerpo scrollea de forma independiente. */
.af-comp-card { display:flex; flex-direction:column; max-height: calc(100vh - 300px);
    border: 1px solid var(--af-gris-borde); border-radius: var(--af-radius-lg); overflow: hidden; }
/* El header (título "Composición de la mezcla" + conteo) queda FIJO: no scrollea con la
   lista. `flex:0 0 auto` lo mantiene fuera del área scrollable; `position:sticky` es un
   refuerzo por si el cuerpo scrollea de otra forma. */
.af-comp-card > .card-header { background: var(--af-gris-suave); border-bottom: 1px solid var(--af-gris-borde);
    padding: .6rem 1rem; flex: 0 0 auto; position: sticky; top: 0; z-index: 2; }
.af-comp-card > .card-header .card-title { font-size: .95rem; }
.af-comp-scroll { overflow-y: auto; scrollbar-width: thin; flex: 1 1 auto; min-height: 0; }
.af-comp-scroll::-webkit-scrollbar { width: 8px; }
.af-comp-scroll::-webkit-scrollbar-thumb { background: var(--af-gris-borde); border-radius: 4px; }
/* Filas de composición un poco más compactas para que quepan más sin scroll. */
.af-comp-scroll .af-ing-row { padding-top: .5rem; padding-bottom: .5rem; }

/* Alternativas por categoría faltante (estado infactible del paso 3). */
.af-falt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.af-falt-item { border: 1px solid var(--af-gris-borde); border-radius: var(--af-radius); padding: .6rem .75rem;
    background: var(--af-gris-suave); }
.af-falt-item__cat { font-weight: 700; color: var(--af-azul-d); font-size: .9rem; }
.af-falt-item__cat i { color: var(--af-verde, #2e9e5b); }
.af-falt-item__why { font-size: .78rem; color: #5b7590; margin: .15rem 0 .3rem; line-height: 1.3; }
.af-falt-item__ej { font-size: .78rem; color: var(--af-texto-fuerte); font-weight: 500; }

/* Panel de costo grande */
.af-cost-panel { background: var(--af-azul-d); color: #fff; border-radius: var(--af-radius-lg);
    padding: var(--af-sp-5); text-align: center; }
.af-cost-panel__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #9fc0e0; }
.af-cost-panel__value { font-family: var(--af-font-display); font-size: 2.8rem; font-weight: 700; line-height: 1.1; margin: .3rem 0; }
.af-cost-panel__sub { font-size: .8rem; color: #aecbe5; }
/* En el paso 3 (resultado) el panel de costo es más compacto para dejar ver el
   semáforo nutricional sin necesidad de hacer scroll en la columna derecha. */
.af-result-col .af-cost-panel { padding: 1rem 1.2rem; }
.af-result-col .af-cost-panel__value { font-size: 2.1rem; margin: .1rem 0; }
.af-result-col .af-cost-panel__label { font-size: .68rem; }
.af-result-col .af-cost-panel__sub { font-size: .74rem; }

/* Semáforo nutricional */
.af-sem-row { padding: .6rem 0; border-bottom: 1px solid var(--af-gris-suave); }
.af-sem-row:last-child { border-bottom: 0; padding-bottom: 0; }
.af-sem-row__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
/* En el resultado, el card del semáforo va como contenedor cerrado y compacto para que
   costo + semáforo quepan juntos sin scroll en la columna derecha. */
.af-result-col > .card { border: 1px solid var(--af-gris-borde); border-radius: var(--af-radius-lg); }
.af-result-col > .card > .card-header { background: var(--af-gris-suave); border-bottom: 1px solid var(--af-gris-borde); padding: .55rem 1rem; }
.af-result-col > .card > .card-header .card-title { font-size: .95rem; margin: 0; }
.af-result-col > .card > .card-body { padding: .5rem 1rem .7rem; }
.af-result-col .af-sem-row { padding: .42rem 0; }
.af-sem-row__name { font-weight: 600; font-size: .82rem; color: var(--af-texto-fuerte); }
.af-sem-row__tag { font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: var(--af-radius-pill); text-transform: uppercase; }
.af-sem-row__tag.ok { background: #def1e5; color: var(--af-ok); }
.af-sem-row__tag.warn { background: #fbeed6; color: var(--af-warn); }
.af-sem-row__tag.bad { background: #fde3e3; color: var(--af-alert); }
.af-sem-bar { height: 6px; background: var(--af-gris-suave); border-radius: 3px; overflow: hidden; }
.af-sem-bar__fill { height: 100%; border-radius: 3px; }
.af-sem-bar__fill.ok { background: var(--af-ok); } .af-sem-bar__fill.warn { background: var(--af-warn); } .af-sem-bar__fill.bad { background: var(--af-alert); }
.af-sem-row__req { font-size: .74rem; color: var(--af-azul-d); margin-top: 3px; }
.af-sem-row__req b { font-variant-numeric: tabular-nums; }
.af-sem-row__meta { color: #9aa6b5; font-weight: 500; }

/* Stepper */
.af-stepper { display: flex; align-items: center; gap: 0; margin-bottom: var(--af-sp-4); }
.af-step { display: flex; align-items: center; gap: .5rem; }
.af-step__num { width: 28px; height: 28px; border-radius: 50%; background: var(--af-gris-borde); color: #8a94a6;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; }
.af-step.active .af-step__num { background: var(--af-azul); color: #fff; }
.af-step.done .af-step__num { background: var(--af-ok); color: #fff; }
.af-step__label { font-size: .82rem; color: #8a94a6; font-weight: 500; }
.af-step.active .af-step__label { color: var(--af-azul-d); font-weight: 600; }
.af-step__line { width: 50px; height: 2px; background: var(--af-gris-borde); margin: 0 .6rem; }

/* ============================================================
   WIZARD GUIADO (formulador paso-a-paso)
   ============================================================ */

/* --- Modo "una pantalla": el wizard ocupa el alto visible y NUNCA
   esconde los botones. El card se vuelve una columna flex de altura
   acotada; el stepper y el footer quedan fijos, y solo el contenido
   del paso hace scroll interno. Alto disponible = viewport
   - topbar - (título de página + sus márgenes) - respiro inferior. --- */
:root { --af-wiz-reserva: 150px; }   /* topbar 64 + page-title-box compacto + aire mínimo */
.af-wiz-card { margin-bottom:0; display:flex; flex-direction:column;
    height:calc(100vh - var(--af-wiz-reserva)); min-height:440px; overflow:hidden; }
/* Pantallas cortas (portátiles con barra de tareas): que el card ceda y no
   empuje el footer fuera; el scroll interno absorbe el contenido. */
@media (max-height: 700px) { .af-wiz-card { min-height:0; } }
.af-wiz-card > .card-body { flex:1; display:flex; flex-direction:column; min-height:0;
    padding:1.1rem 1.6rem 0; }
.af-wiz-card #af-form { flex:1; display:flex; flex-direction:column; min-height:0; }
/* El pane activo es la columna que crece; su cuerpo scrollea, cabeza y pie no. */
.af-wiz-card .af-wiz-pane.active { flex:1; display:flex; flex-direction:column; min-height:0; }
.af-wiz-body { flex:1; overflow-y:auto; min-height:0; padding-right:.25rem;
    scrollbar-width:thin; scrollbar-color:var(--af-gris-borde) transparent; }
.af-wiz-body::-webkit-scrollbar { width:8px; }
.af-wiz-body::-webkit-scrollbar-thumb { background:var(--af-gris-borde); border-radius:4px; }
.af-wiz-card .af-wiz-foot { margin-top:0; flex-shrink:0;
    padding:1rem 0 1.1rem; background:#fff; }
/* Paso 2: UN SOLO scroll (el del cuerpo). El grid de insumos NO tiene scroll
   propio: fluye dentro del cuerpo para que "Ajustes avanzados" (incluidos los
   % de inclusión) queden siempre accesibles sin doble barra. */
.af-wiz-body--flex { display:block; overflow-y:auto; }
.af-wiz-card .af-scrollable-list { max-height:none; min-height:0; }
.af-help--sm { padding:.4rem .7rem; margin-bottom:.6rem; }
.af-help--sm p { font-size:.75rem; }
/* Composición nutricional (editor de matriz por insumo) */
.af-cmp-grupo { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--af-agua); margin:.6rem 0 .35rem; display:flex; align-items:center; gap:.4rem; }
.af-cmp-grupo::after { content:""; flex:1; height:1px; background:var(--af-gris-borde); }
.cmp-val.cmp-saving { opacity:.6; }
/* Chips de preselección de insumos por etapa */
.af-presel-chip { display:flex; align-items:center; gap:.4rem; margin:0; padding:.4rem .6rem; cursor:pointer;
    border:1.5px solid var(--af-gris-borde); border-radius:var(--af-radius); transition:all .15s var(--af-ease); }
.af-presel-chip:hover { background:var(--af-gris-suave); }
.af-presel-chip input { margin:0; flex-shrink:0; }
.af-presel-chip.sel { border-color:var(--af-azul); background:var(--af-azul-claro); }
.af-presel-chip__name { font-size:.8rem; font-weight:500; color:var(--af-texto-fuerte); flex:1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.af-presel-chip.sel .af-presel-chip__name { color:var(--af-azul-d); }
.af-presel-chip__price { font-size:.68rem; color:var(--af-gris-texto); flex-shrink:0; }
.af-wiz-foot__hint { font-size:.8rem; color:var(--af-gris-texto); display:inline-flex; align-items:center; }
.af-wiz-foot--save { align-items:flex-end; }
@media (max-width: 575px) { .af-wiz-foot__hint { display:none; }
    .af-wiz-foot--save { flex-direction:column; align-items:stretch; gap:.6rem; }
    .af-wiz-foot--save .flex-grow-1 { max-width:none !important; } }
/* Stepper más compacto para dejar aire al contenido. */
.af-wiz-card .af-wiz-nav { margin-bottom:.8rem; }
.af-wiz-card .af-wiz-step__circle { width:40px; height:40px; font-size:1.05rem; }
.af-wiz-card .af-wiz-line { margin-top:20px; }
.af-wiz-card .af-wiz-head { margin-bottom:.8rem; }

.af-wiz-nav { display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:600px; margin:0 auto 1.4rem; }
.af-wiz-step { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; position:relative; z-index:2; }
.af-wiz-step__circle { width:46px; height:46px; border-radius:50%; background:#fff; border:2px solid var(--af-gris-borde);
    display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#9aa6b6; transition:all .25s var(--af-ease); }
.af-wiz-step.active .af-wiz-step__circle { border-color:var(--af-azul); background:var(--af-azul-claro); color:var(--af-azul); box-shadow:0 0 0 4px rgba(10,77,140,.12); }
.af-wiz-step.done .af-wiz-step__circle { border-color:var(--af-ok); background:var(--af-ok); color:#fff; }
.af-wiz-step__lbl { font-size:.7rem; font-weight:600; color:#9aa6b6; margin-top:.4rem; text-align:center; max-width:100px; }
.af-wiz-step.active .af-wiz-step__lbl { color:var(--af-azul-d); }
.af-wiz-step.done .af-wiz-step__lbl { color:var(--af-ok); }
.af-wiz-line { flex:1 1 auto; height:2px; background:var(--af-gris-borde); margin:23px .25rem 0; transition:background .25s var(--af-ease); min-width:36px; }
.af-wiz-line.done { background:var(--af-ok); }
/* Encabezado del paso */
.af-wiz-head { text-align:center; margin-bottom:1.1rem; }
.af-wiz-head h5 { font-family:var(--af-font-display); color:var(--af-azul-d); font-weight:700; font-size:1.1rem; margin:0; }
.af-wiz-head p { color:var(--af-gris-texto); font-size:.85rem; margin:.2rem 0 0; }
/* Paso 1 compacto: menos aire entre secciones para que quepan Tipo+Especie+Etapa
   sin scroll. Los labels de sección más juntos y las grillas con menos margen. */
#pane1 .form-label { margin-bottom:.45rem !important; font-size:.82rem; }
#pane1 .af-grupo-tabs { margin-bottom:.7rem; padding-bottom:.55rem; }
#pane1 .af-especie-grid { margin-bottom:.85rem !important; }
#pane1 .af-especie { padding:.4rem .7rem; }
#pane1 .af-especie__img { width:30px; height:30px; }
#pane1 .af-pill { padding:.4rem .9rem; }
#pane1 .form-label:not(:first-of-type) { margin-top:.3rem; }
/* Panel de paso (oculto salvo el activo) */
.af-wiz-pane { display:none; }
.af-wiz-pane.active { display:block; animation:afFade .25s var(--af-ease); }
@keyframes afFade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
/* Barra de navegación inferior */
.af-wiz-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--af-gris-borde); }
/* Caja de ayuda contextual */
.af-help { display:flex; align-items:flex-start; gap:.55rem; background:var(--af-agua-suave); border:1px solid #bfe6ec;
    border-radius:var(--af-radius); padding:.55rem .8rem; margin-bottom:.85rem; }
.af-help i { color:var(--af-agua); font-size:1.1rem; flex-shrink:0; margin-top:1px; }
.af-help p { margin:0; font-size:.8rem; color:#1b6772; line-height:1.4; }
.af-help--sm { padding:.45rem .7rem; margin-bottom:.7rem; }
.af-help--sm p { font-size:.76rem; }

/* Catálogo: tile con imagen/icono grande */
.af-tile__img { height: 150px; background: linear-gradient(135deg, var(--af-azul-claro), var(--af-agua-suave));
    display: flex; align-items: center; justify-content: center; font-size: 3.4rem; }

.af-esp-grupo { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--af-agua); margin:.5rem 0 .4rem; display:flex; align-items:center; gap:.4rem; }
.af-esp-grupo::after { content:""; flex:1; height:1px; background:var(--af-gris-borde); }
@media (max-width: 575px) { .af-especie-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CATÁLOGO ENRIQUECIDO — card de ingrediente
   ============================================================ */
.af-ing-card { background:#fff; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-md);
    overflow:hidden; box-shadow:var(--af-shadow-sm); transition:box-shadow .2s var(--af-ease), transform .2s var(--af-ease);
    height:100%; display:flex; flex-direction:column; }
.af-ing-card:hover { box-shadow:var(--af-shadow-md); transform:translateY(-4px); }
.af-ing-card__media { height:160px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; }
.af-ing-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--af-ease); }
.af-ing-card:hover .af-ing-card__media img { transform:scale(1.08); }
.af-ing-card__icon { font-size:3.6rem; color:#fff; opacity:.92; filter:drop-shadow(0 2px 6px rgba(0,28,58,.25)); }
/* Gradientes por categoría (sin imagen) */
.af-media--proteico_animal { background:linear-gradient(135deg, var(--af-azul-d), var(--af-azul-medio)); }
.af-media--proteico_vegetal { background:linear-gradient(135deg, #2e7d32, #66bb6a); }
.af-media--energetico { background:linear-gradient(135deg, #e0902a, #f3b14e); }
.af-media--mineral { background:linear-gradient(135deg, #546e7a, #90a4ae); }
.af-media--aditivo { background:linear-gradient(135deg, var(--af-agua), var(--af-agua-claro)); }
.af-media--ligante { background:linear-gradient(135deg, #6d4c41, #a1887f); }
.af-media--default { background:linear-gradient(135deg, var(--af-azul-claro), var(--af-agua-suave)); }
.af-media--default .af-ing-card__icon { color:var(--af-azul); }
.af-ing-card__badge { position:absolute; top:12px; left:12px; padding:.25rem .65rem;
    background:rgba(0,28,58,.78); color:#fff; font-size:.64rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; border-radius:var(--af-radius-pill); backdrop-filter:blur(2px); }
.af-ing-card__disp { position:absolute; top:12px; right:12px; padding:.2rem .55rem; font-size:.62rem;
    font-weight:700; border-radius:var(--af-radius-pill); }
.af-disp--alta { background:rgba(28,157,91,.92); color:#fff; }
.af-disp--media { background:rgba(224,144,42,.92); color:#fff; }
.af-disp--estacional { background:rgba(186,26,26,.9); color:#fff; }
.af-ing-card__body { padding:1rem 1.1rem .6rem; display:flex; flex-direction:column; flex-grow:1; }
.af-ing-card__name { font-family:var(--af-font-display); font-weight:600; color:var(--af-texto-fuerte);
    font-size:1rem; line-height:1.25; margin:0 0 .35rem; }
.af-ing-card__sci { font-size:.74rem; font-style:italic; color:#8794a5; margin:0 0 .5rem; }
.af-ing-card__loc { font-size:.74rem; color:var(--af-gris-texto); display:flex; align-items:center; gap:.25rem; margin-bottom:.7rem; }
.af-ing-card__foot { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; }
.af-ing-card__price-lbl { font-size:.6rem; text-transform:uppercase; font-weight:700; color:#9aa6b6; letter-spacing:.05em; display:block; }
.af-ing-card__price { color:var(--af-azul); font-weight:700; font-size:1.3rem; line-height:1; }
.af-ing-card__price small { font-size:.78rem; font-weight:400; color:var(--af-gris-texto); }
.af-ing-card__incl { font-size:.7rem; color:var(--af-gris-texto); text-align:right; }
/* Acciones de la tarjeta: "Ver ficha" (ocupa el ancho) + botón de descarga PDF. */
.af-ing-card__actions { display:flex; gap:.4rem; margin:.7rem 0 0; align-items:stretch; }
.af-ing-card__cta { flex:1; display:flex; align-items:center; justify-content:center; padding:.6rem; text-align:center;
    border:1px solid var(--af-azul); color:var(--af-azul); background:transparent; font-weight:600; font-size:.82rem;
    border-radius:var(--af-radius); text-decoration:none; transition:all .18s var(--af-ease); }
.af-ing-card__cta:hover { background:var(--af-azul); color:#fff; }
.af-ing-card__dl { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:40px;
    border:1px solid #c0392b; color:#c0392b; background:transparent; border-radius:var(--af-radius);
    text-decoration:none; font-size:1.25rem; transition:all .18s var(--af-ease); }
.af-ing-card__dl:hover { background:#c0392b; color:#fff; }
.af-scrollable-list { max-height:380px; overflow-y:auto; }
.af-scrollable-list { max-height:380px; overflow-y:auto; }

/* ---- Grilla de insumos del Paso 2 del Formulador ----
   Muchos insumos visibles a la vez en tarjetas compactas seleccionables.
   Se usa !important en display para ganar sobre las reglas del tema base que
   ponen los <label> en inline (causaban que los insumos se vieran corridos). */
.af-ing-grid {
    display:grid !important; grid-template-columns:repeat(auto-fill, minmax(208px, 1fr));
    gap:.4rem; align-content:start; padding:.3rem;
    border:1px solid var(--af-gris-borde); border-radius:var(--af-radius);
}
.af-ing-grid .af-ins-chip {
    display:flex !important; align-items:center; gap:.5rem; padding:.4rem .55rem; margin:0; cursor:pointer;
    background:#fff; border:1.5px solid var(--af-gris-borde); border-radius:var(--af-radius-md);
    transition:border-color .15s var(--af-ease), background .15s var(--af-ease), box-shadow .15s var(--af-ease);
    position:relative; width:100%;
}
/* Oculta con !important para ganar sobre el display:flex !important del grid
   (el buscador del Paso 2 usa esta clase, no style.display). */
.af-ing-grid .af-ins-chip.af-oculto { display:none !important; }
.af-ins-chip:hover { border-color:var(--af-azul-medio); box-shadow:var(--af-shadow-sm); }
.af-ins-chip .form-check-input { margin:0; flex-shrink:0; width:1.15rem; height:1.15rem; cursor:pointer; }
/* Insumo seleccionado: resalta la tarjeta */
.af-ins-chip:has(.form-check-input:checked) { border-color:var(--af-azul); background:var(--af-azul-claro); }
.af-ins-chip__icon {
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1.05rem;
    background:var(--af-gris-suave); color:var(--af-azul);
}
.af-ins-chip__info { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.af-ins-chip__name {
    font-size:.86rem; font-weight:600; color:var(--af-azul-d);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.af-ins-chip__meta { font-size:.72rem; color:#8794a5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Color del ícono por categoría */
.af-ins-chip.cat-anim  .af-ins-chip__icon { background:#e3f0fb; color:#1f6fc4; }
.af-ins-chip.cat-veg   .af-ins-chip__icon { background:#e4f5ea; color:#2e9e63; }
.af-ins-chip.cat-ener  .af-ins-chip__icon { background:#fdf1dc; color:#c9880f; }
.af-ins-chip.cat-min   .af-ins-chip__icon { background:#eef0f3; color:#6b7686; }
.af-ins-chip.cat-adi   .af-ins-chip__icon { background:#f0e9fb; color:#7a4fd0; }
.af-ins-chip.cat-lig   .af-ins-chip__icon { background:#e6f5f6; color:#0e8a95; }
/* En el wizard, la grilla NO tiene scroll propio: fluye en el scroll del cuerpo
   para no crear doble barra y no atrapar los "Ajustes avanzados". */
.af-wiz-card .af-ing-grid { max-height:none; min-height:0; overflow:visible; flex:none; }

/* ---- Ajustes avanzados del Paso 2 ---- */
.af-adv { margin-top:.7rem; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius); overflow:hidden; }
/* Variante ARRIBA de la grilla: sin margen superior (va pegado a la barra de controles) y
   con margen inferior para separarlo de la lista de insumos. Su cuerpo, si es largo, scrollea
   internamente para no empujar la grilla demasiado hacia abajo. */
.af-adv--top { margin-top:0; margin-bottom:.7rem; }
.af-adv--top .af-adv__body { max-height:42vh; overflow-y:auto; scrollbar-width:thin; }
.af-adv--top .af-adv__body::-webkit-scrollbar { width:8px; }
.af-adv--top .af-adv__body::-webkit-scrollbar-thumb { background:var(--af-gris-borde); border-radius:4px; }

/* ------------------------------------------------------------
   Pestañas del paso 2 (Insumos | Ajustes avanzados). Separan la
   selección de insumos de los valores clave para que el usuario no
   tenga que scrollear toda la lista para llegar a los ajustes.
   ------------------------------------------------------------ */
/* La barra de pestañas del PASO 2 queda FIJA arriba al hacer scroll vertical del cuerpo,
   para poder cambiar de pestaña sin volver a subir. Fondo sólido + z-index para no
   transparentarse sobre la grilla. Se usa `#pane2 .af-tabs` para NO colisionar con la
   `.af-tabs` genérica (basada en .nav-link) definida más abajo para otras vistas. */
#pane2 .af-tabs { display:flex; gap:.25rem; border-bottom:2px solid var(--af-gris-borde); margin-bottom:.75rem;
    position:sticky; top:0; z-index:5; background:#fff; padding-top:.15rem; }
.af-tab { display:inline-flex; align-items:center; gap:.15rem; background:none; border:none;
    padding:.5rem .9rem; font-size:.9rem; font-weight:600; color:#6b7a8d;
    cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:6px 6px 0 0;
    transition:color .15s var(--af-ease), border-color .15s var(--af-ease), background .15s var(--af-ease); }
.af-tab:hover { color:var(--af-azul); background:var(--af-gris-suave); }
.af-tab.sel { color:var(--af-azul); border-bottom-color:var(--af-azul); }
.af-tab small { font-weight:500; }
.af-tab__badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
    padding:0 6px; border-radius:10px; background:var(--af-azul-claro); color:var(--af-azul);
    font-size:.72rem; font-weight:700; }
.af-tab.sel .af-tab__badge { background:var(--af-azul); color:#fff; }
.af-tab-pane { animation:af-fade-in .18s var(--af-ease); }
@keyframes af-fade-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.af-adv__toggle { display:flex; align-items:center; gap:.5rem; width:100%; background:var(--af-gris-suave);
    border:none; padding:.6rem .9rem; font-size:.85rem; font-weight:600; color:var(--af-azul-d); cursor:pointer; }
.af-adv__toggle:hover { background:#eef2f7; }
.af-adv__toggle .af-adv__chev { margin-left:auto; transition:transform .2s var(--af-ease); }
.af-adv__toggle.abierto .af-adv__chev { transform:rotate(180deg); }
.af-adv__body { padding:.85rem .9rem; border-top:1px solid var(--af-gris-borde); }
.af-adv__sec { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--af-agua); margin-bottom:.5rem; }
.af-adv__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.5rem; }
.af-adv__row { display:flex; flex-direction:column; gap:.25rem; background:#fff;
    border:1px solid var(--af-gris-borde); border-radius:var(--af-radius); padding:.45rem .6rem; }
.af-adv__lbl { font-size:.78rem; font-weight:600; color:var(--af-azul-d); }
.af-adv__inputs { display:flex; gap:.4rem; }
.af-adv__inputs .input-group { flex:1; }
.af-adv__inputs .input-group-text { font-size:.7rem; padding:.15rem .4rem; }
.af-adv__inputs .form-control { font-size:.8rem; padding:.2rem .4rem; }
.af-img-preview { width:100%; aspect-ratio:4/3; border-radius:var(--af-radius-md); overflow:hidden;
    border:1px solid var(--af-gris-borde); background:var(--af-gris-suave); display:flex; align-items:center; justify-content:center; }
.af-img-preview img { width:100%; height:100%; object-fit:cover; }
.af-img-placeholder { display:flex; flex-direction:column; align-items:center; gap:.4rem; color:#9aa6b6; }
.af-img-placeholder i { font-size:3rem; opacity:.5; }
.af-img-placeholder span { font-size:.8rem; }
/* Selector de tipo de movimiento (card-radio) */
.af-mov-tipos { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.af-mov-tipo { display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.7rem .3rem;
    border:1.5px solid var(--af-gris-borde); border-radius:var(--af-radius); cursor:pointer; transition:all .15s var(--af-ease); margin:0; }
.af-mov-tipo input { display:none; }
.af-mov-tipo i { font-size:1.6rem; }
.af-mov-tipo span { font-size:.78rem; font-weight:600; color:var(--af-gris-texto); }
.af-mov-tipo:hover { background:var(--af-gris-suave); }
.af-mov-tipo:has(input:checked) { border-color:var(--af-azul); background:var(--af-azul-claro); }
.af-mov-tipo:has(input:checked) span { color:var(--af-azul-d); }
.af-apt-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.af-apt-tag { display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .5rem; border-radius:var(--af-radius-pill);
    font-size:.66rem; font-weight:600; background:var(--af-gris-suave); color:var(--af-gris-texto); border:1px solid var(--af-gris-borde); }
.af-apt-tag i { font-size:.85rem; color:var(--af-agua); }
.af-cat-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.af-cat-pill { padding:.45rem 1rem; border-radius:var(--af-radius); font-size:.82rem; font-weight:600;
    color:var(--af-gris-texto); background:#fff; border:1px solid var(--af-gris-borde); text-decoration:none; transition:all .15s var(--af-ease); }
.af-cat-pill:hover { background:var(--af-gris-suave); color:var(--af-azul-d); }
.af-cat-pill.sel { background:var(--af-azul); color:#fff; border-color:var(--af-azul); }
.af-count-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .9rem;
    background:var(--af-azul-claro); border-radius:var(--af-radius-pill); }
.af-count-badge b { color:var(--af-azul-d); font-size:1rem; }
.af-count-badge span { color:var(--af-gris-texto); font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

/* ============================================================
   FICHA TÉCNICA — layout bento
   ============================================================ */
.af-ficha-hero { display:flex; flex-direction:column; background:#fff; border:1px solid var(--af-gris-borde);
    border-radius:var(--af-radius-lg); overflow:hidden; box-shadow:var(--af-shadow-sm); }
@media (min-width:768px){ .af-ficha-hero { flex-direction:row; } }
.af-ficha-hero__media { position:relative; min-height:240px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
@media (min-width:768px){ .af-ficha-hero__media { width:46%; } }
.af-ficha-hero__media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--af-ease); }
.af-ficha-hero__media:hover img { transform:scale(1.05); }
.af-ficha-hero__media i { font-size:5rem; color:#fff; opacity:.9; filter:drop-shadow(0 3px 8px rgba(0,28,58,.3)); }
.af-ficha-hero__badges { position:absolute; top:16px; left:16px; display:flex; gap:.5rem; }
.af-ficha-hero__badges span { padding:.3rem .75rem; font-size:.66rem; font-weight:700; border-radius:var(--af-radius-pill);
    background:rgba(0,54,103,.9); color:#fff; box-shadow:var(--af-shadow); text-transform:uppercase; letter-spacing:.03em; }
.af-ficha-hero__info { padding:1.6rem 1.8rem; display:flex; flex-direction:column; justify-content:center; flex:1; }
.af-ficha-hero__title { font-family:var(--af-font-display); font-size:1.7rem; font-weight:700; color:var(--af-azul-d); margin:0 0 .2rem; line-height:1.15; }
.af-ficha-hero__sci { font-style:italic; color:#8794a5; font-size:.86rem; margin-bottom:.9rem; }
.af-ficha-hero__desc { color:var(--af-gris-texto); font-size:.92rem; line-height:1.6; margin-bottom:1.2rem; }
.af-ficha-hero__price { display:flex; align-items:baseline; gap:.4rem; margin-bottom:1.2rem; }
.af-ficha-hero__price b { font-size:1.8rem; font-weight:700; color:var(--af-azul); }
.af-ficha-hero__price span { color:#8794a5; font-size:.85rem; }
.af-ficha-cta { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.85rem 1.4rem;
    background:var(--af-azul); color:#fff; font-weight:700; border-radius:var(--af-radius-md); text-decoration:none;
    transition:all .18s var(--af-ease); box-shadow:var(--af-shadow); border:none; }
.af-ficha-cta:hover { background:var(--af-azul-d); color:#fff; transform:translateY(-1px); box-shadow:var(--af-shadow-md); }

.af-bento { background:#fff; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-md);
    box-shadow:var(--af-shadow-sm); padding:1.4rem; height:100%; }
.af-bento--accent { border-top:4px solid var(--af-azul); }
.af-bento__title { font-family:var(--af-font-display); font-size:1.05rem; font-weight:600; color:var(--af-azul-d);
    margin:0 0 1rem; display:flex; align-items:center; gap:.5rem; }
.af-benefit { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:1rem; }
.af-benefit__chk { width:24px; height:24px; border-radius:50%; background:var(--af-agua-suave); color:var(--af-agua);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; font-size:1rem; }
.af-benefit p { margin:0; }
.af-benefit__t { font-weight:600; color:var(--af-texto-fuerte); font-size:.9rem; }
.af-origin { background:#fff; color:var(--af-texto-fuerte); border:1px solid var(--af-gris-borde);
    border-left:4px solid var(--af-agua); border-radius:var(--af-radius-md); padding:1.25rem 1.4rem;
    display:flex; flex-direction:column; justify-content:space-between; min-height:130px; }
.af-origin__lbl { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--af-gris-texto); font-weight:700; }
.af-origin h4 { font-family:var(--af-font-display); font-size:1.15rem; font-weight:600; margin:.15rem 0 0; color:var(--af-azul-d); }
.af-origin i { color:var(--af-agua); }
.af-origin span { color:var(--af-gris-texto); }
.af-tech-table { width:100%; border-collapse:collapse; }
.af-tech-table th { text-align:left; padding:.6rem 1rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
    color:#9aa6b6; font-weight:700; background:var(--af-gris-suave); border-bottom:1px solid var(--af-gris-borde); }
.af-tech-table td { padding:.7rem 1rem; border-bottom:1px solid var(--af-gris-borde); font-size:.88rem; }
.af-tech-table tr:hover td { background:var(--af-gris-suave); }
.af-tech-table .val { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--af-azul-d); }
.af-prov-card { border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-md); padding:1rem;
    transition:border-color .18s var(--af-ease); display:flex; flex-direction:column; }
.af-prov-card:hover { border-color:var(--af-agua); }
/* El bloque de datos crece para empujar la sección "Provee" y el botón a una base homogénea entre cards.
   Los hijos NO se comprimen (flex-shrink:0) para que los chips nunca queden bajo el botón. */
.af-prov-card > * { flex-shrink:0; }
.af-prov-card__info { flex-grow:1; }
.af-prov-card__icon { width:44px; height:44px; border-radius:var(--af-radius); background:var(--af-azul-claro);
    color:var(--af-azul); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.af-prov-card__name { font-weight:600; color:var(--af-texto-fuerte); font-size:.92rem; margin:.6rem 0 .15rem; }
.af-prov-card__meta { font-size:.78rem; color:var(--af-gris-texto); margin-bottom:.8rem; }
.af-prov-card__btn { display:block; width:100%; margin-top:.85rem; padding:.55rem; background:var(--af-azul); color:#fff; border:none; font-size:.8rem;
    font-weight:600; border-radius:var(--af-radius); text-decoration:none; text-align:center; transition:background .15s var(--af-ease); }
.af-prov-card__btn:hover { background:var(--af-azul-d); color:#fff; }
.af-prov-card__btn--disabled { background:var(--af-gris-suave); color:var(--af-gris-texto); cursor:default; pointer-events:none; }
.af-prov-card__btn--disabled:hover { background:var(--af-gris-suave); color:var(--af-gris-texto); }
.af-prov-card__phone { padding:.5rem .65rem; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius);
    color:var(--af-gris-texto); text-decoration:none; transition:color .15s var(--af-ease); }
.af-prov-card__phone:hover { color:var(--af-azul); }
.af-prov-card--best { border-color:var(--af-ok); background:linear-gradient(180deg,#f1faf4,#fff); box-shadow:0 0 0 1px var(--af-ok) inset; }
.af-prov-card__price { display:flex; align-items:baseline; gap:2px; margin:0 0 .7rem; }
.af-prov-card__price span { font-family:var(--af-font-display); font-size:1.15rem; font-weight:700; color:var(--af-texto-fuerte); }
.af-prov-card__price small { font-size:.72rem; color:var(--af-gris-texto); }
.af-prov-insumos { margin-top:.75rem; }
.af-prov-insumos__lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:var(--af-gris-texto); margin-bottom:.35rem; }
.af-prov-insumos__chips { display:flex; flex-wrap:wrap; gap:4px; }
.af-prov-chip { font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:var(--af-radius-pill);
    background:var(--af-azul-claro); color:var(--af-azul); white-space:nowrap; }
.af-prov-chip--empty { background:var(--af-gris-suave); color:var(--af-gris-texto); font-style:italic; }
.af-keyval { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--af-gris-borde); font-size:.88rem; }
.af-keyval:last-child { border-bottom:none; }
.af-keyval span:first-child { color:var(--af-gris-texto); }
.af-keyval strong { color:var(--af-azul-d); }

/* ============================================================
   SIDEBAR COLAPSABLE
   ------------------------------------------------------------
   Escritorio: la hamburguesa repliega el sidebar a modo ICONOS
   (angosto), ganando ancho para el contenido. La preferencia se
   recuerda en localStorage (body.af-sidebar-collapsed).
   Móvil (<992px): el sidebar es un panel deslizante sobre backdrop
   (body.af-sidebar-open), oculto por defecto.
   ============================================================ */
:root { --af-sidebar-w-min: 76px; }

/* ---- Colapso a iconos en ESCRITORIO ---- */
@media (min-width: 992px) {
    body.af-sidebar-collapsed .vertical-menu { width: var(--af-sidebar-w-min); }
    body.af-sidebar-collapsed #page-topbar   { left: var(--af-sidebar-w-min); }
    body.af-sidebar-collapsed .main-content  { margin-left: var(--af-sidebar-w-min); }

    /* Anti-parpadeo: aplica el ancho reducido ya en el primer pintado (sin animar),
       antes de que el JS traslade la clase al body. */
    html.pre-collapsed .vertical-menu { width: var(--af-sidebar-w-min); transition: none; }
    html.pre-collapsed #page-topbar   { left: var(--af-sidebar-w-min); transition: none; }
    html.pre-collapsed .main-content  { margin-left: var(--af-sidebar-w-min); transition: none; }
    html.pre-collapsed .af-logo-text,
    html.pre-collapsed #sidebar-menu ul li a span,
    html.pre-collapsed #sidebar-menu .menu-toggle span,
    html.pre-collapsed #sidebar-menu .menu-chevron,
    html.pre-collapsed .sidebar-footer { display: none; }

    /* Oculta textos, deja solo iconos centrados */
    body.af-sidebar-collapsed .af-logo-text,
    body.af-sidebar-collapsed .sidebar-footer,
    body.af-sidebar-collapsed #sidebar-menu ul li a span,
    body.af-sidebar-collapsed #sidebar-menu .menu-toggle span { display: none; }
    body.af-sidebar-collapsed #sidebar-menu .menu-chevron { display: none; }
    body.af-sidebar-collapsed .navbar-brand-box { padding: 0; justify-content: center; }
    body.af-sidebar-collapsed .navbar-brand-box .logo { justify-content: center; gap: 0; }

    /* AGRUPACIÓN por sección: la cabecera se vuelve un separador visible entre
       grupos (línea corta centrada), para que los iconos NO se vean como una
       lista plana. La primera sección no lleva línea superior. */
    body.af-sidebar-collapsed #sidebar-menu .menu-toggle {
        justify-content: center; padding: .55rem 0; margin: .35rem 1.2rem 0;
        border-top: 1px solid var(--af-gris-borde); pointer-events: none;
        min-height: 0;
    }
    body.af-sidebar-collapsed #sidebar-menu .menu-section:first-child .menu-toggle {
        border-top: none; margin-top: 0; padding-top: .2rem;
    }
    /* En modo iconos NUNCA se ocultan los items aunque la sección esté "collapsed" */
    body.af-sidebar-collapsed #sidebar-menu .menu-items { max-height: none !important; opacity: 1 !important; }
    /* En modo iconos, el sidebar NO recorta en X para que el flyout pueda salir a la
       derecha. Los iconos (~21) caben sin scroll vertical en pantallas normales. */
    body.af-sidebar-collapsed #sidebar-menu { overflow: visible; }

    body.af-sidebar-collapsed #sidebar-menu ul li a {
        justify-content: center; padding: .6rem 0; margin: 2px .5rem; position: relative;
    }
    body.af-sidebar-collapsed #sidebar-menu ul li a i { font-size: 1.35rem; width: auto; opacity: .85; }

    /* ---- FLYOUT navegable (patrón Selene): al pasar el mouse sobre una sección
       en modo colapsado, se despliega a la derecha un panel con el título de la
       sección y sus enlaces clickeables, permitiendo navegar entre subniveles. ---- */
    body.af-sidebar-collapsed #sidebar-menu .menu-section { position: relative; }
    /* Flyout con position:fixed — el JS calcula left/top al hacer hover para que
       SIEMPRE quepa en la ventana (no lo recorta ningún overflow ni el borde inferior). */
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout {
        position: fixed; z-index: 2100;
        min-width: 220px; padding: .4rem;
        background: #fff; border: 1px solid var(--af-gris-borde); border-radius: 12px;
        box-shadow: var(--af-shadow-md);
        max-height: 90vh; overflow-y: auto;
        opacity: 0; visibility: hidden; transform: translateX(-6px);
        transition: opacity .14s ease, transform .14s ease, visibility .14s;
    }
    /* Puente invisible para no perder el hover al cruzar el hueco icono→panel */
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout::before {
        content: ''; position: absolute; right: 100%; top: 0; width: 12px; height: 100%;
    }
    body.af-sidebar-collapsed #sidebar-menu .menu-section:hover .menu-flyout {
        opacity: 1; visibility: visible; transform: translateX(0);
    }
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout__title {
        font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        color: var(--af-gris-texto); padding: .35rem .6rem .3rem;
    }
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout a {
        display: flex; align-items: center; gap: .6rem; justify-content: flex-start !important;
        padding: .5rem .6rem !important; margin: 1px 0 !important; border-radius: 8px;
        font-size: .85rem; color: var(--af-texto-fuerte); white-space: nowrap;
    }
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout a i {
        font-size: 1.05rem !important; opacity: .8; width: 20px; text-align: center; flex-shrink: 0;
    }
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout a span { display: inline !important; }
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout a:hover { background: var(--af-azul-claro); color: var(--af-azul-d); }
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout a.active { background: var(--af-azul); color: #fff; }
    body.af-sidebar-collapsed #sidebar-menu .menu-flyout a.active i { opacity: 1; }

    /* El backdrop no participa en escritorio */
    .af-backdrop { display: none; }
}
/* Fuera del modo colapsado, el flyout nunca se muestra. */
#sidebar-menu .menu-flyout { display: none; }
body.af-sidebar-collapsed #sidebar-menu .menu-flyout { display: block; }

/* Tooltip flotante del menú-iconos (renderizado por JS con position:fixed para
   que NUNCA lo recorte el overflow/scroll del sidebar). */
.af-mini-tip {
    position: fixed; z-index: 2000; pointer-events: none;
    background: var(--af-azul-d); color: #fff; font-size: .78rem; font-weight: 500;
    white-space: nowrap; padding: .4rem .7rem; border-radius: .4rem;
    box-shadow: var(--af-shadow-md); opacity: 0; transform: translateY(-50%);
    transition: opacity .12s ease;
}
.af-mini-tip.visible { opacity: 1; }
.af-mini-tip::before {
    content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: var(--af-azul-d);
}

/* ============================================================
   RESPONSIVE (móvil / tablet)
   ============================================================ */
@media (max-width: 991.98px) {
    .vertical-menu { transform: translateX(-100%); }
    body.af-sidebar-open .vertical-menu { transform: translateX(0); }
    #page-topbar { left: 0; }
    .main-content { margin-left: 0; }
    /* En móvil el colapso-iconos no aplica: se usa el panel deslizante */
    body.af-sidebar-collapsed .vertical-menu { width: var(--af-sidebar-w); }
    .af-backdrop { display: none; position: fixed; inset: 0; background: rgba(6,40,80,.5); z-index: 1001; }
    body.af-sidebar-open .af-backdrop { display: block; }
}

/* ============================================================
   FULLCALENDAR — alineado a la paleta institucional
   ============================================================ */
.fc { font-family: var(--af-font-body); font-size: .85rem; }
.fc .fc-toolbar-title { font-family: var(--af-font-display); font-size: 1.15rem; color: var(--af-azul-d); font-weight: 700; }
.fc .fc-button-primary { background: var(--af-azul); border-color: var(--af-azul); box-shadow: none; text-transform: capitalize; font-weight: 600; }
.fc .fc-button-primary:hover { background: var(--af-azul-d); border-color: var(--af-azul-d); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background: var(--af-azul-d); border-color: var(--af-azul-d); }
.fc .fc-button-primary:disabled { background: var(--af-azul-medio); border-color: var(--af-azul-medio); }
.fc .fc-daygrid-day.fc-day-today { background: var(--af-agua-suave); }
.fc .fc-col-header-cell-cushion { color: var(--af-gris-texto); text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; padding: .5rem; }
.fc .fc-daygrid-day-number { color: var(--af-texto-fuerte); font-size: .8rem; }
.fc-event { border: none; border-radius: 6px; padding: 1px 5px; font-size: .74rem; font-weight: 600; cursor: pointer; }
.fc-event:hover { filter: brightness(.93); }
.fc .fc-list-event:hover td { background: var(--af-gris-suave); }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--af-gris-borde); }

/* ============================================================
   TIMELINE VERTICAL (Bootstrap Timeline)
   Estructura: .af-timeline > .af-tl-cont > [.af-tl-hito] +
   .af-tl-continue > .row(.tl-right/.tl-left) > col-6 icon + col-6 box
   ============================================================ */
.af-timeline { position:relative; width:100%; padding:0; opacity:1; transition:opacity .25s ease; }
.af-tl-cont { max-width:1000px; margin:0 auto; }
/* Hito START/HOY/END */
.af-tl-hito { position:relative; width:100%; text-align:center; z-index:2; margin:0 0 .5rem; }
.af-tl-hito span { display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    width:80px; height:80px; border-radius:50%; background:var(--af-azul); color:#fff;
    font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; line-height:1.15;
    box-shadow:0 6px 18px rgba(10,77,140,.28); }
.af-tl-hito.hoy span { background:var(--af-agua); box-shadow:0 6px 18px rgba(0,104,117,.28); }
/* Contenedor con la línea central */
.af-tl-continue { position:relative; width:100%; padding:48px 0; }
.af-tl-continue::after { content:""; position:absolute; width:2px; height:100%; top:0; left:50%; margin-left:-1px; background:var(--af-gris-borde); z-index:0; }
/* Filas alternadas (usan grid bootstrap row/col-md-6) */
.af-tl-continue .row { position:relative; margin-bottom:10px; }
.tl-right { text-align:left; }
.tl-left  { text-align:right; }
/* Ícono (en la columna opuesta a la tarjeta) */
.af-tl-icon { margin:30px 10px 0; font-size:1.9rem; color:var(--af-azul); }
.tl-right .af-tl-icon { text-align:right; }
.tl-left  .af-tl-icon { text-align:left; }
/* Caja del evento */
.af-tl-box { position:relative; display:inline-block; margin:15px; padding:20px;
    border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-md); background:#fff;
    box-shadow:var(--af-shadow-sm); transition:box-shadow .2s var(--af-ease), transform .2s var(--af-ease); text-align:left; }
.af-tl-box:hover { box-shadow:var(--af-shadow-md); transform:translateY(-2px); }
/* Campaña enfocada (llegada desde un enlace con ?id=) */
.af-tl-box--foco { border:2px solid var(--af-azul); box-shadow:0 0 0 4px var(--af-azul-claro); }
.af-tl-box--pulse { animation:af-foco-pulse 1.2s ease-out 2; }
@keyframes af-foco-pulse {
    0%   { box-shadow:0 0 0 0 rgba(10,77,140,.45); }
    70%  { box-shadow:0 0 0 14px rgba(10,77,140,0); }
    100% { box-shadow:0 0 0 0 rgba(10,77,140,0); }
}
/* Aviso de "campaña resaltada" arriba del timeline */
.af-foco-aviso { display:flex; align-items:center; gap:.7rem; background:var(--af-azul-claro); border:1px solid #bcd6f5;
    border-radius:var(--af-radius-md); padding:.7rem 1rem; margin-bottom:1rem; font-size:.88rem; color:var(--af-azul-d); }
.af-foco-aviso > i { font-size:1.25rem; color:var(--af-azul); }
.af-foco-aviso__btn { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; font-size:.8rem; font-weight:600;
    padding:.35rem .75rem; border-radius:var(--af-radius-pill); background:#fff; color:var(--af-azul);
    border:1px solid #bcd6f5; text-decoration:none; }
.af-foco-aviso__btn:hover { background:var(--af-azul); color:#fff; }
/* Cinta/banderín de fecha (clip-path) */
.af-tl-date { width:56px; height:82px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:10px 4px; background:var(--af-azul); color:#fff; position:absolute; top:-10px; z-index:1;
    clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%); border-radius:6px 6px 0 0; }
.af-tl-date b { font-size:1.3rem; line-height:1; }
.af-tl-date small { font-size:.6rem; opacity:.85; text-transform:uppercase; margin-top:2px; }
.af-tl-date.en_curso { background:var(--af-ok); }
.af-tl-date.finalizada { background:#9aa6b6; }
/* Posición de la cinta: derecha → cinta a la izq (-70px); izquierda → cinta a la der (-70px del lado opuesto) */
.tl-right .af-tl-date { left:-70px; right:auto; }
.tl-left  .af-tl-date { right:-70px; left:auto; }
/* Texto del evento, con margen para la cinta */
.af-tl-text { margin-left:0; }
.tl-right .af-tl-text { margin-left:0; }
.af-tl-box__title { font-family:var(--af-font-display); font-weight:600; color:var(--af-azul-d); font-size:1.05rem; margin:0 0 .4rem; }
.af-tl-box__meta { font-size:.78rem; color:var(--af-gris-texto); display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.af-tl-box__badge { display:inline-flex; align-items:center; gap:.25rem; padding:.12rem .55rem; border-radius:var(--af-radius-pill); font-size:.66rem; font-weight:700; }
.badge-en_curso { background:#e3f6ec; color:#1c7a48; } .badge-planificada { background:var(--af-azul-claro); color:var(--af-azul); } .badge-finalizada { background:#eef1f5; color:#6b7686; }
/* Responsive: una sola columna, línea a la izquierda */
@media (max-width: 767.98px){
    .af-tl-continue::after { left:30px; }
    .af-tl-hito { text-align:left; padding-left:0; }
    .tl-left, .tl-right { text-align:left; }
    .af-tl-box { display:block; margin-left:72px; margin-right:0; }
    .tl-right .af-tl-date, .tl-left .af-tl-date { left:-58px; right:auto; }
    .af-tl-icon { display:none; }
}

/* ============================================================
   TABS institucionales (card header tabs)
   ============================================================ */
.af-tabs { border-bottom:1px solid var(--af-gris-borde); gap:.25rem; }
.af-tabs .nav-link { border:none; border-bottom:2px solid transparent; background:transparent;
    color:var(--af-gris-texto); font-weight:600; font-size:.88rem; padding:.65rem 1.1rem; border-radius:0;
    transition:all .15s var(--af-ease); }
.af-tabs .nav-link:hover { color:var(--af-azul-d); border-bottom-color:var(--af-gris-borde); }
.af-tabs .nav-link.active { color:var(--af-azul); background:transparent; border-bottom-color:var(--af-azul); }
.af-tabs .nav-link i { opacity:.8; }

/* ============================================================
   COMPARAR FÓRMULAS (cards + recomendación)
   ============================================================ */
/* Contenedor del radar: caja estable y centrada para que ApexCharts no desborde */
.af-radar-wrap { width:100%; max-width:380px; margin:0 auto; min-height:340px; display:flex; align-items:center; justify-content:center; }
.af-radar-wrap .apexcharts-canvas { margin:0 auto; }

.af-cmp-card { background:#fff; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-md);
    box-shadow:var(--af-shadow-sm); padding:1.2rem 1.3rem; position:relative; overflow:hidden; height:100%; }
.af-cmp-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--af-azul); }
.af-cmp-card.reco { border:2px solid var(--af-ok); box-shadow:var(--af-shadow-md); }
.af-cmp-card.reco::before { background:var(--af-ok); }
.af-cmp-card.b::before { background:var(--af-agua); }
.af-cmp-tag { display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--af-azul); background:var(--af-azul-claro); padding:.2rem .55rem; border-radius:var(--af-radius-sm); }
.af-cmp-card.b .af-cmp-tag { color:var(--af-agua); background:var(--af-agua-suave); }
.af-cmp-card__name { font-family:var(--af-font-display); font-weight:700; color:var(--af-azul-d); font-size:1.15rem; margin:.4rem 0 .2rem; }
.af-cmp-card__sub { font-size:.78rem; color:#8794a5; font-style:italic; display:flex; align-items:center; gap:.3rem; margin-bottom:1rem; }
.af-cmp-reco-badge { position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:.25rem;
    background:var(--af-ok); color:#fff; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
    padding:.25rem .55rem; border-radius:var(--af-radius-pill); box-shadow:var(--af-shadow-sm); }
.af-cmp-cost { background:var(--af-gris-suave); border-radius:var(--af-radius); padding:.9rem 1rem; }
.af-cmp-card.reco .af-cmp-cost { background:#e8f7ef; }
.af-cmp-cost__lbl { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:#9aa6b6; margin:0 0 .2rem; }
.af-cmp-cost__val { font-family:var(--af-font-display); font-size:1.9rem; font-weight:700; color:var(--af-azul); line-height:1; }
.af-cmp-card.reco .af-cmp-cost__val { color:var(--af-ok); }
.af-cmp-card.b .af-cmp-cost__val { color:var(--af-agua); }
.af-cmp-cost__bar { height:6px; border-radius:99px; background:#dce4ee; margin-top:.6rem; overflow:hidden; }
.af-cmp-cost__bar span { display:block; height:100%; background:var(--af-azul); }
.af-cmp-card.reco .af-cmp-cost__bar span { background:var(--af-ok); }
.af-cmp-card.b .af-cmp-cost__bar span { background:var(--af-agua); }
/* Tabla de parámetros comparada */
.af-cmp-table { width:100%; border-collapse:collapse; }
.af-cmp-table th { padding:.7rem 1rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
    color:#9aa6b6; text-align:left; border-bottom:1px solid var(--af-gris-borde); background:var(--af-gris-suave); }
.af-cmp-table td { padding:.7rem 1rem; font-size:.86rem; border-bottom:1px solid var(--af-gris-borde); }
.af-cmp-table tr:hover td { background:var(--af-gris-suave); }
.af-cmp-table .col-req { color:var(--af-gris-texto); }
.af-cmp-table .col-a { color:var(--af-azul); font-weight:600; }
.af-cmp-table .col-b { color:var(--af-agua); font-weight:600; background:rgba(0,104,117,.04); }
.af-cmp-ok { color:var(--af-ok); font-size:.7rem; } .af-cmp-bad { color:var(--af-alert); font-size:.7rem; }

/* ============================================================
   CENTRO DE ALERTAS (dashboard)
   ============================================================ */
.af-alerta { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; background:#fff;
    border:1px solid var(--af-gris-borde); border-left:4px solid var(--af-azul); border-radius:var(--af-radius-md);
    box-shadow:var(--af-shadow-sm); text-decoration:none; transition:all .15s var(--af-ease); }
.af-alerta:hover { box-shadow:var(--af-shadow-md); transform:translateY(-2px); }
.af-alerta__icon { width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.af-alerta__body { flex:1; min-width:0; }
.af-alerta__title { font-weight:600; color:var(--af-azul-d); font-size:.9rem; line-height:1.2; }
.af-alerta__detail { font-size:.76rem; color:var(--af-gris-texto); margin-top:.1rem; }
.af-alerta__arrow { color:#c2ccdb; font-size:1.3rem; flex-shrink:0; }
.af-alerta--warn { border-left-color:var(--af-warn); }
.af-alerta--warn .af-alerta__icon { background:#fdf1df; color:var(--af-warn); }
.af-alerta--info { border-left-color:var(--af-azul); }
.af-alerta--info .af-alerta__icon { background:var(--af-azul-claro); color:var(--af-azul); }
.af-alerta--green { border-left-color:var(--af-ok); }
.af-alerta--green .af-alerta__icon { background:#e3f6ec; color:var(--af-ok); }

/* ============================================================
   KPI mini-sparkline
   ============================================================ */
.af-spark { width:80px; height:34px; flex-shrink:0; opacity:.9; }
.af-kpi .af-counter { font-variant-numeric:tabular-nums; }

/* ============================================================
   FULLCALENDAR — eventos en tono PASTEL (no invasivos)
   ============================================================ */
.fc-daygrid-event { border-radius:5px !important; padding:1px 6px !important; font-size:.74rem !important;
    font-weight:600 !important; border:none !important; border-left:3px solid currentColor !important;
    box-shadow:0 1px 1px rgba(0,28,58,.05); margin:1px 2px !important; }
.fc-daygrid-event .fc-event-title { font-weight:600; }
.fc-daygrid-event:hover { filter:brightness(.97); }
.fc-h-event .fc-event-main { color:inherit !important; }
/* Punto del evento en vista de día/semana también pastel */
.fc-daygrid-dot-event { background:transparent !important; }
.fc-daygrid-dot-event .fc-daygrid-event-dot { border-color:currentColor !important; }
/* Lista (vista lista) — fila más suave */
.fc-list-event-dot { border-color:currentColor !important; }

/* ============================================================
   DASHBOARD: panel de AHORRO + campañas mini
   ============================================================ */
.af-ahorro { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
    background:linear-gradient(120deg, var(--af-ok) 0%, #15b36a 100%); color:#fff;
    border-radius:var(--af-radius-lg); padding:1.1rem 1.5rem; box-shadow:var(--af-shadow); position:relative; overflow:hidden; }
.af-ahorro::after { content:""; position:absolute; right:-40px; bottom:-60px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.08); }
.af-ahorro__left { display:flex; align-items:center; gap:1.1rem; position:relative; z-index:1; flex:1; min-width:260px; }
.af-ahorro__icon { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:1.9rem; flex-shrink:0; }
.af-ahorro__lbl { font-size:.8rem; opacity:.9; }
.af-ahorro__val { font-family:var(--af-font-display); font-size:1.9rem; font-weight:700; line-height:1.1; }
.af-ahorro__val span { font-size:.85rem; font-weight:400; opacity:.85; }
.af-ahorro__sub { font-size:.78rem; opacity:.92; margin-top:.2rem; display:flex; align-items:center; gap:.25rem; }
/* Barras de comparación tu costo vs comercial */
.af-ahorro__bars { position:relative; z-index:1; flex:1; min-width:280px; max-width:420px; }
.af-ahorro__barrow { display:flex; align-items:center; gap:.6rem; margin-bottom:.45rem; }
.af-ahorro__bartag { font-size:.7rem; width:64px; flex-shrink:0; opacity:.9; text-align:right; }
.af-ahorro__bartrack { flex:1; height:22px; background:rgba(255,255,255,.18); border-radius:6px; overflow:hidden; }
.af-ahorro__barfill { height:100%; display:flex; align-items:center; justify-content:flex-end; padding-right:.5rem;
    font-size:.72rem; font-weight:700; border-radius:6px; white-space:nowrap; min-width:fit-content; }
.af-ahorro__barfill.tuyo { background:#fff; color:var(--af-ok); }
.af-ahorro__barfill.ref { background:rgba(255,255,255,.35); color:#fff; }

.af-camp-mini { display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem; border:1px solid var(--af-gris-borde);
    border-radius:var(--af-radius); background:#fff; transition:box-shadow .15s var(--af-ease); }
.af-camp-mini:hover { box-shadow:var(--af-shadow-sm); }
.af-camp-mini__icon { width:38px; height:38px; border-radius:10px; background:var(--af-agua-suave); color:var(--af-agua);
    display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.af-camp-mini__name { font-weight:600; color:var(--af-azul-d); font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.af-camp-mini__meta { font-size:.72rem; color:var(--af-gris-texto); }
.af-camp-mini__dias { text-align:center; flex-shrink:0; color:var(--af-azul); font-weight:700; font-size:1.2rem; line-height:1; }
.af-camp-mini__dias span { display:block; font-size:.58rem; font-weight:600; text-transform:uppercase; color:#9aa6b6; }
.af-camp-mini__dias.urgente { color:var(--af-warn); }

/* ============================================================
   GUÍA DE ETAPAS enriquecida (foto + stepper + bento)
   ============================================================ */
.af-esp-acc { background:#fff; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-md);
    overflow:hidden; margin-bottom:1rem; box-shadow:var(--af-shadow-sm); }
.af-esp-acc__head { display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; cursor:pointer; background:#fff;
    border:none; width:100%; text-align:left; transition:background .15s var(--af-ease); }
.af-esp-acc__head:hover { background:var(--af-gris-suave); }
.af-esp-acc__photo { width:56px; height:56px; border-radius:12px; object-fit:cover; flex-shrink:0; border:1px solid var(--af-gris-borde); }
.af-esp-acc__photo-ph { width:56px; height:56px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:var(--af-agua-suave); color:var(--af-agua); font-size:1.6rem; }
.af-esp-acc__info { flex:1; min-width:0; }
.af-esp-acc__name { font-family:var(--af-font-display); font-weight:700; color:var(--af-azul-d); font-size:1.05rem; line-height:1.1; }
.af-esp-acc__sub { font-size:.74rem; color:var(--af-gris-texto); margin-top:.15rem; }
.af-esp-acc__chev { color:#9aa6b6; font-size:1.4rem; transition:transform .2s var(--af-ease); }
.af-esp-acc[open] .af-esp-acc__chev { transform:rotate(180deg); }
.af-esp-acc__body { padding:.4rem 1.1rem 1.1rem; }

/* Etapa como card con stepper + stats */
.af-etapa-card { display:flex; gap:1rem; padding:1rem; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius);
    background:var(--af-gris-fondo); margin-bottom:.7rem; position:relative; }
.af-etapa-card__step { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.af-etapa-card__num { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1rem; color:#fff; background:var(--af-azul); }
.af-etapa-card__num--1 { background:var(--af-agua); } .af-etapa-card__num--2 { background:var(--af-azul); }
.af-etapa-card__num--3 { background:#2e7d32; } .af-etapa-card__num--4 { background:#e0902a; }
.af-etapa-card__line { width:2px; flex:1; background:var(--af-gris-borde); margin-top:.3rem; min-height:20px; }
.af-etapa-card:last-child .af-etapa-card__line { display:none; }
.af-etapa-card__body { flex:1; min-width:0; }
.af-etapa-card__title { font-weight:600; color:var(--af-azul-d); font-size:.98rem; margin:.3rem 0 .5rem; }
.af-etapa-stats { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem; }
.af-etapa-stat { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; background:#fff;
    border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-sm); font-size:.74rem; font-weight:600; color:var(--af-gris-texto); }
.af-etapa-stat i { color:var(--af-agua); font-size:.95rem; }
/* details/summary del acordeón de especies — sin marcador nativo */
.af-esp-acc summary { list-style:none; }
.af-esp-acc summary::-webkit-details-marker { display:none; }
.af-esp-acc summary::marker { content:""; }

/* ============================================================
   Dashboard: avisos compactos (lista en panel lateral)
   ============================================================ */
.af-aviso { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--af-radius);
    border:1px solid var(--af-gris-borde); border-left:3px solid var(--af-azul); text-decoration:none; transition:background .15s var(--af-ease); }
.af-aviso:hover { background:var(--af-gris-suave); }
.af-aviso__icon { font-size:1.25rem; flex-shrink:0; }
.af-aviso__title { font-weight:600; color:var(--af-azul-d); font-size:.82rem; line-height:1.2; }
.af-aviso__detail { font-size:.72rem; color:var(--af-gris-texto); }
.af-aviso--warn { border-left-color:var(--af-warn); } .af-aviso--warn .af-aviso__icon { color:var(--af-warn); }
.af-aviso--info { border-left-color:var(--af-azul); } .af-aviso--info .af-aviso__icon { color:var(--af-azul); }
.af-aviso--green { border-left-color:var(--af-ok); } .af-aviso--green .af-aviso__icon { color:var(--af-ok); }
.af-aviso-sep { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#9aa6b6; margin:.4rem 0 .1rem; }
/* af-camp-mini como enlace en el panel */
a.af-camp-mini { text-decoration:none; }

/* ============================================================
   PLAN DE ALIMENTACIÓN: panel resumen de campañas (hero)
   ============================================================ */
.af-camp-hero { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
    background:#fff; border:1px solid var(--af-gris-borde); border-radius:var(--af-radius-lg);
    padding:1.2rem 1.5rem; box-shadow:var(--af-shadow-sm); }
.af-camp-hero__main { display:flex; align-items:center; gap:1.1rem; flex:1; min-width:280px; }
.af-camp-hero__icon { width:58px; height:58px; border-radius:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-size:2rem; color:#fff; background:linear-gradient(135deg, var(--af-azul-d), var(--af-azul)); }
.af-camp-hero__lbl { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9aa6b6; }
.af-camp-hero__big { font-family:var(--af-font-display); font-size:1.7rem; font-weight:700; color:var(--af-azul-d); line-height:1.1; }
.af-camp-hero__big span { font-size:.85rem; font-weight:400; color:var(--af-gris-texto); }
.af-camp-hero__sub { font-size:.78rem; color:var(--af-gris-texto); margin-top:.25rem; display:flex; align-items:center; gap:.3rem; }
.af-camp-hero__sub i { color:var(--af-agua); }
/* Métricas por estado */
.af-camp-hero__stats { display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; }
.af-camp-stat { display:flex; align-items:center; gap:.55rem; }
.af-camp-stat__dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.af-camp-stat.en_curso .af-camp-stat__dot { background:var(--af-ok); }
.af-camp-stat.planificada .af-camp-stat__dot { background:var(--af-azul); }
.af-camp-stat.finalizada .af-camp-stat__dot { background:#9aa6b6; }
.af-camp-stat__num { font-family:var(--af-font-display); font-size:1.4rem; font-weight:700; color:var(--af-azul-d); line-height:1; }
.af-camp-stat__lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:#9aa6b6; font-weight:600; }
.af-camp-hero__btn { border:1px solid var(--af-azul); color:var(--af-azul); font-weight:600; }
.af-camp-hero__btn:hover { background:var(--af-azul); color:#fff; }
@media (max-width:575px){ .af-camp-hero__stats { width:100%; justify-content:space-between; } }

/* ============================================================
   COMPONENTES UX COMPARTIDOS (modal, toast, confirmación, tour, estado vacío)
   Pensados para usuarios no técnicos: claros, cálidos y guiados.
   ============================================================ */

/* --- Modal (re-tematiza el de Bootstrap con estilo marino) --- */
.af-modal .modal-content { border: none; border-radius: var(--af-radius-lg); box-shadow: var(--af-shadow-lg); overflow: hidden; }
.af-modal .modal-header { background: var(--af-azul); color: #fff !important; border: none; padding: 1rem 1.3rem; }
/* Título, icono y TODO el texto del header SIEMPRE blancos (estilo minia: header
   coloreado, texto claro). Se fuerza con alta especificidad + !important para ganar
   a reglas globales de .modal-title/.card-title que lo pintan oscuro. */
.af-modal .modal-header,
.af-modal .modal-header .modal-title,
.af-modal .modal-header .modal-title span,
.af-modal .modal-header .modal-title i,
.af-modal .modal-header * { color: #fff !important; }
.af-modal .modal-header .modal-title { font-family: var(--af-font-display); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.af-modal .modal-header .btn-close { filter: brightness(0) invert(1); opacity: .85; }
.af-modal .modal-header .btn-close:hover { opacity: 1; }
.af-modal .modal-body { padding: 1.3rem; }
.af-modal .modal-footer { border-top: 1px solid var(--af-gris-borde); padding: .85rem 1.3rem; background: var(--af-gris-suave); }
.af-modal .form-label { font-weight: 600; font-size: .82rem; color: var(--af-azul-d); margin-bottom: .25rem; }
.af-modal .af-field-help { font-size: .74rem; color: #8794a5; margin-top: .2rem; display: block; }

/* --- Toasts (avisos flotantes de éxito/error/info) --- */
.af-toast-host { position: fixed; top: calc(var(--af-topbar-h) + 12px); right: 18px; z-index: 1090;
    display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.af-toast { display: flex; align-items: flex-start; gap: .6rem; background: #fff; border-radius: var(--af-radius);
    box-shadow: var(--af-shadow-md); padding: .8rem 1rem; border-left: 4px solid var(--af-azul);
    animation: afToastIn .28s var(--af-ease); }
.af-toast.hide { animation: afToastOut .25s var(--af-ease) forwards; }
.af-toast__icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.af-toast__body { flex: 1; }
.af-toast__title { font-weight: 700; font-size: .84rem; color: var(--af-texto-fuerte); }
.af-toast__msg { font-size: .78rem; color: var(--af-gris-texto); margin-top: 1px; }
.af-toast__close { background: none; border: none; color: #b0bac8; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0; }
.af-toast--ok { border-left-color: var(--af-ok); } .af-toast--ok .af-toast__icon { color: var(--af-ok); }
.af-toast--error { border-left-color: var(--af-alert); } .af-toast--error .af-toast__icon { color: var(--af-alert); }
.af-toast--info { border-left-color: var(--af-agua); } .af-toast--info .af-toast__icon { color: var(--af-agua); }
@keyframes afToastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes afToastOut { to { opacity: 0; transform: translateX(30px); } }

/* --- Modal de confirmación amigable (reemplaza confirm() del navegador) --- */
.af-confirm .modal-header { background: transparent; color: inherit; padding: 1.3rem 1.3rem 0; }
.af-confirm .modal-body { text-align: center; padding: .5rem 1.6rem 1.3rem; }
.af-confirm__icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 2rem; margin: 0 auto 1rem; }
.af-confirm__icon--danger { background: #fdecec; color: var(--af-alert); }
.af-confirm__icon--warn { background: #fff4e5; color: var(--af-warn); }
.af-confirm__icon--info { background: var(--af-azul-claro); color: var(--af-azul); }
.af-confirm__title { font-family: var(--af-font-display); font-weight: 700; font-size: 1.1rem; color: var(--af-azul-d); margin-bottom: .4rem; }
.af-confirm__msg { font-size: .88rem; color: var(--af-gris-texto); line-height: 1.5; }
.af-confirm .modal-footer { justify-content: center; gap: .6rem; background: transparent; border: none; padding: 0 1.6rem 1.4rem; }

/* --- Estado vacío cálido --- */
.af-empty { text-align: center; padding: 3rem 1.5rem; }
.af-empty__icon { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.1rem;
    display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
    background: var(--af-azul-claro); color: var(--af-azul); }
.af-empty__title { font-family: var(--af-font-display); font-weight: 700; color: var(--af-azul-d); font-size: 1.05rem; margin-bottom: .3rem; }
.af-empty__text { color: var(--af-gris-texto); font-size: .88rem; max-width: 340px; margin: 0 auto 1.2rem; line-height: 1.5; }

/* --- Tour / onboarding (spotlight + tooltip) --- */
.af-tour-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(0,28,58,.55); }
.af-tour-pop { position: fixed; z-index: 1202; background: #fff; border-radius: var(--af-radius-md);
    box-shadow: var(--af-shadow-lg); padding: 1.1rem 1.2rem; max-width: 320px; }
.af-tour-pop__title { font-family: var(--af-font-display); font-weight: 700; color: var(--af-azul-d); font-size: 1rem; margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
.af-tour-pop__text { font-size: .84rem; color: var(--af-gris-texto); line-height: 1.5; margin-bottom: .9rem; }
.af-tour-pop__foot { display: flex; align-items: center; justify-content: space-between; }
.af-tour-pop__step { font-size: .72rem; color: #9aa6b6; font-weight: 600; }
.af-tour-highlight { position: relative; z-index: 1201; box-shadow: 0 0 0 4px var(--af-agua), 0 0 0 9999px rgba(0,28,58,.55);
    border-radius: var(--af-radius); transition: box-shadow .2s var(--af-ease); }
.af-btn-nuevo { display: inline-flex; align-items: center; gap: .4rem; }

/* ============================================================
   CONTRASTE GLOBAL — texto legible sobre fondos AZULES SÓLIDOS
   ------------------------------------------------------------
   Regla defensiva para TODOS los módulos: cuando un control tiene
   fondo azul sólido (seleccionado/activo, botón, cost-panel, thead,
   avatares), cualquier texto secundario dentro (.text-muted, small,
   .af-*__meta/__sci/__n) debe verse claro, nunca el gris de Bootstrap
   que quedaba ilegible. Cubre el pedido: "revisa esto en todas las
   vistas ya que sucede el mismo error".
   ============================================================ */
.af-pill.sel .text-muted, .af-pill.sel small,
.af-grupo-tab.sel .text-muted, .af-grupo-tab.sel small,
.af-cat-pill.sel .text-muted, .af-cat-pill.sel small,
.af-cost-panel .text-muted, .af-cost-panel small,
.btn-primary .text-muted, .btn-primary small,
.btn-success .text-muted, .btn-success small,
.table > thead th .text-muted, .table > thead th small,
.badge .text-muted {
    color: rgba(255,255,255,.85) !important;
}
/* Los .af-cat-pill seleccionados: forzar todo el contenido a blanco. */
.af-cat-pill.sel, .af-cat-pill.sel * { color: #fff !important; }
/* Estados seleccionados con fondo CLARO (azul-claro): el texto va OSCURO
   (azul institucional), nunca blanco — asegura contraste en el otro sentido. */
.af-especie.sel .af-especie__name,
.af-presel-chip.sel .af-presel-chip__name,
.af-ins-chip:has(.form-check-input:checked) .af-ins-chip__name {
    color: var(--af-azul-d) !important;
}
.af-especie.sel .af-especie__sci,
.af-ins-chip:has(.form-check-input:checked) .af-ins-chip__meta {
    color: #5b7590 !important;
}

/* ------------------------------------------------------------
   Calendario — cinta de fecha (.af-tl-date): el fondo puede venir
   de un color elegido por el usuario (input type=color). Si escoge
   un tono claro, el texto blanco quedaba ilegible. Sombra defensiva
   para mantener legible el número/mes sobre CUALQUIER fondo, sin
   tocar la lógica que inyecta el color en el markup.
   ------------------------------------------------------------ */
.af-tl-date b, .af-tl-date small { text-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* ------------------------------------------------------------
   Fila de tabla en estado de ALERTA (stock crítico / precio
   desactualizado). Reemplaza a Bootstrap `.table-warning` (amarillo
   crudo, fuera de paleta y de bajo contraste) por un tono ámbar suave
   institucional con borde-guía a la izquierda. Texto oscuro legible.
   ------------------------------------------------------------ */
.af-row-alerta > td {
    background-color: #fff4e0 !important;   /* ámbar muy claro (variante -subtle) */
    color: var(--af-azul-d) !important;
}
.af-row-alerta > td:first-child { box-shadow: inset 3px 0 0 #e0a63a; }

/* ============================================================
   ESTÁNDAR DE LAYOUT UNIFICADO (simetría, densidad, cero huecos)
   ------------------------------------------------------------
   Reglas transversales para que TODAS las pantallas tengan la misma
   simetría y densidad — criterio de auditoría de calidad.
   ============================================================ */
/* Filas de tarjetas: todas las cards de una .row con columnas quedan a la
   MISMA altura (evita tarjetas desparejas). Bootstrap ya iguala columnas;
   forzamos que la card llene su columna. */
.row > [class*="col-"] > .card { height: 100%; }
.row > [class*="col-"] > .af-kpi { height: 100%; }
/* Márgenes verticales uniformes entre secciones/cards. */
.page-content > .row + .row { margin-top: 0; }
/* Gráficos/canvas con altura contenida para no dejar un bloque enorme vacío. */
.af-chart-box { position: relative; height: 260px; }
.af-chart-box canvas { max-height: 100%; }
/* Estado "sin datos" centrado y compacto dentro de su card (no un hueco gigante). */
.af-nodata { display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 180px; color: #9aa6b5; font-size: .9rem; text-align: center; gap: .4rem; }
.af-nodata i { font-size: 2.2rem; opacity: .35; }
/* Grillas de KPI simétricas: mismo gap, columnas que se reparten parejo. */
.af-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1rem; }

/* ============================================================
   SEGURIDAD / 2FA (MiCuenta → Seguridad)
   Estilos movidos desde el <style> inline de la página para
   centralizar el CSS en la hoja institucional (criterio de auditoría).
   ============================================================ */
.af-2fa-steps { padding-left: 1.1rem; }
.af-2fa-steps > li { margin-bottom: 1.1rem; line-height: 1.5; }
.af-2fa-qr { margin: .7rem 0; padding: .8rem; display: inline-block;
    border: 1px solid var(--af-gris-borde); border-radius: var(--af-radius); background: #fff; }
.af-2fa-secret { margin-top: .4rem; }
.af-2fa-secret code { font-size: 1rem; letter-spacing: .12em; background: var(--af-gris-suave);
    padding: .4rem .7rem; border-radius: var(--af-radius); display: inline-block; user-select: all; }
.af-2fa-code { letter-spacing: .35em; font-weight: 600; font-size: 1.15rem; }

/* --- Auditoría layout (Inventario): leyenda de alertas de cobertura --- */
/* Card de apoyo bajo el formulario "Registrar movimiento": equilibra la altura
   de la columna derecha con la izquierda (dos tablas apiladas) y da contexto. */
.af-mov-leyenda { display: flex; flex-direction: column; gap: .7rem; }
.af-mov-leyenda__item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--af-gris-texto); }
.af-mov-leyenda__item > :first-child { flex-shrink: 0; min-width: 78px; text-align: center; }