/* CyanBox · Portal de clientes
   Colores tomados del logo: navy de marca, azul del cuadro (#00A0E3) y el turquesa del degradado. */
:root{
  --navy:#0B1F3A; --navy-2:#14335C; --azul:#00A0E3; --azul-osc:#0077AC; --turq:#17AEB0;
  --bg:#F2F5F8; --card:#FFFFFF; --line:#DDE4EC; --line-2:#EBF0F4; --fg:#12233A; --muted:#5E6B80;
  --ok:#17804F; --ok-bg:#E2F4EA; --warn:#A15C00; --warn-bg:#FCEFD9; --mal:#B73228; --mal-bg:#FBE4E1; --pausa:#5B4BB3; --pausa-bg:#ECE9FA;
  --f-disp:"Outfit",system-ui,sans-serif; --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-disp);margin:0;letter-spacing:-.01em;text-wrap:balance}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}

/* Cabecera */
.top{background:radial-gradient(ellipse 60% 140% at 22% 110%,rgba(23,174,176,.75),transparent 60%),linear-gradient(115deg,#12295F 0%,#1B4A9A 45%,#1680BD 78%,#1B3F8F 100%);background-color:var(--navy);padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:1240px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:14px}
.logo-cb{height:44px;width:auto;display:block}
.marca-sub{color:#D6E6F5;font-size:12px;text-transform:uppercase;letter-spacing:.14em;border-left:1px solid rgba(255,255,255,.35);padding-left:14px}
.cuenta{display:flex;align-items:center;gap:12px}
.cuenta-txt{display:flex;flex-direction:column;text-align:right;color:#fff;line-height:1.25}
.cuenta-txt b{font-weight:600;font-size:14px}
.cuenta-txt span{font-size:12px;color:#CFE1F2}
.logo-cliente{height:48px;min-width:48px;max-width:150px;border-radius:10px;display:grid;place-items:center;padding:6px 10px;background:#fff}
.logo-cliente.oscuro{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25)}
.logo-cliente img{max-height:36px;max-width:130px;display:block}
.btn-salir{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600}
.btn-salir:hover{background:rgba(255,255,255,.12)}
@media (max-width:640px){
  .top-in{padding:12px 16px}
  .logo-cb{height:34px}
  .marca-sub{display:none}
  .cuenta-txt{display:none}
  .logo-cliente{height:40px}
}

.wrap{max-width:1240px;margin:0 auto;padding-inline:24px;padding-block:28px 64px;display:flex;flex-direction:column;gap:26px}
@media (max-width:640px){.wrap{padding-inline:16px;padding-block:20px 48px;gap:20px}}
.cargando{padding:60px 0;text-align:center;color:var(--muted)}

/* Ingreso */
.login{max-width:440px;margin:40px auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.login h1{font-size:26px;font-weight:600}
.login p{margin:0;color:var(--muted)}
.login label{font-size:13px;font-weight:600}
.login input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:16px;background:#fff}
.login .nota{font-size:12.5px}
.btn{border:0;border-radius:10px;padding:12px 18px;font-weight:600;font-size:15px}
.btn.primario{background:var(--navy);color:#fff}
.btn.primario:hover{background:var(--navy-2)}
.btn.azul{background:var(--azul);color:var(--navy)}
.btn.borde{background:#fff;border:1px solid var(--line);color:var(--fg)}
.btn:disabled{opacity:.6;cursor:wait}
.error{background:var(--mal-bg);color:var(--mal);padding:10px 12px;border-radius:10px;font-size:14px}
.ok-box{background:var(--ok-bg);color:var(--ok);padding:12px 14px;border-radius:10px;font-size:14px}

/* Saludo + indicadores */
.hola{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hola h1{font-size:clamp(26px,3.4vw,36px);font-weight:600}
.vivo{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:4px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;animation:latido 2s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(23,128,79,.5)}70%{box-shadow:0 0 0 8px rgba(23,128,79,0)}100%{box-shadow:0 0 0 0 rgba(23,128,79,0)}}
.instalar{font-size:13px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--fg)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kpi{background:var(--card);padding:16px 18px;min-width:0}
.kpi .n{font-family:var(--f-disp);font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .l{font-size:13px;color:var(--muted)}
.kpi.aviso .n{color:var(--warn)}
@media (max-width:720px){.kpis{grid-template-columns:repeat(2,1fr)}}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.chip.en_tiempo{background:var(--ok-bg);color:var(--ok)}
.chip.aprobacion{background:var(--warn-bg);color:var(--warn)}
.chip.atrasado{background:var(--mal-bg);color:var(--mal)}
.chip.pausa{background:var(--pausa-bg);color:var(--pausa)}
.chip.recibida{background:#E4F1FA;color:var(--azul-osc)}
.chip.terminado,.chip.entregado{background:#E4F1FA;color:var(--navy)}

/* Línea de producción (escritorio) */
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sec-h h2{font-size:22px;font-weight:600}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);align-items:center}
.leyenda i{display:inline-block;width:18px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle}
.tablero-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 18px 8px}
.tablero{min-width:1020px;--cols:250px repeat(5,minmax(120px,1fr)) 175px}
.t-head,.t-fila{display:grid;grid-template-columns:var(--cols);align-items:center}
.fases{grid-column:2 / 7;display:grid;grid-template-columns:repeat(5,1fr);border:1.5px solid var(--navy);border-radius:999px;height:58px;align-items:center}
.fases div{font-size:13px;font-weight:600;text-align:center;padding:0 8px;line-height:1.2;height:100%;display:grid;place-items:center;border-left:1px solid var(--line)}
.fases div:first-child{border-left:0}
.t-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.t-lbl.fin{padding-left:18px}
.t-fila{min-height:100px;border-top:1px solid var(--line-2);border-radius:12px;cursor:pointer;transition:background .15s}
.t-fila:hover{background:#F5F8FB}
.t-fila.sel{background:#E6F4FB}
.t-nombre{padding:10px 14px 10px 6px;min-width:0}
.t-nombre b{display:block;font-family:var(--f-disp);font-weight:600;font-size:15.5px;line-height:1.25}
.t-nombre small{color:var(--muted);font-size:12.5px}
.celda{position:relative;height:100px;border-left:1px solid var(--line-2)}
.celda::before{content:"";position:absolute;left:0;right:0;top:42%;height:8px;margin-top:-4px;background:var(--line)}
.celda.hecho::before{background:var(--azul)}
.celda.actual::before{background:linear-gradient(90deg,var(--azul) 50%,var(--line) 50%)}
.celda.na::before{height:0;border-top:2px dotted var(--line);background:none;margin-top:-1px}
.celda.primera::before{left:8px;border-radius:4px 0 0 4px}
.celda.ultima::before{right:8px;border-radius:0 4px 4px 0}
.pastilla{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:2;background:var(--navy);color:#fff;border-radius:16px;padding:7px 13px;font-family:var(--f-disp);font-size:13px;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:7px;box-shadow:0 4px 14px rgba(11,31,58,.22);max-width:calc(100% + 40px);overflow:hidden;text-overflow:ellipsis}
.pastilla .punto{background:var(--azul);animation:none}
.pastilla.espera{background:var(--warn)}
.pastilla.espera .punto{background:#fff}
.puntos{position:absolute;left:0;right:0;top:64%;display:flex;justify-content:center;gap:4px;flex-wrap:wrap;padding:0 8px}
.pd{display:inline-block;width:7px;height:7px;border-radius:50%;border:1.5px solid #9AA6B8;background:transparent}
.pd.listo{background:var(--azul);border-color:var(--azul)}
.pd.en_curso{background:var(--navy);border-color:var(--navy)}
.pd.espera_cliente{background:var(--warn);border-color:var(--warn)}
.no-aplica{position:absolute;left:50%;top:42%;transform:translate(-50%,-160%);font-size:10.5px;color:var(--muted);background:var(--card);padding:0 4px}
.sin-ruta{grid-column:2 / 7;font-size:13.5px;color:var(--muted);padding:0 16px}
.fin{padding-left:18px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.fin .chip{white-space:normal;text-align:left}
.fin .fecha{font-family:var(--f-disp);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}

/* Tarjetas (celular) */
.tarjetas{display:none;flex-direction:column;gap:12px}
.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;text-align:left;width:100%}
.tarjeta.sel{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.tarjeta-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tarjeta-top b{font-family:var(--f-disp);font-weight:600;font-size:16px;line-height:1.25;display:block}
.tarjeta-top small{color:var(--muted)}
.segs{display:flex;gap:3px}
.segs span{flex:1;height:8px;border-radius:3px;background:var(--line)}
.segs span.listo{background:var(--azul)}
.segs span.en_curso{background:var(--navy)}
.segs span.espera_cliente{background:var(--warn)}
.tarjeta-meta{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;flex-wrap:wrap}
@media (max-width:760px){.tablero-scroll{display:none}.tarjetas{display:flex}.leyenda{display:none}}

/* Detalle */
.detalle{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;scroll-margin-top:16px}
@media (max-width:640px){.fotos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.detalle{grid-template-columns:minmax(0,1fr);padding:18px;gap:22px}}
.d-head{grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line)}
.d-head h3{font-size:24px;font-weight:600}
.d-head p{margin:4px 0 0;color:var(--muted);max-width:62ch}
.eti{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600;margin-bottom:10px}
.fase-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-disp);font-weight:600;font-size:15px;margin:4px 0 8px}
.fase-h span{font-family:var(--f-body);font-size:12.5px;color:var(--muted);font-weight:500}
.pasos{list-style:none;margin:0 0 14px;padding:0}
.pasos li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;position:relative;padding-bottom:12px}
.pasos li::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line)}
.pasos li:last-child::before{display:none}
.pasos li.listo::before{background:var(--azul)}
.pasos .m{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;font-size:12px;color:#fff;z-index:1}
.pasos li.listo .m{background:var(--azul);border-color:var(--azul)}
.pasos li.en_curso .m{background:var(--navy);border-color:var(--navy)}
.pasos li.espera_cliente .m{background:var(--warn);border-color:var(--warn)}
.pasos .t{font-weight:500}
.pasos li.en_curso .t,.pasos li.espera_cliente .t{font-weight:600}
.pasos .cuando{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.aprobar{background:var(--warn-bg);border:1px solid #EFCF9A;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.aprobar b{font-family:var(--f-disp);font-size:16px}
.aprobar p{margin:0;font-size:14px;color:#6B5A3E}
.aprobar textarea{width:100%;border:1px solid #E6C58E;border-radius:10px;padding:10px 12px;font-size:16px;min-height:90px;background:#fff;resize:vertical}
.botones{display:flex;gap:8px;flex-wrap:wrap}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}
.foto{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--line-2);border:0;padding:0;cursor:zoom-in;max-width:100%}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto span{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 6px;font-size:11.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));text-align:left}
.sin-fotos{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.datos{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;margin:0}
.datos dt{color:var(--muted)}
.datos dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.entregados{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.entregados button{display:flex;justify-content:space-between;gap:12px;width:100%;padding:14px 18px;border:0;border-top:1px solid var(--line-2);background:none;text-align:left;align-items:center}
.entregados button:first-child{border-top:0}
.entregados button:hover{background:#F5F8FB}
.vacio{background:var(--card);border:1.5px dashed var(--line);border-radius:18px;padding:40px 20px;text-align:center}
.vacio h2{font-size:20px;margin-bottom:6px}
.pie{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.visor{position:fixed;inset:0;background:rgba(11,31,58,.85);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;cursor:zoom-out}
.visor img{max-width:100%;max-height:88vh;border-radius:10px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:60;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}