/* =========================================================================
   SISTEMA POS TECNO PRINT - V15 (FUENTES PREMIUM Y CORRECCIONES)
   ========================================================================= */

/* Importamos una fuente moderna, redondeada y elegante de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --bg-body: #f4f7f9;
  --bg-panel: #ffffff;
  --text-main: #0f172a;
  --border-color: #e2e8f0;
  --cart-box-bg: #f8fafc;
  --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.03);
  --shadow-float: 0 12px 25px rgba(0, 0, 0, 0.08);
}

body {
  background-color: var(--bg-body); color: var(--text-main);
  font-family: 'Nunito', sans-serif !important; 
  margin: 0; padding: 0; min-height: 100vh;
}

/* OBLIGAR a las cajas de texto y botones a abandonar su fuente vieja */
input, textarea, select, button, .btn-glass {
    font-family: 'Nunito', sans-serif !important;
}

/* Darle un toque extra de elegancia al textarea del carrito */
textarea.input-field {
    resize: none; 
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   1. ENCABEZADO (ELEGANTE Y SUAVE)
   ------------------------------------------------------------------------- */
header {
  background-color: var(--bg-panel);
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 15px 25px 30px 25px; 
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft); margin-bottom: 20px;
  position: relative; 
}
.brand { display: flex; align-items: center; gap: 15px; }
.brand-icon i { font-size: 45px !important; color: #0284c7; filter: drop-shadow(0 4px 6px rgba(2,132,199,0.3));}
.brand h1 { margin: 0; font-size: 24px; color: #0f172a; font-weight: 900; letter-spacing: -0.5px;}
.brand p { margin: 0; font-size: 13px; color: #64748b; font-weight: 700;}

.nav-matrix-container > div:first-child { 
    position: absolute; left: 85px; bottom: 8px;
    display: flex !important; justify-content: flex-start !important; align-items: center !important;
    gap: 10px; margin-bottom: 0 !important; width: auto !important;
}
#badge-user { background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; padding: 4px 12px; border-radius: 10px; font-size: 12px !important; font-weight: 800; }
#btn-dark-mode { padding: 4px 12px !important; font-size: 11px !important; cursor: pointer; font-weight: 800; border-radius: 10px !important;}
.nav-matrix-container { display: flex; flex-direction: column; align-items: flex-end; }
.nav-grid-5x2 { display: grid; grid-template-columns: repeat(5, auto); gap: 8px; margin-top: 5px;}

/* -------------------------------------------------------------------------
   2. BOTONES: GLOW LUMINOSO + EFECTO DE HUNDIMIENTO TÁCTIL
   ------------------------------------------------------------------------- */
.btn-glass { 
    border: none; border-radius: 10px !important; padding: 8px 12px !important; 
    font-size: 12px !important; font-weight: 800; color: white !important; cursor: pointer; 
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto al pasar el mouse (Se iluminan) */
.btn-glass:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Efecto al hacer CLIC (Se hunden físicamente y aplastan la sombra) */
.btn-glass:active { 
    transform: translateY(3px) scale(0.97) !important; 
    filter: brightness(0.9);
}

/* Degradados y Sombras que emiten luz */
.glass-yellow { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 5px 12px rgba(245, 158, 11, 0.3) !important; }
.glass-yellow:active { box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4) !important; }

.glass-purple { background: linear-gradient(135deg, #a855f7, #7e22ce) !important; box-shadow: 0 5px 12px rgba(168, 85, 247, 0.3) !important; }
.glass-purple:active { box-shadow: 0 1px 3px rgba(168, 85, 247, 0.4) !important; }

.glass-neutral { background: #ffffff !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 4px 8px rgba(0,0,0,0.04) !important;}
.glass-neutral:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; border-color: #94a3b8 !important;}

.glass-green { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 5px 12px rgba(16, 185, 129, 0.3) !important; }
.glass-green:active { box-shadow: 0 1px 3px rgba(16, 185, 129, 0.4) !important; }

.glass-sky { background: linear-gradient(135deg, #0ea5e9, #0284c7) !important; box-shadow: 0 5px 12px rgba(14, 165, 233, 0.3) !important; }
.glass-sky:active { box-shadow: 0 1px 3px rgba(14, 165, 233, 0.4) !important; }

.glass-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; box-shadow: 0 5px 12px rgba(59, 130, 246, 0.3) !important; }
.glass-blue:active { box-shadow: 0 1px 3px rgba(59, 130, 246, 0.4) !important; }

.glass-red { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; box-shadow: 0 5px 12px rgba(244, 63, 94, 0.3) !important; }
.glass-red:active { box-shadow: 0 1px 3px rgba(244, 63, 94, 0.4) !important; }

.glass-orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; box-shadow: 0 5px 12px rgba(249, 115, 22, 0.3) !important; }
.glass-orange:active { box-shadow: 0 1px 3px rgba(249, 115, 22, 0.4) !important; }

/* -------------------------------------------------------------------------
   3. ESTRUCTURA DE PANELES (SIN ZOOM, CURVAS SUAVES)
   ------------------------------------------------------------------------- */
#vista-ventas { display: flex; gap: 15px; padding: 0 20px 20px 20px; align-items: flex-start; }
.catalog-panel { flex: 1; background: transparent; padding: 0; border: none; box-shadow: none; }
.cart-panel { flex: 0 0 320px; background: var(--bg-panel); border-radius: 16px; padding: 20px; border: 1px solid var(--border-color); box-shadow: var(--shadow-float); position: sticky; top: 15px; }

.search-box { width: 100%; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--border-color); background: #ffffff; font-size: 14px; font-weight: 600; box-sizing: border-box; outline: none; color: var(--text-main); box-shadow: var(--shadow-soft); transition: all 0.3s ease; }
.search-box:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), var(--shadow-soft); }
.cat-filtros-bar { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.btn-cat-filtro { padding: 8px 14px !important; font-size: 11px !important; border-radius: 12px !important; }

/* -------------------------------------------------------------------------
   4. TARJETAS DE PRODUCTO (FLOTANTES ESPECTACULARES)
   ------------------------------------------------------------------------- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 15px; }

.prod-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; /* Curvas elegantes */
  padding: 15px !important; 
  text-align: center; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  box-shadow: var(--shadow-soft); min-height: 180px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animación súper suave */
}

/* Efecto Flotante al pasar el mouse */
.prod-card:hover { 
    transform: translateY(-6px); 
    box-shadow: var(--shadow-float); 
    border-color: #cbd5e1; 
}

.cat-tag { font-size: 9px !important; text-transform: uppercase; font-weight: 800; color: #94a3b8 !important; margin-bottom: 5px; display: block; letter-spacing: 0.5px;}
.prod-title { font-size: 13px; font-weight: 800; margin: 4px 0; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; line-height: 1.3;}
.prod-price { font-size: 18px; font-weight: 900; color: #059669; margin: 5px 0 0 0; width: 100%;}

/* Ocultar el stock de forma correcta (SIN borrar los títulos) */
.prod-card .prod-stock, .prod-card .tallas-preview { display: none !important; }

/* Contenedor del botón */
.prod-card > div:last-child { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; margin-top: auto; }
.prod-card button, .prod-card .btn-glass { 
    width: 100% !important; padding: 10px 0 !important; margin-top: 12px !important; margin-bottom: 2px !important;
    border-radius: 10px !important; font-size: 13px !important; font-weight: 800 !important;
}

/* -------------------------------------------------------------------------
   5. CARRITO Y TABLAS (CURVAS MODERNAS)
   ------------------------------------------------------------------------- */
.cart-header { display: flex; justify-content: space-between; align-items: center; font-weight: 900; color: #0f172a; margin-bottom: 15px; font-size: 16px;}
.input-field { width: 100%; padding: 10px 12px; font-size: 12px !important; font-weight: 600 !important; border-radius: 10px; border: 1px solid #cbd5e1; margin-bottom: 12px; box-sizing: border-box; background: #f8fafc; color: var(--text-main); transition: all 0.3s ease;}
.input-field:focus { border-color: #3b82f6; background: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; }

.cart-items { max-height: 280px !important; overflow-y: auto !important; overflow-x: hidden !important; display: block !important; padding-right: 5px !important; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px; margin-bottom: 15px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);}
.cart-items p { color: #94a3b8 !important; font-size: 13px !important; margin: 25px 0; text-align: center; font-weight: 800; }
.cart-items::-webkit-scrollbar { width: 5px; } .cart-items::-webkit-scrollbar-track { background: transparent; } .cart-items::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }

.cart-row { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }

.totals-box { background: #ffffff; padding: 18px; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 15px; box-shadow: var(--shadow-soft);}
.tot-main { font-size: 20px !important; font-weight: 900 !important; color: #08149c; margin-bottom: 12px;}
.tot-row-anticipo { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; font-weight: 800; font-size: 14px; color: #334155;}
.input-anticipo, #input_anticipo { width: 85px; padding: 8px; border-radius: 8px; border: 1px solid #cbd5e1; font-weight: 900; text-align: right; font-size: 15px; background: #f8fafc; color: #059669; transition: all 0.3s ease;}
.input-anticipo:focus { border-color: #059669; background: #ffffff; outline: none; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);}
.tot-sal { font-size: 18px !important; font-weight: 900 !important; color: #e11d48; margin-top: 12px;}

/* -------------------------------------------------------------------------
   6. INVENTARIO
   ------------------------------------------------------------------------- */
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th { background: #f8fafc; border-bottom: 2px solid #e2e8f0; padding: 12px 10px; font-weight: 800; text-align: left; font-size: 12px;}
table td { padding: 8px 10px !important; vertical-align: middle !important; font-size: 12px; border-bottom: 1px solid #f1f5f9;}

table td > div, table td > span, table td > form { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 4px !important; width: max-content !important; margin: 0 auto !important; }
table td button, table td .btn-glass, table td input[type="button"] { display: inline-flex !important; justify-content: center !important; align-items: center !important; padding: 5px 10px !important; margin: 0 !important; font-size: 11px !important; height: 26px !important; line-height: 1 !important; width: auto !important; min-width: 0 !important; white-space: nowrap !important; border-radius: 8px !important; }

table td[colspan] { text-align: left !important; padding: 12px 15px !important; background-color: #ffffff !important; font-weight: 900 !important; color: #0f172a;}
table td[colspan] > div, table td[colspan] > span, table td[colspan] > i, table td[colspan] > b { display: inline-block !important; margin: 0 5px 0 0 !important; vertical-align: middle !important; }

/* -------------------------------------------------------------------------
   7. MODALES Y PESTAÑAS
   ------------------------------------------------------------------------- */
.hidden { display: none !important; }
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-box, .modal-box-large { background: #ffffff; color: var(--text-main); padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); max-height: 90vh; overflow-y: auto; width: 100%;}
#modal-preview-orden { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 23, 42, 0.7) !important; backdrop-filter: blur(8px); z-index: 9999 !important; display: flex; justify-content: center; align-items: center; }
#modal-preview-orden > div { background: #ffffff !important; border-radius: 16px; margin: 0 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }

.tab-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid #e2e8f0; }
.tab-btn { background: transparent; border: none; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 800; color: #64748b; cursor: pointer; transition: all 0.3s ease; }
.tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.tab-btn.active { background: #eff6ff; color: #2563eb; box-shadow: inset 0 -3px 0 #2563eb; border-radius: 10px 10px 0 0; }
.tab-content { display: none; height: 60vh; min-height: 450px; overflow-y: auto; padding-right: 8px; }
.tab-content.active { display: block; }
#vista-taller { flex-direction: column !important; padding: 0 25px 25px 25px; width: 100%; box-sizing: border-box;}

/* -------------------------------------------------------------------------
   8. RESPONSIVO INTELIGENTE
   ------------------------------------------------------------------------- */
@media screen and (max-width: 1150px) and (min-width: 769px) {
  #vista-ventas { flex-direction: row !important; padding: 15px; gap: 15px; }
  .cart-panel { max-width: 300px !important; flex: 0 0 300px !important; position: sticky !important; top: 15px !important; padding: 15px; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
}
@media screen and (max-width: 768px) {
  #vista-ventas { flex-direction: column-reverse !important; padding: 10px; }
  .cart-panel { max-width: 100% !important; flex: none !important; position: sticky !important; top: 0 !important; z-index: 100; margin-bottom: 15px; box-shadow: var(--shadow-float); }
  header { flex-direction: column; padding-bottom: 50px; }
  .nav-matrix-container { align-items: center; margin-top: 15px; width: 100%; }
  .nav-grid-5x2 { justify-content: center; }
}

/* Modo oscuro inactivo */
body.dark-theme {}

/* =========================================================================
   PARCHE V14: RESTAURACIÓN DEL MONITOR TALLER Y MODALES
   ========================================================================= */

/* 1. RESTAURACIÓN DEL MONITOR TALLER (KANBAN EN 3 COLUMNAS) */
#vista-taller { 
    display: flex; /* Aseguramos que se muestre */
    flex-direction: column !important; 
    padding: 0 25px 25px 25px; 
    width: 100%; 
    box-sizing: border-box;
}

.taller-top-bar { 
    display: flex; justify-content: space-between; align-items: center; 
    background: #ffffff; padding: 20px 25px; border-radius: 16px; 
    border: 1px solid #e2e8f0; margin-bottom: 25px; width: 100%; 
    box-sizing: border-box; box-shadow: var(--shadow-soft); 
}

.taller-main-title { font-size: 22px; font-weight: 900; color: #0f172a; display: flex; align-items: center; gap: 12px; }

.taller-columns { 
    display: grid !important; /* Obligatorio para las columnas */
    grid-template-columns: repeat(3, 1fr) !important; /* 3 Columnas iguales */
    gap: 25px; 
    width: 100%; 
    box-sizing: border-box; 
}

.taller-col { 
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; 
    padding: 20px; display: flex; flex-direction: column; gap: 15px; 
}

.taller-col-hdr { 
    font-size: 16px; font-weight: 900; padding-bottom: 15px; 
    border-bottom: 2px solid #cbd5e1; margin-bottom: 5px; 
    text-transform: uppercase;
}

/* Tarjetas individuales dentro del Kanban */
.taller-card { 
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; 
    padding: 18px; font-size: 13px; box-shadow: var(--shadow-soft); 
    border-left: 4px solid #3b82f6; transition: all 0.3s ease;
}
.taller-card-cola { border-left-color: #f59e0b; }
.taller-card-proc { border-left-color: #0ea5e9; }
.taller-card-listo { border-left-color: #10b981; }

.taller-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

.tc-head { display: flex; justify-content: space-between; font-weight: 900; margin-bottom: 8px;}
.tc-folio { color: #0f172a; font-size: 14px;}
.tc-cli-row { color: #334155; font-weight: 700; margin-bottom: 8px;}
.tc-det-box { background: #f1f5f9; padding: 10px; border-radius: 8px; margin-bottom: 12px;}
.tc-btns-row { display: flex; justify-content: space-between; align-items: center; }

/* 2. RESTAURACIÓN DEL MODAL DE ÓRDENES LISTAS */
#lista-grandes-listos-cont {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

#lista-grandes-listos-cont > div { 
    background: #ffffff; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 15px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: var(--shadow-soft); 
    transition: all 0.2s ease; 
}
#lista-grandes-listos-cont > div:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.cli-listo-nombre { font-size: 16px; font-weight: 900; color: #0f172a; margin-bottom: 4px;}
.cli-listo-sub { font-size: 13px; color: #64748b; display: flex; gap: 15px;}
.cli-listo-saldo { font-size: 18px; font-weight: 900; color: #e11d48;}

/* =========================================================================
   PARCHE V16: CORRECCIÓN DE ANCHO EN MODALES
   ========================================================================= */
.modal-box { max-width: 420px !important; margin: 0 auto; }
.modal-box-large { max-width: 900px !important; margin: 0 auto; }

/* =========================================================================
   PARCHE V17: REFINAMIENTOS FINALES (ENCABEZADO Y TEXTOS)
   ========================================================================= */

/* 1. FUNDIR EL ENCABEZADO CON EL FONDO */
header {
    background-color: var(--bg-body) !important; /* Mismo color que el fondo general */
    border-bottom: none !important; /* Quitamos la línea dura divisoria */
    box-shadow: none !important; /* Quitamos la sombra para que sea continuo */
    padding-bottom: 20px !important; /* Ajustamos el espacio inferior */
}

/* 2. PROTAGONISMO AL NOMBRE DEL PRODUCTO */
.prod-title, .prod-card h4 {
    font-size: 15px !important; /* Aumentamos el tamaño */
    font-weight: 900 !important; /* Lo hacemos extra grueso */
    margin: 2px 0 12px 0 !important; /* Ajustamos el espacio alrededor */
    color: #0f172a !important; /* Negro más profundo para máximo contraste */
    line-height: 1.2 !important;
}

/* Reducimos la etiqueta gris de categoría para no robar atención */
.cat-tag {
    font-size: 8.5px !important; 
    color: #94a3b8 !important;
    margin-bottom: 2px !important;
}

/* Aseguramos que el precio también tenga jerarquía sin estorbar al nombre */
.prod-price {
    margin-top: 0 !important;
    padding-bottom: 5px !important;
}

/* =========================================================================
   PARCHE V18: UNIFICACIÓN DE BOTONES DEL ENCABEZADO (AZUL CORPORATIVO)
   ========================================================================= */

/* Obligamos a todos los botones del menú superior a ser azules */
.nav-grid-5x2 .btn-glass {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 5px 12px rgba(59, 130, 246, 0.3) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Efecto de hundimiento manteniendo la luz azul */
.nav-grid-5x2 .btn-glass:active {
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.4) !important;
}

/* Aseguramos que los botones que antes eran blancos no se pongan grises al pasar el mouse */
.nav-grid-5x2 .btn-glass:hover {
    color: #ffffff !important;
}