/* Base para todos los botones */
.btn {
    border-radius: 8px !important;           /* esquinas redondeadas */
    padding: 6px 14px !important;             /* compacto pero legible */
    font-size: 0.875rem;           /* tamaño moderno */
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                      /* espacio entre icono y texto */
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* Hover y active */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.18);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Iconos dentro de botones */
.btn i {
    font-size: 1rem;
}


/* Base flotante (comparten algunas propiedades) */
button.theme-toggle {
    position: fixed;
    right: 72px;
    z-index: 2000;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s;
}

button.support-toggle {
    position: fixed;
    right: 18px;
    z-index: 2000;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s;
}

button.theme-toggle:hover,
button.support-toggle:hover,
button.readonly-toggle:hover {
    transform: scale(1.1);
}

/* Posiciones flotantes separadas */
button.theme-toggle { bottom: 10px; background: #fff; color: #111; }
button.support-toggle { bottom: 10px; background: #25D366; color: #fff; } /* WhatsApp verde */¿


/*Datos para theme dark*/

/* === Soporte global modo oscuro (Tailwind + Bootstrap) === */
body.dark-mode {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Fondo general de secciones */
body.dark-mode header,
body.dark-mode aside,
body.dark-mode main,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Fix para dropdown en modo oscuro */
body.dark-mode .dropdown-menu .text-danger,
body.dark-mode .dropdown-menu .text-danger i {
    color: #ff6b6b !important;
    font-weight: 600 !important;
}

/* Texto */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode span,
body.dark-mode strong,
body.dark-mode label,
body.dark-mode th,
body.dark-mode td {
    color: #f1f5f9 !important;
}

/* Inputs y selects */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Sidebar */
body.dark-mode #sidebar {
    background-color: #1e293b !important;
}



/* Autofill en dark mode */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #1e293b inset !important; /* fondo oscuro */
    -webkit-text-fill-color: #f1f5f9 !important;               /* texto claro */
    transition: background-color 5000s ease-in-out 0s;          /* evitar parpadeo */
}


/* Breadcrumb modo oscuro */
body.dark-mode .breadcrumb {
    background-color: #1e293b !important; /* fondo oscuro */
    color: #f1f5f9 !important;            /* texto claro */
    border: none !important;              /* quitar borde */
    border-radius: 10px !important;          /* quitar esquinas redondeadas si quieres */
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode .breadcrumb a {
    color: #f1f5f9 !important; /* enlaces también claros */
}

/* --- Modo oscuro mejorado --- */
body.dark-mode {
    background: #0f1720;
    color: #d1d5db;
}

body.dark-mode .card {
    color: #e5e7eb;
    border-color: #1f2937;
    border-radius: 10px !important;     
}

/* Cabeceras de tabla */
body.dark-mode .table thead th {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
    border-bottom: 1px solid #334155 !important;
    transition: background-color 0.2s ease-in-out; /* animación suave */
}

/* Filas alternadas y hover */
body.dark-mode .table tbody tr:hover {
    background-color: #1e293b;
}

/* Botones */
body.dark-mode .btn {
    border-color: rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
}

body.dark-mode .btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
}

body.dark-mode .btn-success {
    background-color: #16a34a;
    border-color: #16a34a;
}


/* === Select2 Multiple con theme: bootstrap4 en modo oscuro === */
body.dark-mode .select2-container--bootstrap4 .select2-selection--single,
body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple {
    background-color: #1e293b !important;  /* fondo oscuro */
    color: #f1f5f9 !important;             /* texto claro */
    border: 1px solid #6c757d !important;
}

/* Cada “píldora” de opción seleccionada (multiple) */
body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: #2563eb !important; /* azul oscuro para las opciones seleccionadas */
    color: #f1f5f9 !important;
    border: none;
}

/* La “x” de cierre de cada opción */
body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: #f1f5f9 !important;
}

/* Opciones desplegadas */
body.dark-mode .select2-container--bootstrap4 .select2-results__option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Hover sobre opciones */
body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: #334155 !important; /* más claro que el fondo normal */
    color: #ffffff !important;
}

/* === Select2 bootstrap4 - modo oscuro === */
body.dark-mode .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: #f1f5f9 !important; /* texto de la opción seleccionada */
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: #2563eb !important; /* píldoras azul oscuro */
    color: #f1f5f9 !important;            /* texto dentro de cada opción */
}

/* La "x" para remover opciones */
body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: #f1f5f9 !important;
}

/* Opciones desplegadas */
body.dark-mode .select2-container--bootstrap4 .select2-results__option {
    background-color: #1e293b !important; /* fondo dropdown */
    color: #f1f5f9 !important;            /* texto claro */
}

/* Hover sobre opciones desplegadas */
body.dark-mode .select2-container--bootstrap4 .select2-results__option--highlighted {
    background-color: #334155 !important; /* hover más claro */
    color: #ffffff !important;
}
/*Termina datos para theme*/



.breadcrumb {
    background-color: white !important;
    padding: 5px 20px !important;
    margin-bottom: 0;
    list-style: none;
    border: 1px solid #e9ecef;
    border-radius: 10px !important;     
}

body .card {
    border-radius: 10px !important;     
}

.breadcrumb a {
    color: #4a4a4a;;
    font-weight: 400;
}

.card .card-header .card-title {
    font-size: 1.3rem;
    font-weight: bold;
}

.table thead tr {
    background-color: #ececec !important;
    color: #000000 !important;
}

.table thead th {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

.password-progress {
    margin-top: 10px;
    margin-bottom: 0;
}

.dataTables_scroll {
    overflow: auto;
}

.form-control-checkbox {
    height: 25px;
    width: 25px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.cursor-pointer {
    cursor: pointer;
}

a.card-icon p.desc {
    text-align: center;
    font-size: 12px !important;
}

a.card-icon {
    text-decoration: none !important;
    color: black !important;
    border: 1px solid #dee2e6 !important;
}

.card-icon-selected {
    background-color: #fdedbc;
}

a.card-icon:hover {
    background-color: #fdedbc;
    animation: shakeY;
    animation-duration: 2s;
}

.img-small {
    width: 20px;
    height: 20px;
}

.loading {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 36%;
    width: 100%;
}



/* Transicion cuando cambia tema */
html, body, header, main, aside, .card {
    transition: background-color 0.3s ease, color 0.3s ease;
}



/* Para todos mis form-group */
/* === FORMULARIOS MODERNOS Y COMPACTOS === */

/* Contenedor general */
.form-group {
    margin-bottom: 0.75rem !important; /* más compacto */
}

/* Etiquetas (labels, smalls) */
.form-group label,
.form-group .form-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #374151; /* gris oscuro legible */
    margin-bottom: 4px !important;
    display: block;
    letter-spacing: 0.2px;
}

/* Inputs y selects modernos */
body .form-group .form-control,
body .form-group .form-select {
    padding: 0.35rem 0.55rem !important;
    border-radius: 0.45rem !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Focus suave */
body .form-group .form-control:focus,
body .form-group .form-select:focus {
    border-color: #48B894 !important; /* azul elegante */
    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

/* Placeholder discreto */
.form-group .form-control::placeholder {
    color: #9ca3af !important;
}

/* Inputs readonly */
.form-group .form-control[readonly] {
    background-color: #f3f4f6 !important;
    cursor: not-allowed !important;
}


/* === Dark Mode: Inputs deshabilitados y readonly === */
body.dark-mode input.form-control:disabled,
body.dark-mode select.form-select:disabled,
body.dark-mode textarea.form-control:disabled,
body.dark-mode input.form-control[readonly],
body.dark-mode select.form-select[readonly],
body.dark-mode textarea.form-control[readonly] {
    background-color: #1e293b !important;  /* Fondo gris azulado */
    color: #94a3b8 !important;              /* Texto gris claro */
    border-color: #334155 !important;      /* Borde tenue */
    opacity: 1 !important;                 /* No transparentar */
    cursor: not-allowed !important;
}

/* Diferenciar los readonly de los disabled */
body.dark-mode input.form-control[readonly],
body.dark-mode select.form-select[readonly],
body.dark-mode textarea.form-control[readonly] {
    background-color: #1e293b !important;  /* Un poco más claro */
    color: #cbd5e1 !important;             /* Texto más visible */
    cursor: default !important;
}

/* Ajuste para mantener consistencia en el hover */
body.dark-mode input.form-control:disabled:hover,
body.dark-mode select.form-select:disabled:hover,
body.dark-mode textarea.form-control:disabled:hover {
    border-color: #475569 !important;
}




/* MODO CLARO – fila destacada suave para filas en compra */
.row-not-exists {
    background-color: #fff3cd !important; /* amarillo pastel suave */
    color: #3a3a3a !important;
}


/* MODO OSCURO – versión elegante y legible para filas en compra  */
body.dark-mode .row-not-exists {
    background-color: rgba(255, 193, 7, 0.20) !important; /* dorado translúcido */
    color: #ffffff !important;
}


/* MODO OSCURO – oara modales swal2 */


/* Modo oscuro para SweetAlert2 */
body.dark-mode .swal2-popup {
    background: #2b2f33 !important;
    color: #94a3b8 !important;
}

body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
    color: #94a3b8 !important;
}

body.dark-mode .swal2-icon.swal2-warning,
body.dark-mode .swal2-icon.swal2-question {
    border-color: #ffcc88 !important;
    color: #ffcc88 !important;
}

body.dark-mode .swal2-actions .swal2-confirm,
body.dark-mode .swal2-actions .swal2-deny,
body.dark-mode .swal2-actions .swal2-cancel {
    border-radius: 6px !important;
    font-weight: bold;
}

body.dark-mode .swal2-actions .swal2-cancel {
    background-color: #555 !important;
    color: #94a3b8 !important;
}



/*Para compras cambio color el price_unit*/
.price-up { border: 3px solid #ff6b6b !important; }
.price-down { border: 3px solid green !important; }
.price-same { border: 3px solid #808080 !important; }

body.dark-mode .price-input.price-up { border: 3px solid #ff6b6b !important; }
body.dark-mode .price-input.price-down { border: 3px solid green !important; }
body.dark-mode .price-input.price-same { border: 3px solid #808080 !important; }


.badge-saldo { background: #ff6b6b !important; color: #ffffff;}

/*Para historiales*/
/* ===== BADGES MODERNOS PARA FORMAS DE PAGO ===== */

.badge-payment {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 4px;
    text-align: left;
    backdrop-filter: blur(4px);
    transition: background-color .25s ease, color .25s ease;
}

/* === MODO CLARO === */
.badge-efectivo     { background: rgba(34,197,94,0.25);  color: #065f46; }
.badge-transferencia{ background: rgba(56,189,248,0.35); color: #0c4a6e; }
.badge-deposito     { background: rgba(56,189,248,0.35); color: #0c4a6e; }
.badge-tarjeta      { background: rgba(96,165,250,0.25); color: #1e3a8a; }
.badge-credito      { background: rgba(239,68,68,0.25);  color: #7f1d1d; }
.badge-cheque       { background: rgba(250,204,21,0.25); color: #78350f; }
.badge-retencion       { background: rgba(168, 85, 247, 0.25);  color: #5b21b6; }
.badge-notacredito       { background: rgba(236, 72, 153, 0.23); color: #831843; }
.badge-cruces       { background: rgba(100, 116, 139, 0.25); color: #334155; }

/* === MODO OSCURO === */
body.dark-mode .badge-efectivo     { background: rgba(34,197,94,0.35);  color: #bbf7d0; }
body.dark-mode .badge-transferencia{ background: rgba(56,189,248,0.35); color: #bae6fd; }
body.dark-mode .badge-deposito     { background: rgba(56,189,248,0.35); color: #bae6fd; }
body.dark-mode .badge-tarjeta      { background: rgba(96,165,250,0.35); color: #bfdbfe; }
body.dark-mode .badge-credito      { background: rgba(239,68,68,0.35);  color: #fecaca; }
body.dark-mode .badge-cheque       { background: rgba(250,204,21,0.35); color: #fef08a; }
body.dark-mode .badge-retencion       { background: rgba(168, 85, 247, 0.35); color: #e9d5ff; }
body.dark-mode .badge-notacredito       { background: rgba(236, 72, 153, 0.35); color: #fbcfe8; }
body.dark-mode .badge-cruces       { background: rgba(100, 116, 139, 0.35); color: #cbd5e1; }