/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  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 #355D5D (marca) + paleta sólida de estados.            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ────────────────────────────────────────────────────────────────────────
   1) TOKENS DE DISEÑO (paleta sólida, radios, sombras, espaciado)
   ──────────────────────────────────────────────────────────────────────── */
:root {
    /* Marca (valor por defecto de la plantilla; brand.css lo sobrescribe) */
    --erp-primary:        #355D5D;
    --erp-primary-600:    #2B4C4C;
    --erp-primary-700:    #213B3B;
    --erp-primary-soft:   #EAF1F0;
    --erp-primary-soft-2: #CBDEDC;
    --erp-primary-rgb:    53, 93, 93;   /* para rgba() con transparencia */

    /* 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(var(--erp-primary-rgb, 53, 93, 93), .18);

    /* Acentos para iconografía variada (stat cards, page headers) */
    --erp-a-teal:   #355D5D;
    --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; }
/* Segunda cifra de la tarjeta (la otra moneda). Mismo tamaño y peso que el
   valor principal —son dos importes del mismo rango, no un pie de nota—; la
   jerarquía la marca el color. erp-fit-value.js las encoge a la par. */
.erp-stat__second {
    font-size: 22px; font-weight: 700; color: var(--erp-muted);
    line-height: 1.1; font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; max-width: 100%; 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); }

/* Variante sólida (barra superior): pleno de marca en vez del tinte suave.
   Va después de .erp-avatar--c0…c9 para ganarles sin !important. */
.erp-avatar--solid { background: var(--erp-primary); color: #fff; }

/* 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; }

/* Cada acción de fila con su propio color: ver (marca), secundarias como
   editar o descargar (ámbar), crear/aprobar (verde), eliminar/anular (rojo).
   Las secundarias llegan como btn-outline-secondary y eran el único gris
   de la fila, así que se distinguían sólo por la forma del icono. */
/* El !important es para ganarle al .btn-outline-secondary genérico de más
   arriba, que también lo lleva (ArchitectUI obliga a subir la apuesta). */
.erp-row-actions .btn-outline-secondary {
    color: var(--erp-a-amber) !important;
    border-color: #E8D9B4 !important;
}
.erp-row-actions .btn-outline-secondary:hover,
.erp-row-actions .btn-outline-secondary:focus {
    background: var(--erp-warning-soft) !important;
    border-color: var(--erp-a-amber) !important;
    color: #8A5A04 !important;
}


/* ────────────────────────────────────────────────────────────────────────
   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); }
/* El icono acepta los mismos tintes que las stat cards (tint-teal, tint-blue…):
   un estado vacío a color se lee antes que un círculo gris. */
.erp-empty__icon {
    width: 58px; height: 58px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 24px;
}
/* Sin tinte se queda en el gris de antes; con tint-* mandan los tokens de
   color (las clases .tint-* están declaradas más arriba, así que aquí sólo
   se evita pisarlas). */
.erp-empty__icon:not([class*="tint-"]) { background: #F1F4F7; color: var(--erp-faint); }
.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; }

/* ── Iconos sueltos a color ──────────────────────────────────────────────
   Para el icono que va junto a un texto y no necesita la pastilla de
   .tint-* (encabezados de grupo, listas de datos, enlaces, celdas).
   Uso: <i class="fa fa-car ico-teal"></i>
   La paleta es la misma de los tintes, así que un módulo puede llevar su
   color en la pastilla del encabezado y en los iconos sueltos de dentro. */
.ico-teal   { color: var(--erp-a-teal) !important; }
.ico-blue   { color: var(--erp-a-blue) !important; }
.ico-green  { color: var(--erp-a-green) !important; }
.ico-amber  { color: var(--erp-a-amber) !important; }
.ico-red    { color: var(--erp-a-red) !important; }
.ico-purple { color: var(--erp-a-purple) !important; }
.ico-pink   { color: var(--erp-a-pink) !important; }
.ico-indigo { color: var(--erp-a-indigo) !important; }
.ico-cyan   { color: var(--erp-a-cyan) !important; }
.ico-slate  { color: var(--erp-a-slate) !important; }

/* Encabezado de grupo con icono a color (secciones del panel, bloques de
   una ficha). Sustituye al <h6 class="text-uppercase text-muted"> suelto. */
.erp-kicker {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--erp-muted);
    margin: 0 0 8px;
}
.erp-kicker i { font-size: 13px; }

/* ────────────────────────────────────────────────────────────────────────
   15) ICONOS DEL SIDEBAR — un color sólido distinto por cada módulo
       El color se mantiene en reposo, hover y estado activo (mm-active).
       Los colores se reparten por la rueda para que dos ítems vecinos
       nunca compartan tono; el ítem insignia del proyecto lleva el de marca
       (var(--erp-primary)).
   ──────────────────────────────────────────────────────────────────────── */

/* Módulos de la plataforma */
.vertical-nav-menu .metismenu-icon.pe-7s-graph3     { color: #4B57C9 !important; } /* Panel */
.vertical-nav-menu .metismenu-icon.pe-7s-check      { color: var(--erp-primary) !important; } /* Mis acciones */
.vertical-nav-menu .metismenu-icon.pe-7s-look       { color: #C77E06 !important; } /* Por validar */
.vertical-nav-menu .metismenu-icon.pe-7s-note2      { color: #7D3C98 !important; } /* Planes de acción */
.vertical-nav-menu .metismenu-icon.pe-7s-plugin     { color: #2E86C1 !important; } /* Acciones */
.vertical-nav-menu .metismenu-icon.pe-7s-graph1     { color: #148F77 !important; } /* Indicadores */
.vertical-nav-menu .metismenu-icon.pe-7s-culture    { color: #9F5E2D !important; } /* Empresas */
.vertical-nav-menu .metismenu-icon.pe-7s-graph2     { 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-search     { color: #839192 !important; } /* Auditoría */
.vertical-nav-menu .metismenu-icon.pe-7s-magic-wand { color: #7D3C98 !important; } /* Componentes */

/* Reserva de la plantilla: iconos que hoy no usa el menú pero quedan
   listos si se añade el ítem. Al crear un módulo se toma uno de aquí (o se
   declara el suyo), cuidando que dos ítems vecinos no compartan tono. */
.vertical-nav-menu .metismenu-icon.pe-7s-key        { color: var(--erp-primary) !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-date       { color: #7A5AEC !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-calculator { color: #2471A3 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-cash       { color: #27AE60 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-safe       { color: #B7950B !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-car        { color: #2E86C1 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-tools      { color: #E0631B !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-attention  { color: #D64550 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-box1       { color: #148F77 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-users      { color: #2980B9 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-graph1     { color: #1F618D !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-box2       { color: #7D3C98 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-home       { color: var(--erp-primary) !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-mail       { color: #2E7CD6 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-graph      { color: #16A085 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-user       { color: #8E44AD !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-note       { color: #7D3C98 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-note2      { color: #C77E06 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-cart       { color: #E0631B !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-wallet     { color: #D64550 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-repeat     { color: #1ABC9C !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-ticket     { color: #CA6F1E !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-piggy      { color: #D35400 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-medal      { color: #D68910 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-check      { color: #2E86C1 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-flag       { color: #C0392B !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-chat       { color: #117864 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-copy-file  { color: #9B59B6 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-refresh-2  { color: #7E5109 !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-plus       { color: #E74C3C !important; }
.vertical-nav-menu .metismenu-icon.pe-7s-help1      { color: #6C3483 !important; }
/* 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, .erp-stat__second { 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%; }
}