/* =========================================

1. VARIABLES & RESET (TEMA DARK CMYK)

========================================= */

:root {

/* Colores de Identidad (CMYK Neon) */

--cian: #00e5ff;

--magenta: #ff007f;

--amarillo: #ffea00;

--negro-tinta: #0a0a0a;



/* Fondos y Superficies */

--bg-body: #121212;

--bg-sidebar: #000000;

--bg-card: #1e1e1e;

--bg-input: #2d2d2d;

--bg-hover: #333333;



/* Textos */

--text-primary: #ffffff;

--text-secondary: #b0b0b0;

--text-muted: #6e6e6e;



/* Estados */

--success: #00c853;

--danger: #ff1744;

--warning: #ff9100;



/* UI Propiedades */

--borde-color: #333333;

--borde-radius: 12px;

--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.5);

--shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.6);

--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



* {

box-sizing: border-box;

}



html, body {

margin: 0;

padding: 0;

font-family: 'Inter', system-ui, -apple-system, sans-serif;

background-color: var(--bg-body);

color: var(--text-primary);

height: 100vh;

width: 100vw;

overflow: hidden; /* Scroll manejado internamente */

}



/* =========================================

2. PANTALLA DE LOGIN (CORREGIDO)

========================================= */

#auth-screen {

position: fixed; /* Fijo sobre toda la pantalla */

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: var(--bg-body);

display: flex; /* Flex para centrar */

justify-content: center; /* Horizontal */

align-items: center; /* Vertical */

z-index: 9999; /* Encima de todo */

padding: 20px;

}



#login-form {

background-color: var(--bg-card);

padding: 40px;

border-radius: var(--borde-radius);

border: 1px solid var(--borde-color);

box-shadow: 0 0 50px rgba(0, 229, 255, 0.1);

width: 100%;

max-width: 400px;

display: flex;

flex-direction: column;

gap: 20px;

}



#login-form h2 {

text-align: center;

margin-bottom: 20px;

color: var(--cian);

text-transform: uppercase;

letter-spacing: 2px;

}



/* =========================================

3. NOTIFICACIONES TOAST (CORREGIDO)

========================================= */

#toast-container {

position: fixed;

top: 20px;

right: 20px;

z-index: 10000; /* Encima de todo */

display: flex;

flex-direction: column;

gap: 10px;

pointer-events: none; /* CRÍTICO: Deja pasar clicks al fondo si no tocas un toast */

}



.toast {

background-color: var(--bg-card);

color: var(--text-primary);

padding: 15px 20px;

border-radius: 8px;

box-shadow: 0 5px 15px rgba(0,0,0,0.5);

border-left: 4px solid var(--cian);

min-width: 300px;

animation: slideInRight 0.3s ease forwards;

pointer-events: auto; /* Reactivar clicks solo en la tarjeta del mensaje */

display: flex;

align-items: center;

font-weight: 500;

}



.toast.success { border-left-color: var(--success); }

.toast.error { border-left-color: var(--danger); }

.toast.warning { border-left-color: var(--warning); }



@keyframes slideInRight {

from { transform: translateX(100%); opacity: 0; }

to { transform: translateX(0); opacity: 1; }

}



@keyframes fadeOut {

to { opacity: 0; transform: translateX(100%); }

}



.toast.fade-out {

animation: fadeOut 0.3s forwards;

}



/* =========================================

4. LAYOUT PRINCIPAL & SIDEBAR

========================================= */

#main-content {

display: flex;

height: 100%;

width: 100%;

overflow: hidden;

}



/* Sidebar */

.sidebar {

width: 260px;

background-color: var(--bg-sidebar);

border-right: 1px solid var(--borde-color);

display: flex;

flex-direction: column;

justify-content: space-between;

flex-shrink: 0;

z-index: 1000;

transition: transform 0.3s ease;

}



.sidebar .brand {

padding: 25px;

text-align: center;

border-bottom: 1px solid var(--borde-color);

}



.sidebar .brand h2 {

margin: 0;

font-size: 1.4rem;

background: linear-gradient(90deg, var(--cian), var(--magenta), var(--amarillo));

-webkit-background-clip: text;

background-clip: text;

-webkit-text-fill-color: transparent;

font-weight: 800;

letter-spacing: -0.5px;

}



.sidebar nav {

padding: 20px 10px;

display: flex;

flex-direction: column;

gap: 8px;

overflow-y: auto;

flex-grow: 1;

}



.sidebar nav button {

background: transparent;

border: none;

color: var(--text-secondary);

padding: 12px 16px;

text-align: left;

font-size: 0.95rem;

border-radius: var(--borde-radius);

cursor: pointer;

transition: var(--transition);

display: flex;

align-items: center;

gap: 12px;

width: 100%;

}



.sidebar nav button:hover {

background-color: rgba(255, 255, 255, 0.05);

color: var(--text-primary);

transform: translateX(5px);

}



.sidebar nav button.active {

background: linear-gradient(90deg, rgba(255, 0, 127, 0.2), transparent);

color: var(--magenta);

border-left: 3px solid var(--magenta);

font-weight: 600;

}



.sidebar-footer {

padding: 20px;

border-top: 1px solid var(--borde-color);

}



/* Área Principal (Dashboard) */

.main-area {

flex-grow: 1;

overflow-y: auto; /* Scroll vertical aquí */

padding: 30px;

background-color: var(--bg-body);

scrollbar-width: thin;

scrollbar-color: var(--bg-hover) var(--bg-body);

}



h1 {

font-size: 1.8rem;

font-weight: 700;

margin-bottom: 25px;

color: var(--text-primary);

border-bottom: 2px solid var(--borde-color);

padding-bottom: 15px;

display: inline-block;

min-width: 50%;

}



h3 {

color: var(--cian);

margin-top: 0;

}



/* =========================================

5. FORMULARIOS E INPUTS

========================================= */

form fieldset {

border: 1px solid var(--borde-color);

border-radius: var(--borde-radius);

padding: 20px;

margin-bottom: 20px;

background-color: rgba(255,255,255,0.02);

}



form legend {

color: var(--magenta);

font-weight: bold;

padding: 0 10px;

}



label {

display: block;

margin-bottom: 8px;

color: var(--text-secondary);

font-size: 0.9rem;

font-weight: 500;

}



input[type="text"],

input[type="number"],

input[type="date"],

input[type="password"],

input[type="email"],

select,

textarea {

width: 100%;

padding: 12px 15px;

background-color: var(--bg-input);

border: 1px solid var(--borde-color);

border-radius: 8px;

color: var(--text-primary);

font-size: 1rem;

transition: var(--transition);

outline: none;

margin-bottom: 15px;

}



input:focus, select:focus, textarea:focus {

border-color: var(--cian);

box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.1);

}



/* Checkbox toggle estilo */

input[type="checkbox"] {

width: 20px;

height: 20px;

accent-color: var(--cian);

margin-right: 10px;

cursor: pointer;

}



/* =========================================

6. BOTONES

========================================= */

button {

padding: 12px 20px;

border-radius: 8px;

border: none;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

font-size: 0.95rem;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

text-decoration: none;

}



/* Botón Primario */

button.primary-btn,

button[type="submit"],

.submit-btn {

background-color: var(--cian);

color: var(--negro-tinta);

}



button.primary-btn:hover,

button[type="submit"]:hover,

.submit-btn:hover {

background-color: #33efff;

box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);

transform: translateY(-2px);

}



/* Botón Secundario */

button.secondary-btn, .btn-secondary {

background-color: var(--bg-hover);

color: var(--text-primary);

border: 1px solid var(--borde-color);

}



button.secondary-btn:hover {

background-color: var(--borde-color);

}



/* Botón Peligro/Eliminar */

button.danger-btn, .remove-product-btn, #remove-image-btn {

background-color: rgba(255, 23, 68, 0.15);

color: var(--danger);

border: 1px solid rgba(255, 23, 68, 0.3);

}



button.danger-btn:hover, .remove-product-btn:hover, #remove-image-btn:hover {

background-color: var(--danger);

color: white;

}



/* =========================================

7. CALENDARIO (ESTRUCTURA GRID Y CLICK CORREGIDO)

========================================= */

#calendar-grid-container {

background-color: var(--bg-card);

border: 1px solid var(--borde-color);

border-radius: var(--borde-radius);

padding: 20px;

margin-top: 20px;

position: relative;

z-index: 1;

}



/* Header de días (LUN, MAR...) */

.calendar-header-row {

display: grid;

grid-template-columns: repeat(7, 1fr);

margin-bottom: 15px;

border-bottom: 1px solid var(--borde-color);

padding-bottom: 10px;

text-align: center;

}



.header-item {

color: var(--text-muted);

font-weight: 700;

font-size: 0.85rem;

}



/* Grilla de días */

.calendar-days-grid {

display: grid;

grid-template-columns: repeat(7, 1fr);

gap: 10px;

grid-auto-rows: 1fr;

position: relative;

z-index: 2;

}



.calendar-day {

background-color: var(--bg-input);

border-radius: 8px;

min-height: 90px;

padding: 8px;

position: relative;

display: flex;

flex-direction: column;

justify-content: flex-start;

transition: var(--transition);

border: 1px solid transparent;

/* Z-index base bajo para evitar conflictos */

z-index: 5;

}



.calendar-day.empty {

background-color: transparent;

pointer-events: none;

z-index: 1;

}



.calendar-day:not(.empty):hover {

background-color: var(--bg-hover);

border-color: var(--cian);

z-index: 20; /* Sube solo al hover */

transform: scale(1.02);

}



.calendar-day .day-number {

font-size: 1rem;

font-weight: 600;

color: var(--text-secondary);

}



.calendar-day.is-today {

border: 2px solid var(--amarillo);

background-color: rgba(255, 234, 0, 0.05);

}



.calendar-day.is-today .day-number {

color: var(--amarillo);

}



/* Días con entregas (CLICK HABILITADO) */

.calendar-day.has-delivery {

background-color: rgba(255, 0, 127, 0.1);

border: 1px solid rgba(255, 0, 127, 0.3);

cursor: pointer; /* Manita */

pointer-events: auto; /* Asegura que reciba clicks */

}



.calendar-day.has-delivery:hover {

background-color: rgba(255, 0, 127, 0.2);

border-color: var(--magenta);

}



/* CRÍTICO: Los hijos NO bloquean el click, pasa directo al DIV padre */

.calendar-day.has-delivery * {

pointer-events: none;

}



/* Badge del calendario */

.calendar-day .badge {

position: absolute;

bottom: 8px;

right: 8px;

background-color: var(--magenta);

color: white;

font-size: 0.75rem;

padding: 2px 8px;

border-radius: 12px;

font-weight: bold;

box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}



.calendar-controls {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

background-color: var(--bg-card);

padding: 15px;

border-radius: var(--borde-radius);

border: 1px solid var(--borde-color);

}



.calendar-controls h2 {

margin: 0;

color: var(--text-primary);

text-transform: capitalize;

}



/* =========================================

8. COMPONENTES: TABLAS Y LISTAS

========================================= */

.table-container {

overflow-x: auto;

background-color: var(--bg-card);

border-radius: var(--borde-radius);

border: 1px solid var(--borde-color);

margin-bottom: 20px;

}



table {

width: 100%;

border-collapse: collapse;

min-width: 600px; /* Evita que se aplaste en móviles */

}



thead {

background-color: #000;

}



th {

padding: 15px;

text-align: left;

color: var(--text-secondary);

font-weight: 600;

text-transform: uppercase;

font-size: 0.8rem;

border-bottom: 2px solid var(--borde-color);

}



td {

padding: 15px;

border-bottom: 1px solid var(--borde-color);

color: var(--text-primary);

vertical-align: middle;

}



tbody tr:hover {

background-color: rgba(255,255,255,0.03);

}



/* Chips de Estado */

.chip {

padding: 4px 10px;

border-radius: 20px;

font-size: 0.75rem;

font-weight: 700;

text-transform: uppercase;

display: inline-block;

}



.chip-success { /* Entregado */

background-color: rgba(0, 200, 83, 0.2);

color: #69f0ae;

border: 1px solid #00c853;

}



.chip-pending { /* Pendiente */

background-color: rgba(255, 145, 0, 0.2);

color: #ffd180;

border: 1px solid #ff9100;

}



.chip-overdue { /* Vencido */

background-color: rgba(255, 23, 68, 0.2);

color: #ff8a80;

border: 1px solid #ff1744;

}



/* =========================================

9. DROPZONE Y MANEJO DE IMÁGENES

========================================= */

#diseno-drop-zone {

border: 2px dashed var(--borde-color);

background-color: rgba(255, 255, 255, 0.02);

border-radius: var(--borde-radius);

padding: 30px;

text-align: center;

transition: var(--transition);

color: var(--text-secondary);

margin-bottom: 15px;

cursor: pointer;

}



#diseno-drop-zone:hover, #diseno-drop-zone.dragover {

border-color: var(--cian);

background-color: rgba(0, 229, 255, 0.05);

color: var(--cian);

}



#thumbnail-preview-container {

display: flex;

align-items: center;

gap: 15px;

background: var(--bg-input);

border: 1px solid var(--borde-color);

border-radius: var(--borde-radius);

padding: 10px;

margin-top: 10px;

}



#thumbnail-preview {

width: 70px;

height: 70px;

object-fit: cover;

border-radius: 6px;

border: 1px solid var(--borde-color);

}



.thumbnail-info {

flex-grow: 1;

font-size: 0.9rem;

}



#thumbnail-filename {

font-weight: bold;

display: block;

margin-bottom: 4px;

word-break: break-all;

}



#thumbnail-compression-info {

color: var(--success);

font-size: 0.8rem;

}



/* =========================================

10. CORTE DE CAJA (ELEMENTOS ESPECÍFICOS)

========================================= */

.corte-summary-card {

background-color: var(--bg-card);

border: 1px solid var(--borde-color);

border-radius: var(--borde-radius);

padding: 20px;

margin-bottom: 25px;

box-shadow: var(--shadow-soft);

}



.corte-card {

background-color: var(--bg-input);

border: 1px solid var(--borde-color);

border-radius: 8px;

margin-bottom: 15px;

padding: 0;

overflow: hidden;

}



.corte-card-header {

background-color: rgba(0, 229, 255, 0.1);

color: var(--cian);

padding: 10px 15px;

display: flex;

justify-content: space-between;

font-weight: bold;

border-bottom: 1px solid var(--borde-color);

}



.corte-card-body {

padding: 15px;

display: grid;

grid-template-columns: 2fr 1fr 1fr;

gap: 10px;

font-size: 0.95rem;

}



.total-final {

color: var(--success);

font-weight: bold;

font-size: 1.2rem;

}



.resta-final {

color: var(--danger);

font-weight: bold;

}



/* =========================================

11. MODALES (OVERLAY Y CONTENIDO)

========================================= */

#modal-detalle,.modal-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.85);

backdrop-filter: blur(5px);

display: flex;

justify-content: center;

align-items: center;

z-index: 2000; /* Alto z-index para estar sobre el sidebar */

}



.modal-content {

background-color: var(--bg-card);

border: 1px solid var(--borde-color);

color: var(--text-primary);

padding: 30px;

border-radius: var(--borde-radius);

width: 90%;

max-width: 600px;

max-height: 90vh;

overflow-y: auto;

box-shadow: 0 10px 50px rgba(0,0,0,0.7);

position: relative;

}



/* Imagen grande en modal */

#full-preview-image {

max-width: 100%;

max-height: 70vh;

display: block;

margin: 0 auto;

border-radius: 8px;

}



/* =========================================

12. PANELES DASHBOARD

========================================= */

.panels {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 20px;

margin-bottom: 30px;

}



.panel-card {

background: var(--bg-card);

padding: 25px;

border-radius: var(--borde-radius);

border: 1px solid var(--borde-color);

height: 100%;

}



/* =========================================

13. CLASES DE UTILIDAD

========================================= */

.hidden { display: none !important; }

.text-right { text-align: right; }

.text-center { text-align: center; }

.flex-center { display: flex; justify-content: center; align-items: center; }

.mt-2 { margin-top: 10px; }

.mb-2 { margin-bottom: 10px; }



/* =========================================

14. RESPONSIVE (MÓVIL)

========================================= */

.mobile-header, .bottom-nav { display: none; }



@media (max-width: 900px) {

body { padding-bottom: 70px; } /* Espacio para nav inferior */


#main-content {

flex-direction: column;

height: auto;

overflow: visible;

}



/* Sidebar Off-canvas */

.sidebar {

position: fixed;

left: -100%;

top: 0;

height: 100%;

width: 80%;

max-width: 300px;

box-shadow: 10px 0 50px rgba(0,0,0,0.8);

border-right: 1px solid var(--magenta); /* Borde visual */

}



.sidebar.visible { left: 0; }

body.menu-open { overflow: hidden; /* Evitar scroll fondo */ }



.main-area {

padding: 15px;

width: 100%;

overflow-y: visible; /* Scroll natural en móvil */

}



/* Header Móvil */

.mobile-header {

display: flex;

justify-content: space-between;

align-items: center;

background-color: var(--bg-card);

padding: 15px;

margin-bottom: 20px;

border-radius: var(--borde-radius);

border: 1px solid var(--borde-color);

position: sticky;

top: 10px;

z-index: 900;

}


#mobile-menu-btn {

background: none;

font-size: 1.5rem;

color: var(--text-primary);

padding: 5px;

}



/* Navegación Inferior App-like */

.bottom-nav {

display: flex;

position: fixed;

bottom: 0;

left: 0;

width: 100%;

background-color: var(--bg-card);

border-top: 1px solid var(--borde-color);

z-index: 1001; /* Encima de todo */

justify-content: space-around;

padding: 8px 0;

box-shadow: 0 -5px 20px rgba(0,0,0,0.5);

}



.bottom-nav-btn {

background: none;

border: none;

color: var(--text-muted);

display: flex;

flex-direction: column;

align-items: center;

font-size: 0.7rem;

padding: 5px;

flex: 1;

}



.bottom-nav-btn.active {

color: var(--cian);

}


.bottom-nav-btn i { /* Si usas iconos fontawesome o emoji */

font-size: 1.2rem;

margin-bottom: 2px;

}



/* Ajustes Grid Calendario en Móvil */

.calendar-days-grid {

gap: 5px;

}

.calendar-day {

min-height: 60px;

padding: 2px;

}

.calendar-day .day-number {

font-size: 0.8rem;

}

.calendar-day .badge {

font-size: 0.6rem;

padding: 1px 4px;

width: 16px;

height: 16px;

bottom: 2px;

right: 2px;

}

.header-item {

font-size: 0.65rem;

}



/* Tablas responsivas */

.table-container {

border: none;

background: transparent;

}

table, thead, tbody, th, td, tr {

display: block;

}

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

tr {

margin-bottom: 15px;

background: var(--bg-card);

border: 1px solid var(--borde-color);

border-radius: 8px;

padding: 10px;

}

td {

border: none;

border-bottom: 1px solid rgba(255,255,255,0.05);

position: relative;

padding-left: 50%;

text-align: right;

}

td:before {

position: absolute;

top: 15px;

left: 10px;

width: 45%;

padding-right: 10px;

white-space: nowrap;

text-align: left;

font-weight: bold;

color: var(--text-secondary);

content: attr(data-label);

}

}