/*
 * MODERN OVERRIDE CSS — Berakhah Facturación
 * Se carga encima de AdminLTE 2 sin modificar nada.
 * Moderniza la apariencia: bordes redondeados, sombras, tipografía, colores.
 * Archivo liviano (~4KB) — no afecta rendimiento.
 */

/* ═══════════════════════════════════════════
   TIPOGRAFÍA GENERAL
   ═══════════════════════════════════════════ */
body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   BOXES (contenedores principales)
   ═══════════════════════════════════════════ */
.box {
    border-radius: 8px;
    border-top: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.box-header {
    border-radius: 8px 8px 0 0;
}

.box-header.with-border {
    border-bottom: 1px solid #f0f0f0;
}

.box-footer {
    border-radius: 0 0 8px 8px;
}

/* Quitar borde superior coloreado de AdminLTE */
.box.box-primary { border-top: 3px solid #3c8dbc; border-radius: 8px; }
.box.box-success { border-top: 3px solid #00a65a; border-radius: 8px; }
.box.box-warning { border-top: 3px solid #f39c12; border-radius: 8px; }
.box.box-danger  { border-top: 3px solid #dd4b39; border-radius: 8px; }
.box.box-info    { border-top: 3px solid #00c0ef; border-radius: 8px; }

/* ═══════════════════════════════════════════
   SMALL BOXES (tarjetas de métricas)
   ═══════════════════════════════════════════ */
.small-box {
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.small-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.small-box .inner h3 {
    font-size: 32px;
    font-weight: 700;
}

.small-box .inner p {
    font-size: 14px;
    font-weight: 500;
}

.small-box .small-box-footer {
    border-radius: 0 0 10px 10px;
    padding: 5px 0;
    font-size: 13px;
}

.small-box .icon {
    top: 8px;
    right: 15px;
    font-size: 70px;
    opacity: 0.15;
}

/* ═══════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════ */
.btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, #3c8dbc, #2d6f9a);
}

.btn-success {
    background: linear-gradient(135deg, #00a65a, #008d4c);
}

.btn-danger {
    background: linear-gradient(135deg, #dd4b39, #c23321);
}

.btn-warning {
    background: linear-gradient(135deg, #f39c12, #e08e0b);
}

.btn-info {
    background: linear-gradient(135deg, #00c0ef, #00a1c9);
}

/* ═══════════════════════════════════════════
   TABLAS
   ═══════════════════════════════════════════ */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead > tr > th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #495057;
}

.table > tbody > tr {
    transition: background-color 0.15s ease;
}

.table > tbody > tr:hover {
    background-color: #eef5fb;
}

/* Filas clickeables — cursor pointer */
.table > tbody > tr[data-link] {
    cursor: pointer;
}

.table > tbody > tr[data-link]:hover {
    background-color: #e3f0fa;
    box-shadow: inset 3px 0 0 #3c8dbc;
}

.table-bordered {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Striped más sutil */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

.table-striped > tbody > tr:nth-of-type(odd):hover {
    background-color: #eef5fb;
}

/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.main-sidebar {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.sidebar-menu > li > a {
    border-radius: 0;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-menu > li.active > a {
    border-left: 3px solid #3c8dbc;
    background-color: rgba(60, 141, 188, 0.08);
}

.sidebar-menu > li > a:hover {
    background-color: rgba(60, 141, 188, 0.05);
}

.sidebar-menu .treeview-menu > li > a {
    padding-left: 25px;
    transition: all 0.15s ease;
}

.sidebar-menu .treeview-menu > li > a:hover {
    padding-left: 30px;
}

/* ═══════════════════════════════════════════
   HEADER / NAVBAR
   ═══════════════════════════════════════════ */
.main-header .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-custom-menu .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid #e9ecef;
    margin-top: 5px;
}

.navbar-custom-menu .dropdown-menu > li > a {
    padding: 8px 15px;
    transition: background-color 0.15s ease;
}

/* ═══════════════════════════════════════════
   ALERTAS
   ═══════════════════════════════════════════ */
.alert {
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-weight: 500;
}

.alert-warning {
    background-color: #ff9800;
    color: #fff;
}

.alert-danger {
    background-color: #e53935;
    color: #fff;
}

.alert-info {
    background-color: #039be5;
    color: #fff;
}

.alert-success {
    background-color: #43a047;
    color: #fff;
}

/* ═══════════════════════════════════════════
   CALLOUTS (saludo Berakhah)
   ═══════════════════════════════════════════ */
.callout {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════════════
   BADGES Y LABELS
   ═══════════════════════════════════════════ */
.label {
    border-radius: 10px;
    font-weight: 500;
    padding: 4px 10px;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.badge {
    border-radius: 10px;
    font-weight: 600;
}

/* Status labels de comprobantes */
.label.closed,
.label.autorizado {
    background-color: #00a65a;
    color: #fff;
}

.label.opened,
.label.no-autorizado {
    background-color: #f39c12;
    color: #fff;
}

.label.anulado {
    background-color: #e53935;
    color: #fff;
}

.label.draft {
    background-color: #999;
    color: #fff;
}

/* ═══════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════ */
.form-control {
    border-radius: 6px;
    border: 1px solid #dce4ec;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    padding: 8px 12px;
}

.form-control:focus {
    border-color: #3c8dbc;
    box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.15);
}

select.form-control {
    border-radius: 6px;
}

/* ═══════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════ */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #f0f0f0;
}

.modal-footer {
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #f0f0f0;
}

/* ═══════════════════════════════════════════
   PAGINACIÓN
   ═══════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
    border-radius: 6px;
    margin: 0 2px;
    border: 1px solid #e9ecef;
    transition: all 0.15s ease;
}

.pagination > li > a:hover {
    background-color: #3c8dbc;
    color: #fff;
    border-color: #3c8dbc;
}

.pagination > .active > a {
    border-radius: 6px;
    background-color: #3c8dbc;
    border-color: #3c8dbc;
}

/* ═══════════════════════════════════════════
   CONTENT WRAPPER
   ═══════════════════════════════════════════ */
.content-wrapper {
    background-color: #f4f6f9;
}

/* ═══════════════════════════════════════════
   SCROLLBAR MODERNA (Chrome/Edge)
   ═══════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.main-footer {
    border-top: 1px solid #e9ecef;
    background-color: #fff;
}

/* ═══════════════════════════════════════════
   LOADING SPINNER MODERNO
   ═══════════════════════════════════════════ */
body.loading .modalwait {
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
}

body.loading .modalwait::after {
    content: '';
    width: 50px;
    height: 50px;
    border: 4px solid #e9ecef;
    border-top: 4px solid #003d8b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   DROPDOWN NOTIFICACIONES (campana)
   ═══════════════════════════════════════════ */
.notifications-menu .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.notifications-menu .dropdown-menu .menu > li > a {
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
    white-space: normal;
}

.notifications-menu .dropdown-menu .menu > li:last-child > a {
    border-bottom: none;
}

/* ═══════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════ */
.progress {
    border-radius: 10px;
    height: 10px;
    box-shadow: none;
    background-color: #e9ecef;
}

.progress-bar {
    border-radius: 10px;
}