/* ============================================================
   ITPS Theme — Material Design 3 "Blue" (#002045)
   Replica la paleta del frontend Tailwind (sass-frontend)
   tailwind.config.js: primary #002045, surface #f7fafc...
   Bootstrap 5.3.2 — override vía CSS custom properties.
   Para ajustar el theme completo: edita SOLO las variables
   de :root abajo. Todo el resto deriva de ellas.
   ============================================================ */

:root {
    /* --- Brand / Primary (MD3) --- */
    --itps-primary: #0d3b5b;
    --itps-primary-container: #0d3b5b;
    --itps-on-primary: #ffffff;
    --itps-on-primary-container: #86a0cd;
    --itps-primary-fixed: #d6e3ff;
    --itps-primary-hover: #0d3b5b;

    /* --- Secondary / Tertiary --- */
    --itps-secondary: #545f72;
    --itps-secondary-container: #d5e0f7;
    --itps-tertiary: #172131;

    /* --- Surfaces --- */
    --itps-surface: #f7fafc;
    --itps-surface-lowest: #ffffff;
    --itps-surface-low: #f1f4f6;
    --itps-surface-container: #ebeef0;
    --itps-surface-high: #e5e9eb;

    /* --- Text --- */
    --itps-on-surface: #181c1e;
    --itps-on-surface-variant: #43474e;

    /* --- Outline --- */
    --itps-outline: #74777f;
    --itps-outline-variant: #c4c6cf;

    /* --- Semantic (estados) --- */
    --itps-success: #16a34a;
    --itps-success-bg: #dcfce7;
    --itps-success-text: #065f46;
    --itps-warning: #d97706;
    --itps-warning-bg: #fef3c7;
    --itps-warning-text: #92400e;
    --itps-error: #ba1a1a;
    --itps-error-bg: #ffdad6;
    --itps-error-text: #93000a;
    --itps-info: #0b3b5f;
    --itps-info-bg: #dbeafe;
    --itps-info-text: #0b3b5f;

    /* --- Radios (MD3: 2px base, 4px card, 8px xl) --- */
    --itps-radius: 2px;
    --itps-radius-card: 4px;
    --itps-radius-xl: 8px;

    /* --- Sombras --- */
    --itps-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --itps-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* --- Fuentes --- */
    --itps-font-heading: 'Public Sans', 'Segoe UI', Roboto, sans-serif;
    --itps-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ============================================================
       Bootstrap variable mapping
       ============================================================ */
    --bs-body-bg: var(--itps-surface);
    --bs-body-color: var(--itps-on-surface);
    --bs-body-font-family: var(--itps-font-body);
    --bs-primary: var(--itps-primary);
    --bs-primary-rgb: 0, 32, 69;
    --bs-secondary: var(--itps-secondary);
    --bs-secondary-rgb: 84, 95, 114;
    --bs-success: var(--itps-success);
    --bs-success-rgb: 22, 163, 74;
    --bs-danger: var(--itps-error);
    --bs-danger-rgb: 186, 26, 26;
    --bs-warning: var(--itps-warning);
    --bs-warning-rgb: 217, 119, 6;
    --bs-info: var(--itps-info);
    --bs-info-rgb: 15, 52, 96;
    --bs-border-color: var(--itps-outline-variant);
    --bs-border-radius: var(--itps-radius);
    --bs-border-radius-lg: var(--itps-radius-card);
    --bs-link-color: var(--itps-primary);
    --bs-link-color-rgb: 0, 32, 69;
    --bs-link-hover-color: var(--itps-primary-container);
    --bs-link-hover-color-rgb: 26, 54, 93;
}

body {
    font-family: var(--itps-font-body);
    background-color: var(--itps-surface);
    color: var(--itps-on-surface);
}

/* --- Tipografia (MD3 scale) --- */
h1, .h1 { font-family: var(--itps-font-heading); font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-family: var(--itps-font-heading); font-weight: 600; letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--itps-font-heading); font-weight: 600; }
h4, .h4 { font-family: var(--itps-font-heading); font-weight: 600; }
h5, .h5, h6, .h6 { font-family: var(--itps-font-heading); font-weight: 600; }

/* --- Labels estilo "label-caps" (12px, uppercase, tracking) --- */
.form-label {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--itps-on-surface-variant);
}

/* ============================================================
   Navbar (replica MD3 surface + primary brand)
   ============================================================ */
.itps-navbar {
    background-color: var(--itps-primary);
    border-bottom: 1px solid var(--itps-on-primary-container);
    font-family: var(--itps-font-heading);
}
.itps-navbar .navbar-brand {
    color: var(--itps-on-primary);
    font-weight: 600;
}
.itps-navbar .nav-link {
    color: var(--itps-on-primary-container);
    transition: color 0.2s ease;
}
.itps-navbar .nav-link:hover,
.itps-navbar .nav-link:focus {
    color: var(--itps-on-primary);
}
.itps-navbar .nav-link.active {
    color: var(--itps-on-primary);
}
.itps-navbar .navbar-toggler {
    border-color: var(--itps-on-primary-container);
}
.itps-navbar .navbar-toggler-icon {
    filter: invert(1) brightness(0.9);
}
.itps-navbar .dropdown-menu {
    background-color: var(--itps-surface-lowest);
    border: 1px solid var(--itps-outline-variant);
}
.itps-navbar .dropdown-menu .dropdown-item {
    color: var(--itps-on-surface);
}
.itps-navbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--itps-surface-container);
    color: var(--itps-primary);
}
.itps-navbar .nav-link.text-light-emphasis {
    color: var(--itps-on-primary-container) !important;
}

/* ============================================================
   Botones (MD3: primary #002045, hover primary-container, radius 2px)
   ============================================================ */
.btn { border-radius: var(--itps-radius); }
.btn-primary {
    background-color: var(--itps-primary);
    border-color: var(--itps-primary);
    color: var(--itps-on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--itps-primary-hover);
    border-color: var(--itps-primary-hover);
    color: var(--itps-on-primary);
}
.btn-outline-primary {
    color: var(--itps-primary);
    border-color: var(--itps-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--itps-primary);
    border-color: var(--itps-primary);
    color: var(--itps-on-primary);
}
.btn-secondary {
    background-color: var(--itps-secondary);
    border-color: var(--itps-secondary);
    color: #ffffff;
}
.btn:disabled {
    background-color: var(--itps-outline-variant);
    border-color: var(--itps-outline-variant);
    color: var(--itps-on-surface-variant);
    cursor: not-allowed;
}

/* ============================================================
   Cards (MD3: surface-lowest + outline-variant, radius 4px)
   ============================================================ */
.card {
    background-color: var(--itps-surface-lowest);
    border: 1px solid var(--itps-outline-variant);
    border-radius: var(--itps-radius-card);
    box-shadow: var(--itps-shadow-sm);
}

/* ============================================================
   Tablas (MD3: header surface-container, texto on-surface)
   ============================================================ */
.table {
    --bs-table-color: var(--itps-on-surface);
    --bs-table-bg: var(--itps-surface-lowest);
    --bs-table-border-color: var(--itps-outline-variant);
}
.table thead th {
    background-color: var(--itps-surface-container);
    color: var(--itps-on-surface);
    font-family: var(--itps-font-heading);
    font-weight: 600;
    border-bottom: 1px solid var(--itps-outline-variant);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--itps-surface-low);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--itps-surface-container);
}
.table a:not(.btn),
a.itps-link-view {
    color: var(--itps-primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}
.table a:not(.btn)::after,
a.itps-link-view::after {
    content: "\f1c5";
    font-family: 'bootstrap-icons', sans-serif;
    font-size: 0.7em;
    margin-left: 0.35em;
    vertical-align: super;
    opacity: 0.8;
}
.table a:not(.btn):hover,
.table a:not(.btn):focus,
a.itps-link-view:hover,
a.itps-link-view:focus {
    color: var(--itps-primary-hover);
    text-decoration-thickness: 2px;
}
.table .text-muted { color: var(--itps-on-surface-variant) !important; }

/* ============================================================
   Formularios (MD3: outline-variant border, focus primary)
   ============================================================ */
.form-control,
.form-select {
    background-color: var(--itps-surface-lowest);
    border: 1px solid var(--itps-outline-variant);
    border-radius: var(--itps-radius);
    color: var(--itps-on-surface);
    padding-top: 10px;
    padding-bottom: 10px;
}
.form-control::placeholder {
    color: var(--itps-on-surface-variant);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--itps-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 32, 69, 0.25);
    color: var(--itps-on-surface);
}
.form-control.is-invalid,
.form-control:invalid {
    border-color: var(--itps-error);
}

/* ============================================================
   Badges (colores semanticos MD3)
   ============================================================ */
.badge { font-weight: 600; }
.badge.bg-success { background-color: var(--itps-success) !important; }
.badge.bg-primary { background-color: var(--itps-primary) !important; }
.badge.bg-secondary { background-color: var(--itps-secondary) !important; }
.badge.bg-danger { background-color: var(--itps-error) !important; }
.badge.bg-warning { background-color: var(--itps-warning) !important; color: #fff; }
.badge.bg-info { background-color: var(--itps-info) !important; }

/* ============================================================
   Semaforo de avance (indicador puntual de color)
   ============================================================ */
.itps-semaforo {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    vertical-align: middle;
    flex: 0 0 auto;
}
.itps-semaforo.sem-verde { background-color: var(--itps-success); }
.itps-semaforo.sem-amarillo { background-color: var(--itps-warning); }
.itps-semaforo.sem-rojo { background-color: var(--itps-error); }
.itps-semaforo.sem-vacio { background-color: var(--itps-outline-variant); }

/* ============================================================
   Alerts (colores "soft" MD3)
   ============================================================ */
.alert-success {
    background-color: var(--itps-success-bg);
    border-color: var(--itps-success);
    color: var(--itps-success-text);
}
.alert-danger {
    background-color: var(--itps-error-bg);
    border-color: var(--itps-error);
    color: var(--itps-error-text);
}
.alert-warning {
    background-color: var(--itps-warning-bg);
    border-color: var(--itps-warning);
    color: var(--itps-warning-text);
}
.alert-info {
    background-color: var(--itps-info-bg);
    border-color: var(--itps-info);
    color: var(--itps-info-text);
}

/* ============================================================
   Paginacion (paginador de Laravel)
   ============================================================ */
.pagination .page-link {
    color: var(--itps-primary);
    border-color: var(--itps-outline-variant);
    background-color: var(--itps-surface-lowest);
}
.pagination .page-item.active .page-link {
    background-color: var(--itps-primary);
    border-color: var(--itps-primary);
    color: var(--itps-on-primary);
}
.pagination .page-item.disabled .page-link {
    color: var(--itps-on-surface-variant);
}

/* ============================================================
   Utilidades reutilizables (equivalentes MD3)
   ============================================================ */
.text-primary { color: var(--itps-primary) !important; }
.bg-surface { background-color: var(--itps-surface); }
.text-on-surface-variant { color: var(--itps-on-surface-variant); }

/* ============================================================
   SIDEBAR LAYOUT (sidebar vertical reemplaza navbar top)
   ============================================================ */
.itps-layout {
    min-height: 100vh;
}

.itps-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 264px;
    background-color: var(--itps-primary);
    color: var(--itps-on-primary-container);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 1030;
    font-family: var(--itps-font-heading);
}

.itps-sidebar .sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    color: var(--itps-on-primary);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--itps-on-primary-container);
}
.itps-sidebar .sidebar-brand img {
    height: 104px;
    /* border-radius: var(--itps-radius-card);
    background-color: var(--itps-surface-lowest); */
    padding: 4px;
}
.itps-sidebar .sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
}
.itps-sidebar .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--itps-on-primary-container);
    padding: 0.6rem 1.25rem;
    border-radius: 0 var(--itps-radius-card) var(--itps-radius-card) 0;
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 0.925rem;
}
.itps-sidebar .nav-item .nav-link i.bi {
    font-size: 1.1rem;
}
.itps-sidebar .nav-item .nav-link:hover {
    background-color: var(--itps-primary-container);
    color: var(--itps-on-primary);
}
.itps-sidebar .nav-item .nav-link.active {
    background-color: var(--itps-primary-container);
    color: var(--itps-on-primary);
    border-left-color: var(--itps-primary-fixed);
}
/* Dropdowns dentro del sidebar (Clientes/Contactos) */
.itps-sidebar .dropdown-menu {
    background-color: var(--itps-surface-lowest);
    border: 1px solid var(--itps-outline-variant);
    margin-left: 1rem;
    border-radius: var(--itps-radius-card);
}
.itps-sidebar .dropdown-menu .dropdown-item {
    color: var(--itps-on-surface);
    font-family: var(--itps-font-body);
    font-size: 0.9rem;
}
.itps-sidebar .dropdown-menu .dropdown-item:hover {
    background-color: var(--itps-surface-container);
    color: var(--itps-primary);
}

.itps-sidebar .sidebar-footer {
    border-top: 1px solid var(--itps-on-primary-container);
    padding: 0.75rem 1.25rem;
}
.itps-sidebar .sidebar-footer .dropdown-toggle {
    color: var(--itps-on-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.itps-sidebar .sidebar-footer .tenant-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--itps-on-primary-container);
}

.itps-main {
    margin-left: 264px;
    min-height: 100vh;
}
.itps-main > .itps-content {
    padding: 1.75rem 2rem 3rem;
}
.itps-topbar {
    background-color: var(--itps-surface-lowest);
    border-bottom: 1px solid var(--itps-outline-variant);
    padding: 0.6rem 2rem;
    display: none;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.itps-sidebar-toggle {
    background: none;
    border: none;
    color: var(--itps-primary);
    font-size: 1.5rem;
    cursor: pointer;
}
.itps-sidebar-backdrop {
    display: none;
}

/* Mobile: sidebar colapsable */
@media (max-width: 991.98px) {
    .itps-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .itps-sidebar.open {
        transform: translateX(0);
    }
    .itps-main {
        margin-left: 0;
    }
    .itps-topbar {
        display: flex;
    }
    .itps-sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1029;
    }
}