/* ===========================
   ESTILO AMETSILVA GOLD EDITION
   =========================== */

/* ======== GENERAL ======== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #0f0f0f;
    color: #f5f5f5;
}

/* ======== NAVBAR ======== */
.navbar {
    background-color: #1a1a1a;
    box-shadow: 0 2px 5px rgba(218,175,15,0.2);
    z-index: 1030;
}

.navbar-brand {
    display: flex;
    align-items: center;
    color: #DAAF0F !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .navbar-brand img {
        height: 42px;
        margin-right: 10px;
        filter: drop-shadow(0 0 4px rgba(218,175,15,0.5));
    }

.navbar-toggler {
    border: none;
    font-size: 22px;
    color: #DAAF0F !important;
}

.navbar-text {
    color: #DAAF0F !important;
    font-size: 0.9rem;
}

/* ======== SIDEBAR ======== */
.sidebar {
    position: sticky;
    top: 65px;
    height: calc(100vh - 65px);
    overflow-y: auto;
    background-color: #0b0b0b; /* negro satinado */
    border-right: 1px solid rgba(218,175,15,0.3);
    box-shadow: inset -1px 0 0 rgba(218,175,15,0.15);
    padding-top: 15px;
    padding-bottom: 20px;
}

    /* Enlaces */
    .sidebar a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #DAAF0F;
        text-decoration: none;
        padding: 12px 18px;
        margin: 6px 10px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.25s ease;
    }

        /* Hover y Activo */
        .sidebar a:hover,
        .sidebar a.active {
            background-color: #DAAF0F;
            color: #000;
            box-shadow: 0 0 12px rgba(218,175,15,0.45);
            transform: translateX(3px);
        }

    /* Íconos */
    .sidebar i {
        font-size: 22px;
        width: 28px;
        text-align: center;
        color: #DAAF0F;
        transition: all 0.3s ease;
        filter: drop-shadow(0 0 3px rgba(218,175,15,0.4));
    }

    /* Íconos Hover/Activo */
    .sidebar a:hover i,
    .sidebar a.active i {
        color: #000;
        text-shadow: 0 0 10px rgba(218,175,15,0.9);
        transform: scale(1.15);
    }

    /* Cerrar sesión */
    .sidebar a.text-danger {
        color: #ff4f4f !important;
    }

        .sidebar a.text-danger:hover {
            background-color: #ff4f4f;
            color: #fff !important;
            box-shadow: 0 0 8px rgba(255,79,79,0.4);
        }

/* ======== CONTENIDO ======== */
.content {
    padding: 20px;
    background-color: #0f0f0f;
    min-height: calc(100vh - 65px);
}

/* ======== LOGIN ======== */
body.login-page {
    background: radial-gradient(circle at center, #111 0%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

    body.login-page::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 600px;
        background: url('../Imagenes/AMET SILVA.png') no-repeat center center;
        background-size: contain;
        opacity: 0.08;
        transform: translate(-50%, -50%);
        filter: blur(1px);
        pointer-events: none;
    }

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 1;
}

.login-box {
    background-color: rgba(25, 25, 25, 0.92);
    border: 1px solid rgba(218,175,15,0.3);
    padding: 40px 35px;
    border-radius: 15px;
    width: 360px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(218,175,15,0.25);
    transition: all 0.3s ease;
}

    .login-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(218,175,15,0.35);
    }

    .login-box .logo {
        width: 90px;
        height: 90px;
        border-radius: 10px;
        border: 2px solid #DAAF0F;
    }

    .login-box h4 {
        color: #DAAF0F;
        margin-top: 15px;
    }

.form-control {
    border-radius: 8px;
    height: 45px;
    font-size: 15px;
    background-color: #222;
    color: #f5f5f5;
    border: 1px solid #333;
}

    .form-control:focus {
        border-color: #DAAF0F;
        box-shadow: 0 0 8px rgba(218,175,15,0.4);
    }

.btn-primary {
    background-color: #DAAF0F !important;
    border: none;
    height: 45px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    color: #000 !important;
    transition: 0.3s ease;
}

    .btn-primary:hover {
        background-color: #FFD700 !important;
    }

/* ======== SCROLLBAR ======== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(218,175,15,0.4);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(218,175,15,0.7);
    }

/* ======== LOADER ======== */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.loader-content {
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
}

.loader-logo {
    width: 80px;
    height: 80px;
    animation: spin 2.5s linear infinite;
    filter: drop-shadow(0 0 8px rgba(218,175,15,0.5));
}

/* ======== TABLAS ======== */
.grid-custom th {
    background-color: #1a1a1a;
    color: #DAAF0F;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}

.grid-custom td {
    font-size: 14px;
    vertical-align: middle;
    color: #f5f5f5;
}

.grid-custom tr:hover {
    background-color: rgba(218,175,15,0.1);
}

.card {
    background-color: #111;
    border: 1px solid rgba(218,175,15,0.3);
    border-radius: 10px;
    color: #f5f5f5;
}

.card-header h5 {
    margin: 0;
    font-weight: 600;
    color: #DAAF0F;
}

/* ======== ANIMACIONES ======== */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ======== EFECTO DORADO OUTLINE VISUAL ======== */
.sidebar i {
    font-size: 22px;
    width: 28px;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px #DAAF0F; /* borde dorado */
    text-stroke: 1px #DAAF0F;
    filter: drop-shadow(0 0 3px rgba(218,175,15,0.5));
    transition: all 0.3s ease;
}

/* Hover / Activo: relleno dorado completo */
.sidebar a:hover i,
.sidebar a.active i {
    color: #FFD700;
    -webkit-text-stroke: 0px transparent;
    text-shadow: 0 0 10px rgba(218,175,15,0.8), 0 0 20px rgba(218,175,15,0.6);
    transform: scale(1.1);
}

/* ====== AJUSTE VISUAL AMETSILVA ADMIN ====== */

/* Fondo general */
body, .content, .tab-content {
    background-color: #0f0f0f !important;
    color: #f5f5f5 !important;
}

/* Títulos y encabezados */
h3, h5, h4 {
    color: #DAAF0F !important;
}

/* Pestañas (Tabs) */
.nav-tabs .nav-link {
    color: #DAAF0F !important;
    background-color: #1a1a1a !important;
    border: 1px solid rgba(218,175,15,0.3);
}

    .nav-tabs .nav-link.active {
        background-color: #DAAF0F !important;
        color: #000 !important;
    }

/* Tarjetas */
.card {
    background-color: #111 !important;
    border: 1px solid rgba(218,175,15,0.3) !important;
    color: #fff !important;
}

.card-header {
    background-color: #DAAF0F !important;
    color: #000 !important;
    font-weight: 600;
}

/* Etiquetas y texto */
label, p, th, td {
    color: #f5f5f5 !important;
}

/* Botones */
.btn-success, .btn-primary {
    background-color: #DAAF0F !important;
    color: #000 !important;
    border: none !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

    .btn-success:hover, .btn-primary:hover {
        background-color: #FFD700 !important;
        color: #000 !important;
        box-shadow: 0 0 12px rgba(218,175,15,0.5);
    }

/* Botones outline */
.btn-outline-primary {
    color: #DAAF0F !important;
    border-color: #DAAF0F !important;
}

    .btn-outline-primary:hover {
        background-color: #DAAF0F !important;
        color: #000 !important;
    }

/* Tablas */
.table {
    background-color: #1a1a1a !important;
    color: #fff !important;
}

    .table thead {
        background-color: #DAAF0F !important;
        color: #000 !important;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(218,175,15,0.05) !important;
}

/* ====== CORRECCIÓN FINAL COLORES AMET SILVA ====== */

/* Reemplazar azul Bootstrap por dorado */
.text-primary,
h3.text-primary,
h5.text-primary,
.nav-tabs .nav-link.text-primary,
.card-header.bg-primary,
.btn-primary,
.btn-outline-primary {
    color: #DAAF0F !important;
}

/* Fondos que usan bg-primary (azul por defecto) */
.bg-primary {
    background-color: #DAAF0F !important;
    color: #000 !important;
}

/* Bordes activos y hover */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #DAAF0F !important;
    border-color: #DAAF0F !important;
    color: #000 !important;
}

/* Textos de tablas y títulos */
.table thead th {
    background-color: #DAAF0F !important;
    color: #000 !important;
}

/* Botones outline amarillos */
.btn-outline-primary {
    border-color: #DAAF0F !important;
    color: #DAAF0F !important;
}

    .btn-outline-primary:hover {
        background-color: #DAAF0F !important;
        color: #000 !important;
    }

/* Enlaces activos o de pestañas */
.nav-tabs .nav-link {
    color: #DAAF0F !important;
}

    .nav-tabs .nav-link:hover {
        color: #FFD700 !important;
    }

/* Textos dentro de cards */
.card h5, .card h3, .card label, .card p {
    color: #fff !important;
}

/* ====== BOTONES CON ICONOS ESTILO AMET SILVA ====== */

/* Botones con borde dorado */
.btn-outline-primary,
.btn-outline-warning,
.btn-outline-oro {
    border: 1px solid #DAAF0F !important;
    color: #DAAF0F !important;
    background: transparent !important;
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* 👈 separa el icono del texto */
    transition: all 0.3s ease;
}

    .btn-outline-primary:hover,
    .btn-outline-warning:hover,
    .btn-outline-oro:hover {
        background-color: #DAAF0F !important;
        color: #000 !important;
        box-shadow: 0 0 12px rgba(218,175,15,0.4);
        transform: translateY(-1px);
    }

    /* Iconos dentro del botón */
    .btn-outline-primary i,
    .btn-outline-warning i,
    .btn-outline-oro i {
        font-size: 15px;
        color: inherit; /* usa el mismo color del texto */
        margin-right: 4px;
    }

/* Si querés que los iconos queden un poco más grandes y centrados visualmente */
.btn i {
    font-size: 16px;
    line-height: 1;
}

/* ====== TABLAS / DATAGRID AMET SILVA ====== */

/* Fondo oscuro general de las tablas */
.table,
.grid-custom {
    background-color: #111 !important;
    color: #f5f5f5 !important;
    border-color: rgba(218,175,15,0.2) !important;
}

    /* Filas alternadas (striped) */
    .table-striped > tbody > tr:nth-of-type(odd),
    .grid-custom tr:nth-child(odd) {
        background-color: rgba(218,175,15,0.05) !important;
    }

    .table-striped > tbody > tr:nth-of-type(even),
    .grid-custom tr:nth-child(even) {
        background-color: #0b0b0b !important;
    }

    /* Encabezados */
    .table thead,
    .grid-custom th {
        background-color: #DAAF0F !important;
        color: #000 !important;
        font-weight: 600 !important;
        text-transform: uppercase;
    }

    /* Celdas normales */
    .table td,
    .grid-custom td {
        color: #f5f5f5 !important;
        vertical-align: middle !important;
        border-color: rgba(218,175,15,0.2) !important;
    }

/* Estados tipo badges */
.badge {
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
    font-weight: 600 !important;
}

.badge-primary {
    background-color: #DAAF0F !important;
    color: #000 !important;
}

.badge-success {
    background-color: #28a745 !important;
}

.badge-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge-danger {
    background-color: #dc3545 !important;
}

/* Botones dentro del grid */
.table .btn,
.grid-custom .btn {
    border: 1px solid #DAAF0F !important;
    color: #DAAF0F !important;
    background: transparent !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .table .btn:hover,
    .grid-custom .btn:hover {
        background-color: #DAAF0F !important;
        color: #000 !important;
        box-shadow: 0 0 10px rgba(218,175,15,0.4);
    }

/* ===== FIX CONTROLES EN TEMA OSCURO ===== */
.form-select {
    background-color: #222 !important;
    color: #f5f5f5 !important;
    border: 1px solid #333 !important;
    height: 45px;
    border-radius: 8px;
}

    .form-select:focus {
        border-color: #DAAF0F !important;
        box-shadow: 0 0 8px rgba(218,175,15,0.4) !important;
    }

/* =========================================
   BOOTSTRAP GRID RESET (SOLO FACTURACION)
   ========================================= */
.factura-page .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: calc(-1 * var(--bs-gutter-y)) !important;
    margin-right: calc(-.5 * var(--bs-gutter-x)) !important;
    margin-left: calc(-.5 * var(--bs-gutter-x)) !important;
}

    .factura-page .row > * {
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: calc(.5 * var(--bs-gutter-x)) !important;
        padding-left: calc(.5 * var(--bs-gutter-x)) !important;
        margin-top: var(--bs-gutter-y) !important;
    }

/* Anchos por breakpoint (como Bootstrap) */
@media (min-width:768px) {
    .factura-page .col-md-2 {
        flex: 0 0 auto !important;
        width: 16.66666667% !important;
    }

    .factura-page .col-md-3 {
        flex: 0 0 auto !important;
        width: 25% !important;
    }

    .factura-page .col-md-4 {
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }

    .factura-page .col-md-5 {
        flex: 0 0 auto !important;
        width: 41.66666667% !important;
    }

    .factura-page .col-md-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }

    .factura-page .col-md-8 {
        flex: 0 0 auto !important;
        width: 66.66666667% !important;
    }

    .factura-page .col-md-12 {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

@media (min-width:1200px) {
    .factura-page .col-xl-2 {
        flex: 0 0 auto !important;
        width: 16.66666667% !important;
    }

    .factura-page .col-xl-3 {
        flex: 0 0 auto !important;
        width: 25% !important;
    }

    .factura-page .col-xl-4 {
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }

    .factura-page .col-xl-5 {
        flex: 0 0 auto !important;
        width: 41.66666667% !important;
    }
}

/* FIX BS5 GridView texto y fondo */
.grid-custom {
    --bs-table-color: #f5f5f5;
    --bs-table-bg: #111;
    --bs-table-striped-color: #f5f5f5;
    --bs-table-striped-bg: rgba(218,175,15,0.06);
    --bs-table-hover-color: #f5f5f5;
    --bs-table-hover-bg: rgba(218,175,15,0.10);
}

    .grid-custom td, .grid-custom th {
        color: #f5f5f5 !important;
    }

    .grid-custom thead th {
        background-color: #DAAF0F !important;
        color: #000 !important;
    }