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

:root{
  --ink:#16243e;          /* azul marino exacto del logo Global */
  --ink-2:#1e3355;
  --steel:#4a5a73;
  --steel-light:#8a95a8;
  --paper:#f3f5f9;         /* fondo general, gris-azulado muy claro */
  --paper-alt:#e6eaf1;
  --card:#ffffff;
  --accent:#ce122d;        /* rojo exacto del logo Global */
  --accent-deep:#a30f26;
  --teal:#1f8a70;          /* estado: disponible */
  --teal-deep:#145c4a;
  --amber:#d98e2b;         /* estado: pocas unidades */
  --amber-deep:#a9691c;
  --red:#ce122d;           /* estado: agotado (mismo rojo de marca) */
  --red-deep:#a30f26;
  --text:#141c2b;
  --text-soft:#5b6472;
  --radius:10px;
  --shadow: 0 1px 0 rgba(11,31,58,.04), 0 8px 20px -10px rgba(11,31,58,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-deep);}

.beam{
  background:linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 55%, #2a4870 100%);
  color:#eaf0fb;
  padding:24px clamp(16px,4vw,40px) 28px;
  border-bottom:3px solid var(--accent);
}
.beam-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:1280px; margin:0 auto;
}
.brand{display:flex; align-items:baseline; gap:12px;}
.brand .tag{
  font-family:'Inter',system-ui,sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.12); color:#cfe0ff; padding:4px 10px; border-radius:99px;
  font-weight:600; border:1px solid rgba(255,255,255,.18);
}
.brand h1{
  font-family:'Sora','Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-.01em;
  font-size:clamp(26px,4vw,38px); margin:8px 0 0; line-height:1.05;
}
.beam-sub{font-size:13px; color:#a9bad9; margin-top:6px;}

.totals{display:flex; gap:10px; flex-wrap:wrap;}
.odometer{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  padding:9px 16px; min-width:100px; text-align:center; backdrop-filter:blur(2px);
}
.odometer .num{
  font-family:'Sora','Inter',system-ui,sans-serif; font-weight:700; font-size:25px; color:#eaf0fb;
  letter-spacing:-.01em;
}
.odometer.ok .num{color:#6fe0bd;}
.odometer.low .num{color:#f0b968;}
.odometer.out .num{color:#f19a94;}
.odometer .lbl{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#a9bad9; margin-top:2px;}

.wrap{max-width:1280px; margin:0 auto; padding:22px clamp(16px,4vw,40px) 60px;}

.panel{
  background:var(--card); border:1px solid var(--paper-alt); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px;
}

.controls{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px;
}
.controls input[type=text], .controls select{
  font-family:'Inter',system-ui,sans-serif; font-size:14px; padding:9px 12px; border-radius:8px;
  border:1px solid #d3dae4; background:#fff; color:var(--text);
}
.controls input[type=text]{min-width:240px; flex:1;}
.controls .count-badge{
  font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:12px; color:var(--text-soft); margin-left:auto;
}

table{width:100%; border-collapse:collapse; font-size:14px;}
thead th{
  position:sticky; top:0; background:var(--ink); color:#dce6f7; text-align:left;
  font-family:'Inter',system-ui,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  padding:11px 12px; font-weight:600; z-index:2;
}
thead th:first-child{border-top-left-radius:6px;}
thead th:last-child{border-top-right-radius:6px;}
tbody td{padding:10px 12px; border-bottom:1px solid var(--paper-alt); vertical-align:middle;}
tbody tr:nth-child(even){background:rgba(11,31,58,.025);}
tbody tr:hover{background:rgba(47,111,237,.06);}
.pkg-name{font-weight:600;}
.pkg-sub{font-size:12px; color:var(--text-soft); margin-top:2px;}
.pill{
  display:inline-block; font-size:11px; padding:2px 9px; border-radius:99px;
  background:var(--paper-alt); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-weight:500;
}

.led{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Sora','Inter',system-ui,sans-serif; font-weight:700;
}
.led .digits{
  background:var(--paper-alt); color:var(--ink); border-radius:6px; padding:3px 9px;
  min-width:40px; text-align:center; font-size:14px;
}
.led.ok .digits{background:rgba(31,138,112,.12); color:var(--teal-deep);}
.led.low .digits{background:rgba(217,142,43,.14); color:var(--amber-deep);}
.led.out .digits{background:rgba(214,69,69,.12); color:var(--red-deep);}
.gauge{
  width:70px; height:6px; border-radius:99px; background:var(--paper-alt); overflow:hidden;
}
.gauge > span{display:block; height:100%; border-radius:99px;}
.status-tag{
  font-size:11px; padding:3px 9px; border-radius:99px; font-weight:600; letter-spacing:.02em;
}
.status-tag.ok{background:rgba(31,138,112,.12); color:var(--teal-deep);}
.status-tag.low{background:rgba(217,142,43,.15); color:var(--amber-deep);}
.status-tag.out{background:rgba(214,69,69,.12); color:var(--red-deep);}

.empty{padding:40px; text-align:center; color:var(--text-soft);}

/* ---- Admin ---- */
.login-box{max-width:380px; margin:80px auto; background:var(--card); border:1px solid var(--paper-alt); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);}
.login-box h2{font-family:'Sora','Inter',system-ui,sans-serif; font-weight:800; font-size:24px; margin:0 0 4px;}
.login-box p{color:var(--text-soft); font-size:13px; margin-top:0;}
.login-box input{width:100%; padding:10px 12px; border-radius:8px; border:1px solid #d3dae4; margin:6px 0 14px; font-size:14px;}
.btn{
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:14px; padding:9px 16px; border-radius:8px;
  border:none; cursor:pointer; transition:transform .05s ease, filter .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--ink); color:#eaf0fb;}
.btn-primary:hover{background:var(--ink-2);}
.btn-amber{background:var(--accent); color:#fff;}
.btn-amber:hover{background:var(--accent-deep);}
.btn-ghost{background:transparent; border:1px solid var(--steel-light); color:var(--steel);}
.btn-ghost:hover{background:var(--paper-alt);}
.btn-danger{background:var(--red); color:#fff0ec;}
.btn-sm{padding:5px 10px; font-size:13px; border-radius:6px;}
.error-msg{background:rgba(214,69,69,.1); color:var(--red-deep); padding:10px 12px; border-radius:8px; font-size:13px; margin-bottom:14px;}
.toast{
  position:fixed; bottom:20px; right:20px; background:var(--ink); color:#eaf0fb;
  padding:12px 18px; border-radius:8px; font-size:14px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:50;
}
.toast.show{opacity:1; transform:translateY(0);}

.op-cell{display:flex; align-items:center; gap:6px;}
.op-cell input[type=number]{
  width:52px; padding:5px 6px; border-radius:6px; border:1px solid #d3dae4; font-family:'Inter',system-ui,sans-serif; text-align:center;
}
.exec-bar{
  display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:10px 14px;
  background:var(--paper-alt); border-radius:8px; font-size:13px; flex-wrap:wrap;
}
.exec-bar input{padding:6px 10px; border-radius:6px; border:1px solid #d3dae4; font-size:13px;}
.movs{margin-top:20px;}
.movs h3{font-family:'Sora','Inter',system-ui,sans-serif; font-weight:700; font-size:17px; margin-bottom:8px;}
.movs table{font-size:12px;}

.logo{height:34px; width:auto; display:block; margin-bottom:4px;}
.login-box .logo{height:38px; margin:0 auto 14px; }

/* ---- Vista gráfica / kiosko ---- */
.view-toggle{display:flex; gap:8px;}
.kiosk-stage{position:relative; min-height:420px;}
.kiosk-slide{
  display:none; opacity:0; position:absolute; inset:0;
  flex-direction:column; gap:18px; transition:opacity .5s ease;
}
.kiosk-slide.active{display:flex; opacity:1; position:relative;}
.kiosk-title{font-family:'Sora','Inter',system-ui,sans-serif; font-size:18px; margin:0; text-align:center; color:var(--ink);}
.kiosk-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:10px;}
.stat-tile{
  background:var(--paper-alt); border-radius:12px; padding:22px 16px; text-align:center;
}
.stat-tile.ok{background:rgba(31,138,112,.10);}
.stat-tile.out{background:rgba(206,18,45,.08);}
.stat-num{font-family:'Sora','Inter',system-ui,sans-serif; font-weight:800; font-size:38px; color:var(--ink);}
.stat-lbl{font-size:12px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.05em; margin-top:4px;}
.kiosk-chart-box{max-width:520px; margin:0 auto; width:100%;}
.kiosk-chart-box.tall{max-width:720px; height:360px;}
.industry-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;}
.industry-card{
  background:var(--paper-alt); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:6px;
}
.industry-card.alert-low{background:rgba(217,142,43,.12);}
.industry-card.alert-out{background:rgba(206,18,45,.10);}
.industry-name{font-weight:600; font-size:13px; color:var(--ink);}
.industry-pct{font-family:'Sora','Inter',system-ui,sans-serif; font-weight:700; font-size:20px; color:var(--ink);}
.industry-sub{font-size:11px; color:var(--text-soft);}

.top-actions{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}

@media (max-width: 720px){
  .controls .count-badge{margin-left:0;}
  thead th, tbody td{padding:8px 8px;}
  .op-cell input[type=number]{width:44px;}
}