/* =============================================================================
   SPAC Skin — overrides visuales modernos sobre Bootstrap 3 + main.css
   Cargado DESPUÉS de main.css desde MasterPage.master para que sus reglas ganen.
   Solo afecta apariencia (color, tipografía, bordes, sombras, espaciado);
   no toca anchos/posiciones del layout (sidebar/main-content/navbar).
   ============================================================================= */

/* ---- Tokens ---- */
:root {
    --spac-accent:        #b35a08;
    --spac-accent-soft:   #d97706;
    --spac-bg:            #f5f6f8;
    --spac-surface:       #ffffff;
    --spac-border:        #e5e7eb;
    --spac-border-soft:   #f3f4f6;
    --spac-text:          #1f2937;
    --spac-text-soft:     #6b7280;
    --spac-muted:         #9ca3af;
    --spac-success:       #10b981;
    --spac-warning:       #f59e0b;
    --spac-danger:        #ef4444;
    --spac-info:          #3b82f6;
    --spac-radius:        12px;
    --spac-radius-sm:     8px;
    --spac-shadow-sm:     0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
    --spac-shadow-md:     0 4px 10px rgba(17,24,39,.06), 0 2px 4px rgba(17,24,39,.05);
}

/* ---- Tipografía / fondo global ---- */
body {
    font-family: 'Inter', 'Segoe UI', 'Source Sans Pro', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    color: var(--spac-text) !important;
    background-color: var(--spac-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.section-title, .panel-title, .modal-title, .page-title {
    color: var(--spac-text);
    font-weight: 700;
    letter-spacing: -.01em;
}

a { color: var(--spac-accent); }
a:hover, a:focus { color: var(--spac-accent-soft); text-decoration: none; }

/* ---- Section heading: título + acciones de cada pantalla ---- */
.section-heading {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--spac-border);
}

/* ---- Breadcrumb consistente arriba del título de cada página ---- */
.spac-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: var(--spac-text-soft);
    padding: 14px 2px 8px;
    margin: 0;
    text-transform: none;
    letter-spacing: .2px;
}
.spac-breadcrumb a {
    color: var(--spac-text-soft);
    text-decoration: none;
    transition: color .12s ease;
}
.spac-breadcrumb a:hover { color: var(--spac-accent); }
.spac-breadcrumb .sep {
    color: var(--spac-muted);
    margin: 0 2px;
    font-size: 11px;
}
.spac-breadcrumb .current {
    color: var(--spac-text);
    font-weight: 600;
}
.spac-breadcrumb i.fa-home,
.spac-breadcrumb i.fa-house { margin-right: 4px; }
.section-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--spac-text) !important;
    margin: 0 !important;
}
.section-title > i.fa, .section-title > i[class*="fa-"] {
    color: var(--spac-accent);
    margin-right: 8px;
}

/* ---- Panels (Bootstrap 3) -> cards modernas ---- */
.panel {
    border: none !important;
    border-radius: var(--spac-radius) !important;
    background: var(--spac-surface);
    box-shadow: var(--spac-shadow-sm) !important;
    margin-bottom: 18px;
}
.panel-heading {
    background: var(--spac-surface) !important;
    border-bottom: 1px solid var(--spac-border-soft) !important;
    border-top-left-radius: var(--spac-radius) !important;
    border-top-right-radius: var(--spac-radius) !important;
    padding: 14px 18px !important;
    font-weight: 700;
    color: var(--spac-text);
}
.panel-body { padding: 16px 18px !important; }
.panel-default > .panel-heading { color: var(--spac-text); }
.panel-primary, .panel-primary > .panel-heading {
    border-color: var(--spac-accent) !important;
}
.panel-primary > .panel-heading {
    background: linear-gradient(180deg, var(--spac-accent), var(--spac-accent-soft)) !important;
    color: #fff !important;
}

/* ---- Botones ---- */
.btn {
    border-radius: var(--spac-radius-sm) !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease, color .15s ease !important;
    border: 1px solid transparent !important;
    letter-spacing: .1px;
}
.btn:active { transform: translateY(1px); }
.btn .fa { margin-right: 4px; }

.btn-default {
    background: #fff !important;
    color: var(--spac-text) !important;
    border-color: var(--spac-border) !important;
}
.btn-default:hover, .btn-default:focus {
    background: #f9fafb !important;
    border-color: var(--spac-muted) !important;
    color: var(--spac-text) !important;
}

.btn-primary {
    background: var(--spac-accent) !important;
    border-color: var(--spac-accent) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(179,90,8,.25);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--spac-accent-soft) !important;
    border-color: var(--spac-accent-soft) !important;
}

.btn-success { background: var(--spac-success) !important; border-color: var(--spac-success) !important; color:#fff !important; }
.btn-success:hover, .btn-success:focus { background: #0ea271 !important; border-color: #0ea271 !important; }
.btn-danger  { background: var(--spac-danger)  !important; border-color: var(--spac-danger)  !important; color:#fff !important; }
.btn-danger:hover, .btn-danger:focus  { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-warning { background: var(--spac-warning) !important; border-color: var(--spac-warning) !important; color:#1f2937 !important; }
.btn-warning:hover, .btn-warning:focus { background: #d97706 !important; border-color: #d97706 !important; color:#fff !important; }
.btn-info    { background: var(--spac-info)    !important; border-color: var(--spac-info)    !important; color:#fff !important; }
.btn-info:hover, .btn-info:focus    { background: #2563eb !important; border-color: #2563eb !important; }

.btn-xs { padding: 3px 10px !important; font-size: 11px !important; border-radius: 6px !important; }
.btn-sm { padding: 5px 12px !important; font-size: 12px !important; }
.btn-lg { padding: 10px 22px !important; font-size: 15px !important; border-radius: 10px !important; }

.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* ---- Forms / inputs ---- */
.form-control {
    border-radius: var(--spac-radius-sm) !important;
    border: 1px solid var(--spac-border) !important;
    box-shadow: none !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
    color: var(--spac-text) !important;
    background: #fff !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    height: 36px;
}
.form-control:focus {
    border-color: var(--spac-accent) !important;
    box-shadow: 0 0 0 3px rgba(179,90,8,.15) !important;
    outline: none !important;
}
.form-control[disabled], .form-control[readonly] {
    background-color: #f9fafb !important;
    color: var(--spac-muted) !important;
}
textarea.form-control { height: auto; min-height: 80px; }
select.form-control { padding-right: 28px !important; }
label { font-weight: 600; color: var(--spac-text); font-size: 13px; }
.input-group-addon {
    background: #f9fafb !important;
    border: 1px solid var(--spac-border) !important;
    border-radius: var(--spac-radius-sm) !important;
    color: var(--spac-text-soft);
}

/* ---- Tablas ---- */
.table {
    background: var(--spac-surface);
    border-radius: var(--spac-radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.table > thead > tr > th,
.table > thead > tr > th[style],
.table > thead > tr > th.HeaderStyle,
table.GridView > tbody > tr:first-child > th {
    background: #f9fafb !important;
    color: var(--spac-text-soft) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--spac-border) !important;
    padding: 11px 12px !important;
}
/* Algunos GridView usan <span> dentro del <th> que recibe el ForeColor inline:
   forzamos también el color del span hijo. */
.table > thead > tr > th * { color: inherit !important; }
.table > tbody > tr > td {
    padding: 11px 12px !important;
    border-top: 1px solid var(--spac-border-soft) !important;
    vertical-align: middle !important;
    color: var(--spac-text);
}
.table > tbody > tr:hover > td { background: #fafafa; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: #fbfbfc; }

/* GridView de ASP.NET (renderiza como <table>) hereda lo de arriba.
   Estos overrides son por si la página usa estilos inline o .grid-view. */
.GridView, table.GridView { width: 100%; }

/* ---- Modales ---- */
.modal-backdrop.in { opacity: .45 !important; }
.modal-content {
    border-radius: var(--spac-radius) !important;
    border: none !important;
    box-shadow: 0 24px 60px rgba(17,24,39,.20) !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--spac-border-soft) !important;
    padding: 16px 20px !important;
    background: #fff;
    position: relative;
}
.modal-header::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--spac-accent); border-top-left-radius: var(--spac-radius);
}
.modal-title { font-size: 17px; font-weight: 700; color: var(--spac-text); }
.modal-body  { padding: 18px 20px !important; background: #fff; }
.modal-footer {
    border-top: 1px solid var(--spac-border-soft) !important;
    padding: 12px 20px !important;
    background: #fafafa;
}
.modal-header .close {
    font-size: 22px; opacity: .5;
    width: 28px; height: 28px; line-height: 28px;
    border-radius: 6px; transition: all .12s;
}
.modal-header .close:hover { opacity: 1; background: #f3f4f6; }

/* Panel-content usado en NuevaOrden y similares */
.panel-content {
    padding: 18px 20px;
    background: #fff;
    border-bottom-left-radius: var(--spac-radius);
    border-bottom-right-radius: var(--spac-radius);
}

/* ---- Badges ---- */
.badge {
    background: #eef2ff !important;
    color: #4338ca !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.badge.primary, .badge.bg-primary { background: var(--spac-accent) !important; color: #fff !important; }
.badge.success, .badge.bg-success { background: #d1fae5 !important; color: #065f46 !important; }
.badge.warning, .badge.bg-warning { background: #fef3c7 !important; color: #92400e !important; }
.badge.danger,  .badge.bg-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.badge.info,    .badge.bg-info    { background: #dbeafe !important; color: #1e40af !important; }

/* ---- Navbar ----
   Layout: el logo ocupa los primeros 250px (mismo ancho que la sidebar) para que
   su centro coincida con el centro de los items de la sidebar de abajo. El botón
   de toggle va a la derecha del brand vía flex order. Sin border-right en el
   brand porque la sidebar ya tiene su propio borde y se ve redundante.
*/
.navbar-default {
    background-color: #fff !important;
    border-color: var(--spac-border) !important;
    box-shadow: 0 1px 2px rgba(17,24,39,.04);
    height: 56px !important;
    min-height: 56px !important;
}
.navbar-default .container-fluid {
    display: flex !important;
    align-items: center;
    padding-left: 0 !important;
    padding-right: 12px !important;
    height: 56px;
}

/* Brand a la izquierda, 250px exactos */
.navbar-default .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 250px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    flex: 0 0 250px;
    order: 0;
    float: none !important;
    overflow: hidden;
}
.navbar-default .navbar-brand > a,
.navbar-default .navbar-brand .brand-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.navbar-default .navbar-brand .brand-logo {
    height: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    max-width: 80% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Toggle button a la derecha del brand */
.navbar-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px;
    height: 56px;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 56px;
    order: 1;
}
.navbar-btn .btn-toggle-offcanvas {
    background: transparent;
    border: none;
    color: var(--spac-text-soft);
    font-size: 20px;
    padding: 8px 10px;
    border-radius: var(--spac-radius-sm);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.navbar-btn .btn-toggle-offcanvas:hover {
    background: #f3f4f6;
    color: var(--spac-accent);
}

/* Items del lado derecho del navbar */
.navbar-right {
    margin-left: auto;
    order: 2;
    height: 56px;
    display: flex;
    align-items: center;
}
.navbar-default .navbar-nav > li > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 56px;
    line-height: 56px;
}
.icon-menu {
    padding: 8px 12px !important;
    color: var(--spac-text-soft) !important;
    height: 40px !important;
    line-height: 24px !important;
    display: inline-flex !important;
    align-items: center;
}
.icon-menu:hover { color: var(--spac-accent) !important; }

/* En móvil el brand vuelve a ancho auto para no comerse toda la barra */
@media (max-width: 768px) {
    .navbar-default .navbar-brand {
        width: auto !important;
        flex: 0 0 auto;
        padding: 0 14px !important;
    }
}

/* ---- Sidebar ---- */
#left-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid var(--spac-border) !important;
    margin-top: 56px !important;   /* matchea altura del navbar */
}
#main-content { padding-top: 70px !important; } /* 56px navbar + 14px aire */

.user-account {
    padding: 18px 16px 14px !important;
    border-bottom: 1px solid var(--spac-border-soft);
    margin-bottom: 10px;
    text-align: center;
}
.user-account .user-icon i.fa-user-circle { color: var(--spac-text-soft); }
.user-account .user-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--spac-text) !important;
    margin-top: 8px;
}
.user-account hr { display: none; }   /* el border-bottom ya separa */
#left-sidebar-nav > center > strong {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--spac-muted);
    margin: 4px 0 8px;
    font-weight: 700;
}

.metismenu > li > a {
    border-radius: var(--spac-radius-sm);
    margin: 2px 8px;
    padding: 9px 12px !important;
    color: var(--spac-text-soft);
    transition: background .12s, color .12s;
}
.metismenu > li > a:hover,
.metismenu > li > a:focus,
.metismenu > li.active > a {
    background: rgba(179,90,8,.08) !important;
    color: var(--spac-accent) !important;
}
.metismenu .ml-menu > li > a {
    padding: 7px 12px 7px 32px !important;
    font-size: 13px;
    color: var(--spac-text-soft);
    border-radius: var(--spac-radius-sm);
    margin: 1px 8px;
}
.metismenu .ml-menu > li > a:hover { background: #f3f4f6 !important; color: var(--spac-accent); }
.user-account .user-name { font-size: 14px; font-weight: 700; color: var(--spac-text); }

/* ---- Dropdowns ---- */
.dropdown-menu {
    border: 1px solid var(--spac-border) !important;
    border-radius: var(--spac-radius-sm) !important;
    box-shadow: var(--spac-shadow-md) !important;
    padding: 6px !important;
}
.dropdown-menu > li > a {
    border-radius: 6px;
    padding: 7px 10px !important;
    color: var(--spac-text);
    font-size: 13px;
}
.dropdown-menu > li > a:hover { background: #f3f4f6 !important; color: var(--spac-accent); }
.dropdown-menu > li > a > i { margin-right: 6px; color: var(--spac-text-soft); }

/* ---- Paginación ---- */
.pagination > li > a, .pagination > li > span {
    color: var(--spac-text);
    border-color: var(--spac-border);
    margin: 0 2px;
    border-radius: 6px !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
    background-color: var(--spac-accent) !important;
    border-color: var(--spac-accent) !important;
    color: #fff !important;
}
.pagination > li > a:hover { background: #f3f4f6; color: var(--spac-accent); }

/* ---- Alerts / toasts (toastr ya está bonito; pulimos alertas inline) ---- */
.alert { border: none !important; border-radius: var(--spac-radius-sm) !important; padding: 10px 14px !important; }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger  { background: #fee2e2; color: #b91c1c; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info    { background: #dbeafe; color: #1e40af; }

/* ---- Cosas que aparecen en muchas pantallas: helpers ---- */
hr { border-top-color: var(--spac-border) !important; margin: 16px 0; }
.text-muted { color: var(--spac-muted) !important; }
code, pre { background: #f3f4f6 !important; border-radius: 6px; }

/* ---- Scrollbar fino (Webkit) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Inter desde Google Fonts (carga ligera, swap) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');