/* Estilos personalizados para el Sistema de Facturación e Inventario */

/* Colores personalizados */
:root {
    --color-primary: #3b82f6;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #06b6d4;
    --color-orange: #f97316;
    --color-pink: #ec4899;
    --color-cyan: #06b6d4;
    --color-sidebar: #2c3e50;
    --color-bg-light: #f7f9fc;
}

/* Estilos generales */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

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

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

/* Animaciones */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Tarjetas de métricas */
.metric-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Estilos para tablas */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-hover tr:hover {
    background-color: rgba(243, 244, 246, 0.8);
}

/* Estilos para formularios */
.form-input:focus, .form-select:focus, .form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Estilos para botones */
.btn {
    @apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-success {
    @apply bg-green-500 text-white hover:bg-green-600 focus:ring-green-500;
}

.btn-warning {
    @apply bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-500;
}

.btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
}

.btn-info {
    @apply bg-cyan-500 text-white hover:bg-cyan-600 focus:ring-cyan-500;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-500;
}

/* Estilos para badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-amber-100 text-amber-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

.badge-secondary {
    @apply bg-gray-100 text-gray-800;
}

/* Estilos para modales */
.modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl transform transition-all sm:max-w-lg sm:w-full mx-auto mt-10 mb-10;
}

/* Estilos para notificaciones */
.notification {
    @apply fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 transform transition-all duration-300 ease-in-out;
}

/* Estilos para tooltips */
.tooltip {
    @apply absolute z-10 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-sm;
}

/* Estilos para el punto de venta */
.pos-product-card {
    @apply bg-white rounded-lg shadow-md p-3 cursor-pointer transition-all hover:shadow-lg;
}

.pos-product-card:hover {
    transform: translateY(-2px);
}

.pos-cart-item {
    @apply border-b border-gray-200 py-2;
}

/* Estilos para impresión */
@media print {
    body {
        background-color: white;
        margin: 0;
        padding: 0;
    }
    
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    .print-container {
        width: 100%;
        max-width: 100%;
    }
}

/* Estilos para ticket 58mm */
.ticket-58mm {
    width: 58mm;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.2;
}

.ticket-58mm .center {
    text-align: center;
}

.ticket-58mm .right {
    text-align: right;
}

.ticket-58mm .bold {
    font-weight: bold;
}

.ticket-58mm .line {
    border-top: 1px dashed #000;
    margin: 2px 0;
}

/* Estilos para gráficos */
.chart-container {
    position: relative;
    height: 300px;
}

/* Estilos para mini gráficos */
.sparkline {
    height: 30px;
    width: 100px;
}

/* Estilos para el dashboard */
.dashboard-card {
    @apply bg-white rounded-lg shadow-md p-4 h-full;
}

/* Estilos para widgets */
.widget {
    @apply bg-white rounded-lg shadow-md p-4 mb-4;
}

.widget-title {
    @apply text-lg font-semibold text-gray-800 mb-4;
}

/* Estilos para alertas */
.alert {
    @apply rounded-md p-4 mb-4;
}

.alert-success {
    @apply bg-green-50 text-green-800;
}

.alert-warning {
    @apply bg-amber-50 text-amber-800;
}

.alert-danger {
    @apply bg-red-50 text-red-800;
}

.alert-info {
    @apply bg-blue-50 text-blue-800;
}

/* Estilos para paginación */
.pagination {
    @apply flex justify-center mt-4;
}

.pagination-item {
    @apply mx-1 px-3 py-1 rounded-md text-sm;
}

.pagination-item.active {
    @apply bg-blue-600 text-white;
}

.pagination-item:not(.active) {
    @apply bg-white text-gray-700 hover:bg-gray-100;
}

/* Estilos para breadcrumbs */
.breadcrumb {
    @apply flex items-center text-sm text-gray-500;
}

.breadcrumb-item {
    @apply flex items-center;
}

.breadcrumb-separator {
    @apply mx-2 text-gray-400;
}

/* Estilos para loader */
.loader {
    @apply flex justify-center items-center p-4;
}

.spinner {
    @apply animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500;
}

/* Estilos para tarjetas de colores */
.card-orange {
    @apply bg-gradient-to-br from-orange-400 to-orange-500 text-white;
}

.card-green {
    @apply bg-gradient-to-br from-green-400 to-green-500 text-white;
}

.card-pink {
    @apply bg-gradient-to-br from-pink-400 to-pink-500 text-white;
}

.card-cyan {
    @apply bg-gradient-to-br from-cyan-400 to-cyan-500 text-white;
}

/* Estilos para atajos de teclado */
.keyboard-shortcut {
    @apply inline-flex items-center justify-center min-w-6 h-6 px-1 rounded bg-gray-200 text-gray-700 text-xs font-medium;
}

/* Estilos para estados de facturas */
.status-pagada {
    @apply bg-green-100 text-green-800;
}

.status-pendiente {
    @apply bg-amber-100 text-amber-800;
}

.status-abonada {
    @apply bg-blue-100 text-blue-800;
}

.status-vencida {
    @apply bg-red-100 text-red-800;
}

.status-anulada {
    @apply bg-gray-100 text-gray-800;
}

/* Estilos para el modo oscuro (opcional) */
.dark {
    @apply bg-gray-900 text-white;
}

.dark .bg-white {
    @apply bg-gray-800;
}

.dark .text-gray-700 {
    @apply text-gray-300;
}

.dark .border-gray-200 {
    @apply border-gray-700;
}

/* Estilos para dispositivos móviles */
@media (max-width: 640px) {
    .hide-on-mobile {
        display: none;
    }
    
    .mobile-full-width {
        width: 100%;
    }
}

/* Estilos para impresión de tickets */
@page {
    size: 58mm auto;
    margin: 0mm;
}

/* ==========================
   Accesibilidad y contraste
   ========================== */
/* Mejorar contraste de textos e iconos en sidebar oscuro */
.bg-gray-800 .text-gray-300 { color: #f3f4f6 !important; }
.bg-gray-800 .text-gray-400 { color: #e5e7eb !important; }
.bg-gray-800 .group:hover .text-gray-300 { color: #ffffff !important; }
.bg-gray-800 .group:hover .text-gray-400 { color: #ffffff !important; }

/* Mejorar legibilidad de textos grises sobre fondo blanco (tarjetas, paneles, header) */
.bg-white .text-gray-400 { color: #374151 !important; opacity: 1 !important; }
.bg-white .text-gray-500 { color: #374151 !important; }

/* Botón hamburguesa en header: tono más visible */
.bg-white .text-gray-400:hover { color: #4b5563 !important; }

/* Gradientes fuertes para tarjetas del dashboard (sin depender de Tailwind) */
.card-orange-strong {
  background-image: linear-gradient(135deg, #f97316, #ea580c);
  color: #ffffff;
}
.card-cyan-strong {
  background-image: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #ffffff;
}
.card-orange-strong .subtitle,
.card-cyan-strong .subtitle {
  color: rgba(255, 255, 255, 0.9);
}