/**
 * SVMSalud - Estilos personalizados
 * Estilos globales y utilidades para la aplicación
 */

/* ==========================================
   TAILWIND OVERRIDES
   ========================================== */

/* Sobrescribir tamaño de fuente text-sm de Tailwind (14px -> 15.5px) */
.text-sm {
    font-size: 0.96875rem !important; /* 15.5px */
}

/* Sobrescribir tamaño de fuente text-xs de Tailwind (12px -> 13px) */
.text-xs {
    font-size: 0.8125rem !important; /* 13px */
}

/* ==========================================
   DATATABLES CUSTOMIZATION (TailAdmin Style)
   ========================================== */

/* Contenedor principal de DataTables */
.dataTables_wrapper {
    padding: 1rem;
}

/* Controles superiores (búsqueda y longitud) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: white;
    font-size: 0.875rem;
    color: #374151;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 0.625rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Tabla */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

table.dataTable thead th {
    background-color: #f9fafb !important;
    color: #6b7280 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem !important;
    border-bottom: 2px solid #e5e7eb !important;
}

table.dataTable thead th:first-child {
    border-top-left-radius: 0.75rem;
}

table.dataTable thead th:last-child {
    border-top-right-radius: 0.75rem;
}

table.dataTable tbody td {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #374151;
    font-size: 0.875rem;
}

table.dataTable tbody tr {
    transition: background-color 0.2s ease;
}

table.dataTable tbody tr:hover {
    background-color: #f9fafb !important;
}

table.dataTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.75rem;
}

table.dataTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.75rem;
}

/* Ordenamiento */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    right: 1rem;
    content: "⇅";
    color: #9ca3af;
}

table.dataTable thead .sorting_asc:before {
    content: "↑";
    color: #3b82f6;
}

table.dataTable thead .sorting_desc:before {
    content: "↓";
    color: #3b82f6;
}

/* Paginación */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: white;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 0.125rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #f3f4f6;
    border-color: #3b82f6;
    color: #3b82f6;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: #3b82f6;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Info */
.dataTables_wrapper .dataTables_info {
    font-size: 0.875rem;
    color: #6b7280;
    padding-top: 1rem;
}

/* Botones de exportación */
.dt-buttons {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
}

.dt-button {
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.dt-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.dt-button:active {
    transform: translateY(0);
}

/* Processing */
.dataTables_processing {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: #3b82f6;
    border: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
    background-color: #ef4444;
}

/* ==========================================
   SIDEBAR Y NAVEGACIÓN
   ========================================== */

.sidebar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, width;
}

.sidebar-collapsed {
    width: 4rem; /* 64px = w-16 */
}

.sidebar-link {
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-link:hover {
    background: rgba(37, 99, 235, 0.1);
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.05) 100%);
    font-weight: 600;
    color: #3b82f6;
}

/* Tooltip para sidebar colapsado */
.sidebar-link[title]:not([title=""]):hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #1f2937;
    color: white;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-out 0.3s forwards;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@keyframes tooltipFadeIn {
    to {
        opacity: 1;
    }
}

/* Prevenir overflow y mejorar transiciones */
nav[class*="fixed"] {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   ANIMACIONES Y TRANSICIONES
   ========================================== */

.dropdown-enter {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==========================================
   HOVER EFFECTS
   ========================================== */

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-hover {
    transition: all 0.2s ease;
}

.btn-hover:hover {
    transform: scale(1.05);
}

/* ==========================================
   SCROLLBAR PERSONALIZADA
   ========================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

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

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

/* ==========================================
   UTILIDADES DE LAYOUT
   ========================================== */

.main-content {
    transition: margin-left 0.3s ease;
}

.sidebar-transition {
    transition: width 0.3s ease;
}

/* ==========================================
   TABLAS RESPONSIVAS
   ========================================== */

.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 100%;
}

/* ==========================================
   BADGES Y ESTADOS
   ========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
}

.badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background-color: #fed7aa;
    color: #92400e;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-info {
    background-color: #dbeafe;
    color: #1e40af;
}

/* ==========================================
   MODALES
   ========================================== */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==========================================
   ALERTAS
   ========================================== */

.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.alert-success {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.alert-error {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.alert-warning {
    background-color: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

.alert-info {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

/* ==========================================
   FORMULARIOS
   ========================================== */

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-error {
    border-color: #ef4444;
}

.form-error:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==========================================
   BOTONES
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: #2461e9 !important;
    color: white;
}

.btn-primary:hover {
    background: #1d4dd5 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(36, 97, 233, 0.3);
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover {
    background-color: #4b5563;
}

.btn-success {
    background-color: #10b981;
    color: white;
}

.btn-success:hover {
    background-color: #059669;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
}

/* ==========================================
   LOADING SPINNER
   ========================================== */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

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

/* ==========================================
   UTILIDADES DE TEXTO
   ========================================== */

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-gradient {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    /* Main content sin margen en mobile */
    .main-content {
        margin-left: 0 !important;
    }
    
    /* Sidebar se oculta por defecto en mobile */
    .sidebar {
        transform: translateX(-100%);
    }
    
    /* Cards en 1 columna en mobile */
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    /* Mensaje y botón Volver en columna vertical en móviles */
    #mensaje {
        font-size: 0.8125rem;
    }
}

/* Tablet y móvil: Apilar mensaje y botón verticalmente */
@media (max-width: 1024px) {
    .flex.items-stretch.gap-3:has(#mensaje) {
        flex-direction: column;
        align-items: stretch;
    }
    
    .flex.items-stretch.gap-3:has(#mensaje) a {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
    
    /* Sidebar siempre visible en desktop */
    .sidebar {
        transform: translateX(0) !important;
    }
}

/* ==========================================
   RESPONSIVE - BOTONES DE HEADER CON ACCIONES
   ========================================== */

/* Contenedor de botones de header (agentes, repartidores, etc.) */
.flex.gap-3:has(button[onclick*="abrirModal"]),
.flex.gap-3:has(button[id*="btn-descargar-pdf"]),
.flex.gap-3:has(a[href*="comisiones"]),
.flex.gap-3:has(a[href*="repartos"]) {
    flex-wrap: wrap;
}

/* En tablets pequeñas: reducir padding de botones */
@media (max-width: 900px) {
    .flex.gap-3:has(button) button,
    .flex.gap-3:has(button) a {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.875rem;
    }
    
    /* Reducir iconos en botones */
    .flex.gap-3:has(button) button i,
    .flex.gap-3:has(button) a i {
        font-size: 0.875rem;
    }
}

/* En móviles: botones de header en columna */
@media (max-width: 640px) {
    /* Contenedor principal de header con título y botones */
    .flex.flex-col.sm\:flex-row.justify-between.items-start.sm\:items-center.mb-6.gap-4 {
        gap: 1rem !important;
    }
    
    /* Contenedor de botones de acción */
    .flex.gap-3:has(button),
    .flex.gap-3:has(a[class*="bg-"]) {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem !important;
    }
    
    /* Botones ocupan todo el ancho */
    .flex.gap-3:has(button) button,
    .flex.gap-3:has(button) a,
    .flex.gap-3:has(a[class*="bg-"]) button,
    .flex.gap-3:has(a[class*="bg-"]) a {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
}

/* ==========================================
   RESPONSIVE - BOTONES PEGAR CELDAS Y GUARDAR EN BD
   ========================================== */

/* Contenedor de botones dentro del header de tabla */
.flex.items-center.gap-3:has(#btnPegarCeldas),
.flex.items-center.gap-3:has(#btnPegar),
.flex.items-center.gap-3:has(#btnGuardar) {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

/* Siempre mantener texto visible y botones en línea */
#btnPegarCeldas span,
#btnPegar span,
#btnGuardar span {
    display: inline !important;
}

/* En tablets: reducir padding pero mantener en línea */
@media (max-width: 768px) {
    /* Reducir padding de botones Pegar/Guardar */
    #btnPegarCeldas,
    #btnPegar,
    #btnGuardar {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Reducir gap entre botones */
    .flex.items-center.gap-3:has(#btnPegarCeldas),
    .flex.items-center.gap-3:has(#btnPegar) {
        gap: 0.5rem !important;
    }
}

/* En móviles: mantener en línea pero más compactos */
@media (max-width: 640px) {
    /* Header de tabla con título y botones */
    .flex.items-center.justify-between:has(.flex.items-center.gap-3) {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Mantener botones en la misma línea */
    .flex.items-center.gap-3:has(#btnPegarCeldas),
    .flex.items-center.gap-3:has(#btnPegar) {
        flex-wrap: nowrap;
        gap: 0.5rem !important;
    }
    
    /* Botones más compactos pero con texto visible */
    #btnPegarCeldas,
    #btnPegar,
    #btnGuardar {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
    }
    
    /* Título de tabla ocupa el ancho disponible */
    .flex.items-center.justify-between:has(.flex.items-center.gap-3) h2 {
        flex: 1 1 auto;
        margin-right: 0.5rem;
    }
}

/* En móviles muy pequeños: reducir padding pero mantener texto */
@media (max-width: 480px) {
    #btnPegarCeldas,
    #btnPegar,
    #btnGuardar {
        padding: 0.5rem 0.5rem !important;
        min-width: auto;
    }
    
    /* Reducir gap al mínimo */
    .flex.items-center.gap-3:has(#btnPegarCeldas),
    .flex.items-center.gap-3:has(#btnPegar) {
        gap: 0.25rem !important;
    }
}

/* ==========================================
   RESPONSIVE - MEJORAS GENERALES PARA BOTONES
   ========================================== */

/* Asegurar que todos los botones tengan transiciones suaves */
button, a[class*="bg-"] {
    transition: all 0.2s ease;
}

/* Prevenir overflow de texto en botones */
button span, a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Touch targets mínimos para móviles (44x44px) */
@media (max-width: 640px) {
    button,
    a[class*="bg-"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
    }
}

/* ==========================================
   TAILADMIN DASHBOARD ANIMATIONS
   ========================================== */

/* Animación FadeInUp para el saludo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

/* Animación de pulso para indicadores */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
}

.animate-pulse {
    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

/* Animación de celebración para éxito */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideInDown {
    animation: slideInDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scrollbar personalizado para sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Gradient Utilities */
.gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Shadow Utilities Mejorados */
.shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

.shadow-medium {
    box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 30px -5px rgba(0, 0, 0, 0.04);
}

.shadow-strong {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.25), 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

/* Glassmorphism Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Skeleton Loading Animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 0px, #f8f8f8 40px, #f0f0f0 80px);
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Tooltip Styles */
.tooltip {
    position: relative;
}

.tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 0.5rem 0.75rem;
    background: rgba(17, 24, 39, 0.95);
    color: white;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}

.tooltip:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* Tooltip mejorado para tablas - aparece a la derecha */
.tooltip-table {
    position: relative;
    display: inline-flex;
}

/* Contenido del tooltip */
.tooltip-table::before {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    background: #1f2937;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
}

/* Flecha del tooltip */
.tooltip-table::after {
    content: '';
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #1f2937;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
}

.tooltip-table:hover::before,
.tooltip-table:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Card Hover mejorado para Dashboard */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
}

/* Improved Button Hovers for DataTables */
.dataTables_wrapper .dt-buttons .dt-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.dataTables_wrapper .dt-buttons .dt-button:active {
    transform: translateY(0);
}

/* ==========================================
   NUEVA VENTA UNIFICADA - ESTILOS
   ========================================== */

/* Animación de entrada para secciones */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

/* Inputs con iconos mejorados */
input:focus, select:focus, textarea:focus {
    transition: all 0.2s ease-in-out;
}

/* Badges de pasos */
.step-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Validación visual */
input.border-red-500 {
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* Gradientes de encabezados de sección */
.section-header-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Tooltips personalizados */
.custom-tooltip {
    position: relative;
}

.custom-tooltip:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 0.75rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    z-index: 50;
    margin-bottom: 0.5rem;
}

/* Efecto de carga en botón submit */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

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

/* Mejoras de accesibilidad */
input:required, select:required {
    border-left: 3px solid #3b82f6;
}

input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

input:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

/* Hover effects para secciones */
.section-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.section-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Estilos para inputs numéricos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

/* ==========================================
   ESTILOS PARA LUCKYSHEET (diaria.php y diaria_editar.php)
   ========================================== */

/* Estilos personalizados para Luckysheet */
.luckysheet, .luckysheet * ,
.luckysheet-cols-h-c, .luckysheet-rows-h,
.luckysheet-input-box, .luckysheet-scrollbar-y, .luckysheet-scrollbar-x,
.luckysheet-rows, .luckysheet-cols,
.luckysheet-cell-main, .luckysheet-grid-container {
    font-family: Calibri, "Segoe UI", Arial, sans-serif !important;
    font-size: 11pt !important;
}

/* Contenedor de Luckysheet */
#luckysheet {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

/* Mensajes de estado (siempre visible) */
#mensaje {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    width: 100%;
}

#mensaje.success { 
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #22c55e;
    color: #166534;
}

#mensaje.warning { 
    background-color: #fefce8;
    border: 1px solid #fef08a;
    border-left: 4px solid #eab308;
    color: #854d0e;
}

#mensaje.error { 
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

#mensaje.info { 
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    color: #1e40af;
}

#mensaje.loading { 
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    color: #1e3a8a;
}

#mensaje i {
    font-size: 1.125rem;
    flex-shrink: 0;
}

#mensaje.success i {
    color: #22c55e;
}

#mensaje.warning i {
    color: #eab308;
}

#mensaje.error i {
    color: #ef4444;
}

#mensaje.info i,
#mensaje.loading i {
    color: #3b82f6;
}

/* Animaciones */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

/* Loading spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Ring effect para botones con atajo */
.ring-4 {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.3s ease;
}

.ring-blue-300 {
    box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.5) !important;
}

/* Hover effects para cards de pasos */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* Overlay de loading */
#loadingOverlay {
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

/* Kbd styling */
kbd {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* Ajustes para Alpine */
[x-cloak] { 
    display: none !important; 
}

/* ==========================================
   LOGIN PAGE STYLES
   ========================================== */

/* Fondo con gradiente suave que integra con el azul del logo */
.gradient-bg {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 35%, #ffffff 100%);
    position: relative;
}

/* Efecto para el formulario de login - más definido para contrastar con el fondo */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(6, 182, 212, 0.1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 
                0 8px 10px -6px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

/* Animaciones de entrada para el login */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Contenedor del login con animación */
.login-container {
    animation: fadeIn 0.4s ease-out;
}

/* Logo con animación */
.logo-animate {
    animation: fadeInDown 0.5s ease-out;
}

/* Formulario con animación */
.form-animate {
    animation: fadeInUp 0.6s ease-out 0.1s both;
}

/* Footer con animación */
.footer-animate {
    animation: fadeIn 0.8s ease-out 0.3s both;
}

/* Efecto visual mejorado para inputs en focus */
.input-focused {
    transform: scale(1.01);
    transition: transform 0.2s ease;
}

/* Mejorar estilo del botón de toggle password */
#togglePassword {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#togglePassword:active {
    transform: scale(0.95);
}

/* Personalizar checkbox */
input[type="checkbox"]:checked {
    background-color: #0891b2;
    border-color: #0891b2;
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* Mejorar mensajes de alerta */
.glass-effect [role="alert"] {
    animation: fadeInUp 0.4s ease-out;
}

/* Responsividad mejorada */
@media (max-width: 640px) {
    .glass-effect {
        padding: 1.5rem !important;
    }
    
    .logo-animate img {
        width: 12rem !important;
    }
}

/* ==========================================
   TABLA DATOS MENSUALES
   ========================================== */

/* Contenedor principal de la tabla */
.tabla-contenedor {
    overflow: auto;
    background: white;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-radius:8px;
}

.tabla-contenedor table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.tabla-contenedor thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    padding: 12px 6px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-align: center;
    border-bottom: 3px solid #2563eb;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tabla-contenedor tbody td {
    padding: 6px 4px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
    max-width: 0;
    overflow: hidden;
}

.tabla-contenedor tbody tr:nth-child(even) td {
    background: #f9fafb;
}

.tabla-contenedor tbody tr:nth-child(odd) td {
    background: white;
}

.tabla-contenedor tbody tr:hover td {
    background: linear-gradient(90deg, #eff6ff, #dbeafe);
}

.tabla-contenedor td input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 2px solid #d1d5db !important;
    font-size: 12.5px;
    font-weight: 500;
    background: white;
    color: #111827;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    height: 38px;
    box-sizing: border-box;
}

.tabla-contenedor td input[type="date"] {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    font-size: 11px !important;
    padding: 2px 4px !important;
}

.tabla-contenedor td input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

.tabla-contenedor td input:hover {
    border-color: #9ca3af !important;
}

.tabla-contenedor td input:focus {
    outline: none;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(30,64,175,0.1);
    transform: translateY(-1px);
}

.tabla-contenedor input.moneda {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tabla-contenedor input.centrado {
    text-align: center;
    font-weight: 600;
}

.tabla-contenedor input.calculado {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    color: #059669;
    font-weight: 700;
    pointer-events: none;
    border-color: #10b981 !important;
}

/* Estilos para CHECKBOX PR - Estilo moderno tipo toggle/switch */
.tabla-contenedor input[type="checkbox"].checkbox-pr {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 42px;
    height: 22px;
    background: #d1d5db;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #9ca3af !important;
    padding: 0 !important;
    outline: none;
    margin: 0 auto;
    display: block;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:hover {
    background: #fca5a5;
    border-color: #f87171 !important;
    transform: scale(1.05);
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:checked {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #dc2626 !important;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:checked:before {
    transform: translateX(20px);
    background: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
    border-color: #ef4444 !important;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:active:before {
    width: 18px;
}

.tabla-contenedor input[type="checkbox"].checkbox-pr:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Estilos para SELECT dentro de tabla-contenedor (mismo diseño que inputs) */
.tabla-contenedor td select {
    width: 100%;
    padding: 8px 10px;
    padding-right: 28px;
    border-radius: 6px;
    border: 2px solid #d1d5db !important;
    font-size: 12.5px;
    font-weight: 500;
    background: white;
    color: #111827;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    height: 38px;
    box-sizing: border-box;
}

.tabla-contenedor td select:hover {
    border-color: #9ca3af !important;
}

.tabla-contenedor td select:focus {
    outline: none;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tabla-contenedor td select.centrado {
    text-align: center;
    text-align-last: center;
}

.tabla-contenedor td select option {
    padding: 8px 12px;
    font-size: 12px;
}

.tabla-contenedor td select optgroup {
    font-weight: 700;
    color: #2563eb;
    background: #f3f4f6;
}

/* Scrollbar personalizada */
.tabla-contenedor::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.tabla-contenedor::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

.tabla-contenedor::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1e40af, #1e3a8a);
    border-radius: 10px;
    border: 2px solid #f3f4f6;
}

.tabla-contenedor::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
}

/* ==========================================
   LUCKYSHEET - OCULTAR MODALES DE INFORMACIÓN
   ========================================== */

/* Ocultar completamente los modales de información de Luckysheet */
.luckysheet-info,
.luckysheet-info-detail,
.luckysheet-modal-dialog-mask,
div[id*="luckysheet-info"],
div[class*="luckysheet-info"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================
   RESPONSIVE - AJUSTES ESPECÍFICOS ADICIONALES
   ========================================== */

/* Ajuste para contenedor de título y botones de header */
@media (max-width: 640px) {
    /* Reducir espacio vertical entre título y botones */
    .flex.flex-col.sm\:flex-row.justify-between {
        gap: 0.75rem !important;
    }
    
    /* Asegurar que los títulos no se desborden */
    .flex.flex-col.sm\:flex-row.justify-between h1 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    
    .flex.flex-col.sm\:flex-row.justify-between p {
        font-size: 0.875rem;
    }
}

/* Ajustes para el header de tabla con botones Pegar/Guardar */
@media (max-width: 640px) {
    /* Header de tabla (bg-gradient-to-r from-green-50, etc.) */
    .bg-gradient-to-r.from-green-50,
    .bg-gradient-to-r.from-blue-50,
    .bg-gradient-to-r.from-blue-50 {
        padding: 0.75rem !important;
    }
}

/* Ajuste para grids de estadísticas */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2:not(.lg\:grid-cols-3) {
        gap: 0.75rem !important;
    }
    
    /* Reducir padding de cards de estadísticas (no tiendas) */
    .grid.grid-cols-1.md\:grid-cols-2:not(.lg\:grid-cols-3) > div {
        padding: 0.75rem !important;
    }
    
    /* Reducir padding de contenedor de tienda */
    .box-tienda  {
        padding: 0 !important;
    }
}

/* Mejorar el rendimiento de transiciones en móviles */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    button, a {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Ajuste para tablas dentro de tabla-contenedor */
@media (max-width: 640px) {
    .tabla-contenedor {
        font-size: 12px;
    }
    
    .tabla-contenedor thead th {
        padding: 8px 4px !important;
        font-size: 10px !important;
    }
    
    .tabla-contenedor tbody td {
        padding: 4px 2px !important;
    }
    
    .tabla-contenedor td input,
    .tabla-contenedor td select {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* Ocultar elementos innecesarios en móviles muy pequeños */
@media (max-width: 480px) {
    /* Ocultar descripción debajo del título en móviles pequeños */
    .flex.flex-col.sm\:flex-row.justify-between > div > p {
        display: none;
    }
}

/* Asegurar que los botones disabled mantengan el estilo correcto */
button:disabled,
button[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Mejorar la visibilidad de focus para accesibilidad en todos los dispositivos */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==========================================
   RESPONSIVE - GRÁFICO DE VENTAS DASHBOARD
   ========================================== */

/* Contenedor del gráfico de ventas */
#ventasChart {
    max-width: 100%;
    height: auto !important;
}

/* Ajustar altura del contenedor del gráfico según dispositivo */
.flex-1.flex.items-center.justify-center:has(#ventasChart) {
    min-height: 500px;
}

@media (max-width: 1024px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 400px !important;
    }
}

@media (max-width: 768px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 350px !important;
    }
    
    /* Ajustar padding del contenedor del gráfico */
    .lg\:col-span-2:has(#ventasChart) {
        padding: 1rem !important;
    }
}

@media (max-width: 640px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 300px !important;
    }
    
    /* Reducir más el padding en móviles */
    .lg\:col-span-2:has(#ventasChart) {
        padding: 0.75rem !important;
    }
    
    /* Ajustar tamaño del título del gráfico */
    .lg\:col-span-2:has(#ventasChart) h3 {
        font-size: 1.125rem;
    }
    
    .lg\:col-span-2:has(#ventasChart) .text-sm {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .flex-1.flex.items-center.justify-center:has(#ventasChart) {
        min-height: 250px !important;
    }
    
    /* En móviles pequeños, ocultar el ícono externo */
    .lg\:col-span-2:has(#ventasChart) .fa-external-link-alt {
        display: none;
    }
}

/* ==========================================
   RESPONSIVE - TARJETAS DE TIENDAS
   ========================================== */

/* Ajustar padding de los botones de enlace rápido */
.grid.grid-cols-2.gap-2 a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: center;
}

/* Reducir tamaño de fuente en botones de tienda para textos largos */
.grid.grid-cols-2.gap-2 a span {
    font-size: 0.75rem;
    line-height: 1.15;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reducir espacio entre filas de botones */
.space-y-2:has(.grid.grid-cols-2.gap-2) {
    gap: 0.5rem !important;
}

/* En tablets pequeñas: ajustar espacio */
@media (max-width: 1024px) {
    /* Grid de tiendas: 2 columnas en tablets */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid.grid-cols-2.gap-2 a {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.75rem;
        min-height: 65px;
    }
    
    .grid.grid-cols-2.gap-2 a span {
        font-size: 0.6875rem;
        line-height: 1.1;
    }
    
    .grid.grid-cols-2.gap-2 a i {
        font-size: 0.875rem;
        margin-bottom: 0.25rem !important;
    }
    
    /* Reducir gap entre botones */
    .grid.grid-cols-2.gap-2 {
        gap: 0.375rem !important;
    }
}

/* En móviles: 1 columna y ajustar botones */
@media (max-width: 640px) {
    /* Grid de tiendas: 1 columna en móviles */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    /* Botones más compactos */
    .grid.grid-cols-2.gap-2 a {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.75rem;
        min-height: 70px;
    }
    
    .grid.grid-cols-2.gap-2 a span {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .grid.grid-cols-2.gap-2 a i {
        font-size: 0.9375rem;
        margin-bottom: 0.375rem !important;
    }
    
    /* Header de tarjeta más compacto */
    .bg-gradient-to-r.from-blue-500 h3 {
        font-size: 1.125rem;
    }
    
    /* Reducir padding del header */
    .bg-gradient-to-r.from-blue-500.p-4 {
        padding: 0.75rem !important;
    }
    
    /* Reducir gap entre botones */
    .grid.grid-cols-2.gap-2 {
        gap: 0.375rem !important;
    }
}

/* En móviles muy pequeños: optimizar espacio al máximo */
@media (max-width: 480px) {
    /* Botones muy compactos pero legibles */
    .grid.grid-cols-2.gap-2 a {
        padding: 0.5rem 0.25rem !important;
        min-height: 68px;
    }
    
    .grid.grid-cols-2.gap-2 a span {
        font-size: 0.6875rem;
        line-height: 1.15;
    }
    
    .grid.grid-cols-2.gap-2 a i {
        font-size: 0.875rem;
        margin-bottom: 0.25rem !important;
    }
    
    /* Reducir gap entre botones al mínimo */
    .grid.grid-cols-2.gap-2 {
        gap: 0.25rem !important;
    }
    
    /* Reducir padding del header */
    .bg-gradient-to-r.from-blue-500.p-4 {
        padding: 0.625rem !important;
    }
    
    /* Header más compacto */
    .bg-gradient-to-r.from-blue-500 h3 {
        font-size: 1rem;
    }
}

/* ==========================================
   TABULAR NUMBERS - ALINEACIÓN DE NÚMEROS
   ========================================== */

/* Aplicar fuente tabular a todas las celdas con números para mejor alineación */
.text-right,
.text-center,
td.text-right,
th.text-right,
td.text-center,
th.text-center,
table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* Asegurar que los números en tablas siempre usen fuente tabular */
table tbody td,
table tfoot td,
table thead th {
    font-variant-numeric: tabular-nums;
}