:root{
  --bg:#0b1220;
  --card:#0f1a2f;
  --card2:#0c1527;
  --ink:#e5e7eb;
  --muted:#9ca3af;

  --brand:#22c55e;
  --brand2:#14b8a6;

  --border:rgba(255,255,255,.10);
  --ring:rgba(34,197,94,.25);

  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --card2:#fbfcff;
    --ink:#0f172a;
    --muted:#6b7280;
    --border:rgba(15,23,42,.10);
    --ring:rgba(34,197,94,.20);
    --shadow: 0 10px 24px rgba(2,8,23,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  min-height:100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ========== HEADER ========== */
.header{
  position:sticky;
  top:0;
  z-index:10;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(to bottom, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0 10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}

.brand i{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#07110b;
  box-shadow:0 10px 30px rgba(20,184,166,.25);
  font-size:22px;
  flex-shrink:0;
}

.brand h1{
  margin:0;
  font-size:20px;
  line-height:1.1;
  font-weight:900;
}
.small{font-size:12px;color:var(--muted);line-height:1.3;}

/* ========== BADGE PENDIENTES ========== */
.pend-badge{
  border:1px solid var(--border);
  background:var(--card2);
  color:var(--ink);
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  height:44px;
  cursor:pointer;
  font-weight:900;
  line-height:1;
  flex-shrink:0;
  transition: all 0.2s ease;
}

.pend-badge:hover{
  transform: scale(1.05);
  filter:brightness(1.1);
}

.pend-badge i{
  font-size:18px;
  color:var(--brand);
}

.pend-count{
  min-width:22px;
  height:22px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-size:13px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#07110b;
  padding:0 7px;
  font-weight:900;
}

/* ========== TABS (3 pestañas) ========== */
.tabs{
  display:flex;
  gap:6px;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px;
  width:100%;
  margin-top:8px;
}

.tab{
  flex:1;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  font-size:14px;
  white-space:nowrap;
  transition: all 0.2s ease;
}
.tab.active{
  color:#07110b;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 4px 12px rgba(34,197,94,.25);
}

/* ========== GRID ========== */
.grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media (min-width: 980px){
  .grid{grid-template-columns:1.2fr .8fr;}
}

/* ========== CARD ========== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

.card-head h2{
  margin:0;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
}

.card-body{
  padding:14px;
  display:grid;
  gap:14px;
}

/* ========== INPUTS MEJORADOS ========== */
.input-group{
  display:grid;
  gap:8px;
}

.input-label{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}

.input{
  width:100%;
  padding:14px 16px;
  border:2px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.10);
  color:var(--ink);
  outline:none;
  font-weight:600;
  font-size:16px;
  transition: all 0.2s ease;
}

.input::placeholder{
  color:rgba(156,163,175,0.6);
}

.input:focus{
  border-color:var(--brand);
  background:rgba(255,255,255,.15);
  box-shadow:0 0 0 4px var(--ring);
  transform:none;
}

.input-fixed{
  height:46px;
  line-height:46px;
  padding:0 14px;
  font-size:16px;
  box-sizing:border-box;
}

/* ========== CONTROLS ========== */
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--card2);
  color:var(--ink);
  padding:12px 18px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  transition: all 0.2s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn.primary{
  color:#07110b;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:0;
  box-shadow:0 4px 12px rgba(34,197,94,.25);
}
.btn.secondary{
  background:var(--card2);
  border-color:var(--border);
}
.btn.ok{background:var(--ok);border-color:transparent;color:#07110b;}
.btn.warn{background:var(--warn);border-color:transparent;color:#111827;}
.btn.danger{background:var(--err);border-color:transparent;color:#fff;}

/* ========== HINT ========== */
.hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

/* ========== VIDEO & CANVAS ========== */
.video-shell,.canvas-shell{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  max-height:58vh;
}
video,canvas{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:480px){
  .video-shell,.canvas-shell{aspect-ratio:9/16;max-height:54vh;}
}

/* ========== STATUS ========== */
.status{
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.03);
  line-height:1.4;
}
.status i{font-size:18px;flex-shrink:0;}
.status.ok{
  color:var(--ink);
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.22);
}
.status.err{
  color:#fff;
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.25);
}

/* ========== QR READER ========== */
#qr-reader{width:100%;max-width:100%;border:0!important;}
#qr-reader__scan_region{border-radius:var(--radius);overflow:hidden;}
#qr-reader__dashboard{border-top:1px solid var(--border)!important;}

/* ========== PILLS ========== */
.pills{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  border:1px solid var(--border);
  padding:7px 12px;
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  font-size:12px;
  font-weight:600;
}

/* ========== TABLE ========== */
.scroll{
  max-height:48vh;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.table{width:100%;border-collapse:collapse;}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--border);font-size:13px;}
.table thead th{position:sticky;top:0;background:var(--card);color:var(--muted);text-align:left;z-index:1;font-weight:700;}
@media (max-width:480px){
  .table th:nth-child(3),.table td:nth-child(3),
  .table th:nth-child(4),.table td:nth-child(4){display:none;}
  .table th,.table td{padding:8px 6px;font-size:12px;}
  .scroll{max-height:42vh;}
}

.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ========== EQUIPO CARD (MEJORADO) ========== */
.equipo-card{
  margin-top:6px;
  border-radius:var(--radius);
  border:2px solid var(--brand);
  padding:0;
  background:linear-gradient(135deg, rgba(34,197,94,.08), rgba(20,184,166,.08));
  overflow:hidden;
}

.equipo-header{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#07110b;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:11px;
  letter-spacing:0.5px;
}

.equipo-header i{
  font-size:16px;
}

.equipo-main{
  padding:16px 14px;
  display:grid;
  gap:14px;
}

.equipo-field{
  display:grid;
  gap:4px;
}

.equipo-label{
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:0.5px;
}

.equipo-value{
  font-size:24px;
  font-weight:900;
  color:var(--ink);
  line-height:1.1;
  word-break:break-word;
}

.equipo-value.modelo{
  color:var(--brand);
  font-size:22px;
}

.equipo-value.serie{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:26px;
  letter-spacing:-0.5px;
}

.equipo-extra{
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
}

.equipo-extra-value{
  font-weight:700;
  color:var(--ink);
}

.btn-confirm{
  width:100%;
  border:0;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#07110b;
  padding:16px 20px;
  cursor:pointer;
  font-weight:900;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: all 0.2s ease;
  margin-top:4px;
}

.btn-confirm:hover{
  filter:brightness(1.1);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(34,197,94,.35);
}

.btn-confirm:active{
  transform:translateY(0);
}

.btn-confirm i{
  font-size:20px;
}

/* ========== MODALES ========== */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:flex-end;
  padding:12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.modal{
  width:100%;
  max-width:520px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  overflow:hidden;
  transform:translateY(20px);
  animation:modalIn .2s ease-out forwards;
}
@keyframes modalIn{to{transform:translateY(0)}}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.modal-title{
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:15px;
}
.modal-body{padding:14px 16px;display:grid;gap:12px;}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;}
.modal-actions .btn{flex:1}
.modal-close{
  border:1px solid var(--border);
  background:transparent;
  border-radius:999px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--ink);
  transition: all 0.2s ease;
}
.modal-close:hover{
  background:var(--card2);
  transform:rotate(90deg);
}
.modal-sub{
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}
.modal-list{
  display:grid;
  gap:8px;
  max-height:55vh;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.02);
}
.pick-btn{
  width:100%;
  text-align:left;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  color:var(--ink);
  transition: all 0.2s ease;
}
.pick-btn:hover{
  filter:brightness(1.1);
  transform:translateX(4px);
  border-color:var(--brand);
}
.pick-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.pick-meta{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.3;
}

/* ========== RESPONSIVE ========== */
@media (max-width:480px){
  .brand h1{font-size:18px;}
  .small{font-size:11px;}
  .pend-badge{padding:6px 12px;height:40px;}
  .card-head h2{font-size:14px;}
  .equipo-value{font-size:20px;}
  .equipo-value.modelo{font-size:19px;}
  .equipo-value.serie{font-size:22px;}
  .btn-confirm{padding:14px 16px;font-size:14px;}
}