/* Leads Escelco — hoja de estilos única. Reproduce diseno/maquetas/*.dc.html (referencia visual aprobada).
   Fuentes alojadas aquí (OFL): ninguna petición a Google ni a webs externas. */

@font-face{font-family:Raleway;font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/raleway-400.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/raleway-500.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/raleway-600.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/raleway-700.woff2) format("woff2")}
@font-face{font-family:Raleway;font-weight:800;font-style:normal;font-display:swap;src:url(/static/fonts/raleway-800.woff2) format("woff2")}
@font-face{font-family:Questrial;font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/questrial-400.woff2) format("woff2")}

:root{
  --azul:#0F2A4A; --azul-2:#1D3F66; --azul-enlace:#0F4C8A; --azul-enlace-h:#0B3A6A;
  --fondo:#F3F5F8; --borde:#E1E6EE; --borde-2:#C9D2DE; --borde-3:#D5DCE6; --borde-4:#8FA3BA;
  --texto:#14202E; --sec:#3B4A5C; --sec-2:#5A6878;
  --naranja:#F26524; --amarillo:#FDB740;
  --caliente:#B4310A; --templado:#B07A00; --templado-txt:#7A5400; --templado-bg:#FFF1CC; --templado-barra:#D99A00;
  --frio:#1D4ED8; --frio-bg:#DCE6FB;
  --error:#B42318; --ok:#0E7A3E;
  --sel-bg:#EAF0F8; --foto-bg:#D9E1EA; --pista-bg:#F7F9FC; --track:#E6ECF3;
  --aviso-bg:#FFF6DD; --aviso-borde:#E0B44C; --aviso-txt:#5C3F00;
  --f-texto:Raleway,Verdana,sans-serif; --f-titulo:Questrial,Verdana,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-texto);font-variant-numeric:lining-nums;color:var(--texto);background:var(--fondo);
  padding-bottom:calc(100px + env(safe-area-inset-bottom))}
body.con-guardar{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
a{color:var(--azul-enlace)} a:hover{color:var(--azul-enlace-h)}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--fondo)}
.oculto{display:none!important}

/* ── cabecera ── */
.top{background:var(--azul);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.top-izq{display:flex;flex-direction:column;gap:2px;min-width:0}
.marca{display:flex;align-items:center;gap:8px}
.marca img{width:26px;height:30px}
.marca-txt{font-family:var(--f-titulo);font-size:23px;letter-spacing:.02em}
.sub{font-size:12px;font-weight:700;color:var(--amarillo);letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{font-size:13px;font-weight:600;background:var(--azul-2);padding:6px 10px;border-radius:999px;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-det{padding:10px 12px}
.top-det a.volver{color:#fff;text-decoration:none;font-size:15px;font-weight:600;min-height:44px;display:flex;align-items:center;gap:4px}
.btn-editar{background:var(--naranja);color:var(--texto);text-decoration:none;font-size:15px;font-weight:800;min-height:44px;padding:0 18px;border-radius:10px;display:flex;align-items:center}

/* ── barra fija inferior ── */
.fijo{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:20}
.barra-guardar{background:#fff;border-top:1px solid var(--borde-3);padding:12px}
.guardar{width:100%;min-height:56px;border:0;border-radius:12px;background:var(--naranja);color:var(--texto);font-size:18px;font-weight:800;letter-spacing:.04em}
.guardar:disabled{opacity:.6}
.guardar.reintentar{background:var(--error);color:#fff}
.nav{background:var(--azul);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#C9D6E6;text-decoration:none;font-size:12px;font-weight:600;min-height:44px}
.nav a.act{color:var(--amarillo);font-weight:700}
.nav svg{width:22px;height:22px}

/* ── avisos ── */
.banner{padding:14px 16px;display:flex;flex-direction:column;gap:6px;color:#fff}
.banner p{margin:0}
.banner .t{font-size:16px;font-weight:800}
.banner .x{font-size:14px;line-height:1.45}
.banner-b{background:var(--error)}
.banner-c{background:var(--ok);flex-direction:row;align-items:center;gap:12px;padding:16px}
.banner-c .t{font-size:17px}
.banner-c .x{font-size:13px}
.banner-c svg{width:28px;height:28px;flex:none}
.banner-i{background:var(--azul-enlace)}
.banner button.cerrar{align-self:flex-start;background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff;border-radius:8px;min-height:40px;padding:0 14px;font-size:14px;font-weight:700}
.aviso-a{background:var(--aviso-bg);border:1px solid var(--aviso-borde);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.aviso-a p{margin:0}
.aviso-a .t{font-size:14px;font-weight:700;color:var(--aviso-txt)}
.aviso-a .x{font-size:13px;color:var(--aviso-txt);line-height:1.45}
.aviso-a a{font-size:14px;font-weight:700;min-height:36px;display:flex;align-items:center}
.aviso-pie{margin:0;font-size:13px;color:var(--sec-2)}
.msg-err{font-size:13px;font-weight:600;color:var(--error);margin:0}
.aviso-min{background:#FDECEA;border:1px solid var(--error);border-radius:10px;padding:12px;font-size:14px;line-height:1.45;color:#7A1A12;margin:0}

/* ── contenido y tarjetas ── */
.contenido{padding:14px 12px;display:flex;flex-direction:column;gap:12px}
.contenido-l{padding:12px;display:flex;flex-direction:column;gap:10px}
.card{background:#fff;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--borde)}
.card-ap{border:2px solid var(--azul)}
.h{font-family:var(--f-titulo);margin:0;font-size:15px;font-weight:700;line-height:1.35;color:var(--azul)}
.kicker{font-size:11px;font-weight:700;color:var(--azul-enlace);letter-spacing:.06em}
.hint{font-size:12px;color:var(--sec-2);margin:0}
.lbl{font-size:13px;font-weight:600;color:var(--sec);display:flex;flex-direction:column;gap:6px}
.inp{font-family:inherit;font-size:16px;height:46px;border:1px solid var(--borde-2);border-radius:10px;padding:0 12px;background:#fff;color:var(--texto);box-sizing:border-box;width:100%;-webkit-appearance:none;appearance:none}
select.inp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%233B4A5C' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.ta{font-family:inherit;font-size:16px;height:84px;border:1px solid var(--borde-2);border-radius:10px;padding:10px 12px;background:#fff;color:var(--texto);box-sizing:border-box;width:100%;resize:none}
.inp:focus,.ta:focus{outline:2px solid var(--azul-enlace);outline-offset:0}
.err .inp,.err .ta,.inp.err,.ta.err{border-color:var(--error);border-width:2px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.opt{display:flex;align-items:center;gap:12px;min-height:46px;font-size:15px;font-weight:500;padding:0 12px;border:1px solid var(--borde-3);border-radius:10px;background:#fff;color:var(--texto)}
.opt input{width:22px;height:22px;accent-color:var(--azul);margin:0;flex:none}
.opt.on{border-color:var(--azul);background:var(--sel-bg)}
.fila-web{display:flex;align-items:center;gap:10px}
.fila-web .opt{flex:1}
.fila-web a{font-size:14px;font-weight:600;min-height:44px;display:flex;align-items:center}
.fila-web a.off{color:var(--sec-2);pointer-events:none;opacity:.5}
.seg{min-height:46px;border:1px solid var(--borde-2);border-radius:10px;background:#fff;font-size:15px;font-weight:600;color:var(--texto);padding:0 8px}
.seg.on{border-color:var(--azul);background:var(--azul);color:#fff}
.temp{min-height:58px;border-radius:12px;background:#fff;font-size:16px;font-weight:800;border:2px solid}
.temp-caliente{border-color:var(--caliente);color:var(--caliente)}
.temp-templado{border-color:var(--templado);color:var(--templado-txt)}
.temp-frio{border-color:var(--frio);color:var(--frio)}
.temp-caliente.on{background:var(--caliente);color:#fff}
.temp-templado.on{background:var(--templado);color:#fff}
.temp-frio.on{background:var(--frio);color:#fff}

/* ── fotos ── */
.slot{display:flex;flex-direction:column;gap:8px;min-width:0}
.slot-vacio{height:166px;border:2px dashed var(--borde-4);border-radius:10px;background:var(--pista-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;color:var(--azul);padding:0 6px;text-align:center}
.slot-vacio svg{width:30px;height:30px}
.slot-vacio.err{border-color:var(--error)}
.slot-thumb{height:116px;border-radius:10px;background:var(--foto-bg);background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center;color:var(--sec);font-size:12px;font-weight:600;overflow:hidden}
.slot-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.slot-acc{display:flex;gap:6px}
.slot-acc .seg{flex:1}
.slot-etq .slot-vacio{height:52px;flex-direction:row;gap:10px}
.slot-etq .slot-vacio svg{width:24px;height:24px}
.slot-etq .slot-thumb{height:90px}
.slot input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.slot label{position:relative;cursor:pointer}
label.seg{display:flex;align-items:center;justify-content:center;cursor:pointer}
.caja-grupo{display:flex;flex-direction:column;gap:12px}
.caja-grupo.err{outline:2px solid var(--error);outline-offset:4px;border-radius:10px}
.slot-msg{font-size:12px;color:var(--error);font-weight:600;margin:0}
.spin{width:26px;height:26px;border:3px solid #fff;border-top-color:var(--azul);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ── login ── */
.login-top{background:#fff;padding:72px 28px 36px;display:flex;flex-direction:column;align-items:center;gap:18px;border-bottom:4px solid var(--naranja)}
.login-top img{width:260px;height:76px;object-fit:contain}
.login-top span{font-family:var(--f-titulo);font-size:15px;letter-spacing:.12em;color:var(--azul);text-align:center}
.login-form{margin:28px 16px 0;background:#fff;border-radius:16px;border:1px solid var(--borde);padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.login-form h1{font-family:var(--f-titulo);margin:0;font-size:22px;font-weight:400;color:var(--azul)}
.login-form .lbl{font-size:14px}
.login-form .inp{height:50px;padding:0 14px}
.btn-entrar{min-height:54px;border:0;border-radius:12px;background:var(--naranja);color:var(--texto);font-size:17px;font-weight:800;letter-spacing:.04em}
.btn-entrar:disabled{opacity:.6}
.login-nota{margin:0;font-size:13px;color:var(--sec-2);line-height:1.45}
.login-pie{height:56px;background:var(--azul);margin-top:28px}

/* ── ventanas superpuestas ── */
.velo{position:fixed;inset:0;background:rgba(15,42,74,.55);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto}
.modal{background:#fff;border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:440px;margin-top:20vh}
.modal h2{margin:0;font-size:19px;font-weight:800;color:var(--azul)}
.modal p{margin:0;font-size:14px;color:var(--sec);line-height:1.45}
.modal .acciones{display:flex;gap:10px}
.modal .acciones button{flex:1;min-height:50px;border-radius:12px;font-size:16px;font-weight:800;border:2px solid var(--azul);background:#fff;color:var(--azul)}
.modal .acciones button.principal{background:var(--naranja);border-color:var(--naranja);color:var(--texto)}
.modal .acciones button.peligro{background:var(--error);border-color:var(--error);color:#fff}
.hoja-velo{position:fixed;inset:0;background:rgba(15,42,74,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.hoja{background:#fff;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));width:100%;max-width:480px;display:flex;flex-direction:column;gap:8px;max-height:80vh;overflow:auto}
.hoja h2{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--azul)}
.hoja button{min-height:48px;border:1px solid var(--borde-2);border-radius:10px;background:#fff;font-size:16px;font-weight:600;color:var(--texto);text-align:left;padding:0 14px}
.hoja button.on{border-color:var(--azul);background:var(--sel-bg);font-weight:800}
.visor{position:fixed;inset:0;background:#000;z-index:60;display:flex;align-items:center;justify-content:center}
.visor img{max-width:100%;max-height:100%;object-fit:contain}
.visor button{position:absolute;top:10px;right:10px;min-width:48px;min-height:48px;border-radius:24px;border:0;background:rgba(255,255,255,.9);font-size:16px;font-weight:800;color:var(--azul);padding:0 16px}

/* ── listado ── */
.flt{min-height:40px;border:1px solid var(--borde-2);border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--texto);padding:0 14px}
.flt.on{border-color:var(--azul);background:var(--azul);color:#fff}
.filtros{display:flex;flex-wrap:wrap;gap:8px}
.m{font-size:12px;color:var(--sec-2);margin:0}
.row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:10px;text-decoration:none;color:var(--texto)}
.thumb{width:64px;height:44px;border-radius:6px;background:var(--foto-bg);flex:none;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nothumb{width:64px;height:44px;border-radius:6px;border:1px dashed #A9B6C6;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--sec-2)}
.row-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-txt p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t{font-size:15px;font-weight:700;margin:0}
.row .t.pend{font-style:italic;color:var(--templado-txt)}
.row .s{font-size:13px;color:var(--sec);margin:0}
.row .m{margin:0}
.pill{font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;flex:none}
.pill-caliente{background:var(--caliente);color:#fff}
.pill-templado{background:var(--templado-bg);color:var(--templado-txt)}
.pill-frio{background:var(--frio-bg);color:var(--frio)}
.pill-sin{background:var(--track);color:var(--sec)}
.mas{min-height:48px;border:2px solid var(--azul);border-radius:12px;background:#fff;color:var(--azul);font-size:15px;font-weight:700}
.vacio-l{background:#fff;border:1px dashed var(--borde-2);border-radius:12px;padding:20px;text-align:center;color:var(--sec);font-size:14px}

/* ── detalle ── */
.cab-det{display:flex;flex-direction:column;gap:4px;padding:4px 4px 0}
.cab-det .fila{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cab-det h1{font-family:var(--f-titulo);margin:0;font-size:24px;font-weight:800;color:var(--azul);overflow-wrap:anywhere}
.cab-det h1.pend{font-style:italic;color:var(--templado-txt);font-size:20px}
.cab-det .pill{padding:4px 10px}
.cab-det p{margin:0;font-size:13px;color:var(--sec-2)}
.fotos-det{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.foto-det{height:110px;border:0;border-radius:10px;background:var(--foto-bg);font-size:12px;font-weight:600;color:var(--sec);padding:0;overflow:hidden;position:relative}
.foto-det img{width:100%;height:100%;object-fit:cover;display:block}
.foto-det span{position:absolute;left:0;right:0;bottom:0;background:rgba(15,42,74,.7);color:#fff;font-size:12px;padding:4px 8px;text-align:left}
.cd{background:#fff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--borde)}
.hd{margin:0 0 2px;font-size:13px;font-weight:700;color:var(--azul-enlace);letter-spacing:.05em}
.f{display:grid;grid-template-columns:118px 1fr;gap:8px;font-size:14px;margin:0}
.f .k{color:var(--sec-2)}
.f .v{font-weight:600;color:var(--texto);overflow-wrap:anywhere}
.f a.v{color:var(--azul-enlace)}
.btn-borrar{margin-top:4px;min-height:48px;border:2px solid var(--error);border-radius:12px;background:#fff;color:var(--error);font-size:15px;font-weight:700}

/* ── resumen ── */
.cr{background:#fff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--borde)}
.cr-total{flex-direction:row;align-items:center;justify-content:space-between}
.cr-total .a{font-size:13px;color:var(--sec-2);font-weight:600}
.cr-total .b{font-size:13px;color:var(--sec-2)}
.cr-total .n{font-size:44px;font-weight:800;color:var(--azul)}
.hr{font-family:var(--f-titulo);margin:0;font-size:13px;font-weight:700;color:var(--azul-enlace);letter-spacing:.05em}
.r{display:grid;grid-template-columns:96px 1fr 28px;gap:10px;align-items:center;font-size:14px}
.r .k{color:var(--sec);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r .n{font-weight:700;text-align:right}
.track{height:12px;background:var(--track);border-radius:999px;overflow:hidden}
.track div{height:12px}
.nota-r{margin:2px 0 0;font-size:13px;color:var(--sec-2)}
.btn-x{min-height:52px;border-radius:12px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none}
.btn-x svg{width:20px;height:20px}
.btn-x1{background:var(--azul);color:#fff}
.btn-x1:hover{color:#fff}
.btn-x2{background:#fff;color:var(--azul);border:2px solid var(--azul)}
.btn-x2:hover{color:var(--azul)}