/* ============================================================
   SICE THEME v2.0
   Sistema Integral de Control Escolar
   Yii2 + Bootstrap 3
   ============================================================ */

/* ============================================================
   1. VARIABLES CSS
   ============================================================ */
:root {
    --sice-primary: #2C3E50;
    --sice-accent: #2980B9;
    --sice-success: #27AE60;
    --sice-warning: #F39C12;
    --sice-danger: #E74C3C;
    --sice-info: #16A085;

    --sice-gray-100: #F8F9FA;
    --sice-gray-200: #ECF0F1;
    --sice-gray-300: #D5DBDB;
    --sice-gray-500: #717D7E;
    --sice-gray-700: #2C3E50;

    --sice-sidebar-width: 230px;
    --sice-topbar-height: 56px;
    --sice-border-radius: 6px;
    --sice-border-radius-lg: 10px;
    --sice-transition: 0.2s ease;
}


/* ============================================================
   2. BASE / RESET
   ============================================================ */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background-color: var(--sice-gray-100);
    color: var(--sice-gray-700);
    font-size: 14px;
    margin: 0;
    padding: 0;
}

a { color: var(--sice-accent); }
a:hover { color: #2472a4; text-decoration: none; }


/* ============================================================
   3. TOPBAR
   ============================================================ */
.sice-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sice-topbar-height);
    background-color: var(--sice-primary);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1030;
}

.sice-topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sice-topbar__toggle {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 18px;
    padding: 6px;
    cursor: pointer;
}
.sice-topbar__toggle:hover { color: #fff; }

.sice-topbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}
.sice-topbar__brand:hover,
.sice-topbar__brand:focus {
    color: #fff;
    text-decoration: none;
}

.sice-topbar__brand-icon {
    width: 34px;
    height: 34px;
    background-color: var(--sice-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
}

.sice-topbar__brand-text {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}
.sice-topbar__brand-text strong {
    font-weight: 600;
    color: var(--sice-accent);
}

.sice-topbar__center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.sice-topbar__periodo {
    background: rgba(255,255,255,.1);
    border-radius: var(--sice-border-radius);
    padding: 6px 14px;
    color: rgba(255,255,255,.8);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sice-topbar__periodo strong {
    color: #fff;
    font-weight: 500;
}

.sice-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.sice-topbar__notif {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    position: relative;
    cursor: pointer;
}
.sice-topbar__notif:hover { background: rgba(255,255,255,.18); color: #fff; }

.sice-topbar__notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    background: var(--sice-danger);
    border-radius: 10px;
    font-size: 9px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: 0 4px;
}

.sice-topbar__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--sice-info);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.sice-topbar__avatar:hover,
.sice-topbar__avatar:focus {
    background-color: #128c75;
}

/* Dropdown del avatar */
.sice-topbar__user-menu {
    min-width: 200px;
    border: 1px solid var(--sice-gray-300);
    border-radius: var(--sice-border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    margin-top: 6px;
}
.sice-topbar__user-info {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--sice-gray-700);
}

/* Navbar público (invitados) */
.sice-public-navbar {
    padding: 15px 0;
    text-align: right;
}


/* ============================================================
   4. SIDEBAR
   ============================================================ */
.sice-sidebar {
    position: fixed;
    top: var(--sice-topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sice-sidebar-width);
    background: #fff;
    border-right: 1px solid var(--sice-gray-300);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0 20px;
    z-index: 1020;
    transition: transform var(--sice-transition);
}

/* Scrollbar sutil */
.sice-sidebar::-webkit-scrollbar { width: 4px; }
.sice-sidebar::-webkit-scrollbar-track { background: transparent; }
.sice-sidebar::-webkit-scrollbar-thumb { background: var(--sice-gray-300); border-radius: 2px; }

/* Secciones */
.sice-sidebar__section {
    padding: 0 12px;
    margin-bottom: 4px;
}

.sice-sidebar__section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--sice-gray-500);
    padding: 12px 12px 6px;
    font-weight: 600;
}

/* Sección colapsable: toggle clickeable */
.sice-sidebar__section-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    margin: 0 0 2px;
    transition: background 0.15s;
    user-select: none;
}
.sice-sidebar__section-toggle:hover {
    background: var(--sice-gray-200);
    color: var(--sice-gray-700);
}

/* Chevron que rota al colapsar */
.sice-sidebar__chevron {
    font-size: 9px;
    transition: transform 0.2s;
    color: var(--sice-gray-300);
}
.sice-sidebar__section-toggle.collapsed .sice-sidebar__chevron {
    transform: rotate(-90deg);
}

/* Sección fija (no colapsable, ej: Principal) */
.sice-sidebar__section-label--fixed {
    cursor: default;
}
.sice-sidebar__section-label--fixed:hover {
    background: transparent;
    color: var(--sice-gray-500);
}

/* Animación suave del collapse (Bootstrap 3 ya la maneja,
   esto solo asegura que no haya saltos) */
.sice-sidebar__section-items {
    overflow: hidden;
}

/* Ítems */
.sice-sidebar__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--sice-border-radius);
    color: var(--sice-gray-500);
    font-size: 13px;
    text-decoration: none;
    margin: 1px 0;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sice-sidebar__item:hover,
.sice-sidebar__item:focus {
    background: var(--sice-gray-200);
    color: var(--sice-gray-700);
    text-decoration: none;
}
.sice-sidebar__item.active {
    background: rgba(41,128,185,.08);
    color: var(--sice-accent);
    font-weight: 500;
}
.sice-sidebar__item.active .sice-sidebar__icon {
    color: var(--sice-accent);
}

.sice-sidebar__icon {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    color: var(--sice-gray-500);
}

.sice-sidebar__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sice-sidebar__badge {
    margin-left: auto;
    background: var(--sice-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Overlay (móvil) */
.sice-sidebar__overlay {
    display: none;
    position: fixed;
    top: var(--sice-topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.35);
    z-index: 1015;
}
.sice-sidebar__overlay--visible {
    display: block;
}


/* ============================================================
   5. MAIN CONTENT AREA
   ============================================================ */
.sice-app-body {
    display: flex;
    min-height: calc(100vh - var(--sice-topbar-height));
    padding-top: var(--sice-topbar-height);
}

.sice-main-content {
    flex: 1;
    margin-left: var(--sice-sidebar-width);
    padding: 20px 24px;
    min-height: calc(100vh - var(--sice-topbar-height));
}


/* ============================================================
   6. FOOTER
   ============================================================ */
.sice-footer {
    margin-left: var(--sice-sidebar-width);
    border-top: 1px solid var(--sice-gray-300);
    padding: 14px 24px;
    background: #fff;
}
.sice-footer__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--sice-gray-500);
}
.sice-footer__version {
    font-weight: 500;
}


/* ============================================================
   7. RESPONSIVE (Bootstrap 3 breakpoints)
   ============================================================ */

/* Tablet: < 992px — sidebar oculto, se abre con toggle */
@media (max-width: 991px) {
    .sice-sidebar {
        transform: translateX(-100%);
    }
    .sice-sidebar.sice-sidebar--open {
        transform: translateX(0);
    }

    .sice-main-content {
        margin-left: 0;
    }

    .sice-footer {
        margin-left: 0;
    }
}

/* Móvil: < 768px */
@media (max-width: 767px) {
    .sice-topbar {
        padding: 0 12px;
    }

    .sice-main-content {
        padding: 16px 12px;
    }

    .sice-footer {
        padding: 12px;
    }
    .sice-footer__content {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

/* Extra small: < 480px */
@media (max-width: 480px) {
    .sice-main-content {
        padding: 12px 8px;
    }
}


/* ============================================================
   8. PAGE HEADER
   ============================================================ */
.sice-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.sice-page-header__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--sice-primary);
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sice-page-header__title .glyphicon,
.sice-page-header__title .fa {
    color: var(--sice-accent);
}

.sice-page-header__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Breadcrumb */
.sice-breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.sice-breadcrumb > li + li::before {
    content: "›";
    color: var(--sice-gray-300);
    padding: 0 4px;
}
.sice-breadcrumb > li > a {
    color: var(--sice-accent);
}
.sice-breadcrumb > .active {
    color: var(--sice-gray-500);
}


/* ============================================================
   9. BUTTONS
   ============================================================ */
.btn-sice-primary {
    background-color: var(--sice-accent);
    color: #fff;
    border: none;
    border-radius: var(--sice-border-radius);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--sice-transition);
}
.btn-sice-primary:hover,
.btn-sice-primary:focus {
    background-color: #2472a4;
    color: #fff;
}

.btn-sice-secondary {
    background-color: #fff;
    color: var(--sice-gray-700);
    border: 1px solid var(--sice-gray-300);
    border-radius: var(--sice-border-radius);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--sice-transition);
}
.btn-sice-secondary:hover,
.btn-sice-secondary:focus {
    background-color: var(--sice-gray-200);
    color: var(--sice-gray-700);
}

.btn-sice-success {
    background-color: var(--sice-success);
    color: #fff;
    border: none;
    border-radius: var(--sice-border-radius);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
}
.btn-sice-success:hover { background-color: #219a52; color: #fff; }

.btn-sice-danger {
    background-color: var(--sice-danger);
    color: #fff;
    border: none;
    border-radius: var(--sice-border-radius);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
}
.btn-sice-danger:hover { background-color: #c0392b; color: #fff; }

.btn-sice-warning {
    background-color: var(--sice-warning);
    color: #fff;
    border: none;
    border-radius: var(--sice-border-radius);
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
}
.btn-sice-warning:hover { background-color: #d68910; color: #fff; }


/* ============================================================
   10. PANELS (Cards)
   ============================================================ */
.sice-panel {
    background: #fff;
    border-radius: var(--sice-border-radius-lg);
    border: 1px solid var(--sice-gray-300);
    margin-bottom: 16px;
}

.sice-panel__header {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sice-gray-200);
    flex-wrap: wrap;
    gap: 8px;
}

.sice-panel__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sice-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sice-panel__title .glyphicon,
.sice-panel__title .fa {
    color: var(--sice-accent);
}

.sice-panel__tools {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.sice-panel__body {
    padding: 16px 18px;
}

.sice-panel__footer {
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--sice-gray-200);
    font-size: 12px;
    color: var(--sice-gray-500);
    flex-wrap: wrap;
    gap: 8px;
}

/* Variantes con borde superior de color */
.sice-panel--accent  { border-top: 3px solid var(--sice-accent); }
.sice-panel--success { border-top: 3px solid var(--sice-success); }
.sice-panel--warning { border-top: 3px solid var(--sice-warning); }
.sice-panel--danger  { border-top: 3px solid var(--sice-danger); }
.sice-panel--info    { border-top: 3px solid var(--sice-info); }


/* ============================================================
   11. TABLES / GRIDVIEW
   ============================================================ */
.sice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sice-table > thead > tr > th {
    background-color: var(--sice-gray-100);
    padding: 10px 14px;
    text-align: left;
    font-weight: 500;
    color: var(--sice-gray-500);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--sice-gray-300);
}

.sice-table > tbody > tr > td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sice-gray-200);
    color: var(--sice-gray-700);
    vertical-align: middle;
}

.sice-table > tbody > tr:last-child > td {
    border-bottom: none;
}

.sice-table > tbody > tr:hover > td {
    background-color: rgba(41,128,185,.03);
}

/* Filtros del GridView */
.sice-table > thead > tr > td {
    padding: 6px 8px;
    background: #fff;
    border-bottom: 1px solid var(--sice-gray-300);
}
.sice-table > thead > tr > td input,
.sice-table > thead > tr > td select {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--sice-gray-300);
    width: 100%;
}
.sice-table > thead > tr > td input:focus,
.sice-table > thead > tr > td select:focus {
    border-color: var(--sice-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(41,128,185,.15);
}

/* Tabla responsiva */
@media (max-width: 767px) {
    .sice-table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ============================================================
   12. ACTION BUTTONS (GridView)
   ============================================================ */
.btn-sice-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    border: none;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.12s;
    text-decoration: none;
    padding: 0;
}

.btn-sice-action--view  { color: var(--sice-info); }
.btn-sice-action--view:hover  { background: rgba(22,160,133,.1); color: var(--sice-info); text-decoration: none; }

.btn-sice-action--edit  { color: var(--sice-warning); }
.btn-sice-action--edit:hover  { background: rgba(243,156,18,.1); color: var(--sice-warning); text-decoration: none; }

.btn-sice-action--delete { color: var(--sice-danger); }
.btn-sice-action--delete:hover { background: rgba(231,76,60,.1); color: var(--sice-danger); text-decoration: none; }

.btn-sice-action--toggle { color: var(--sice-accent); }
.btn-sice-action--toggle:hover { background: rgba(41,128,185,.1); color: var(--sice-accent); text-decoration: none; }


/* ============================================================
   13. BADGES DE ESTADO
   ============================================================ */
.sice-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.sice-badge--activo     { background: rgba(39,174,96,.1);   color: #1e8449; }
.sice-badge--inactivo   { background: rgba(113,125,126,.1); color: var(--sice-gray-500); }
.sice-badge--pendiente  { background: rgba(243,156,18,.1);  color: #b7770a; }
.sice-badge--proceso    { background: rgba(41,128,185,.1);  color: #21618c; }
.sice-badge--completo   { background: rgba(39,174,96,.1);   color: #1e8449; }
.sice-badge--rechazado  { background: rgba(231,76,60,.1);   color: #a93226; }
.sice-badge--cancelado  { background: rgba(113,125,126,.1); color: var(--sice-gray-500); }
.sice-badge--borrador   { background: rgba(113,125,126,.08); color: var(--sice-gray-500); }


/* ============================================================
   14. KPI STAT CARDS
   ============================================================ */
.sice-stat-card {
    background: #fff;
    border-radius: var(--sice-border-radius-lg);
    padding: 16px 18px;
    border: 1px solid var(--sice-gray-300);
    position: relative;
    overflow: hidden;
}
.sice-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 10px 0 0 10px;
}
.sice-stat-card--accent::before  { background: var(--sice-accent); }
.sice-stat-card--success::before { background: var(--sice-success); }
.sice-stat-card--warning::before { background: var(--sice-warning); }
.sice-stat-card--danger::before  { background: var(--sice-danger); }
.sice-stat-card--info::before    { background: var(--sice-info); }

.sice-stat-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 8px;
}

.sice-stat-card__value {
    font-size: 26px;
    font-weight: 600;
    color: var(--sice-primary);
    line-height: 1;
}

.sice-stat-card__label {
    font-size: 11px;
    color: var(--sice-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}


/* ============================================================
   15. FORMS
   ============================================================ */
.sice-form .form-group {
    margin-bottom: 18px;
}

.sice-form .control-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--sice-gray-700);
    margin-bottom: 4px;
}

.sice-form .form-control {
    border-radius: var(--sice-border-radius);
    border-color: var(--sice-gray-300);
    font-size: 14px;
    padding: 8px 12px;
    height: auto;
    transition: border-color var(--sice-transition), box-shadow var(--sice-transition);
}
.sice-form .form-control:focus {
    border-color: var(--sice-accent);
    box-shadow: 0 0 0 3px rgba(41,128,185,.12);
}

.sice-form .help-block {
    font-size: 12px;
    color: var(--sice-gray-500);
    margin-top: 4px;
}

.sice-form .has-error .form-control {
    border-color: var(--sice-danger);
}
.sice-form .has-error .help-block {
    color: var(--sice-danger);
}

/* Secciones del formulario */
.sice-form__section {
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sice-gray-200);
}
.sice-form__section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sice-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sice-form__section-title .glyphicon,
.sice-form__section-title .fa {
    color: var(--sice-accent);
}

/* Botones de formulario */
.sice-form-actions {
    padding-top: 16px;
    display: flex;
    gap: 8px;
}
.sice-form-actions--right {
    justify-content: flex-end;
}


/* ============================================================
   16. TABS
   ============================================================ */
.sice-tabs .nav-tabs {
    border-bottom: 2px solid var(--sice-gray-200);
}
.sice-tabs .nav-tabs > li > a {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--sice-gray-500);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    transition: all var(--sice-transition);
}
.sice-tabs .nav-tabs > li > a:hover {
    background: transparent;
    border-bottom-color: var(--sice-gray-300);
    color: var(--sice-gray-700);
}
.sice-tabs .nav-tabs > li.active > a,
.sice-tabs .nav-tabs > li.active > a:hover,
.sice-tabs .nav-tabs > li.active > a:focus {
    border: none;
    border-bottom: 2px solid var(--sice-accent);
    color: var(--sice-accent);
    background: transparent;
}
.sice-tabs .tab-content {
    padding-top: 16px;
}


/* ============================================================
   17. MODALS
   ============================================================ */
.sice-modal .modal-content {
    border-radius: var(--sice-border-radius-lg);
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.sice-modal .modal-header {
    border-bottom: 1px solid var(--sice-gray-200);
    padding: 16px 20px;
}
.sice-modal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sice-primary);
}
.sice-modal .modal-body {
    padding: 20px;
}
.sice-modal .modal-footer {
    border-top: 1px solid var(--sice-gray-200);
    padding: 14px 20px;
}


/* ============================================================
   18. EMPTY STATE
   ============================================================ */
.sice-empty {
    text-align: center;
    padding: 48px 24px;
}
.sice-empty__icon {
    font-size: 48px;
    color: var(--sice-gray-300);
    margin-bottom: 12px;
}
.sice-empty__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sice-gray-700);
    margin-bottom: 4px;
}
.sice-empty__text {
    font-size: 13px;
    color: var(--sice-gray-500);
    margin-bottom: 16px;
}


/* ============================================================
   19. PAGINACIÓN
   ============================================================ */
.pagination > li > a,
.pagination > li > span {
    color: var(--sice-accent);
    border-color: var(--sice-gray-300);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: var(--sice-border-radius);
    margin: 0 1px;
}
.pagination > li.active > a,
.pagination > li.active > span {
    background-color: var(--sice-accent);
    border-color: var(--sice-accent);
    color: #fff;
}
.pagination > li > a:hover {
    background-color: var(--sice-gray-200);
    color: var(--sice-accent);
}


/* ============================================================
   20. SELECT2 OVERRIDES
   ============================================================ */
.select2-container--krajee .select2-selection {
    border-radius: var(--sice-border-radius) !important;
    border-color: var(--sice-gray-300) !important;
    min-height: 36px !important;
}
.select2-container--krajee .select2-selection:focus,
.select2-container--krajee.select2-container--focus .select2-selection,
.select2-container--krajee.select2-container--open .select2-selection {
    border-color: var(--sice-accent) !important;
    box-shadow: 0 0 0 3px rgba(41,128,185,.12) !important;
}
.select2-container--krajee .select2-results__option--highlighted {
    background-color: var(--sice-accent) !important;
}


/* ============================================================
   21. TOASTR OVERRIDES
   ============================================================ */
#toast-container > div {
    border-radius: var(--sice-border-radius) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    font-size: 14px !important;
    padding: 16px 20px !important;
    width: 380px !important;
}


/* ============================================================
   22. UTILITIES
   ============================================================ */
.sice-mt-0  { margin-top: 0; }
.sice-mt-1  { margin-top: 8px; }
.sice-mt-2  { margin-top: 16px; }
.sice-mt-3  { margin-top: 24px; }
.sice-mb-0  { margin-bottom: 0; }
.sice-mb-1  { margin-bottom: 8px; }
.sice-mb-2  { margin-bottom: 16px; }
.sice-mb-3  { margin-bottom: 24px; }
.sice-p-0   { padding: 0; }
.sice-text-muted { color: var(--sice-gray-500); }
.sice-text-accent { color: var(--sice-accent); }
.sice-text-success { color: var(--sice-success); }
.sice-text-danger { color: var(--sice-danger); }
.sice-text-warning { color: var(--sice-warning); }

/* ================================================================
   mod-orientacion.css
   Estilos específicos del módulo de Orientación y Semáforo
   Agregar al final de sice-theme.css o importar como archivo aparte
   ================================================================ */

/* ---------------------------------------------------------------
   Badges de semáforo (inline en tablas y tarjetas)
   --------------------------------------------------------------- */
.mod-semaforo-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}

.mod-semaforo-verde    { background-color: var(--sice-success); }
.mod-semaforo-amarillo { background-color: var(--sice-warning); }
.mod-semaforo-naranja  { background-color: #E67E22; }
.mod-semaforo-rojo     { background-color: var(--sice-danger); }

/* ---------------------------------------------------------------
   Círculo grande para la vista de historial / detalle
   --------------------------------------------------------------- */
.mod-semaforo-circulo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto;
    border: 5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mod-semaforo-circulo--verde    { background-color: var(--sice-success); }
.mod-semaforo-circulo--amarillo { background-color: var(--sice-warning); }
.mod-semaforo-circulo--naranja  { background-color: #E67E22; }
.mod-semaforo-circulo--rojo     { background-color: var(--sice-danger); }

/* ---------------------------------------------------------------
   Variantes de sice-panel para colores de semáforo
   (complementan las variantes existentes --accent, --success, etc.)
   --------------------------------------------------------------- */
.sice-panel.sice-panel--verde    { border-top: 4px solid var(--sice-success); }
.sice-panel.sice-panel--amarillo { border-top: 4px solid var(--sice-warning); }
.sice-panel.sice-panel--naranja  { border-top: 4px solid #E67E22; }
.sice-panel.sice-panel--rojo     { border-top: 4px solid var(--sice-danger); }

/* ---------------------------------------------------------------
   Tarjetas de estadísticas — override naranja
   (las tarjetas --success, --warning, --danger ya existen en el tema)
   --------------------------------------------------------------- */
.sice-stat-card--naranja {
    border-top: 4px solid #E67E22;
}
.sice-stat-card--naranja .sice-stat-card__value {
    color: #E67E22;
}