/* ============================================================
   Control de Producción · Maptronics — app.css
   Mobile-first (360–420 px), paleta oscura Maptronics.
   ============================================================ */

:root{
  --fondo:#0a0510;
  --superficie:#171326;
  --superficie-2:#1e1932;   /* tono derivado, un pelito más claro para tarjetas internas */
  --borde:#2a2740;
  --texto:#f0eff4;
  --texto-2:#9a9ab0;
  --cian:#22c3ff;
  --ok:#22c55e;
  --advertencia:#f5a524;
  --peligro:#ff5a5f;
  --radio:16px;
  --fuente:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ color-scheme:dark; }
[hidden]{ display:none !important; }

body{
  background:radial-gradient(1100px 600px at 50% -12%, #171034 0%, var(--fondo) 55%) fixed, var(--fondo);
  color:var(--texto);
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.45;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

button{ font-family:inherit; color:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.view{ animation:aparecer .18s ease-out; }
@keyframes aparecer{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

.contenedor{
  max-width:640px;
  margin:0 auto;
  padding:16px 16px calc(28px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ---------- Barra superior ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(10,5,16,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.topbar-marca{ min-width:0; }
.marca-nombre{
  font-weight:800; font-size:14px; letter-spacing:.14em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.marca-punto{ color:var(--cian); }
.marca-app{ font-weight:600; letter-spacing:.02em; color:var(--texto-2); }
.marca-sub{ font-size:11.5px; color:var(--texto-2); letter-spacing:.04em; }
.topbar-der{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.topbar-titulo{ font-weight:700; font-size:16px; }
.topbar-espacio{ width:78px; }

.btn-salir{
  min-height:44px; padding:0 14px;
  background:transparent; border:1px solid var(--borde); border-radius:12px;
  color:var(--texto-2); font-size:14px; font-weight:600;
}
.btn-salir:active{ transform:scale(.97); }

/* Campanita del supervisor */
.campana{
  position:relative;
  width:48px; height:48px;
  background:var(--superficie); border:1px solid var(--borde); border-radius:12px;
  font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.campana:active{ transform:scale(.96); }
.campana-badge{
  position:absolute; top:-7px; right:-7px;
  min-width:22px; height:22px; padding:0 5px;
  background:var(--cian); color:#06222e;
  border-radius:999px;
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

.saludo{ color:var(--texto-2); font-size:14px; }

/* ---------- Tarjetas ---------- */
.card{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.card-titulo{ font-weight:700; font-size:15.5px; letter-spacing:.01em; }
.card-ayuda{ color:var(--texto-2); font-size:13.5px; }
.card-cab-linea{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

.cab-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cab-fecha{ font-weight:800; font-size:19px; letter-spacing:-.01em; }
.cab-sub{ color:var(--texto-2); font-size:14px; margin-top:2px; }

/* ---------- Número grande de producción ---------- */
.card-prod{ text-align:center; align-items:center; gap:4px; }
.card-prod .card-titulo{ align-self:flex-start; }
.num-grande{
  font-size:clamp(46px, 15vw, 66px);
  font-weight:800;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  line-height:1.05;
}
.num-nota{ color:var(--texto-2); font-size:13.5px; }

/* ---------- Selector de turno (segmentado) ---------- */
.seg{
  display:flex; gap:6px;
  background:var(--fondo);
  border:1px solid var(--borde); border-radius:14px;
  padding:5px;
}
.seg-btn{
  flex:1; min-height:54px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:transparent; border:1px solid transparent; border-radius:10px;
  color:var(--texto-2);
}
.seg-btn .seg-t{ font-weight:800; font-size:16px; }
.seg-btn .seg-h{ font-size:11.5px; letter-spacing:.02em; }
.seg-btn.activo{
  background:rgba(34,195,255,.14);
  border-color:rgba(34,195,255,.45);
  color:var(--cian);
}

/* ---------- Chips de estado (BORRADOR / PENDIENTE / APROBADA / DEVUELTA) ---------- */
.estado-chip{
  flex-shrink:0;
  padding:6px 12px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.08em;
  border:1px solid transparent;
  white-space:nowrap;
}
.e-gris { color:var(--texto-2);      background:rgba(154,154,176,.12); border-color:rgba(154,154,176,.35); }
.e-cian { color:var(--cian);         background:rgba(34,195,255,.12);  border-color:rgba(34,195,255,.4);  }
.e-verde{ color:var(--ok);           background:rgba(34,197,94,.12);   border-color:rgba(34,197,94,.4);   }
.e-ambar{ color:var(--advertencia);  background:rgba(245,165,36,.12);  border-color:rgba(245,165,36,.4);  }

/* ---------- Banners ---------- */
.banner{
  border-radius:var(--radio);
  padding:14px 16px;
  font-size:14.5px;
  display:flex; flex-direction:column; gap:8px;
  border:1px solid;
}
.banner-titulo{ font-weight:700; font-size:15px; }
.banner-texto{ font-size:14px; line-height:1.5; }
.banner-ambar{ background:rgba(245,165,36,.1);  border-color:rgba(245,165,36,.45); color:#ffe3b0; border-left:4px solid var(--advertencia); }
.banner-cian { background:rgba(34,195,255,.08); border-color:rgba(34,195,255,.4);  color:#c9eeff; border-left:4px solid var(--cian); }
.banner-verde{ background:rgba(34,197,94,.08);  border-color:rgba(34,197,94,.4);   color:#c9f5d8; border-left:4px solid var(--ok); }

/* ---------- Paros ---------- */
.paro-card{
  background:var(--superficie-2);
  border:1px solid var(--borde);
  border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:10px;
}
.paro-card.falta{ border-color:var(--peligro); box-shadow:0 0 0 1px rgba(255,90,95,.5); }
.paro-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.paro-horas{ font-weight:800; font-size:16.5px; font-variant-numeric:tabular-nums; }
.paro-dur{ color:var(--texto-2); font-weight:600; font-size:14px; }
.paro-head-der{ display:flex; align-items:center; gap:8px; }
.paro-ayuda{ color:var(--texto-2); font-size:13.5px; }
.sugerencia{
  font-size:13px; color:var(--advertencia);
  background:rgba(245,165,36,.1);
  border-radius:8px; padding:6px 10px;
}
.paro-borrar{
  width:44px; height:44px;
  background:transparent; border:1px solid var(--borde); border-radius:10px;
  font-size:17px; display:flex; align-items:center; justify-content:center;
}
.paro-borrar:active{ transform:scale(.94); border-color:var(--peligro); }

/* Badges de origen del paro */
.badge{
  padding:4px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
  border:1px solid; white-space:nowrap;
}
.b-auto  { color:var(--cian);        background:rgba(34,195,255,.12);  border-color:rgba(34,195,255,.4);  }
.b-senal { color:var(--advertencia); background:rgba(245,165,36,.12);  border-color:rgba(245,165,36,.4);  }
.b-manual{ color:var(--texto-2);     background:rgba(154,154,176,.12); border-color:rgba(154,154,176,.35);}

/* Chips de razón de paro */
.chips{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.chip{
  min-height:48px;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:var(--superficie);
  border:1px solid var(--borde); border-radius:12px;
  color:var(--texto);
  font-size:13px; font-weight:600; text-align:left;
  transition:background .12s, border-color .12s, transform .08s;
}
.chip:active{ transform:scale(.97); }
.chip .chip-emoji{ font-size:18px; flex-shrink:0; }
.chip .chip-txt{ line-height:1.2; }
.chip.sel{
  background:var(--cian);
  border-color:var(--cian);
  color:#06222e;
  font-weight:700;
}
.chip:disabled{ opacity:.55; cursor:default; }
.chip.sel:disabled{ opacity:.8; }

/* ---------- Formularios ---------- */
.input{
  width:100%;
  min-height:48px;
  background:var(--superficie-2);
  border:1px solid var(--borde); border-radius:12px;
  color:var(--texto);
  font-size:16px;
  padding:10px 14px;
}
.input:focus{
  outline:none;
  border-color:var(--cian);
  box-shadow:0 0 0 3px rgba(34,195,255,.15);
}
.input:disabled{ opacity:.55; }
textarea.input{ resize:vertical; min-height:78px; line-height:1.5; }
select.input{ appearance:none; }

.input-grande{
  text-align:center;
  font-size:38px; font-weight:800;
  min-height:84px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
/* Quitar flechitas de los inputs numéricos */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

.campo{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--texto-2); margin-bottom:14px; }
.campo-mini{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--texto-2); min-width:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.grid-2 > *, .grid-3 > *{ min-width:0; }
/* Los inputs de fecha/hora no se encogen solos: forzarlos */
input[type="date"].input, input[type="time"].input{ min-width:0; padding:10px 10px; }

.form-error{
  color:var(--peligro);
  font-size:13.5px; font-weight:600;
  background:rgba(255,90,95,.1);
  border-radius:10px;
  padding:9px 12px;
}

.btn-enlace{
  background:none; border:none;
  color:var(--cian); font-size:14px; font-weight:600;
  min-height:44px; text-align:left; padding:0 2px;
}

.form-manual{
  background:var(--superficie-2);
  border:1px dashed var(--borde); border-radius:14px;
  padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
.form-manual .chip{ background:var(--superficie); }

/* ---------- Botones ---------- */
.btn{
  min-height:48px;
  padding:0 18px;
  border-radius:13px;
  border:1px solid transparent;
  font-size:15.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .08s, filter .12s;
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn-grande{ min-height:56px; font-size:16.5px; }
.btn-block{ width:100%; }

.btn-primario{ background:var(--cian); color:#06222e; }
.btn-primario:not(:disabled):hover{ filter:brightness(1.08); }
.btn-secundario{ background:var(--superficie-2); border-color:var(--borde); color:var(--texto); }
.btn-ok{ background:var(--ok); color:#06220f; }
.btn-warn{ background:var(--advertencia); color:#2b1a02; }
.btn-peligro{ background:var(--peligro); color:#2b0507; }

.btn-mini{
  min-height:44px; padding:0 12px;
  background:transparent; border:1px solid var(--borde); border-radius:11px;
  color:var(--texto-2); font-size:13.5px; font-weight:600;
}
.btn-mini:active{ transform:scale(.97); }

/* Botón de voz grabando */
.grabando{
  background:rgba(255,90,95,.14) !important;
  border-color:var(--peligro) !important;
  color:var(--peligro) !important;
  animation:pulso 1.2s infinite;
}
@keyframes pulso{
  50%{ box-shadow:0 0 0 9px rgba(255,90,95,.12); }
}

/* ---------- Barra de acciones (guardar / enviar) ---------- */
.barra-acciones{
  position:sticky; bottom:0; z-index:10;
  display:flex; gap:10px;
  padding:12px 0 calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--fondo) 65%, transparent);
}
.barra-acciones .btn-secundario{ flex:1; }
.barra-acciones .btn-primario, .barra-acciones .btn-ok, .barra-acciones .btn-warn{ flex:1.6; }

/* ---------- Login ---------- */
.view-login{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.login-card{ width:100%; max-width:400px; gap:20px; padding:26px 22px; }
.brand{ text-align:center; display:flex; flex-direction:column; gap:3px; }
.brand-nombre{ font-size:24px; font-weight:800; letter-spacing:.18em; }
.brand-sub{ color:var(--cian); font-weight:600; font-size:14.5px; letter-spacing:.04em; }
.brand-cliente{ color:var(--texto-2); font-size:13px; margin-top:6px; }
#form-login .form-error{ margin-bottom:14px; }

/* ---------- Pantalla de éxito ---------- */
.exito{
  min-height:82dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px;
  padding:24px;
}
.exito-icono{ font-size:76px; line-height:1; animation:brincar .5s ease-out; }
@keyframes brincar{ 0%{ transform:scale(.4); opacity:0;} 70%{ transform:scale(1.12);} 100%{ transform:scale(1); opacity:1;} }
.exito h2{ font-size:26px; font-weight:800; letter-spacing:-.01em; }
.exito-sub{ color:var(--cian); font-weight:700; font-size:15.5px; }
.exito-texto{ color:var(--texto-2); font-size:14.5px; max-width:300px; }
.exito .btn{ margin-top:18px; min-width:240px; }

/* ---------- Supervisor: tabs y listas ---------- */
.tabs{
  display:flex; gap:6px;
  background:var(--superficie);
  border:1px solid var(--borde); border-radius:14px;
  padding:5px;
}
.tab{
  flex:1; min-height:48px;
  background:transparent; border:1px solid transparent; border-radius:10px;
  color:var(--texto-2);
  font-size:14.5px; font-weight:700;
}
.tab.activo{
  background:rgba(34,195,255,.14);
  border-color:rgba(34,195,255,.45);
  color:var(--cian);
}

#pendientes-lista, #historial-lista{ display:flex; flex-direction:column; gap:10px; }

.lista-item{
  width:100%;
  text-align:left;
  gap:8px;
  transition:border-color .12s, transform .08s;
}
.lista-item:active{ transform:scale(.99); border-color:var(--cian); }
.li-row1{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.li-fecha{ font-weight:800; font-size:15.5px; }
.li-op{ color:var(--texto-2); font-size:14px; }
.li-stats{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  border-top:1px solid var(--borde);
  padding-top:10px; margin-top:2px;
}
.li-stat{ display:flex; flex-direction:column; gap:1px; }
.li-stat-v{ font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; }
.li-stat-k{ color:var(--texto-2); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; }

.filtros{ gap:10px; }

.texto-plano{ font-size:14.5px; line-height:1.55; white-space:pre-wrap; }

.vacio{
  text-align:center;
  color:var(--texto-2);
  font-size:14.5px;
  padding:26px 12px;
}

/* ---------- Toasts ---------- */
#toasts{
  position:fixed;
  left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:100;
  display:flex; flex-direction:column; gap:8px;
  width:min(92vw, 420px);
  pointer-events:none;
}
.toast{
  background:var(--superficie-2);
  border:1px solid var(--borde);
  border-left:4px solid var(--cian);
  border-radius:12px;
  padding:12px 14px;
  font-size:14.5px; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  animation:toastEntrar .22s ease-out;
}
.toast.t-ok   { border-left-color:var(--ok); }
.toast.t-warn { border-left-color:var(--advertencia); }
.toast.t-error{ border-left-color:var(--peligro); }
.toast.salir{ opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
@keyframes toastEntrar{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ---------- Modal de confirmación ---------- */
.modal{
  position:fixed; inset:0; z-index:90;
  background:rgba(10,5,16,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-card{
  width:100%; max-width:380px;
  gap:8px;
  animation:aparecer .16s ease-out;
}
.modal-card h3{ font-size:18px; font-weight:800; }
.modal-card p{ color:var(--texto-2); font-size:14.5px; line-height:1.5; }
.modal-btns{ display:flex; gap:10px; margin-top:10px; }
.modal-btns .btn{ flex:1; }

/* ---------- Pantallas más anchas ---------- */
@media (min-width:560px){
  .chips{ grid-template-columns:repeat(4, 1fr); }
  .contenedor{ padding-top:22px; }
  .cab-fecha{ font-size:21px; }
}

/* ================== v1.1: ver contrasena + recuperar ================== */
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 52px; width: 100%; }
.btn-ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 1.15rem; cursor: pointer; border-radius: 12px; color: #9a9ab0;
  display: grid; place-items: center;
}
.btn-ojo:active { background: rgba(255,255,255,0.08); }
.btn-olvide { display: block; margin: 14px auto 0; min-height: 44px; }
#recuperar-cont { margin-top: 12px; border-top: 1px solid #2a2740; padding-top: 14px; }
.rec-btns { margin-top: 10px; }

/* ================== v1.1: bitacoras faltantes ================== */
.chips-faltantes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-faltante {
  min-height: 48px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid #f5a524; background: rgba(245,165,36,0.12);
  color: #f0eff4; font-weight: 600; cursor: pointer; font-size: 0.95rem;
  font-family: inherit;
}
.chip-faltante:active { background: rgba(245,165,36,0.28); }

/* v1.1: paro que se pisa con otro (resaltado al validar el envío) */
.paro-card.conflicto { border-color: #ff5a5f; box-shadow: 0 0 0 1px #ff5a5f inset; }

/* v1.2: microparadas (paros cortos agregados) */
.micro-info { margin-top: 10px; font-size: 0.92rem; color: #f0eff4; background: rgba(245,165,36,0.10); border: 1px solid rgba(245,165,36,0.32); border-radius: 12px; padding: 10px 12px; }
.micro-info .micro-nota { color: #9a9ab0; font-size: 0.8rem; }