/* =========================================================================
   tecnufact — Sistema de marca (tecnu)
   Paleta, colores de estado, tipografía y acentos aplicados sobre el tema base.
   Cargar DESPUÉS del CSS del tema para que estos valores tengan prioridad.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    /* Marca (del manual tecnu) */
    --tecnu-purple:  #6D28D9;  /* púrpura tecnu — primario / inicio degradado */
    --tecnu-deep:    #3B0D8F;  /* púrpura profundo — fin degradado / hover */
    --tecnu-violet:  #7C3AED;  /* violeta acento — enlaces, la "u" */
    --tecnu-lila:    #A78BFA;  /* lila claro */
    --tecnu-noche:   #1D1430;  /* texto y fondos oscuros */
    --tecnu-humo:    #FAF9FC;  /* fondos claros */
    --tecnu-gradient: linear-gradient(135deg, #6D28D9 0%, #3B0D8F 100%);

    /* Colores de estado (armonizan con el púrpura — jewel tones) */
    --tecnu-success: #10B981;  /* aceptado / OK */
    --tecnu-warning: #F59E0B;  /* atención / por vencer */
    --tecnu-danger:  #E11D48;  /* rechazado / error */
    --tecnu-info:    #2563EB;  /* informativo */
}

/* ---- Tipografía --------------------------------------------------------- */
body { font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3, h4, h5, h6,
.page-header h2, .card-title, .modal-title,
.sidebar-title-text { font-family: 'Sora', 'Nunito', sans-serif; letter-spacing: -0.015em; }
/* Cifras alineadas en tablas de valores/consecutivos */
.table td, .table th, .text-right { font-variant-numeric: tabular-nums; }

/* ---- Primario = púrpura tecnu ------------------------------------------ */
.btn-primary { background-color: var(--tecnu-purple); border-color: var(--tecnu-purple); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--tecnu-deep); border-color: var(--tecnu-deep);
}
.btn-outline-primary { color: var(--tecnu-purple); border-color: var(--tecnu-purple); }
.btn-outline-primary:hover { background-color: var(--tecnu-purple); border-color: var(--tecnu-purple); color: #fff; }
.text-primary { color: var(--tecnu-purple) !important; }
.badge-primary { background-color: var(--tecnu-purple); }
.badge-info    { background-color: var(--tecnu-info); }
a { color: var(--tecnu-violet); }
a:hover, a:focus { color: var(--tecnu-deep); }

/* Foco accesible visible (quality floor) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid var(--tecnu-violet); outline-offset: 2px;
}
.form-control:focus { border-color: var(--tecnu-violet); box-shadow: 0 0 0 .2rem rgba(124,58,237,.20); }

/* ---- Colores de estado (badges, fondos, texto, barras, alertas) -------- */
.badge-success, .bg-success  { background-color: var(--tecnu-success) !important; color: #fff !important; }
.badge-warning, .bg-warning  { background-color: var(--tecnu-warning) !important; color: var(--tecnu-noche) !important; }
.badge-danger,  .bg-danger   { background-color: var(--tecnu-danger)  !important; color: #fff !important; }
.badge-info                  { background-color: var(--tecnu-info)    !important; color: #fff !important; }

.text-success { color: var(--tecnu-success) !important; }
.text-danger  { color: var(--tecnu-danger)  !important; }
.text-warning { color: #B45309 !important; }
.text-info    { color: var(--tecnu-info)    !important; }

.progress-bar.bg-success { background-color: var(--tecnu-success) !important; }
.progress-bar.bg-warning { background-color: var(--tecnu-warning) !important; color: var(--tecnu-noche); }
.progress-bar.bg-danger  { background-color: var(--tecnu-danger)  !important; }
.progress-bar.bg-info    { background-color: var(--tecnu-info)    !important; }

.btn-success { background-color: var(--tecnu-success); border-color: var(--tecnu-success); }
.btn-success:hover { background-color: #0e9f74; border-color: #0e9f74; }
.btn-danger  { background-color: var(--tecnu-danger);  border-color: var(--tecnu-danger); }
.btn-danger:hover  { background-color: #be123c; border-color: #be123c; }
.btn-outline-danger  { color: var(--tecnu-danger); border-color: var(--tecnu-danger); }
.btn-outline-danger:hover { background-color: var(--tecnu-danger); border-color: var(--tecnu-danger); color:#fff; }
.btn-outline-success { color: var(--tecnu-success); border-color: var(--tecnu-success); }
.btn-outline-success:hover { background-color: var(--tecnu-success); border-color: var(--tecnu-success); color:#fff; }

/* ---- Sidebar: marca y estado activo ------------------------------------ */
.sidebar-title-text { font-weight: 800; color: var(--tecnu-noche); }
.nav-main li.nav-active > a,
.nav-main li.nav-active > a .icon,
.nav-main li.nav-active > a i { color: var(--tecnu-purple); }
.nav-main li.nav-active > a { box-shadow: inset 3px 0 0 var(--tecnu-purple); background: rgba(109,40,217,.06); }

/* Encabezado de página con acento de marca */
.page-header h2 { color: var(--tecnu-noche); }

/* ── Sidebar interno de empresa (tecnufact) — tema claro ──────────────
   Foco: ritmo de espaciado, jerarquía tipográfica y tamaños.
   Se usa #sidebar-left para ganar especificidad al azul #0088CC del tema. */

/* Cabecera de marca: aire + hairline de separación */
#sidebar-left .sidebar-header { padding: 18px 20px 15px; border-bottom: 1px solid rgba(29,20,48,.07); }
#sidebar-left .nano-content > .nav-main,
#sidebar-left .nav-main { padding-top: 4px; }

/* Tarjeta de contexto: badge con inicial + nombre + NIT */
#sidebar-left .nav-main .sidebar-company-context {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 12px 6px; padding: 12px 13px; border-radius: 13px;
    background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(109,40,217,.05));
    border: 1px solid rgba(124,58,237,.15);
}
#sidebar-left .sidebar-company-context .scc-badge {
    flex: 0 0 36px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; border-radius: 10px;
    background: linear-gradient(135deg, #7C3AED, #6D28D9); color: #fff;
    font-family: 'Sora', sans-serif; font-weight: 800; font-size: 16px; line-height: 1;
    box-shadow: 0 3px 10px rgba(109,40,217,.30);
}
#sidebar-left .sidebar-company-context .scc-meta { display: flex; flex-direction: column; min-width: 0; }
#sidebar-left .sidebar-company-context .scc-name {
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.25;
    color: var(--tecnu-noche, #1D1430);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sidebar-left .sidebar-company-context .scc-nit {
    font-size: 11px; color: #7C3AED; margin-top: 3px; letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

/* Enlace "Volver a Empresas" — cierra la zona de contexto con un hairline */
#sidebar-left .sidebar-back { margin: 2px 12px 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(29,20,48,.06); }
#sidebar-left .sidebar-back > a.nav-link {
    display: flex; align-items: center; padding: 6px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    color: #7C3AED !important; background: transparent;
}
#sidebar-left .sidebar-back > a.nav-link:hover { background: rgba(124,58,237,.09); color: #6D28D9 !important; }
#sidebar-left .sidebar-back i { margin-right: 10px; width: 16px; font-size: 13px; text-align: center; }

/* Títulos de grupo */
#sidebar-left .nav-main .sidebar-group-title { margin: 17px 0 5px; padding: 0 22px; pointer-events: none; }
#sidebar-left .sidebar-back + .sidebar-group-title { margin-top: 12px; }
#sidebar-left .nav-main .sidebar-group-title span {
    font-family: 'Sora', sans-serif; font-size: 10.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #948AB4;
}

/* Ítems de navegación: densidad + jerarquía (aplica a todo el sidebar) */
#sidebar-left .nav-main > li > a.nav-link {
    display: flex; align-items: center;
    margin: 1px 10px; padding: 7px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; line-height: 1.2; color: #4B4664;
    transition: background .14s, color .14s, box-shadow .14s;
}
#sidebar-left .nav-main > li > a.nav-link > i {
    width: 20px; min-width: 20px; font-size: 15px; margin-right: 11px; text-align: center;
    color: #7C3AED; transition: color .14s;
}
#sidebar-left .nav-main > li > a.nav-link > svg {
    width: 18px; min-width: 18px; height: 18px; margin-right: 11px;
    color: #7C3AED; transition: color .14s;
}
#sidebar-left .nav-main > li > a.nav-link:hover { background: rgba(124,58,237,.08); color: var(--tecnu-noche, #1D1430); }
#sidebar-left .nav-main > li > a.nav-link:hover > i,
#sidebar-left .nav-main > li > a.nav-link:hover > svg { color: #6D28D9; }

/* Estado activo — override del azul #0088CC del tema (mayor especificidad por #id) */
#sidebar-left .nav-main > li.nav-active > a.nav-link,
#sidebar-left ul.nav-main > li.nav-active > a,
html.sidebar-light:not(.dark) #sidebar-left ul.nav-main > li.nav-active > a {
    background: linear-gradient(90deg, rgba(124,58,237,.14), rgba(124,58,237,.02));
    color: #6D28D9 !important;
    box-shadow: 3px 0 0 #6D28D9 inset !important;
    font-weight: 700;
}
#sidebar-left .nav-main > li.nav-active > a.nav-link > i,
#sidebar-left .nav-main > li.nav-active > a.nav-link > svg { color: #6D28D9 !important; }