/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ERP-UI · Sistema de diseño (capa sobre ArchitectUI)                  ║
   ║                                                                          ║
   ║  Objetivo: elevar ArchitectUI a un look SaaS empresarial usando         ║
   ║  COLORES SÓLIDOS (cero gradientes), iconografía a color, mejor          ║
   ║  jerarquía visual, badges/botones/tablas consistentes.                  ║
   ║                                                                          ║
   ║  Se carga DESPUÉS de erp.css. No reemplaza nada: sólo refina.           ║
   ║  Identidad: teal #0E7C86 (marca) + paleta sólida de estados.            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────────
   1) TOKENS DE DISEÑO (paleta sólida, radios, sombras, espaciado)
   ──────────────────────────────────────────────────────────────────────── */
:root {
    /* Marca (teal) */
    --erp-primary:        #0E7C86;
    --erp-primary-600:    #0B6670;
    --erp-primary-700:    #095059;
    --erp-primary-soft:   #E6F2F3;
    --erp-primary-soft-2: #C9E4E6;

    /* Estados (sólidos) */
    --erp-success:      #1E9E5A;
    --erp-success-soft: #E5F5EC;
    --erp-warning:      #C77E06;
    --erp-warning-soft: #FBF1DC;
    --erp-danger:       #D64550;
    --erp-danger-soft:  #FBE7E9;
    --erp-info:         #2E7CD6;
    --erp-info-soft:    #E4EFFB;
    --erp-purple:       #7A5Aec;
    --erp-purple-soft:  #EDE9FB;

    /* Neutros */
    --erp-bg:        #F4F7F9;   /* fondo de página */
    --erp-surface:   #FFFFFF;   /* tarjetas */
    --erp-border:    #E4EAEF;   /* bordes sutiles */
    --erp-border-2:  #D3DBE2;   /* bordes marcados */
    --erp-ink:       #1F2A37;   /* títulos */
    --erp-ink-2:     #3D4A5A;   /* texto normal */
    --erp-muted:     #6B7785;   /* texto atenuado */
    --erp-faint:     #97A2AE;   /* texto muy tenue */

    /* Radios y sombras */
    --erp-radius:    10px;
    --erp-radius-sm: 7px;
    --erp-radius-lg: 14px;
    --erp-shadow:    0 1px 2px rgba(16,32,48,.04), 0 2px 8px rgba(16,32,48,.05);
    --erp-shadow-md: 0 2px 6px rgba(16,32,48,.06), 0 8px 24px rgba(16,32,48,.08);
    --erp-shadow-focus: 0 0 0 3px rgba(14,124,134,.18);

    /* Acentos para iconografía variada (stat cards, page headers) */
    --erp-a-teal:   #0E7C86;
    --erp-a-blue:   #2E7CD6;
    --erp-a-green:  #1E9E5A;
    --erp-a-amber:  #C77E06;
    --erp-a-red:    #D64550;
    --erp-a-purple: #7A5Aec;
    --erp-a-pink:   #D6457E;
    --erp-a-indigo: #4B57C9;
    --erp-a-cyan:   #0E9BB0;
    --erp-a-slate:  #55677A;
}

/* Fondo de página un poco más frío/limpio que el gris plano del tema */
.app-main__outer { background: var(--erp-bg); }


/* ────────────────────────────────────────────────────────────────────────
   2) ELIMINACIÓN DE GRADIENTES → SÓLIDOS
      ArchitectUI colorea muchísimo con clases "fruit/hopes" que son
      linear-gradient. Las convertimos a color sólido equivalente.
   ──────────────────────────────────────────────────────────────────────── */

/* 2a) Fondos gradiente → sólidos (widgets, headers, badges de color pleno) */
.bg-mean-fruit      { background: var(--erp-a-purple) !important; }
.bg-warm-flame      { background: var(--erp-a-red) !important; }
.bg-night-fade      { background: var(--erp-a-purple) !important; }
.bg-sunny-morning   { background: var(--erp-a-amber) !important; }
.bg-tempting-azure  { background: var(--erp-a-blue) !important; }
.bg-amy-crisp       { background: var(--erp-a-cyan) !important; }
.bg-heavy-rain      { background: var(--erp-a-slate) !important; }
.bg-mixed-hopes     { background: var(--erp-a-purple) !important; }
.bg-premium-dark    { background: #2A3446 !important; }
.bg-happy-itmeo     { background: var(--erp-a-blue) !important; }
.bg-love-kiss       { background: var(--erp-a-pink) !important; }
.bg-plum-plate      { background: var(--erp-a-indigo) !important; }
.bg-happy-fisher    { background: var(--erp-a-cyan) !important; }
.bg-arielle-smile   { background: var(--erp-a-pink) !important; }
.bg-ripe-malin      { background: var(--erp-a-green) !important; }
.bg-malibu-beach    { background: var(--erp-a-blue) !important; }
.bg-deep-blue       { background: var(--erp-a-indigo) !important; }
.bg-grow-early      { background: var(--erp-a-green) !important; }
.bg-strong-bliss    { background: var(--erp-a-pink) !important; }
.bg-sweet-morning   { background: var(--erp-a-amber) !important; }
.bg-royal           { background: var(--erp-a-indigo) !important; }
.bg-vicious-stance  { background: #2A3446 !important; }
.bg-midnight-bloom  { background: var(--erp-a-indigo) !important; }
.bg-night-sky       { background: var(--erp-a-indigo) !important; }
.bg-slick-carbon    { background: #2A3446 !important; }
.bg-asteroid        { background: var(--erp-a-indigo) !important; }
.bg-dark-vanilla    { background: var(--erp-a-amber) !important; }
.bg-happy-green     { background: var(--erp-a-green) !important; }
.bg-ohhappiness     { background: var(--erp-a-green) !important; }
.bg-lucky-lily      { background: var(--erp-a-teal) !important; }
.bg-primary,
.bg-info-solid      { background: var(--erp-primary) !important; }

/* 2b) Iconos con gradiente clipeado a texto (page-title, KPIs).
      Los pasamos a color sólido de MARCA (o el que herede). Mantiene la
      forma de icono a color pero sin degradado. */
.icon-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--erp-primary);
}
/* Variedad de tinte de icono según la clase "fruit" que traiga (page titles) */
.icon-gradient.bg-mean-fruit,
.icon-gradient.bg-mixed-hopes,
.icon-gradient.bg-night-fade   { color: var(--erp-a-purple) !important; }
.icon-gradient.bg-warm-flame   { color: var(--erp-a-red) !important; }
.icon-gradient.bg-tempting-azure,
.icon-gradient.bg-malibu-beach,
.icon-gradient.bg-happy-itmeo  { color: var(--erp-a-blue) !important; }
.icon-gradient.bg-sunny-morning,
.icon-gradient.bg-sweet-morning,
.icon-gradient.bg-dark-vanilla { color: var(--erp-a-amber) !important; }
.icon-gradient.bg-ripe-malin,
.icon-gradient.bg-grow-early,
.icon-gradient.bg-happy-green  { color: var(--erp-a-green) !important; }
.icon-gradient.bg-love-kiss,
.icon-gradient.bg-arielle-smile,
.icon-gradient.bg-strong-bliss { color: var(--erp-a-pink) !important; }
.icon-gradient.bg-plum-plate,
.icon-gradient.bg-deep-blue,
.icon-gradient.bg-royal,
.icon-gradient.bg-asteroid     { color: var(--erp-a-indigo) !important; }
.icon-gradient.bg-amy-crisp,
.icon-gradient.bg-happy-fisher { color: var(--erp-a-cyan) !important; }

/* En el sidebar el icono debe quedar sólido también (anula el clip previo) */
.vertical-nav-menu .metismenu-icon.icon-gradient,
.app-sidebar .metismenu-icon.icon-gradient {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}

/* Progress bars y otros que usan .bg-*-fruit ya cubiertos arriba */


/* ────────────────────────────────────────────────────────────────────────
   3) PAGE TITLE — encabezado de módulo con icono en caja sólida
   ──────────────────────────────────────────────────────────────────────── */
.app-page-title {
    background: transparent;
    padding: 4px 0 20px;
    margin: -6px 0 0;
    border: none;
    box-shadow: none;
}
.app-page-title .page-title-heading { font-weight: 600; }
.page-title-heading { color: var(--erp-ink); font-size: 22px; }
.page-title-subheading { color: var(--erp-muted); font-size: 13px; opacity: 1; }

/* Caja del icono: cuadro sólido con tinte suave (no blanco con sombra).
   El color se hereda al <i> para que las clases .tint-* cambien ambos. */
.page-title-icon {
    background: var(--erp-primary-soft);
    color: var(--erp-primary);
    box-shadow: none !important;
    border: 1px solid transparent;
    border-radius: var(--erp-radius) !important;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
}
.page-title-icon i { font-size: 24px; color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }


/* ────────────────────────────────────────────────────────────────────────
   4) CARDS — bordes sutiles, sombra suave, mejor jerarquía
   ──────────────────────────────────────────────────────────────────────── */
.card,
.main-card.card {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow);
    background: var(--erp-surface);
}
.card .card-header,
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--erp-border);
    font-weight: 600;
    color: var(--erp-ink);
    font-size: 14px;
    min-height: 52px;
    padding: 12px 18px;
}
.card .card-body { padding: 18px; }
.card-title { color: var(--erp-ink); font-weight: 600; }

/* Tarjeta interactiva (enlaces tipo tile) con leve realce al pasar */
.erp-card-link { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.erp-card-link:hover { box-shadow: var(--erp-shadow-md); border-color: var(--erp-primary-soft-2); text-decoration: none; }

/* ── FIX: restaurar el utility .h-100 al estándar de Bootstrap ──────────────
   base.min.css (ArchitectUI) redefine .h-100 a `height:100vh` (su convención,
   con `.he-100` como 100%). Eso rompe el patrón Bootstrap de "cards de igual
   altura" (col > .card.h-100): cualquier h-100 se estira a la altura COMPLETA
   del viewport. Nuestras vistas usan h-100 con el significado estándar (100%
   del contenedor), así que lo restauramos aquí (este CSS carga después). */
.h-100 { height: 100% !important; }


/* ────────────────────────────────────────────────────────────────────────
   5) STAT CARDS (métricas / KPIs) — icono sólido en tinte + valor grande
   ──────────────────────────────────────────────────────────────────────── */
/* Grilla responsiva de stat cards (sin cálculo de columnas Bootstrap) */
.erp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.erp-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow);
    height: 100%;
}
.erp-stat__icon {
    flex: 0 0 46px; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--erp-radius-sm);
    font-size: 20px;
}
.erp-stat__body { min-width: 0; flex: 1 1 auto; }
.erp-stat__value {
    font-size: 22px; font-weight: 700; color: var(--erp-ink);
    line-height: 1.1; font-variant-numeric: tabular-nums;
    /* El monto SIEMPRE se ve completo: una sola línea y el font-size se
       reduce vía erp-fit-value.js hasta que quepa. Sin recorte con "…". */
    white-space: nowrap; overflow: hidden; max-width: 100%;
}
.erp-stat__label { font-size: 12px; color: var(--erp-muted); font-weight: 500; margin-top: 2px; }
.erp-stat__trend { font-size: 11px; font-weight: 600; margin-top: 3px; }
.erp-stat__trend.up   { color: var(--erp-success); }
.erp-stat__trend.down { color: var(--erp-danger); }

/* Tintes de icono para stat cards (sólidos suaves) */
.tint-teal   { background: var(--erp-primary-soft); color: var(--erp-a-teal); }
.tint-blue   { background: var(--erp-info-soft);    color: var(--erp-a-blue); }
.tint-green  { background: var(--erp-success-soft); color: var(--erp-a-green); }
.tint-amber  { background: var(--erp-warning-soft); color: var(--erp-a-amber); }
.tint-red    { background: var(--erp-danger-soft);  color: var(--erp-a-red); }
.tint-purple { background: var(--erp-purple-soft);  color: var(--erp-a-purple); }
.tint-slate  { background: #EDF1F5;                 color: var(--erp-a-slate); }
.tint-indigo { background: #E8EAF9;                 color: var(--erp-a-indigo); }
.tint-cyan   { background: #E1F4F7;                 color: var(--erp-a-cyan); }
.tint-pink   { background: #FBE7F0;                 color: var(--erp-a-pink); }


/* ────────────────────────────────────────────────────────────────────────
   5.b) AVATARES (iniciales o foto) — fondo suave + inicial en acento.
        Cohesivo con los tintes de las stat cards. Uso escolar: color
        determinístico por persona vía .erp-avatar--c0 … c9.
   ──────────────────────────────────────────────────────────────────────── */
.erp-avatar {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13.5px; letter-spacing: .3px;
    line-height: 1; overflow: hidden; user-select: none;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.erp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.erp-avatar--sm { flex-basis: 32px; width: 32px; height: 32px; font-size: 12px; }
.erp-avatar--c0 { background: var(--erp-primary-soft); color: var(--erp-a-teal); }
.erp-avatar--c1 { background: var(--erp-info-soft);    color: var(--erp-a-blue); }
.erp-avatar--c2 { background: var(--erp-success-soft); color: var(--erp-a-green); }
.erp-avatar--c3 { background: var(--erp-warning-soft); color: var(--erp-a-amber); }
.erp-avatar--c4 { background: var(--erp-purple-soft);  color: var(--erp-a-purple); }
.erp-avatar--c5 { background: #E8EAF9;                 color: var(--erp-a-indigo); }
.erp-avatar--c6 { background: #E1F4F7;                 color: var(--erp-a-cyan); }
.erp-avatar--c7 { background: #FBE7F0;                 color: var(--erp-a-pink); }
.erp-avatar--c8 { background: var(--erp-danger-soft);  color: var(--erp-a-red); }
.erp-avatar--c9 { background: #EDF1F5;                 color: var(--erp-a-slate); }

/* Celda "persona": avatar + texto en una fila alineada */
.erp-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.erp-person__body { min-width: 0; }

/* Icono suave inline para celdas (grado, familia, etc.) */
.erp-cell-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; margin-right: 7px;
    font-size: 11px; vertical-align: -4px;
}

/* Avatares grandes (perfil) */
.erp-avatar--lg { flex-basis: 84px;  width: 84px;  height: 84px;  font-size: 30px; }
.erp-avatar--xl { flex-basis: 104px; width: 104px; height: 104px; font-size: 38px; }

/* Cabecera de sección (formulario / panel) con icono a color */
.erp-section-head {
    display: flex; align-items: center; gap: 11px;
    font-weight: 600; color: var(--erp-ink);
}
.erp-section-ic {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.erp-section-title { line-height: 1.2; }
.erp-section-title small { font-size: 11.5px; font-weight: 500; }

/* Lista de datos del perfil con icono a color */
.erp-info-list { list-style: none; margin: 0; padding: 0; }
.erp-info-list > li { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--erp-border); }
.erp-info-list > li:first-child { border-top: none; }
.erp-info-list .ic {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.erp-info-list .txt { min-width: 0; }
.erp-info-list .k { color: var(--erp-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.erp-info-list .v { color: var(--erp-ink-2); font-weight: 600; font-size: 13.5px; line-height: 1.25; }

/* Definición en dos columnas para paneles de detalle */
.erp-dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.erp-dl > div { display: flex; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--erp-border); }
.erp-dl > div:first-child { border-top: none; }
.erp-dl dt { flex: 0 0 150px; margin: 0; color: var(--erp-muted); font-weight: 600; font-size: 12.5px; }
.erp-dl dd { margin: 0; color: var(--erp-ink-2); font-weight: 500; }
@media (min-width: 992px) { .erp-dl { grid-template-columns: 1fr 1fr; column-gap: 28px; } }

/* Barra de acciones de formulario (adherida al fondo del viewport) */
.erp-form-actions {
    position: sticky; bottom: 12px; z-index: 6;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px; margin-top: 4px;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--erp-border); border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-md);
}

/* Tabs con icono a color (perfil) */
.erp-tabs.nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.erp-tabs.nav-tabs .nav-link i { font-size: 13px; opacity: .9; }

/* Dropzone de importación */
.erp-dropzone {
    border: 2px dashed var(--erp-border-2); border-radius: var(--erp-radius-lg);
    padding: 30px 20px; text-align: center; background: var(--erp-primary-soft);
    transition: border-color .15s, background .15s; cursor: pointer;
}
.erp-dropzone:hover, .erp-dropzone.is-drag { border-color: var(--erp-primary); background: var(--erp-primary-soft-2); }
.erp-dropzone .dz-ic { font-size: 34px; color: var(--erp-a-teal); }
.erp-dropzone .dz-file { font-weight: 700; color: var(--erp-primary-700); }

/* Pasos numerados (instrucciones) */
.erp-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.erp-steps li { position: relative; padding: 2px 0 16px 40px; counter-increment: step; font-size: 13px; color: var(--erp-ink-2); }
.erp-steps li:before {
    content: counter(step); position: absolute; left: 0; top: -2px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--erp-primary-soft); color: var(--erp-a-teal);
    font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.erp-steps li:not(:last-child):after {
    content: ''; position: absolute; left: 13.5px; top: 28px; bottom: 4px; width: 1.5px; background: var(--erp-border);
}


/* ────────────────────────────────────────────────────────────────────────
   6) BADGES — sólidos suaves (soft) con buen contraste
   ──────────────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .1px;
    padding: 4px 9px;
    border-radius: 6px;
    line-height: 1.4;
}
/* Variante "soft": fondo tenue + texto fuerte del mismo tono */
.badge-success { background: var(--erp-success-soft) !important; color: #157A44 !important; }
.badge-warning { background: var(--erp-warning-soft) !important; color: #97600A !important; }
.badge-danger  { background: var(--erp-danger-soft)  !important; color: #B02A34 !important; }
.badge-info    { background: var(--erp-info-soft)    !important; color: #205FA8 !important; }
.badge-primary { background: var(--erp-primary-soft) !important; color: var(--erp-primary-700) !important; }
.badge-secondary { background: #EDF1F5 !important; color: #55677A !important; }
.badge-light   { background: #F1F4F7 !important; color: #55677A !important; }
.badge-dark    { background: #E1E5EA !important; color: #2A3446 !important; }
/* Punto de estado opcional */
.badge .erp-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:middle; }


/* ────────────────────────────────────────────────────────────────────────
   7) BOTONES — consistencia, tinte de marca, iconos alineados
   ──────────────────────────────────────────────────────────────────────── */
.btn {
    font-weight: 600;
    font-size: 13.5px;
    border-radius: var(--erp-radius-sm);
    padding: 8px 15px;
    transition: background-color .13s ease, border-color .13s ease, box-shadow .13s ease, color .13s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn .fa, .btn i { line-height: 1; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 6px; }
.btn-lg { padding: 11px 20px; font-size: 15px; }

.btn-primary {
    background: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--erp-primary-600) !important;
    border-color: var(--erp-primary-600) !important;
    box-shadow: var(--erp-shadow-focus);
}
.btn-outline-primary {
    color: var(--erp-primary) !important;
    border-color: var(--erp-border-2) !important;
    background: #fff !important;
}
.btn-outline-primary:hover {
    background: var(--erp-primary-soft) !important;
    border-color: var(--erp-primary) !important;
    color: var(--erp-primary-700) !important;
}
.btn-outline-secondary {
    color: var(--erp-ink-2) !important;
    border-color: var(--erp-border-2) !important;
    background: #fff !important;
}
.btn-outline-secondary:hover {
    background: #F1F4F7 !important;
    border-color: var(--erp-border-2) !important;
    color: var(--erp-ink) !important;
}
.btn-outline-danger { border-color: var(--erp-border-2) !important; }
.btn-outline-danger:hover { background: var(--erp-danger-soft) !important; border-color: var(--erp-danger) !important; }
.btn-success { background: var(--erp-success) !important; border-color: var(--erp-success) !important; }
.btn-danger  { background: var(--erp-danger)  !important; border-color: var(--erp-danger)  !important; }
.btn-link { color: var(--erp-primary) !important; }

/* Grupo de acciones por fila (iconos) más compacto y con tinte al hover */
.erp-row-actions .btn { padding: 5px 8px; }
.erp-row-actions .btn i { font-size: 13px; }


/* ────────────────────────────────────────────────────────────────────────
   8) TABLAS — espaciado, cabecera clara, hover, orden, sticky
   ──────────────────────────────────────────────────────────────────────── */
.table { color: var(--erp-ink-2); }
.table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .4px;
    font-weight: 700;
    color: var(--erp-muted);
    border-bottom: 1px solid var(--erp-border) !important;
    border-top: none !important;
    padding: 11px 12px;
    background: #FBFCFD;
    white-space: nowrap;
}
.table tbody td {
    padding: 12px;
    vertical-align: middle;
    border-top: 1px solid var(--erp-border);
    font-size: 13.5px;
}
.table.table-striped tbody tr:nth-of-type(odd) { background: #FBFCFD; }
.table.table-hover tbody tr:hover { background: var(--erp-primary-soft); }
.table tbody tr { transition: background-color .1s ease; }

/* Cabecera sticky opcional (tablas largas) */
.erp-table-sticky thead th { position: sticky; top: 0; z-index: 2; background: #F4F7F9; }

/* Enlaces de orden en cabecera */
.erp-sort {
    color: var(--erp-muted) !important;
    text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 5px;
    text-transform: inherit; letter-spacing: inherit;
}
.erp-sort:hover { color: var(--erp-primary) !important; }
.erp-sort i { font-size: 10px; opacity: .4; }
.erp-sort.is-active { color: var(--erp-ink) !important; }
.erp-sort.is-active i { opacity: 1; color: var(--erp-primary); }

/* Fila seleccionable (acciones masivas) */
.table tbody tr.is-selected { background: var(--erp-primary-soft) !important; }
.erp-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--erp-primary); }


/* ────────────────────────────────────────────────────────────────────────
   9) TOOLBAR DE ÍNDICE + BARRA DE ACCIONES MASIVAS FLOTANTE
   ──────────────────────────────────────────────────────────────────────── */
.erp-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    margin-bottom: 16px;
}
.erp-toolbar .form-group, .erp-toolbar .form-row > [class*="col"] { margin-bottom: 0; }

.erp-bulkbar {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%);
    background: var(--erp-ink); color: #fff;
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-md);
    padding: 10px 14px; z-index: 1055;
    display: flex; align-items: center; gap: 14px;
    opacity: 0; transition: transform .18s ease, opacity .18s ease;
    max-width: calc(100vw - 32px);
}
.erp-bulkbar.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.erp-bulkbar__count { font-weight: 700; font-size: 13px; white-space: nowrap; }
.erp-bulkbar__count b { color: #7FE3C0; }
.erp-bulkbar .btn { padding: 5px 11px; font-size: 12.5px; }
.erp-bulkbar .btn-light { background: rgba(255,255,255,.14) !important; color:#fff !important; border:none !important; }
.erp-bulkbar .btn-light:hover { background: rgba(255,255,255,.24) !important; }


/* ────────────────────────────────────────────────────────────────────────
   10) EMPTY STATE — vacío elegante con icono y acción
   ──────────────────────────────────────────────────────────────────────── */
.erp-empty { text-align: center; padding: 44px 20px; color: var(--erp-muted); }
.erp-empty__icon {
    width: 58px; height: 58px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #F1F4F7; color: var(--erp-faint); font-size: 24px;
}
.erp-empty__title { font-weight: 600; color: var(--erp-ink-2); font-size: 15px; margin-bottom: 4px; }
.erp-empty__text { font-size: 13px; }


/* ────────────────────────────────────────────────────────────────────────
   11) FORMULARIOS — foco de marca, inputs consistentes
   ──────────────────────────────────────────────────────────────────────── */
.form-control {
    border-radius: var(--erp-radius-sm);
    border-color: var(--erp-border-2);
    color: var(--erp-ink);
    font-size: 13.5px;
}
.form-control:focus {
    border-color: var(--erp-primary);
    box-shadow: var(--erp-shadow-focus);
}
.form-control::placeholder { color: var(--erp-faint); }
.custom-select { border-radius: var(--erp-radius-sm); border-color: var(--erp-border-2); }
.input-group-text { background: #F4F7F9; border-color: var(--erp-border-2); color: var(--erp-muted); }

/* Bloque de sección de formulario (agrupar campos con título) */
.erp-fieldset { border: 1px solid var(--erp-border); border-radius: var(--erp-radius); padding: 16px 18px; margin-bottom: 16px; }
.erp-fieldset__legend { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--erp-muted); margin-bottom: 12px; }


/* ────────────────────────────────────────────────────────────────────────
   12) PAGINACIÓN — coherente con la marca
   ──────────────────────────────────────────────────────────────────────── */
.pagination { margin: 0; }
.page-item .page-link {
    color: var(--erp-ink-2);
    border-color: var(--erp-border);
    border-radius: 7px !important;
    margin: 0 2px;
    min-width: 34px; text-align: center;
    font-size: 13px; font-weight: 600;
}
.page-item.active .page-link {
    background: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #fff !important;
}
.page-item .page-link:hover { background: var(--erp-primary-soft); border-color: var(--erp-primary-soft-2); }
.page-item.disabled .page-link { color: var(--erp-faint); }


/* ────────────────────────────────────────────────────────────────────────
   13) ALERTAS / FLASH — sólidas suaves, con barra lateral de color
   ──────────────────────────────────────────────────────────────────────── */
.alert { border: 1px solid transparent; border-radius: var(--erp-radius); border-left-width: 3px; font-size: 13.5px; }
.alert-success { background: var(--erp-success-soft); border-color: var(--erp-success); color: #157A44; }
.alert-warning { background: var(--erp-warning-soft); border-color: var(--erp-warning); color: #97600A; }
.alert-danger  { background: var(--erp-danger-soft);  border-color: var(--erp-danger);  color: #B02A34; }
.alert-info    { background: var(--erp-info-soft);    border-color: var(--erp-info);    color: #205FA8; }
.alert-dark    { background: #EDF0F3; border-color: #55677A; color: #2A3446; }


/* ────────────────────────────────────────────────────────────────────────
   14) ANIMACIONES SUTILES (solo cuando aportan)
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .erp-fade-in { animation: erpFadeIn .22s ease both; }
    @keyframes erpFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Utilidades de color de texto por token */
.text-primary   { color: var(--erp-primary) !important; }
.text-brand     { color: var(--erp-primary) !important; }
.text-ink       { color: var(--erp-ink) !important; }
.text-muted-2   { color: var(--erp-muted) !important; }

/* ────────────────────────────────────────────────────────────────────────
   15) ICONOS DEL SIDEBAR — un color sólido distinto por cada ítem
       El color se mantiene en reposo, hover y estado activo (mm-active).
   ──────────────────────────────────────────────────────────────────────── */
.vertical-nav-menu .metismenu-icon.pe-7s-home       { color: #0E7C86 !important; } /* Portal · Mis hijos */
.vertical-nav-menu .metismenu-icon.pe-7s-mail       { color: #2E7CD6 !important; } /* Portal · Comunicados */
.vertical-nav-menu .metismenu-icon.pe-7s-study      { color: #7A5AEC !important; } /* Portal docente */
.vertical-nav-menu .metismenu-icon.pe-7s-graph      { color: #16A085 !important; } /* Panel */
.vertical-nav-menu .metismenu-icon.pe-7s-users      { color: #2980B9 !important; } /* Estudiantes */
.vertical-nav-menu .metismenu-icon.pe-7s-culture    { color: #1E9E5A !important; } /* Familias */
.vertical-nav-menu .metismenu-icon.pe-7s-user       { color: #8E44AD !important; } /* Tutores */
.vertical-nav-menu .metismenu-icon.pe-7s-note2      { color: #C77E06 !important; } /* Admisiones */
.vertical-nav-menu .metismenu-icon.pe-7s-ribbon     { color: #D6457E !important; } /* Matrículas */
.vertical-nav-menu .metismenu-icon.pe-7s-graph3     { color: #4B57C9 !important; } /* Config académica */
.vertical-nav-menu .metismenu-icon.pe-7s-date       { color: #0E9BB0 !important; } /* Calendario */
.vertical-nav-menu .metismenu-icon.pe-7s-note       { color: #7D3C98 !important; } /* Contratos */
.vertical-nav-menu .metismenu-icon.pe-7s-cart       { color: #E0631B !important; } /* Facturación */
.vertical-nav-menu .metismenu-icon.pe-7s-calculator { color: #2471A3 !important; } /* Planes de pago */
.vertical-nav-menu .metismenu-icon.pe-7s-box1       { color: #148F77 !important; } /* Servicios */
.vertical-nav-menu .metismenu-icon.pe-7s-wallet     { color: #D64550 !important; } /* Cuentas por cobrar */
.vertical-nav-menu .metismenu-icon.pe-7s-cash       { color: #27AE60 !important; } /* Pagos */
.vertical-nav-menu .metismenu-icon.pe-7s-safe       { color: #B7950B !important; } /* Caja */
.vertical-nav-menu .metismenu-icon.pe-7s-repeat     { color: #1ABC9C !important; } /* Conciliación */
.vertical-nav-menu .metismenu-icon.pe-7s-ticket     { color: #CA6F1E !important; } /* Descuentos y becas */
.vertical-nav-menu .metismenu-icon.pe-7s-piggy      { color: #D35400 !important; } /* Acuerdos de pago */
.vertical-nav-menu .metismenu-icon.pe-7s-smile      { color: #DE3163 !important; } /* Agenda preescolar */
.vertical-nav-menu .metismenu-icon.pe-7s-medal      { color: #D68910 !important; } /* Calificaciones */
.vertical-nav-menu .metismenu-icon.pe-7s-check      { color: #2E86C1 !important; } /* Asistencia */
.vertical-nav-menu .metismenu-icon.pe-7s-flag       { color: #C0392B !important; } /* Incidencias */
.vertical-nav-menu .metismenu-icon.pe-7s-help1      { color: #6C3483 !important; } /* Seguimiento */
.vertical-nav-menu .metismenu-icon.pe-7s-plus       { color: #E74C3C !important; } /* Enfermería */
.vertical-nav-menu .metismenu-icon.pe-7s-chat       { color: #117864 !important; } /* Comunicaciones */
.vertical-nav-menu .metismenu-icon.pe-7s-copy-file  { color: #9B59B6 !important; } /* Plantillas */
.vertical-nav-menu .metismenu-icon.pe-7s-graph1     { color: #1F618D !important; } /* Reportes */
.vertical-nav-menu .metismenu-icon.pe-7s-id         { color: #5D6D7E !important; } /* Usuarios */
.vertical-nav-menu .metismenu-icon.pe-7s-lock       { color: #B03A2E !important; } /* Roles y permisos */
.vertical-nav-menu .metismenu-icon.pe-7s-config     { color: #566573 !important; } /* Configuración */
.vertical-nav-menu .metismenu-icon.pe-7s-refresh-2  { color: #7E5109 !important; } /* Automatizaciones */
.vertical-nav-menu .metismenu-icon.pe-7s-key        { color: #A93226 !important; } /* Tokens de API */
.vertical-nav-menu .metismenu-icon.pe-7s-look       { color: #839192 !important; } /* Auditoría */

/* Separador con etiqueta */
.erp-hr-label { display:flex; align-items:center; gap:12px; color:var(--erp-faint); font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin:14px 0; }
.erp-hr-label::before, .erp-hr-label::after { content:""; flex:1; height:1px; background:var(--erp-border); }


/* ────────────────────────────────────────────────────────────────────────
   9) RESPONSIVE — ajustes para móvil/tablet (Bootstrap 4 hace el grueso;
      aquí refinamos componentes propios y tablas anchas).
   ──────────────────────────────────────────────────────────────────────── */

/* Scroll suave e indicador en tablas anchas dentro de nuestras cards */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Tablet y abajo */
@media (max-width: 767.98px) {
    .app-page-title .page-title-actions {
        display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 10px;
    }
    .app-page-title .page-title-actions .btn { flex: 1 1 auto; }
    /* La barra de acciones de formulario: botones a lo ancho y apilados */
    .erp-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; bottom: 0; border-radius: var(--erp-radius) var(--erp-radius) 0 0; }
    .erp-form-actions .btn { width: 100%; }
    /* Avatares hero un poco más chicos */
    .erp-avatar--xl { flex-basis: 88px; width: 88px; height: 88px; font-size: 32px; }
}

/* Móvil */
@media (max-width: 575.98px) {
    .erp-stat { padding: 13px 14px; gap: 12px; }
    .erp-stat__icon { flex-basis: 40px; width: 40px; height: 40px; font-size: 17px; }
    .erp-stat__value { font-size: 20px; }
    .app-page-title .page-title-heading { font-size: 20px; }
    /* Definiciones siempre en una columna (ya es el default <992) y con dt encima */
    .erp-dl > div { flex-direction: column; gap: 2px; }
    .erp-dl dt { flex-basis: auto; }
    /* Tabs del perfil con scroll horizontal en vez de romper */
    .erp-tabs.nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .erp-tabs.nav-tabs .nav-link { white-space: nowrap; }
    /* Barra de filtros: cada control a lo ancho */
    .erp-toolbar > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}