/* Mentoory Design System — single source of truth for brand overrides */

/* ── Design Tokens ── */
:root {
    /* Primary scale (coral) */
    --mentory-primary-50: #FEF3EF;
    --mentory-primary-100: #FDDDD2;
    --mentory-primary-200: #F9B9A4;
    --mentory-primary-300: #F39577;
    --mentory-primary-400: #EC8463;
    --mentory-primary: #E07850;
    --mentory-primary-600: #C9663F;
    --mentory-primary-700: #A85234;
    --mentory-primary-800: #7D3D27;
    --mentory-primary-900: #52281A;

    /* Accent colors */
    --mentory-accent-gold: #F5B731;
    --mentory-accent-magenta: #D946A8;
    --mentory-gradient: linear-gradient(135deg, #F5B731, #E07850, #D946A8);

    /* Semantic colors */
    --mentory-success: #2FB344;
    --mentory-danger: #D63939;
    --mentory-warning: #F5B731;
    --mentory-info: #4299E1;

    /* Surface colors */
    --mentory-body-bg: #F9FAFB;
    --mentory-border-color: #E5E7EB;
    --mentory-surface-card: #FFFFFF;

    /* Sidebar colors */
    --mentory-sidebar-bg: #1B2434;
    --mentory-sidebar-hover: #243047;
    --mentory-sidebar-active: #2E3B55;

    /* ── Tabler overrides ── */
    --tblr-primary: #E07850;
    --tblr-primary-rgb: 224, 120, 80;
    --tblr-success: #2FB344;
    --tblr-success-rgb: 47, 179, 68;
    --tblr-danger: #D63939;
    --tblr-danger-rgb: 214, 57, 57;
    --tblr-warning: #F5B731;
    --tblr-warning-rgb: 245, 183, 49;
    --tblr-info: #4299E1;
    --tblr-info-rgb: 66, 153, 225;
    --tblr-body-bg: #F9FAFB;
    --tblr-border-color: #E5E7EB;
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Links ── */
a {
    color: var(--tblr-primary);
}

a:hover {
    color: var(--mentory-primary-700);
}

/* ── Sidebar ── */
.navbar-vertical .nav-link-header {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.navbar-vertical .nav-link:hover {
    background: var(--mentory-sidebar-hover);
}

.navbar-vertical .nav-link.active {
    border-left: 3px solid var(--mentory-primary);
    background: var(--mentory-sidebar-active);
}

/* ── Sidebar context card (active-context footer) ── */
.sidebar-context {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
}

.sidebar-context-card {
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.92); /* primary line — WCAG AA on #1B2434 */
}

.sidebar-context-card .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important; /* muted secondary line, still ≥ 4.5:1 */
}

.sidebar-context-card .ti-selector {
    color: rgba(255, 255, 255, 0.5);
}

/* Hover/cursor affordance only on the interactive (anchor) variant */
a.sidebar-context-card {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

a.sidebar-context-card:hover,
a.sidebar-context-card:focus {
    background-color: var(--mentory-sidebar-hover);
    color: #fff;
}

/* ── Avatar ── */
.avatar {
    background-color: var(--mentory-primary);
    color: #fff;
}

/* ── Card depth & hover ── */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-link-hover {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-link-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ── Form focus ring ── */
.form-control:focus,
.form-select:focus {
    border-color: var(--mentory-primary-300);
    box-shadow: 0 0 0 0.25rem rgba(224, 120, 80, 0.25);
}

/* ── Table compound cells ── */
.table .d-flex .text-truncate {
    max-width: 200px;
}

.table td.w-1 {
    white-space: nowrap;
}

/* ── Skeleton placeholder in tables ── */
.dataTables_wrapper .dataTables_processing .placeholder {
    height: 0.85rem;
    border-radius: var(--tblr-border-radius);
}

/* ── DataTables + Tabler compatibility ── */
.dt-paging .pagination {
    gap: 0.25rem;
}

.dt-paging .pagination .page-link {
    border-radius: var(--tblr-border-radius);
    font-size: var(--tblr-body-font-size);
}

.dt-info {
    font-size: var(--tblr-body-font-size);
    color: var(--tblr-secondary-color);
    padding-left: 1rem;
}

.dt-paging {
    padding-right: 1rem;
}

/* ── Table header icon spacing ── */
.table thead th .ti {
    margin-right: 0.35rem;
}

.dt-search input {
    height: calc(1.4285714286em + 0.875rem + calc(var(--tblr-border-width) * 2));
    padding: 0.4375rem 0.75rem;
    font-size: var(--tblr-body-font-size);
}

.dt-length select {
    height: calc(1.4285714286em + 0.875rem + calc(var(--tblr-border-width) * 2));
    padding: 0.4375rem 2rem 0.4375rem 0.75rem;
    font-size: var(--tblr-body-font-size);
}

/* DataTable processing overlay */
.dataTables_wrapper .dataTables_processing {
    background: rgba(255, 255, 255, 0.9);
}

/* ── Toast positioning ── */
#toastContainer {
    z-index: 1100;
}

/* ── Form validation ── */
.field-validation-error {
    color: var(--tblr-danger);
    font-size: 0.875em;
}

/* ── Auth pages ── */
.auth-panel-left {
    min-height: 100vh;
    background: var(--mentory-gradient);
    position: relative;
    overflow: hidden;
}

.auth-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.auth-circle-1 {
    width: 300px;
    height: 300px;
    top: -60px;
    left: -80px;
}

.auth-circle-2 {
    width: 200px;
    height: 200px;
    bottom: 10%;
    right: -40px;
}

.auth-circle-3 {
    width: 120px;
    height: 120px;
    bottom: 30%;
    left: 10%;
    background: rgba(255, 255, 255, 0.06);
}

.auth-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
}

.auth-line-1 {
    width: 2px;
    height: 160px;
    top: 20%;
    right: 25%;
    transform: rotate(25deg);
}

.auth-line-2 {
    width: 2px;
    height: 100px;
    bottom: 15%;
    left: 30%;
    transform: rotate(-15deg);
}

/* ── Filter panel ── */
.filter-toggle-link {
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tblr-secondary-color);
    transition: color 0.15s ease;
}

.filter-toggle-link:hover {
    color: var(--tblr-primary);
}

.filter-toggle-link .ti {
    margin-right: 0.25rem;
}

.filter-toggle-link .badge {
    font-size: 0.7rem;
    vertical-align: middle;
}

.filter-panel {
    background: var(--mentory-primary-50);
    border: 1px solid var(--mentory-border-color);
}

.filter-panel .form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

/* ── Breadcrumb compact ── */
.breadcrumb {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* ── Themed header band (021) ────────────────────────────────────────────────
   A decorative, per-section band painted behind the single shared page header.
   Structure: the band is an absolutely-positioned aria-hidden child of .page-header;
   the header's content (.container-xl) is raised above it. Tint + art are weighted
   to the RIGHT so the breadcrumb/title on the left stay over near-body-bg and remain
   WCAG-AA legible. Per-theme art is bound by the .header-band--{slug} rules below. */
/* position:relative anchors the absolute band. We intentionally do NOT set
   overflow:hidden here: the band's SVG is a background painted inside the band's own
   box (inset:0 = header size), so it is already clipped — and overflow:hidden would
   instead clip the in-header user-menu / context dropdowns, which open below the header. */
.page-header {
    position: relative;
}

.page-header > .container-xl {
    position: relative;
    z-index: 1;
}

.page-header-band {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    /* Layer order: SVG art (right-anchored) on top, right-weighted gradient tint behind.
       Both layers come from per-theme custom properties so the responsive rule below can
       drop the art alone while keeping the tint. */
    background-image: var(--band-art, none), var(--band-tint, none);
}

/* Per-theme art + tint. The gradient stays transparent under the left text column
   (0–45%) so the title/breadcrumb keep WCAG-AA contrast over the body background.
   Swap contract: overwrite /img/headers/{slug}.svg to change a section's art — no code
   change. A missing file simply fails to paint and the tint remains (FR-012). */
.header-band--dashboard {
    --band-art: url('/img/headers/dashboard.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(224, 120, 80, 0.10) 100%);
}

.header-band--proyectos {
    --band-art: url('/img/headers/proyectos.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(245, 183, 49, 0.12) 100%);
}

.header-band--conocimiento {
    --band-art: url('/img/headers/conocimiento.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(217, 70, 168, 0.10) 100%);
}

.header-band--diagnostico {
    --band-art: url('/img/headers/diagnostico.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(66, 153, 225, 0.10) 100%);
}

.header-band--personas {
    --band-art: url('/img/headers/personas.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(224, 120, 80, 0.10) 100%);
}

.header-band--incubadoras {
    --band-art: url('/img/headers/incubadoras.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(217, 70, 168, 0.09) 100%);
}

.header-band--auditoria {
    --band-art: url('/img/headers/auditoria.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(27, 36, 52, 0.06) 100%);
}

.header-band--default {
    --band-art: url('/img/headers/default.svg');
    --band-tint: linear-gradient(90deg, transparent 0 45%, rgba(224, 120, 80, 0.06) 100%);
}

/* Responsive (FR-009): below Bootstrap md, drop the SVG art so it never crowds a wrapped
   title; the faint gradient tint stays for a touch of section color. */
@media (max-width: 767.98px) {
    .page-header-band {
        --band-art: none;
    }
}