/* CINTURONES WBA — v3 (16-oct): menos ERP, más app. Tarjetas por cinturón, botones grandes y vidrio
   (como la transmisión en vidrio de la WBA), sobre fondo blanco con un ambiente leve de azul, rojo y oro.
   Marca WBA, no Future Champions: azul WBA, oro como acento de valor, rojo solo para lo urgente. */

@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url("fuentes/InterTight-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url("fuentes/InterTight-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("fuentes/Anton-latin.woff2") format("woff2")}

:root{
  --fondo:#fff; --tinta:#0B1B33; --gris:#5E6B7E; --tenue:#8A95A6; --linea:rgba(11,27,51,.09);
  --azul:#0D3F99; --azul-claro:#1565C0; --azul-hondo:#071C44;
  --rojo:#C62828; --oro:#A9760A; --oro-vivo:#FFAF00; --verde:#0A7A4B;
  --vidrio:rgba(255,255,255,.62); --vidrio-borde:rgba(255,255,255,.85);
  --sombra:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 .5px rgba(11,27,51,.07),0 12px 32px -14px rgba(11,27,51,.22);
  --desenfoque:blur(22px) saturate(180%);
  --r:24px;
  --texto:"Inter Tight",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Anton","Arial Narrow",sans-serif;
  --salida:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font-family:var(--texto);font-size:16px;line-height:1.45;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px;border-radius:8px}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gris{color:var(--gris)}
.verde{color:var(--verde)}
.rojo{color:var(--rojo)}
.oro{color:var(--oro)}

/* ---------- ambiente: el blanco con luz de las dos esquinas y del oro, para que el vidrio se lea ---------- */
.ambiente{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#fff}
.ambiente i{position:absolute;border-radius:50%;filter:blur(70px)}
.ambiente i:nth-child(1){width:60vmax;height:60vmax;left:-22vmax;top:-26vmax;background:rgba(21,101,192,.16)}
.ambiente i:nth-child(2){width:46vmax;height:46vmax;right:-20vmax;top:18vh;background:rgba(198,40,40,.08)}
.ambiente i:nth-child(3){width:50vmax;height:50vmax;left:10vw;bottom:-30vmax;background:rgba(255,175,0,.12)}

/* ---------- vidrio ---------- */
.vidrio{background:var(--vidrio);-webkit-backdrop-filter:var(--desenfoque);backdrop-filter:var(--desenfoque);border:1px solid var(--vidrio-borde);box-shadow:var(--sombra)}
.oscuro{position:relative;overflow:hidden;color:#fff;background:linear-gradient(140deg,#123E8F 0%,#0A2A66 55%,#071C44 100%);border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 18px 40px -16px rgba(7,28,68,.55)}
.oscuro::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 85% -10%,rgba(255,175,0,.28),transparent 55%),radial-gradient(90% 60% at -10% 110%,rgba(198,40,40,.22),transparent 60%);pointer-events:none}
.oscuro::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(rgba(255,255,255,.10),transparent);pointer-events:none}
.oscuro>*{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vidrio{background:rgba(255,255,255,.94)}}
@media (prefers-reduced-transparency:reduce){.vidrio{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- botones: pulsado .97 en menos de 100 ms, hover solo con puntero ---------- */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:500;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s,transform .09s;position:relative}
.boton svg{width:20px;height:20px;flex:none}
.boton:active,.redondo:active,.accion:active,.tarjeta:active,.atencion:active,.fab:active,.chip:active{transform:scale(.97)}
.boton.primario{background:var(--azul);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -10px rgba(13,63,153,.7)}
.boton.vidrio{color:var(--tinta)}
.boton.claro{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.boton.peligro{color:var(--rojo)}
.boton.peligro.confirmar{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.boton.chico{height:40px;padding:0 16px;font-size:14.5px}
.boton.ancho{width:100%;height:56px}
.boton[disabled]{opacity:.5;pointer-events:none}
.redondo{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;transition:transform .09s}
.redondo svg{width:20px;height:20px}
.redondo[aria-current]{background:var(--azul);color:#fff;border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .boton.primario:hover{background:#0B3584}
  .boton.vidrio:hover,.redondo.vidrio:hover{background:rgba(255,255,255,.9)}
  .boton.claro:hover{background:rgba(255,255,255,.26)}
}
.enlace{font-size:15px;font-weight:500;color:var(--azul);text-decoration:none}
@media (hover:hover) and (pointer:fine){.enlace:hover{text-decoration:underline;text-underline-offset:3px}}

/* ---------- idioma: ES | EN ---------- */
.idioma{display:flex;gap:2px;padding:3px;border-radius:999px;flex:none}
.idioma button{height:34px;min-width:38px;padding:0 9px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gris);transition:background-color .2s,color .2s,transform .09s}
.idioma button:active{transform:scale(.97)}
.idioma button[aria-pressed="true"]{background:var(--azul);color:#fff}
@media (hover:hover) and (pointer:fine){.idioma button[aria-pressed="false"]:hover{color:var(--tinta)}}
.login .idioma{position:fixed;top:calc(14px + env(safe-area-inset-top));right:16px}

/* ---------- acceso ---------- */
.login{min-height:100dvh;display:grid;align-content:center;padding:32px 16px}
.login-caja{width:100%;max-width:400px;margin:0 auto;display:grid;gap:16px;padding:32px 24px;border-radius:32px}
.login-caja img{width:64px;height:auto;margin-bottom:8px}
.login h1{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.login p{color:var(--gris);font-size:15px}
.login-error{min-height:1.3em;color:var(--rojo)!important;font-size:14.5px}

/* ---------- campos ---------- */
.campo{display:grid;gap:6px}
.campo>span{font-size:14px;color:var(--gris);font-weight:500}
input[type="text"],input[type="password"],input[type="date"],input[type="number"],input[type="email"],input[type="tel"],input[inputmode],select,textarea{
  width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--linea);border-radius:16px;background:rgba(255,255,255,.8);font-size:16px;color:var(--tinta);transition:border-color .2s,box-shadow .2s}
textarea{resize:vertical;line-height:1.4;min-height:84px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235E6B7E' stroke-width='1.8'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul-claro);box-shadow:0 0 0 4px rgba(21,101,192,.14)}
input[type="file"]{font-size:14.5px}

/* ---------- barra de arriba ---------- */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
.barra{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(11,27,51,.06)}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.02em;text-decoration:none}
.logo img{width:34px;height:34px;object-fit:contain}
.quien{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--gris)}
.quien .nombre{display:none;margin-right:6px}
@media (min-width:700px){.barra{padding:16px 32px}.quien .nombre{display:inline}}

/* ---------- dock de abajo: pestañas en vidrio + botón de pedir ---------- */
.dock{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;display:flex;justify-content:center;align-items:center;gap:10px;padding:0 16px;pointer-events:none}
.tabs{pointer-events:auto;display:flex;gap:2px;padding:5px;border-radius:999px}
.tabs button{display:grid;justify-items:center;gap:1px;min-width:78px;padding:7px 12px 6px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--gris);transition:background-color .2s,color .2s,transform .09s}
.tabs button:active{transform:scale(.97)}
.tabs svg{width:24px;height:24px;stroke-width:1.7}
.tabs button[aria-current]{background:rgba(13,63,153,.1);color:var(--azul)}
.fab{pointer-events:auto;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:#fff;background:linear-gradient(150deg,#1A55B8,#0A2A66);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 0 0 1px rgba(255,255,255,.5),0 14px 30px -10px rgba(10,42,102,.65);transition:transform .09s}
.fab svg{width:28px;height:28px;stroke-width:2.2}
@media (hover:hover) and (pointer:fine){.tabs button:hover{color:var(--tinta)}.fab:hover{filter:brightness(1.08)}}

/* ---------- página ---------- */
.pagina{max-width:1120px;margin:0 auto;padding:8px 16px calc(120px + env(safe-area-inset-bottom))}
@media (min-width:700px){.pagina{padding:16px 32px 140px}}
.hola{margin:8px 0 22px}
.hola p{font-size:15px;color:var(--gris)}
.hola p::first-letter{text-transform:uppercase}
.hola h1,.cab h1{font-size:34px;font-weight:600;letter-spacing:-.035em;line-height:1.05}
@media (min-width:700px){.hola h1,.cab h1{font-size:46px}}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 20px}
.cab p{color:var(--gris);font-size:16px;margin-top:6px;max-width:58ch}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:21px;font-weight:600;letter-spacing:-.025em;margin:36px 0 14px}
.sec small{font-size:14.5px;color:var(--gris);font-weight:400;letter-spacing:0}
.sec .enlace{font-size:15px;letter-spacing:0}
.nota{font-size:14px;color:var(--gris);margin-top:12px;max-width:70ch}
.vacio{color:var(--gris);font-size:15px;padding:22px;border-radius:var(--r);text-align:center}
.aviso-linea{display:flex;gap:10px;align-items:center;font-size:14.5px;padding:12px 16px;border-radius:18px;margin-bottom:18px}
.aviso-linea::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oro-vivo);flex:none}
.botones{display:flex;flex-wrap:wrap;gap:10px}
.volver{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px 0 10px;border-radius:999px;font-size:15px;font-weight:500;margin-bottom:16px}
.volver svg{width:20px;height:20px}
.anios{display:flex;gap:6px;padding:4px;border-radius:999px}
.anios button{height:34px;padding:0 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--gris)}
.anios button[aria-pressed="true"]{background:var(--azul);color:#fff}

/* ---------- héroe oscuro (saldo, presupuesto) ---------- */
.heroe{border-radius:28px;padding:22px 22px 20px}
.heroe .k{font-size:14px;font-weight:500;opacity:.78}
.heroe .grande{display:block;font-family:var(--display);font-size:54px;line-height:1;letter-spacing:.005em;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.heroe .sub{font-size:14.5px;opacity:.78}
.heroe .botones{margin-top:18px}
.heroe .botones .boton{flex:1 1 auto;padding:0 14px}
@media (min-width:700px){.heroe{padding:28px 30px}.heroe .grande{font-size:68px}}

/* ---------- botones grandes de acción ---------- */
.acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media (min-width:700px){.acciones{grid-template-columns:repeat(4,minmax(0,1fr))}}
.accion{display:grid;align-content:space-between;gap:18px;min-height:112px;padding:16px;border-radius:22px;text-align:left;transition:transform .09s,background-color .2s}
.accion .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(13,63,153,.1);color:var(--azul)}
.accion .ico svg{width:22px;height:22px}
.accion b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.accion small{display:block;font-size:13px;color:var(--gris);margin-top:2px}
.accion b,.atencion b{color:var(--tinta)}
.accion small,.atencion small{color:var(--gris)}
.accion.primaria b,.accion.confirmar b{color:#fff}
.accion.oro .ico{background:rgba(255,175,0,.18);color:var(--oro)}
.accion.rojo .ico{background:rgba(198,40,40,.1);color:var(--rojo)}
.accion.verde .ico{background:rgba(10,122,75,.1);color:var(--verde)}
@media (hover:hover) and (pointer:fine){.accion:hover{background:rgba(255,255,255,.9)}}
.acciones.pedido{grid-template-columns:repeat(2,minmax(0,1fr))}
.acciones.pedido .accion{min-height:96px}
.acciones.pedido .accion.primaria{grid-column:1/-1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--azul);color:#fff;border-color:transparent;box-shadow:0 10px 24px -10px rgba(13,63,153,.7);height:58px;padding:0 20px;border-radius:999px}
.acciones.pedido .accion.primaria .ico{background:none;color:#fff;width:auto;height:auto}
.acciones.pedido .accion.primaria b{font-size:16.5px}
.accion.confirmar{background:var(--rojo)!important;color:#fff}
.accion.confirmar .ico{background:rgba(255,255,255,.2);color:#fff}
.accion.confirmar small{color:rgba(255,255,255,.8)}

/* ---------- lo que necesita atención ---------- */
.atenciones{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 18px;scroll-snap-type:x mandatory}
.atenciones::-webkit-scrollbar{display:none}
@media (min-width:700px){.atenciones{margin:0;padding:2px 0 18px;flex-wrap:wrap;overflow:visible}}
.atencion{flex:none;scroll-snap-align:start;width:168px;display:grid;gap:8px;padding:16px;border-radius:22px;text-align:left;transition:transform .09s}
.atencion .n{font-family:var(--display);font-size:42px;line-height:1;color:var(--azul)}
.atencion.rojo .n{color:var(--rojo)}
.atencion.oro .n{color:var(--oro)}
.atencion b{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.atencion small{font-size:13px;color:var(--gris);line-height:1.3}
.todo-bien{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:22px;font-weight:500}
.todo-bien svg{width:24px;height:24px;color:var(--verde)}

/* ---------- presupuesto en barra ---------- */
.presu{border-radius:var(--r);padding:20px}
.presu .fila-p{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.presu .fila-p b{font-family:var(--display);font-weight:400;font-size:34px;line-height:1}
.presu .fila-p span{font-size:14px;color:var(--gris)}
.barra-presu{display:flex;height:12px;border-radius:999px;overflow:hidden;background:rgba(11,27,51,.07);margin:16px 0 12px}
.barra-presu i{display:block;height:100%}
.barra-presu .f{background:var(--azul)}
.barra-presu .c{background:repeating-linear-gradient(-45deg,#5B8FD9 0 6px,#7FA8E3 6px 12px)}
.barra-presu .x{background:var(--rojo)}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--gris)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.leyenda b{color:var(--tinta);font-weight:600}

/* ---------- chips de filtro ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 18px;padding:2px 16px 6px}
.chips::-webkit-scrollbar{display:none}
@media (min-width:700px){.chips{margin:0 0 18px;padding:2px 0 6px;flex-wrap:wrap}}
.chip{flex:none;height:42px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap;transition:background-color .2s,color .2s,transform .09s}
.chip span{color:var(--tenue);margin-left:5px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--tinta);color:#fff;border-color:transparent}
.chip[aria-pressed="true"] span{color:rgba(255,255,255,.65)}

/* ---------- tarjeta de un cinturón ---------- */
.tarjetas{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.tarjetas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.carrusel{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 18px;scroll-snap-type:x mandatory}
.carrusel::-webkit-scrollbar{display:none}
.carrusel .tarjeta{flex:none;width:min(300px,80vw);scroll-snap-align:start}
@media (min-width:700px){.carrusel{margin:0;padding:2px 0 18px}}
.tarjeta{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-align:left;padding:6px;transition:transform .09s}
.foto{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(140deg,#123E8F,#071C44)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,68,.0) 40%,rgba(7,28,68,.55))}
.foto.sin-foto{display:grid;place-items:center;background:linear-gradient(140deg,#F4E2B5,#E2B95C 60%,#B9862A)}
.foto.sin-foto svg{width:54px;height:54px;color:rgba(80,52,6,.75);stroke-width:1.4}
.foto.sin-foto::after{display:none}
.foto .sello{position:absolute;left:10px;top:10px;z-index:1;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:#fff;background:rgba(7,28,68,.35);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.foto .marca{position:absolute;right:10px;top:10px;z-index:1;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--tinta);background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.foto .marca.rojo{background:var(--rojo);color:#fff}
.foto .marca.verde{background:rgba(255,255,255,.85);color:var(--verde)}
.tarjeta .cuerpo{padding:14px 12px 10px;display:grid;gap:3px}
.tarjeta .k{font-size:13px;color:var(--gris);font-weight:500}
.tarjeta .t{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tarjeta .e{font-size:14.5px;font-weight:500;margin-top:6px}
.tarjeta .pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--linea);font-size:14px;color:var(--gris)}
.tarjeta .pie b{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}

/* tarjeta del proveedor: la zona que abre el pedido y el botón de la guía van aparte */
.tarjeta-enlace{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:20px}
.tarjeta>.boton{margin:4px 6px 8px;width:auto}
.destino{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:16px;background:rgba(13,63,153,.07);font-size:15px}
.destino svg{width:22px;height:22px;flex:none;color:var(--azul);margin-top:1px}
.destino b{font-weight:600}
.destino small{display:block;font-size:13px;color:var(--gris)}
.destino.grande{font-size:17px;margin-top:14px}
.nota-wba{margin-top:14px;padding:12px 14px;border-radius:16px;background:rgba(255,175,0,.14);font-size:15px;white-space:pre-line}
.nota-wba b{display:block;font-size:13px;font-weight:600;color:var(--oro);margin-bottom:2px}

/* avance en 4 tramos: pedido, fabricación, envío, entregado */
.avance{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}
.avance i{height:5px;border-radius:999px;background:rgba(11,27,51,.09)}
.avance i.hecho{background:var(--azul)}
.avance i.actual{background:linear-gradient(90deg,var(--azul) 50%,rgba(13,63,153,.25) 50%)}
.avance.rojo i.hecho{background:var(--rojo)}
.avance.rojo i.actual{background:linear-gradient(90deg,var(--rojo) 50%,rgba(198,40,40,.22) 50%)}
.avance.verde i.hecho,.avance.verde i.actual{background:var(--verde)}
.avance-nombres{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px;font-size:12.5px;color:var(--tenue)}
.avance-nombres span.ya{color:var(--tinta);font-weight:500}

/* ---------- detalle de un pedido ---------- */
/* En el teléfono todo va en una columna con su orden (lo de entrega sube); en escritorio, dos columnas. */
.detalle{display:flex;flex-direction:column;gap:14px}
.columna{display:contents}
@media (min-width:960px){
  .detalle{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
  .columna{display:grid;gap:14px;align-content:start}
  .detalle .lado{position:sticky;top:84px}
}
.multi{display:flex;flex-wrap:wrap;gap:6px}
.multi label{position:relative}
.multi input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.multi span{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:500;background:rgba(11,27,51,.06);color:var(--gris)}
.multi input:checked+span{background:var(--azul);color:#fff}
.multi input:focus-visible+span{outline:2px solid var(--azul-claro);outline-offset:2px}
.portada{border-radius:30px;padding:6px}
.portada .foto{aspect-ratio:16/8;max-height:300px;width:100%;border-radius:24px}
.portada .cuerpo{padding:16px 14px 14px}
.portada h1{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.portada .k{font-size:14px;color:var(--gris);margin-top:4px}
.estado{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-top:16px}
.estado small{display:block;font-size:14.5px;font-weight:400;color:var(--gris);margin-top:3px;letter-spacing:0}
.caja{border-radius:var(--r);padding:18px}
.caja h2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:10px}
.caja h2 small{font-size:13.5px;font-weight:400;color:var(--gris)}
.datos{margin:0;display:grid}
.datos>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-top:1px solid var(--linea)}
.datos>div:first-child{border-top:0;padding-top:2px}
.datos dt{font-size:15px;color:var(--gris);flex:none}
.datos dd{margin:0;text-align:right;font-size:15px;white-space:pre-line;overflow-wrap:anywhere}
.datos dd b{font-weight:600}
.productos{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.producto{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.producto .mini{width:56px;height:56px;border-radius:16px;overflow:hidden;background:linear-gradient(140deg,#123E8F,#071C44);display:grid;place-items:center}
.producto .mini img{width:100%;height:100%;object-fit:cover}
.producto .mini.oro{background:linear-gradient(140deg,#F4E2B5,#D8AA48)}
.producto .mini svg{width:26px;height:26px;color:rgba(80,52,6,.8);stroke-width:1.5}
.producto b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.producto p{font-size:13.5px;color:var(--gris)}
.producto .precio{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.renglones-caja{list-style:none;margin:0;padding:0}
.renglon-caja{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linea)}
.renglon-caja:first-child{border-top:0;padding-top:2px}
.renglon-caja b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.renglon-caja small{display:block;font-size:13.5px;color:var(--gris)}
.renglon-caja .d{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:15px}
.renglon-caja .d small{font-size:12.5px}
button.renglon-caja{width:100%;text-align:left}
.cifras-chicas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cifra{border-radius:20px;padding:14px 16px}
.cifra b{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cifra span{display:block;font-size:13px;color:var(--gris);margin-top:4px}
.cifra.rojo b{color:var(--rojo)}
.cifra.verde b{color:var(--verde)}
@media (min-width:700px){.cifras-chicas.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}.cifra b{font-size:32px}}

/* seguimiento como conversación */
.chat{display:grid;gap:10px}
.burbuja{max-width:86%;padding:10px 14px;border-radius:20px 20px 20px 6px;background:rgba(11,27,51,.06);justify-self:start}
.burbuja.mia{justify-self:end;border-radius:20px 20px 6px 20px;background:var(--azul);color:#fff}
.burbuja .de{display:block;font-size:12.5px;color:var(--gris);margin-bottom:2px}
.burbuja.mia .de{color:rgba(255,255,255,.7)}
.burbuja p{font-size:15.5px;white-space:pre-line;overflow-wrap:anywhere}
.burbuja.privada{background:rgba(255,175,0,.16)}
.burbuja.mia.privada{background:#5B4407}
.evento{justify-self:center;text-align:center;font-size:13px;color:var(--gris);max-width:92%}
.evento b{color:var(--tinta);font-weight:500}
.escribir{display:flex;gap:8px;align-items:flex-end;margin-top:14px}
.escribir textarea{min-height:48px;height:48px;border-radius:24px;padding:12px 18px;resize:none;flex:1}
.escribir .redondo{width:48px;height:48px;background:var(--azul);color:#fff}
.escribir-op{margin-top:10px}
.check{display:flex;gap:10px;align-items:center;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--azul);margin:0}

/* actividad (inicio) */
.hilo{list-style:none;margin:0;padding:0}
.hilo li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--linea)}
.hilo li:first-child{border-top:0;padding-top:2px}
.hilo .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--azul);background:rgba(13,63,153,.1)}
.hilo .av.prov{color:var(--oro);background:rgba(255,175,0,.18)}
.hilo p{font-size:15px;overflow-wrap:anywhere}
.hilo small{display:block;font-size:13px;color:var(--gris)}

/* ---------- cuenta ---------- */
.factura .pagado{height:6px;border-radius:999px;background:rgba(11,27,51,.08);overflow:hidden;margin-top:10px}
.factura .pagado i{display:block;height:100%;background:var(--verde);border-radius:999px}

/* números: barras por mes y partidas */
.meses{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:140px}
.meses div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;font-size:11.5px;color:var(--gris);font-variant-numeric:tabular-nums}
.meses i{display:block;width:100%;max-width:26px;background:linear-gradient(180deg,#2C6AD0,var(--azul));border-radius:8px 8px 3px 3px;min-height:3px}
.meses b{font-weight:600;color:var(--tinta)}
.meses-pie{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;font-size:11.5px;color:var(--gris);text-align:center;padding-top:8px}
.partida .barra-mini{height:6px;border-radius:999px;background:rgba(11,27,51,.08);overflow:hidden;margin-top:8px}
.partida .barra-mini i{display:block;height:100%;background:var(--azul);border-radius:999px}
.partida .barra-mini i.pasado{background:var(--rojo)}

/* ---------- hoja (editor) en vidrio ---------- */
.editor{width:min(580px,100vw);max-width:100vw;max-height:92dvh;margin:auto;padding:0;border:1px solid rgba(255,255,255,.9);border-radius:30px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);color:var(--tinta);box-shadow:0 30px 80px -20px rgba(7,28,68,.45)}
.editor::backdrop{background:rgba(7,28,68,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.editor[open]{animation:sube .28s var(--salida)}
@keyframes sube{from{opacity:0;transform:translateY(24px)}}
.editor form{display:flex;flex-direction:column;max-height:92dvh}
.editor-cab{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;padding:14px 14px 6px}
.editor-cab h2{grid-column:2;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.015em}
.editor-cerrar{grid-column:3;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(11,27,51,.07)}
.editor-cerrar svg{width:18px;height:18px}
.editor-cuerpo{padding:14px 22px 10px;overflow-y:auto;display:grid;gap:16px}
.editor-pie{display:flex;gap:10px;align-items:center;padding:12px 22px calc(18px + env(safe-area-inset-bottom))}
.editor-pie .der{display:flex;gap:10px;margin-left:auto}
.editor-error{color:var(--rojo);font-size:14.5px;min-height:1.2em}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.segmentado{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:999px;background:rgba(11,27,51,.06);width:fit-content;max-width:100%}
.segmentado label{position:relative}
.segmentado input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segmentado span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--gris)}
.segmentado input:checked+span{background:#fff;color:var(--tinta);box-shadow:0 1px 3px rgba(11,27,51,.15)}
.segmentado input:focus-visible+span{outline:2px solid var(--azul-claro);outline-offset:2px}
.renglones{display:grid;gap:10px}
.renglon{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border-radius:20px;background:rgba(11,27,51,.04);position:relative}
.renglon .ancho{grid-column:1/-1}
.renglon .quitar{position:absolute;top:10px;right:12px;font-size:13.5px;color:var(--gris);height:28px}
.renglon .campo:first-of-type{padding-right:64px}
.mas{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--azul);background:rgba(13,63,153,.08)}
.mas svg{width:18px;height:18px}
.total{display:flex;justify-content:space-between;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;padding:14px 16px;border-radius:18px;background:rgba(13,63,153,.07)}
.ayuda{font-size:13.5px;color:var(--gris)}
.mensaje{white-space:pre-wrap;font:inherit;font-size:15px;background:rgba(11,27,51,.05);padding:14px 16px;border-radius:18px;margin:0;max-height:240px;overflow:auto}
.lista-check{display:grid}
.lista-check .check{padding:12px 0;border-top:1px solid var(--linea)}
@media (max-width:600px){
  .editor{width:100vw;margin:auto 0 0;border-radius:30px 30px 0 0;max-height:94dvh;border-bottom:0}
  .editor form{max-height:94dvh}
  .editor-cab::before{content:"";position:absolute;left:50%;top:7px;width:38px;height:5px;margin-left:-19px;border-radius:999px;background:rgba(11,27,51,.15)}
  .dos-col{grid-template-columns:1fr}
}

/* ---------- aviso flotante ---------- */
.aviso{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:50;transform:translate(-50%,16px);opacity:0;pointer-events:none;max-width:calc(100vw - 32px);padding:12px 20px;border-radius:999px;background:rgba(11,27,51,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;font-size:15px;font-weight:500;transition:opacity .2s var(--salida),transform .2s var(--salida)}
.aviso.visible{opacity:1;transform:translate(-50%,0)}
.aviso.error{background:var(--rojo)}

/* ---------- ajustes ---------- */
.ajustes{display:grid;gap:14px}
.ajustes .caja>p{color:var(--gris);font-size:14.5px;margin:-4px 0 12px;max-width:65ch}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.9em}

.entra>*{animation:entra .34s var(--salida) both}
.entra>*:nth-child(2){animation-delay:.03s}
.entra>*:nth-child(3){animation-delay:.06s}
.entra>*:nth-child(4){animation-delay:.09s}
.entra>*:nth-child(n+5){animation-delay:.12s}
@keyframes entra{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}

/* ---------- foto del cinturón (aprobación antes del envío) ---------- */
.fotos-cint{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:12px}
.foto-cint{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:rgba(11,27,51,.06)}
.foto-cint img{width:100%;height:100%;object-fit:cover;display:block}
.foto-cint:first-child{grid-column:1/-1;aspect-ratio:16/10}
.chip-foto{position:absolute;left:8px;bottom:8px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chip-foto.pendiente{color:var(--oro)}
.chip-foto.aprobada{color:var(--verde)}
.chip-foto.cambios{color:var(--rojo)}
.estado-foto{font-size:15px}
.estado-foto b{font-weight:600}
.espera{display:flex;gap:8px;align-items:center;justify-content:center;margin:4px 6px 8px;padding:14px;border-radius:999px;background:rgba(255,175,0,.14);color:#6B4B05;font-size:14.5px;font-weight:500;text-align:center}
.espera svg{width:20px;height:20px;flex:none}

/* ---------- tarjeta para instalar la app y activar avisos ---------- */
.tarjeta-app{position:relative;display:flex;align-items:center;gap:12px;padding:12px 44px 12px 12px;border-radius:22px;margin:4px 0 18px}
.tarjeta-app img{width:44px;height:44px;border-radius:12px;flex:none;box-shadow:0 0 0 1px rgba(11,27,51,.08)}
.tarjeta-app p{flex:1;font-size:14.5px;line-height:1.35}
.tarjeta-app .boton{flex:none}
.cerrar-app{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--gris)}
.cerrar-app svg{width:16px;height:16px}
@media (max-width:480px){.tarjeta-app{flex-wrap:wrap}.tarjeta-app p{flex-basis:calc(100% - 56px)}.tarjeta-app .boton{margin-left:56px}}

/* ---------- página pública de seguimiento ---------- */
.seg{max-width:640px;display:grid;gap:14px;padding-bottom:48px}
.seg .portada .k:first-child{color:var(--azul);font-weight:600;font-size:13.5px;margin:0 0 4px}
.pasos-seg{list-style:none;margin:0;padding:0;display:grid}
.pasos-seg li{position:relative;display:grid;grid-template-columns:30px 1fr;gap:12px;padding:0 0 18px}
.pasos-seg li:last-child{padding-bottom:0}
.pasos-seg li::before{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:rgba(11,27,51,.1)}
.pasos-seg li:last-child::before{display:none}
.pasos-seg li.hecho::before{background:var(--azul)}
.pasos-seg .punto{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(11,27,51,.07);color:#fff}
.pasos-seg .punto svg{width:16px;height:16px;stroke-width:2.4}
.pasos-seg li.hecho .punto{background:var(--azul)}
.pasos-seg li.actual .punto{background:#fff;box-shadow:0 0 0 2px var(--azul) inset}
.pasos-seg li.actual .punto::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--azul)}
.pasos-seg b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;padding-top:4px}
.pasos-seg li:not(.hecho):not(.actual) b{color:var(--tenue);font-weight:500}
.pasos-seg small{display:block;font-size:14px;color:var(--gris);margin-top:2px}

/* ---------- label de FedEx ---------- */
.label-leido{display:flex;gap:12px;align-items:center;padding:10px;border-radius:18px;background:rgba(10,122,75,.08)}
.label-leido img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}
.label-leido p{font-size:15px}
.a-mano summary{cursor:pointer;font-size:14px;color:var(--gris);padding:4px 0}
.a-mano[open] summary{margin-bottom:10px}

/* tipos de cinturón como botones (formulario para pedir) */
.tipos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tipos label{position:relative}
.tipos input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tipos span{display:grid;align-content:center;min-height:62px;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px var(--linea) inset;transition:background-color .2s,box-shadow .2s,transform .09s}
.tipos label:active span{transform:scale(.97)}
.tipos b{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.tipos small{font-size:12.5px;color:var(--gris);margin-top:2px}
.tipos input:checked+span{background:var(--azul);color:#fff;box-shadow:0 10px 22px -12px rgba(13,63,153,.8)}
.tipos input:checked+span small{color:rgba(255,255,255,.75)}
.tipos input:focus-visible+span{outline:2px solid var(--azul-claro);outline-offset:2px}

/* pedidos por autorizar: lo primero que ve Alfredo */
.por-autorizar{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:24px;margin-bottom:16px;text-align:left;color:#fff;background:linear-gradient(135deg,#E0A100,#C27C00);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 32px -16px rgba(160,100,0,.7);transition:transform .09s}
.por-autorizar:active{transform:scale(.97)}
.por-autorizar .n{font-family:var(--display);font-size:44px;line-height:1}
.por-autorizar b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em}
.por-autorizar small{display:block;font-size:14px;opacity:.9}
.por-autorizar svg{width:22px;height:22px;margin-left:auto;flex:none}

/* fecha en que se necesita, con urgencia (tarjetas y detalle) */
.plazo{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;padding:7px 12px 7px 10px;border-radius:999px;margin-bottom:8px;font-size:14.5px;background:rgba(13,63,153,.08);color:var(--azul)}
.plazo svg{width:18px;height:18px;flex:none}
.plazo b{font-weight:700}
.plazo em{font-style:normal;font-size:13px;font-weight:600;opacity:.85;padding-left:8px;border-left:1px solid currentColor}
.plazo.oro{background:rgba(255,175,0,.18);color:#7A5300}
.plazo.rojo{background:rgba(198,40,40,.1);color:var(--rojo)}
.portada .plazo{margin:12px 0 0}
.foto .marca.nuevo{background:var(--azul);color:#fff}

/* cinturones pedidos por tipo (inicio) */
.cifra small{display:block;font-size:12px;color:var(--tenue);margin-top:4px;line-height:1.35}
.cifra.tipo-mundiales b{color:var(--azul)}
.cifra.tipo-gold b{color:var(--oro)}
.cifra.tipo-regionales b{color:#2C6AD0}
.cifra.tipo-mini b{color:#7A5300}

/* ---------- color por estado (Luis, 17-oct) ---------- */
:root{--c-oro:#D99A00;--c-azul:#1A55C2;--c-verde:#0E8A55;--c-rojo:#D32F2F;--c-gris:#8A95A6}
.c-oro{--c:var(--c-oro);--c-fondo:rgba(255,175,0,.16)}
.c-azul{--c:var(--c-azul);--c-fondo:rgba(26,85,194,.10)}
.c-verde{--c:var(--c-verde);--c-fondo:rgba(14,138,85,.11)}
.c-rojo{--c:var(--c-rojo);--c-fondo:rgba(211,47,47,.10)}
.c-gris{--c:var(--c-gris);--c-fondo:rgba(11,27,51,.05)}
.tarjeta[class*="c-"],.portada[class*="c-"]{position:relative;background:linear-gradient(180deg,var(--c-fondo),rgba(255,255,255,.62) 62%);box-shadow:var(--sombra),0 0 0 1.5px color-mix(in srgb,var(--c) 35%,transparent) inset}
.tarjeta[class*="c-"]::before,.portada[class*="c-"]::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:5px;border-radius:0 6px 6px 0;background:var(--c);z-index:2}
.tarjeta[class*="c-"] .e,.portada[class*="c-"] .estado{color:var(--c)}
.tarjeta.c-azul .e,.portada.c-azul .estado{color:var(--tinta)}
.avance.oro i.hecho{background:var(--c-oro)}
.avance.oro i.actual{background:linear-gradient(90deg,var(--c-oro) 50%,rgba(217,154,0,.25) 50%)}
.leyenda-estados{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-8px 0 16px;font-size:13px;color:var(--gris)}
.leyenda-estados span{display:inline-flex;align-items:center;gap:6px}
.leyenda-estados i{width:10px;height:10px;border-radius:3px;background:var(--c)}
/* las tarjetas de atención, también con su color de fondo */
.atencion.rojo{background:linear-gradient(180deg,rgba(211,47,47,.12),rgba(255,255,255,.62))}
.atencion.oro{background:linear-gradient(180deg,rgba(255,175,0,.18),rgba(255,255,255,.62))}
.atencion:not(.rojo):not(.oro){background:linear-gradient(180deg,rgba(26,85,194,.10),rgba(255,255,255,.62))}

/* ---------- el tablero (inicio) con más color ---------- */
.acciones .accion{background:linear-gradient(160deg,rgba(26,85,194,.12),rgba(255,255,255,.65) 70%)}
.acciones .accion.oro{background:linear-gradient(160deg,rgba(255,175,0,.2),rgba(255,255,255,.65) 70%)}
.acciones .accion.verde{background:linear-gradient(160deg,rgba(14,138,85,.14),rgba(255,255,255,.65) 70%)}
.acciones .accion .ico{background:var(--azul);color:#fff;box-shadow:0 8px 16px -8px rgba(13,63,153,.7)}
.acciones .accion.oro .ico{background:var(--c-oro);color:#fff;box-shadow:0 8px 16px -8px rgba(160,100,0,.7)}
.acciones .accion.verde .ico{background:var(--c-verde);color:#fff;box-shadow:0 8px 16px -8px rgba(10,100,60,.6)}
.acciones .accion.rojo .ico{background:var(--c-rojo);color:#fff}
.cifra.tipo-mundiales{background:linear-gradient(160deg,rgba(26,85,194,.14),rgba(255,255,255,.65) 75%)}
.cifra.tipo-gold{background:linear-gradient(160deg,rgba(255,175,0,.22),rgba(255,255,255,.65) 75%)}
.cifra.tipo-regionales{background:linear-gradient(160deg,rgba(54,181,229,.18),rgba(255,255,255,.65) 75%)}
.cifra.tipo-regionales b{color:#1F8FBF}
.cifra.tipo-mini{background:linear-gradient(160deg,rgba(198,40,40,.10),rgba(255,255,255,.65) 75%)}
.cifra.tipo-mini b{color:var(--c-rojo)}
.presu{background:linear-gradient(160deg,rgba(26,85,194,.10),rgba(255,255,255,.65) 70%)}
.barra-presu{height:16px}
.sec{position:relative;padding-left:14px}
.sec::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;background:linear-gradient(var(--azul),#36B5E5)}
.accion.apagado{opacity:.55}
a.accion{text-decoration:none;color:inherit}

/* panel de arriba del inicio con el cinturón real (Alfredo: «más bonita, más vistosa») */
.heroe.con-foto{background:linear-gradient(100deg,#0A2A66 0%,rgba(10,42,102,.94) 42%,rgba(10,42,102,.45) 68%,rgba(10,42,102,.15) 100%),url("img/portada-placa.webp") right 30%/auto 150% no-repeat,#0A2A66;min-height:260px}
.heroe.con-foto .grande{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.heroe.con-foto .sub{max-width:62%}
@media (min-width:700px){.heroe.con-foto{background-size:auto,55% auto;background-position:0 0,right 35%}}

/* ---------- más color, segunda ronda (Alfredo, 17-oct: «métele más color y vamos viendo») ---------- */
.ambiente i:nth-child(1){background:rgba(21,101,192,.24)}
.ambiente i:nth-child(2){background:rgba(198,40,40,.12)}
.ambiente i:nth-child(3){background:rgba(255,175,0,.2)}
.tabs button[aria-current]{background:var(--azul);color:#fff;box-shadow:0 8px 18px -10px rgba(13,63,153,.8)}
.chip[aria-pressed="true"]{background:var(--azul)}
.anios button[aria-pressed="true"],.idioma button[aria-pressed="true"]{background:var(--azul)}
.fab{background:linear-gradient(150deg,#FFC23D,#E09A00);color:#3B2600;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 0 0 1px rgba(255,255,255,.6),0 14px 30px -10px rgba(170,110,0,.7)}
.cifras-chicas .cifra:nth-child(4n+1){background:linear-gradient(160deg,rgba(26,85,194,.12),rgba(255,255,255,.65) 75%)}
.cifras-chicas .cifra:nth-child(4n+2){background:linear-gradient(160deg,rgba(255,175,0,.16),rgba(255,255,255,.65) 75%)}
.cifras-chicas .cifra:nth-child(4n+3){background:linear-gradient(160deg,rgba(54,181,229,.14),rgba(255,255,255,.65) 75%)}
.cifras-chicas .cifra:nth-child(4n+4){background:linear-gradient(160deg,rgba(14,138,85,.12),rgba(255,255,255,.65) 75%)}
.caja.factura{background:linear-gradient(160deg,rgba(255,175,0,.14),rgba(255,255,255,.65) 70%)}
.caja h2{position:relative;padding-left:12px}
.caja h2::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:3px;background:var(--azul)}
.logo span{color:var(--azul)}

/* ---------- tercera ronda visual ---------- */
/* las cuerdas del ring (la misma línea del documento para Presidencia) en los paneles azules */
.heroe.oscuro{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none' stroke='%2336B5E5' stroke-width='3' stroke-linecap='square' opacity='.55'%3E%3Cpath d='M250 300V190a80 80 0 0 1 80-80h70'/%3E%3Cpath d='M266 300V190a64 64 0 0 1 64-64h70'/%3E%3Cpath d='M282 300V190a48 48 0 0 1 48-48h70'/%3E%3C/svg%3E"),linear-gradient(140deg,#123E8F 0%,#0A2A66 55%,#071C44 100%);background-repeat:no-repeat;background-position:right bottom,0 0;background-size:auto 78%,auto}
.heroe.con-foto{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none' stroke='%2336B5E5' stroke-width='3' stroke-linecap='square' opacity='.6'%3E%3Cpath d='M250 300V190a80 80 0 0 1 80-80h70'/%3E%3Cpath d='M266 300V190a64 64 0 0 1 64-64h70'/%3E%3Cpath d='M282 300V190a48 48 0 0 1 48-48h70'/%3E%3C/svg%3E") right bottom/auto 70% no-repeat,linear-gradient(100deg,#0A2A66 0%,rgba(10,42,102,.94) 42%,rgba(10,42,102,.45) 68%,rgba(10,42,102,.15) 100%),url("img/portada-placa.webp") right 30%/auto 150% no-repeat,#0A2A66}
@media (min-width:700px){.heroe.con-foto{background-size:auto 70%,auto,55% auto;background-position:right bottom,0 0,right 35%}}
/* resumen de Sartonk */
.resumen-prov{min-height:0;margin-bottom:16px}
.mini-cifras{display:flex;gap:18px;margin-top:4px}
.mini-cifras span{display:flex;align-items:baseline;gap:6px;font-size:14.5px;opacity:.9}
.mini-cifras b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1}
.mini-cifras .rojo b{color:#FF8A80}
/* acceso: el cinturón de fondo y la tarjeta de vidrio encima */
.login{background:linear-gradient(180deg,rgba(7,28,68,.55),rgba(7,28,68,.85)),url("img/portada-placa.webp") center/cover no-repeat,#0A2A66}
.login-caja{background:rgba(255,255,255,.82)}
.login-caja img{width:76px}
.login .idioma{background:rgba(255,255,255,.75)}
/* detalle del pedido: la foto más grande, con el título encima */
.portada .foto{aspect-ratio:4/3;max-height:340px}
.portada .foto::after{background:linear-gradient(180deg,rgba(7,28,68,0) 35%,rgba(7,28,68,.7))}
@media (min-width:700px){.portada .foto{aspect-ratio:16/8}}
/* vacíos con un poco más de vida */
.vacio{background:linear-gradient(160deg,rgba(26,85,194,.08),rgba(255,255,255,.65))}