/* ===== ESTILOS GLOBALES ===== */

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #ec971f;
    border-radius: 4px;
}

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

/* Selección de texto */
::selection {
    background-color: #ec971f;
    color: #1a1a1a;
}

::-moz-selection {
    background-color: #ec971f;
    color: #1a1a1a;
}

/* Links globales */
a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

/* Botones globales */
button {
    font-family: 'Poppins', sans-serif;
}

/* Focus accesible */
:focus-visible {
    outline: 2px solid #ec971f;
    outline-offset: 2px;
}

/* Animación de carga */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(236, 151, 31, 0.3);
    border-radius: 50%;
    border-top-color: #ec971f;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Animación fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animación slide down */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botones del sitio */
.btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:8px;
    border:0;
    cursor:pointer;
    font-weight:600;
    font-size:13px;
    transition:all .12s ease-in-out;
}
.btn:focus{ outline:2px solid rgba(236,151,31,0.25); outline-offset:2px }
.btn-primary{ background: linear-gradient(180deg, #ffd27a, var(--color-gold)); color:#111; box-shadow: 0 5px 16px rgba(236,151,31,0.16); border: none; padding:8px 12px; border-radius:10px }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(236,151,31,0.2) }
.btn-secondary{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.08); padding:8px 10px; border-radius:10px }
.btn-secondary:hover{ background:rgba(255,255,255,0.03); transform: translateY(-1px) }
.btn-danger{ background: linear-gradient(180deg,#ff6b6b,#e74c3c); color:#fff; box-shadow:0 5px 14px rgba(231,76,60,0.16); border:none; padding:8px 10px; border-radius:10px }
.btn-danger:hover{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(231,76,60,0.2) }
.btn-outline{ background:transparent; color:var(--color-gold); border:1px solid var(--color-gold); padding:7px 10px; border-radius:8px }

/* Formularios */
.form-control{ width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:#fff }
.form-control:focus{ border-color:var(--color-gold); box-shadow:0 0 0 4px rgba(236,151,31,0.06) }

/* Tabla: acciones */
.table-actions .btn{ padding:6px 8px; font-size:12px; min-width:86px; height:34px; display:inline-flex; align-items:center; justify-content:center }

/* Make Edit and Delete buttons same size and alignment */
.btn-outline.btn-edit{ padding:6px 8px; font-size:12px; border-color:rgba(236,151,31,0.9); color:var(--color-gold); min-width:86px; height:34px; }
.btn-outline.btn-edit:hover{ background: rgba(236,151,31,0.06); color:#fff }
.btn-danger.btn-del{ padding:6px 8px; font-size:12px; min-width:86px; height:34px; display:inline-flex; align-items:center; justify-content:center }

/* SweetAlert2 custom class mapping (applied via customClass + buttonsStyling:false) */
.swal2-popup{ background: #ffffff; border-radius:12px; color: #111; }
.swal2-title{ color:#111 }
.swal2-html-container{ color:#333 }
.swal2-confirm.btn-primary{ background: linear-gradient(180deg,#ffd27a,var(--color-gold)); color:#111; box-shadow:0 8px 26px rgba(236,151,31,0.2); padding:10px 16px; border-radius:10px }
.swal2-confirm.btn-primary:hover{ filter:brightness(.98); transform:translateY(-1px) }
.swal2-cancel.btn-secondary{ border:1px solid rgba(255,255,255,0.08); background:transparent; color:#fff; padding:9px 12px; border-radius:10px }