/* * HOJA DE ESTILOS GLOBAL - Mario Santacruz
 * Aquí definimos las variables y reglas que compartirán todas las páginas de la web.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --accent-hover: #2980b9;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --bg-light: #f4f7f6;
    --text-dark: #333333;
    --text-muted: #7f8c8d;
}

/* Fuente por defecto para páginas que no usen la configuración de Tailwind (Ej: Medicación) */
body {
    font-family: 'Inter', sans-serif;
}

/* =========================================
   UTILIDADES GLOBALES Y ANIMACIONES
   ========================================= */

/* Ocultar barras de desplazamiento nativas pero permitir scroll (estética limpia) */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.fade-in { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.modal-enter { opacity: 0; transform: scale(0.9); }
.modal-enter-active { opacity: 1; transform: scale(1); transition: opacity 300ms, transform 300ms; }

/* =========================================
   COMPONENTES: RECETARIO
   ========================================= */
.ingredient-checkbox:checked + span { text-decoration: line-through; color: #9CA3AF; }

/* =========================================
   COMPONENTES: MEDICACIÓN Y FARMACIA
   ========================================= */
.time-card { transition: all 0.3s ease; }
.time-card:hover { transform: translateY(-2px); }

/* Casillas de verificación personalizadas para imprimir */
.print-checkbox {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #334155;
    background-color: white;
    margin-right: 4px;
    vertical-align: middle;
    border-radius: 2px;
}

/* Contenedor que simula un folio A4 en pantalla (Versión Imprimir Medicación) */
.page-container {
    background: white;
    max-width: 297mm; /* Ancho A4 horizontal */
    min-height: 210mm; /* Alto A4 horizontal */
    margin: 2rem auto;
    padding: 15mm;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 0.5rem;
}
.page-container table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.page-container th, .page-container td { border: 1px solid #e2e8f0; padding: 0.75rem; text-align: center; }
.page-container th { background-color: #f8fafc; font-weight: 600; color: #475569; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }

/* =========================================
   REGLAS ESTRICTAS DE IMPRESIÓN (@media print)
   ========================================= */
@page {
    size: A4 landscape; /* Por defecto para Medicación */
    margin: 10mm;
}

@media print {
    body { background: white; margin: 0; padding: 0; font-size: 10px; }
    
    /* Ocultar elementos de la interfaz */
    .no-print, .print-hide, header, nav { display: none !important; }

    /* Ocultar controles interactivos del Chef al imprimir */
    .menu-actions, #toast, #loading-overlay, #seasonal-action-bar { display: none !important; }
    
    /* Reglas para: Hoja de Medicación */
    .page-container { box-shadow: none; margin: 0; padding: 0; max-width: 100%; width: 100%; border-radius: 0; }
    .page-container th { background-color: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bg-slate-50 { background-color: #f8fafc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bg-yellow-50 { background-color: #fefce8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-checkbox { border-color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Reglas para: Recetario / Menú Semanal */
    body.printing-recipe main { display: none !important; }
    body.printing-recipe #recipe-modal { position: static !important; display: block !important; background: white !important; padding: 0 !important; }
    body.printing-recipe #recipe-modal > div { box-shadow: none !important; max-width: 100% !important; margin: 0 !important; border: none !important; padding: 0 !important; border-radius: 0 !important; }
    body.printing-recipe #recipe-content { padding: 0 !important; }
    body.printing-recipe .bg-orange-50 { display: none !important; }
    body.printing-recipe h2 { font-size: 16pt !important; margin: 0 0 5px 0 !important; padding: 0 !important; color: black !important; }
    body.printing-recipe h3 { font-size: 12pt !important; margin: 10px 0 5px 0 !important; border-bottom: 1px solid black !important; padding-bottom: 2px !important; color: black !important; }
    body.printing-recipe .grid { display: flex !important; flex-direction: row !important; gap: 15px !important; }
    body.printing-recipe .md\:col-span-1 { width: 30% !important; }
    body.printing-recipe .md\:col-span-2 { width: 70% !important; }
    body.printing-recipe .bg-stone-50 { background: transparent !important; border: none !important; padding: 0 !important; }
    body.printing-recipe ul > li { font-size: 9pt !important; margin: 2px 0 !important; line-height: 1.2 !important; padding: 0 !important; }
    body.printing-recipe .space-y-6 > div { margin: 4px 0 !important; }
    body.printing-recipe p { font-size: 9pt !important; line-height: 1.2 !important; margin: 0 !important; }
    body.printing-recipe .w-8.h-8 { width: auto !important; height: auto !important; background: transparent !important; color: black !important; font-weight: bold !important; padding-right: 5px !important; }

    body:not(.printing-recipe) #recipe-modal { display: none !important; }
    body:not(.printing-recipe) section { display: none !important; }
    body:not(.printing-recipe) #sec-menu { position: static !important; display: block !important; width: 100% !important; }
    body:not(.printing-recipe) #sec-menu h2 { font-size: 18pt !important; text-align: center !important; margin: 0 0 15px 0 !important; color: black !important; padding: 0 !important; }
    body:not(.printing-recipe) #sec-menu p { display: none !important; }

    #weekly-menu-grid { display: block !important; column-count: 2 !important; column-gap: 15px !important; }
    .menu-day-card { break-inside: avoid !important; page-break-inside: avoid !important; border: 1px solid black !important; padding: 6px !important; margin: 0 0 10px 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; display: inline-block !important; width: 100% !important; }
    .menu-day-title { font-size: 12pt !important; border-bottom: 1px solid black !important; margin: 0 0 4px 0 !important; padding-bottom: 2px !important; color: black !important; text-align: center !important; text-transform: uppercase !important; }
    .meal-section { margin: 0 0 4px 0 !important; padding: 2px 0 !important; background: transparent !important; border: none !important; border-bottom: 1px dashed #ccc !important; }
    .meal-section:last-child { border-bottom: none !important; }
    .meal-title { font-size: 7pt !important; color: #555 !important; margin: 0 !important; }
    .dish-title { font-size: 9pt !important; font-weight: bold !important; line-height: 1.1 !important; margin: 0 !important; color: black !important; }
    .meal-section p { font-size: 8pt !important; margin: 1px 0 0 0 !important; color: #444 !important; }
    h4.text-chef-primary, h4.text-indigo-600 { font-size: 8pt !important; margin: 4px 0 1px 0 !important; padding: 0 !important; color: black !important; text-decoration: underline !important; }

    ul, ol, p { margin: 2px 0 !important; line-height: 1.1 !important; }
    li { margin-bottom: 1px !important; }
}