/* ═══════════════════════════════════════════════════════════════
   COOL CONTROL — Design System 2026 · v2
   Cadena de frío · APPCC · Mobile-first · PWA
   100% retrocompatible · sin color-mix · tipografía Inter
═══════════════════════════════════════════════════════════════ */

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

:root {
    --brand-600:#2563eb; --brand-700:#1d4ed8; --brand-500:#3b82f6; --brand-400:#60a5fa;
    --cold-500:#00b8d4;  --cold-600:#0098b3;

    --accent:#2563eb; --accent-hover:#3b82f6; --accent-press:#1d4ed8;
    --accent-light:#dbeafe; --accent-text:#1e40af;

    --green:#16a34a; --green-light:#dcfce7; --green-text:#15803d;
    --red:#dc2626;   --red-light:#fee2e2;   --red-text:#b91c1c;
    --orange:#ea580c;--orange-light:#ffedd5; --orange-text:#c2410c;
    --yellow:#f5b800;--yellow-light:#fff7df; --yellow-text:#7a5a00;

    --gray-50:#f7f9fc;--gray-100:#eef0f3;--gray-200:#e2e8f0;--gray-300:#cdd2da;
    --gray-400:#9aa2af;--gray-600:#5d6470;--gray-800:#2c313a;--gray-900:#14171d;

    --surface:#ffffff;
    --surface-2:#eef2f7;
    --surface-3:#e3e8ef;
    --canvas-tint:rgba(37,99,235,0.05);
    --text-primary:#14171d; --text-secondary:#272a30; --text-tertiary:#2f3236;
    --border:#e8edf3; --border-strong:#d4d9e0;
    --ring:rgba(37,99,235,0.30);

    --shadow-sm:0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md:0 8px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.05);
    --shadow-lg:0 20px 48px rgba(15,23,42,0.14), 0 6px 16px rgba(15,23,42,0.06);
    --shadow-brand:0 6px 18px rgba(37,99,235,0.30);

    --radius-sm:9px; --radius-md:13px; --radius-lg:17px; --radius-xl:21px; --radius-2xl:26px;
    --ease:cubic-bezier(0.22,1,0.36,1); --ease-out:cubic-bezier(0.16,1,0.3,1);

    --header-h:54px; --bottom-h:74px; --sidebar-w:272px;

    --azul:#2563eb; --azul-claro:#3b82f6; --rojo:#dc2626; --verde:#16a34a;
    --naranja:#ea580c; --amarillo:#f5b800;
    --gris:#6b7280; --gris-claro:#e2e8f0; --texto:#14171d; --blanco:#ffffff; --radio:13px;

    /* Sidebar — siempre oscuro, identidad de marca */
    --sidebar-bg:#0d1b2a; --sidebar-surface:#1e293b;
    --sidebar-border:rgba(255,255,255,0.08);
    --sidebar-text:#e2e8f0; --sidebar-text-secondary:#94a3b8;
    --sidebar-active-bg:rgba(37,99,235,0.22); --sidebar-active-text:#60a5fa;
}

/* ═══ MODO OSCURO automático ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    --accent-light:rgba(47,116,255,0.18); --accent-text:#9cc0ff;
    --green-light:rgba(31,170,82,0.18); --green-text:#5fd58a;
    --red-light:rgba(229,57,53,0.20); --red-text:#ff8a87;
    --orange-light:rgba(240,140,0,0.20); --orange-text:#ffb24d;
    --yellow-light:rgba(245,184,0,0.18); --yellow-text:#ffd34d;
    --surface:#171b22; --surface-2:#0e1117; --surface-3:#232a34; --canvas-tint:#10202f;
    --text-primary:#f1f3f6; --text-secondary:#a8afba; --text-tertiary:#6f7682;
    --border:#262c36; --border-strong:#39414e;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.5); --shadow-lg:0 20px 44px rgba(0,0,0,.6);
    --gris:#9aa2af; --gris-claro:#262c36;
  }
  img[src*="logocoolcontrol"]{filter:brightness(0) invert(1);opacity:.92;}
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;
  color:var(--text-primary);
  min-height:100vh; line-height:1.45; letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  background:var(--surface-2);
  background-image:
    radial-gradient(1100px 1500px at 100% -8%, var(--canvas-tint), rgba(0,0,0,0) 60%),
    radial-gradient(800px 1500px at -80% 0%, var(--canvas-tint), rgba(0,0,0,0) 55%);
  background-attachment:fixed;
}

a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:16px;}
img{display:block;}
::selection{background:var(--accent-light);color:var(--accent-text);}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);border-radius:var(--radius-sm);}
.widget-value,.albaran-num,.lote-codigo,td,th,.badge{font-variant-numeric:tabular-nums;}

/* ═══ HEADER ═══ */
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:rgba(255,255,255,0.80);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:100;
  padding-top:env(safe-area-inset-top);height:calc(var(--header-h) + env(safe-area-inset-top));
}
@media (prefers-color-scheme:dark){.header{background:rgba(23,27,34,0.78);}}
.header-left{display:flex;align-items:center;gap:10px;}
.header-title{font-size:16px;font-weight:700;letter-spacing:-0.02em;}
.menu-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-primary);transition:background .18s var(--ease),transform .1s;}
.menu-btn:hover{background:var(--surface-3);}.menu-btn:active{transform:scale(.92);}
.user-badge{font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border);padding:5px 12px;border-radius:20px;letter-spacing:-0.01em;}
.header a[title]:hover{background:var(--surface-3);}

/* ═══ SIDEBAR ═══ */
.sidebar{position:fixed;top:0;left:calc(-1 * var(--sidebar-w));width:var(--sidebar-w);height:100vh;background:var(--sidebar-bg);color:var(--sidebar-text);z-index:200;transition:left .34s var(--ease);display:flex;flex-direction:column;border-right:1px solid var(--sidebar-border);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-lg);}
.sidebar.open{left:0;}
.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:16px;min-height:var(--header-h);border-bottom:1px solid var(--sidebar-border);position:sticky;top:0;background:var(--sidebar-bg);z-index:2;}
.sidebar-brand{display:flex;align-items:center;gap:10px;}
.sidebar-brand-name{font-size:14.5px;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;color:var(--sidebar-text);}
.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--sidebar-text-secondary);transition:background .15s,transform .1s;flex-shrink:0;}
.close-btn:hover{background:var(--sidebar-surface);}.close-btn:active{transform:scale(.9);}
.icon{flex-shrink:0;vertical-align:middle;stroke:currentColor;}
.nav-list{list-style:none;padding:8px;flex:1;}
.nav-section{display:block;font-size:10.5px;font-weight:700;letter-spacing:0.07em;color:var(--sidebar-text-secondary);padding:16px 12px 6px;text-transform:uppercase;}
.nav-item{position:relative;display:flex;align-items:center;padding:10px 12px;font-size:14px;font-weight:550;color:var(--sidebar-text);border-radius:var(--radius-md);margin-bottom:2px;transition:background .16s var(--ease),color .16s;gap:2px;}
.nav-item:hover{background:var(--sidebar-surface);}
.nav-item.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-text);font-weight:700;}
.nav-item.active::before{content:"";position:absolute;left:3px;top:50%;width:3px;height:17px;transform:translateY(-50%);border-radius:3px;background:var(--sidebar-active-text);}
.sidebar-footer{padding:12px 8px;border-top:1px solid var(--sidebar-border);flex-shrink:0;position:sticky;bottom:0;background:var(--sidebar-bg);padding-bottom:calc(12px + env(safe-area-inset-bottom));}
.logout-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--radius-md);font-size:14px;font-weight:600;color:#f87171;transition:background .15s;}
.logout-btn:hover{background:rgba(220,38,38,0.18);}
.overlay{display:none;position:fixed;inset:0;background:rgba(10,16,28,0.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:150;animation:fade-in .25s var(--ease);}
.overlay.visible{display:block;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* ═══ MAIN ═══ */
.main{padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 20px);padding-bottom:calc(var(--bottom-h) + 20px);padding-left:16px;padding-right:16px;max-width:720px;margin:0 auto;animation:page-in .4s var(--ease-out);}
.main-login{padding:0;max-width:none;animation:none;}
@keyframes page-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ═══ BOTTOM NAV ═══ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-h) + env(safe-area-inset-bottom));background:rgba(255,255,255,0.92);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--border);display:flex;align-items:stretch;z-index:100;padding-bottom:env(safe-area-inset-bottom);padding-bottom:max(env(safe-area-inset-bottom),0px);}
@media (prefers-color-scheme:dark){.bottom-nav{background:rgba(23,27,34,0.92);}}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:21px;color:var(--text-tertiary);transition:color .18s var(--ease),transform .1s;padding-top:8px;padding-bottom:4px;position:relative;text-decoration:none;}
.bottom-nav-item:active{transform:scale(.92);}
.bottom-nav-item small{font-size:10px;font-weight:600;letter-spacing:-0.01em;}
.bottom-nav-item.active{color:var(--accent);}
.bottom-nav-item.active::after{content:"";position:absolute;top:0;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--accent);}
.bottom-nav-home{flex:1.3;}
.bottom-nav-home span{font-size:27px;}
.bottom-nav-home small{font-size:11px;font-weight:700;}

/* ═══ FLASH ═══ */
.flash-container{margin-bottom:16px;display:flex;flex-direction:column;gap:8px;}
.flash{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:550;border:1px solid;box-shadow:var(--shadow-sm);animation:flash-in .35s var(--ease-out);}
@keyframes flash-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.flash button{display:flex;align-items:center;opacity:.55;margin-left:12px;flex-shrink:0;transition:opacity .15s;color:inherit;}
.flash button:hover{opacity:1;}
.flash-success{background:var(--green-light);color:var(--green-text);border-color:rgba(31,170,82,0.28);}
.flash-danger{background:var(--red-light);color:var(--red-text);border-color:rgba(229,57,53,0.28);}
.flash-warning{background:var(--orange-light);color:var(--orange-text);border-color:rgba(240,140,0,0.28);}
.flash-info{background:var(--accent-light);color:var(--accent-text);border-color:rgba(11,92,255,0.28);}

/* ═══ LOGIN ═══ */
.login-page,.login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;background:var(--surface-2);background-image:radial-gradient(900px 520px at 50% -10%, var(--accent-light), rgba(0,0,0,0) 62%);}
.login-card,.login-box{background:var(--surface);border-radius:var(--radius-2xl);padding:40px 32px;width:100%;max-width:392px;border:1px solid var(--border);box-shadow:var(--shadow-lg);position:relative;z-index:1;animation:page-in .5s var(--ease-out);}
.login-logo,.login-logo-wrap{text-align:center;margin-bottom:26px;}
.login-logo-wrap img{max-width:168px;max-height:74px;object-fit:contain;margin:0 auto;}
.login-logo-emoji{font-size:52px;display:block;}
.login-title{text-align:center;font-size:23px;font-weight:800;margin:8px 0 4px;letter-spacing:-0.03em;}
.login-subtitle,.login-sub{text-align:center;font-size:14px;color:var(--text-secondary);margin-bottom:30px;}

/* ═══ FORMS ═══ */
.form-group{margin-bottom:15px;}
.form-group label{display:block;font-size:12px;font-weight:650;color:var(--text-secondary);margin-bottom:7px;letter-spacing:0.01em;}
.form-group input:not([type="checkbox"]):not([type="radio"]),.form-group select,.form-group textarea{width:100%;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-md);font-size:15px;color:var(--text-primary);transition:border-color .16s var(--ease),background .16s,box-shadow .16s;-webkit-appearance:none;appearance:none;}
input[type="checkbox"],input[type="radio"]{width:auto;}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-tertiary);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--ring);}
.form-group textarea{min-height:84px;resize:vertical;line-height:1.5;}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23959cab' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.form-group small{display:block;margin-top:5px;font-size:12px;color:var(--text-tertiary);}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:var(--radius-md);font-size:14px;font-weight:700;letter-spacing:-0.01em;transition:transform .1s var(--ease),box-shadow .18s var(--ease),filter .18s,background .18s;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.btn:active{transform:scale(.97);}
.btn-full{width:100%;}
.btn-primary{background:var(--accent-light);color:var(--accent-text);box-shadow:none;}
.btn-primary:hover{filter:brightness(0.96);}
.btn-success{background:var(--green-light);color:var(--green-text);box-shadow:none;}
.btn-success:hover{filter:brightness(0.96);}
.btn-danger{background:var(--red-light);color:var(--red-text);box-shadow:none;}
.btn-danger:hover{filter:brightness(0.96);}
.btn-secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--border-strong);box-shadow:var(--shadow-sm);}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--text-tertiary);}
.btn-dark{background:var(--surface-3);color:var(--text-primary);box-shadow:none;}
.btn-dark:hover{filter:brightness(0.96);}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:var(--radius-sm);}

/* ═══ QUICK ACTIONS (icon grid) ═══ */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.quick-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px;border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);font-size:11.5px;font-weight:600;text-align:center;letter-spacing:-0.01em;box-shadow:var(--shadow-sm);transition:background .15s var(--ease),box-shadow .18s var(--ease),transform .1s;width:100%;}
.quick-action:hover{background:var(--surface);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.quick-action:active{transform:scale(.96);}
.quick-action-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;}

/* ═══ CARDS ═══ */
.card{background:var(--surface);border-radius:var(--radius-lg);padding:16px;border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-bottom:10px;transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .22s;}
a > .card:hover,.card[onclick]:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--border-strong);}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-tertiary);margin-bottom:10px;}

/* ═══ WIDGETS ═══ */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.widget{position:relative;background:var(--surface);border-radius:var(--radius-lg);padding:16px;border:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:flex-start;gap:6px;overflow:hidden;transition:box-shadow .22s var(--ease),transform .22s var(--ease);}
.widget-sm{padding:14px 12px;min-height:0;}
a > .widget:hover,.widget:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.widget-label{font-size:12px;color:var(--text-secondary);font-weight:550;}
.widget-value{font-size:28px;font-weight:800;letter-spacing:-0.04em;line-height:1.15;}
.widget-value-accent{color:var(--accent);}

/* ═══ LOTES ═══ */
.lote-item{background:var(--surface);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:8px;border:1px solid var(--border);box-shadow:var(--shadow-sm);border-left:3px solid var(--gray-200);transition:box-shadow .2s var(--ease),transform .2s var(--ease);}
.lote-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.lote-item.ok{border-left-color:var(--green);}
.lote-item.proximo{border-left-color:var(--yellow);}
.lote-item.critico{border-left-color:var(--orange);}
.lote-item.caducado{border-left-color:var(--red);}
.lote-nombre{font-weight:700;font-size:15px;margin-bottom:5px;letter-spacing:-0.02em;}
.lote-meta{font-size:13px;color:var(--text-secondary);display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.lote-codigo{font-size:11px;font-family:'SF Mono','JetBrains Mono','Menlo',monospace;background:var(--surface-2);border:1px solid var(--border-strong);padding:2px 7px;border-radius:6px;color:var(--text-secondary);letter-spacing:0.01em;}

/* ═══ BADGES ═══ */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.01em;white-space:nowrap;}
.badge-ok{background:var(--green-light);color:var(--green-text);}
.badge-proximo{background:var(--yellow-light);color:var(--yellow-text);}
.badge-critico{background:var(--orange-light);color:var(--orange-text);}
.badge-caducado{background:var(--red-light);color:var(--red-text);}
.badge-info{background:var(--accent-light);color:var(--accent-text);}
.badge-neutral{background:var(--surface-3);color:var(--text-secondary);}

/* ═══ PAGE HEADER ═══ */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:20px;gap:8px 10px;}
.page-title{font-size:24px;font-weight:800;letter-spacing:-0.04em;flex:1;min-width:0;}

/* Fila de acciones desplazable horizontalmente: evita que los botones se
   salgan de la pantalla en móvil cuando hay varios juntos arriba. */
.header-actions-scroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin:0 -2px;}
.header-actions-scroll::-webkit-scrollbar{display:none;}
.header-actions-scroll>*{flex-shrink:0;white-space:nowrap;}

/* ═══ TABLES ═══ */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-sm);background:var(--surface);}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{background:var(--surface-2);padding:11px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-secondary);border-bottom:1px solid var(--border);}
td{padding:12px 14px;border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s;}
tbody tr:hover td{background:var(--surface-2);}

/* ═══ ALBARÁN / FACTURA ═══ */
.albaran-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid var(--gray-100);}
.albaran-logo{font-size:32px;margin-bottom:6px;}
.albaran-empresa{font-size:18px;font-weight:800;letter-spacing:-0.03em;}
.albaran-num{font-size:22px;font-weight:800;letter-spacing:-0.03em;}

.nav-item-parent{cursor:pointer;user-select:none;}

#scanner-container{width:100%;max-width:400px;margin:0 auto 16px;border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--accent);box-shadow:var(--shadow-md);}
#scanner-container video{width:100%;display:block;}

.empty-state{text-align:center;padding:44px 20px;color:var(--text-secondary);}
.empty-state-icon{font-size:40px;margin-bottom:10px;opacity:.7;}
.empty-state-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}

/* ═══ DESKTOP ═══ */
@media (min-width:768px){
  .sidebar{left:0 !important;box-shadow:none;}
  .overlay{display:none !important;}
  .main{margin-left:var(--sidebar-w);padding-left:32px;padding-right:32px;padding-bottom:36px;max-width:940px;}
  .menu-btn{display:none;}
  .bottom-nav{display:none;}
  .dashboard-grid{grid-template-columns:repeat(4,1fr);gap:12px;}
  .header{padding-left:calc(var(--sidebar-w) + 28px);}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

@media print{
  .header,.sidebar,.bottom-nav,.overlay,.btn,.flash-container,.no-print{display:none !important;}
  .main{padding:0 !important;margin:0 !important;max-width:none !important;}
  body{background:#fff !important;background-image:none !important;}
  .card{box-shadow:none !important;border:1px solid #ddd !important;}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
}