@font-face{font-family:'Inter';src:url('../fonts/Inter-Latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
--fuente:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--t-meta:12px;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--rail:#0B1F3A; --rail-2:#13294A; --rail-texto:#C9D4E3;
--azul-vivo:#0b6072; --azul-vivo-osc:#004a59; --azul-vivo-suave:#e3eff2;
--azul:#004a59; --azul-suave:#dce9ed;
--fondo:#FFFFFF; --hoja:#FFFFFF; --hoja-2:#F4F7FA;
--linea:#D5DDE6; --filete:#E6EBF0;
--tinta:#0B1A2B; --tinta-2:#3A4A5C; --tinta-3:#5E6E82; --navy-900:#0A1F33; --blanco:#FFF;
--verde:#0B6E4F; --verde-suave:#D9EEE6; --verde-solido:#0B6E4F;
--ambar:#9A5400; --ambar-suave:#F6E7D2; --ambar-linea:rgba(154,84,0,.28); --ambar-solido:#9A5400;
--naranja:#B8480F; --naranja-suave:#F8E3D6;
--rojo:#B00020; --rojo-suave:#FDECEF; --rojo-solido:#B00020;
--gris-medio:#8593A6;
--cupo-fondo:#0B1A2B;
--sombra:0 1px 2px rgba(10,31,51,.05),0 8px 22px -14px rgba(10,31,51,.28);
--wa-verde:#075E54; --wa-fondo:#ECE5DD; --wa-burbuja:#FFFFFF; --wa-texto:#1F2C34;
--marca:var(--azul-vivo);
--marca-osc:var(--azul-vivo-osc);
--marca-rgb:27,100,242;
--marca-tinta:var(--tinta);
--marca-tinta-2:var(--tinta-2);
--marca-tinta-3:var(--tinta-3);
--marca-suave:var(--azul-vivo-suave);
--marca-linea:var(--linea);
--papel:var(--fondo);
--exito:var(--verde);
--exito-suave:var(--verde-suave);
--aviso:var(--ambar);
--aviso-suave:var(--ambar-suave);
--grad-start:var(--marca);
--grad-end:var(--marca-osc);
--gris-900:var(--tinta);
--gris-700:var(--tinta-2);
--gris-600:var(--tinta-2);
--gris-500:var(--tinta-3);
--gris-400:var(--gris-medio);
--gris-300:var(--linea);
--gris-200:var(--linea);
--gris-100:var(--filete);
--gris-50:var(--hoja-2);
--verde-claro:var(--verde-suave);
--ambar-claro:var(--ambar-suave);
--naranja-claro:var(--naranja-suave);
--rojo-claro:var(--rojo-suave);
--indigo-claro:var(--azul-vivo-suave);
}
*{ box-sizing:border-box; }
html{ height:100%; }
body{
min-height:100%;
margin:0;
display:flex; flex-direction:column;
background:var(--fondo);
color:var(--tinta);
font-family:var(--fuente);
font-feature-settings:'tnum' 1, 'cv05' 1, 'cv08' 1, 'ss03' 1;
font-optical-sizing:auto;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
button{ font-family:inherit; cursor:pointer; }
.col-portada{ display:contents; }
.phone-shell{
width:100%;
max-width:480px;
margin:0 auto;
padding:12px 12px 16px;
background:transparent;
border:0;
overflow:hidden;
position:relative;
flex:1 1 auto;
display:flex;
flex-direction:column;
transform:translateZ(0);
}
.notch{ display:none; }
.pantalla{
flex:1;
display:flex;
flex-direction:column;
padding:20px 16px 24px;
overflow-y:auto;
background:var(--hoja);
border:1px solid var(--linea);
border-radius:10px;
box-shadow:var(--sombra);
}
.grad-bg{ background:linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%); }
.grad-text{
background:linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.logo-caja{
width:52px; height:52px;
border-radius:10px;
display:flex; align-items:center; justify-content:center;
margin:0 auto 14px;
box-shadow:0 6px 16px -8px rgba(var(--marca-rgb),.45);
}
.btn-primary{
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%;
min-height:48px;
text-decoration:none;
border:0;
color:#fff;
font-weight:600;
font-size:15px;
letter-spacing:.01em;
padding:12px 16px;
border-radius:8px;
background:var(--azul-vivo);
box-shadow:none;
transition:transform .15s ease, background .15s ease, opacity .15s ease;
}
.btn-primary:hover{ background:var(--azul-vivo-osc); }
.btn-primary:active{ transform:scale(0.98); }
.btn-primary:focus-visible{ outline:3px solid rgba(var(--marca-rgb),.35); outline-offset:2px; }
.btn-primary:disabled{
background:var(--linea);
color:var(--tinta-3);
box-shadow:none;
opacity:1;
cursor:not-allowed;
}
.btn-secundario{
display:block;
width:100%;
text-align:center;
border:1px solid var(--linea);
background:var(--hoja);
color:var(--tinta-2);
font-size:14px;
font-weight:600;
padding:12px;
border-radius:8px;
text-decoration:none;
}
.btn-secundario:hover{ background:var(--hoja-2); border-color:var(--tinta-3); }
.btn-secundario.armado{
border-color:var(--rojo);
color:var(--rojo);
}
.btn-primary.armado{
background:var(--rojo-solido);
box-shadow:0 8px 20px -6px rgba(239,68,68,0.55);
}
.acciones-duo{ display:flex; gap:12px; width:100%; margin-bottom:16px; }
.accion-mini{
flex:1 1 0; min-width:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; padding:14px 8px 12px;
border:1px solid var(--linea); border-radius:10px;
background:var(--hoja); color:var(--tinta-2);
font-size:12.5px; font-weight:600; line-height:1;
text-align:center; text-decoration:none;
transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.accion-mini:hover{ background:var(--gris-50); border-color:var(--gris-300); }
.accion-mini:active{ transform:scale(0.97); }
.accion-mini:focus-visible{ outline:2px solid var(--grad-start); outline-offset:2px; }
.accion-mini svg{ stroke:var(--grad-start); }
.acciones-final-producto{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.arqueo-mensaje{ font-weight:700; margin-top:6px; }
.arqueo-mensaje--ok{ color:var(--verde); }
.arqueo-mensaje--sobra{ color:var(--ambar); }
.arqueo-mensaje--falta{ color:var(--rojo); }
.caja-bandeja__lista{ list-style:none; margin:8px 0; padding:0; display:grid; gap:6px; }
.caja-bandeja__fila{ padding:8px 10px; border-radius:10px; border:1px solid var(--borde, rgba(127,127,127,.3)); }
.caja-bandeja__fila--sin_confirmar, .caja-bandeja__fila--enviando{ border-color:var(--ambar); }
.caja-bandeja__fila--confirmado, .caja-bandeja__fila--reintentado{ border-color:var(--verde); }
.caja-bandeja__fila--no_entro{ border-color:var(--rojo); }
.aviso-bandeja{ position:fixed; left:16px; right:16px; bottom:16px; z-index:9999; max-width:560px; margin:0 auto; padding:12px 14px; border-radius:12px; background:#1d1d1f; color:#fff; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.aviso-bandeja.oculto{ display:none; }
.cierres-historial{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.cierre-item{
border:1px solid var(--gris-100);
border-radius:10px;
padding:10px 12px;
display:flex; flex-direction:column; gap:2px;
}
.cierre-cabecera{ font-weight:700; color:var(--gris-700); }
.cierre-arqueo{ font-weight:700; }
.btn-texto{
border:0; background:none; padding:0;
font-size:12px; font-weight:600;
color:var(--gris-500);
text-decoration:underline;
}
.js-abrir-terminos{ display:inline-block; padding:18px 4px; margin:-18px -4px; }
.btn-recordatorio{
display:block;
width:100%;
margin-top:10px;
padding:10px 14px;
border-radius:8px;
border:1.5px solid var(--ambar);
background:var(--ambar-claro);
color:var(--ambar);
font-family:inherit;
font-size:13px;
font-weight:700;
text-decoration:none;
text-align:center;
cursor:pointer;
}
.btn-recordatorio[data-urgente="1"]{
border-color:var(--rojo);
background:var(--rojo-claro);
color:var(--rojo);
}
.btn-enlace{
border:0; background:none; padding:0;
font-size:14px; font-weight:600;
text-decoration:underline;
text-underline-offset:2px;
cursor:pointer;
}
.acciones-tienda-fila{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
gap:10px;
margin:0 0 18px;
}
.accion-tienda-btn{
position:relative;
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:10px;
min-height:60px;
padding:10px 12px;
border-radius:10px;
border:1px solid var(--linea);
background:var(--hoja);
box-shadow:var(--sombra);
color:var(--tinta);
font-family:inherit;
font-size:13px;
font-weight:600;
line-height:1.25;
text-align:left;
cursor:pointer;
transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.accion-tienda-btn svg{
width:38px; height:38px; padding:9px; box-sizing:border-box;
border-radius:9px; background:var(--azul-vivo-suave);
stroke:var(--azul-vivo); flex-shrink:0;
}
.accion-tienda-badge{
position:absolute; top:-6px; right:-6px;
min-width:20px; height:20px; padding:0 5px;
border-radius:9999px; border:2px solid var(--hoja);
background:var(--rojo-solido); color:#fff;
font-size:10.5px; font-weight:800; font-variant-numeric:tabular-nums;
display:flex; align-items:center; justify-content:center;
}
.accion-tienda-btn:hover{ border-color:var(--azul-vivo); transform:translateY(-1px); }
.accion-tienda-btn:focus-visible{ outline:2px solid var(--grad-start); outline-offset:2px; }
.accion-tienda-btn.activo{
background:var(--azul-vivo-suave);
border-color:var(--azul-vivo);
color:var(--tinta);
}
.accion-tienda-btn.activo svg{ background:var(--azul-vivo); stroke:#fff; }
#btn-venta-contado svg{ background:var(--verde-suave); stroke:var(--verde); }
#btn-venta-contado:hover{ border-color:var(--verde); }
#btn-venta-contado.activo{ background:var(--verde-suave); border-color:var(--verde); }
#btn-venta-contado.activo svg{ background:var(--verde-solido); stroke:#fff; }
.btn-enlace.grad-text{
background-image:linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.fila-busqueda-filtros{
display:flex;
align-items:stretch;
gap:8px;
}
.fila-busqueda-filtros .field-input{ flex:1; min-width:0; }
.btn-filtros-toggle{
display:flex;
align-items:center;
gap:6px;
padding:0 14px;
border-radius:8px;
border:1px solid var(--linea);
background:var(--hoja-2);
color:var(--gris-600);
font-family:inherit;
font-size:12px;
font-weight:700;
white-space:nowrap;
cursor:pointer;
flex-shrink:0;
position:relative;
}
.btn-filtros-toggle:hover{ border-color:var(--gris-300); }
.btn-filtros-toggle:focus-visible{ outline:2px solid var(--grad-start); outline-offset:2px; }
.btn-filtros-toggle .icono-stroke{ stroke:currentColor; }
.btn-filtros-toggle.con-filtro::after{
content:"";
position:absolute;
top:-3px; right:-3px;
width:9px; height:9px;
border-radius:9999px;
background:var(--grad-start);
border:2px solid var(--hoja);
}
.panel-filtros{
max-height:0;
opacity:0;
overflow:hidden;
margin-top:0;
padding:0 12px;
background:var(--gris-50);
border-style:solid;
border-width:0;
border-color:transparent;
border-radius:10px;
visibility:hidden;
transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease, padding .35s ease, border-color .35s ease, border-width .35s ease, visibility 0s linear .35s;
}
.panel-filtros.abierto{
max-height:600px;
opacity:1;
margin-top:12px;
padding:12px 12px 2px;
border-width:1px;
border-color:var(--gris-100);
visibility:visible;
transition-delay:0s;
}
@media (prefers-reduced-motion: reduce){
.panel-filtros{ transition:none; }
}
.filtro-grupo{ margin-bottom:10px; }
.filtro-grupo:last-child{ margin-bottom:2px; }
.filtro-grupo-titulo{
margin:0 0 6px 2px;
font-size:10px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--gris-400);
}
.filtro-fila{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
margin:0;
}
.filtro-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 12px;
border-radius:8px;
border:1px solid var(--linea);
background:var(--hoja);
box-shadow:0 1px 1px rgba(17,17,20,0.03);
color:var(--gris-600);
font-family:inherit;
font-size:12px;
font-weight:600;
line-height:1.3;
white-space:nowrap;
cursor:pointer;
transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.filtro-chip:hover{ border-color:var(--gris-300); box-shadow:0 1px 3px rgba(17,17,20,0.05); }
.filtro-chip:focus-visible{ outline:2px solid var(--grad-start); outline-offset:2px; }
.filtro-chip[data-estado]::before{
content:"";
width:8px; height:8px;
border-radius:9999px;
background:var(--gris-400);
flex-shrink:0;
}
.filtro-chip[data-estado="Al día"]::before{ background:var(--verde); }
.filtro-chip[data-estado="Próximo a vencer"]::before{ background:var(--ambar); }
.filtro-chip[data-estado="Vencido"]::before{ background:var(--naranja); }
.filtro-chip[data-estado="Mora crítica"]::before{ background:var(--rojo); }
.filtro-chip[data-estado="Crédito completado"]::before{ background:var(--grad-start); }
.filtro-chip[data-estado="Sin crédito activo"]::before{ background:var(--gris-400); }
.filtro-chip.activo{
background:var(--azul-vivo);
border-color:var(--azul-vivo);
color:#fff;
font-weight:700;
}
.filtro-chip.activo[data-estado]{ color:var(--gris-900); }
.filtro-chip.activo[data-estado="Al día"]{ background:var(--verde-claro); border-color:var(--verde); }
.filtro-chip.activo[data-estado="Próximo a vencer"]{ background:var(--ambar-claro); border-color:var(--ambar); }
.filtro-chip.activo[data-estado="Vencido"]{ background:var(--naranja-claro); border-color:var(--naranja); }
.filtro-chip.activo[data-estado="Mora crítica"]{ background:var(--rojo-claro); border-color:var(--rojo); }
.filtro-chip.activo[data-estado="Crédito completado"]{ background:var(--indigo-claro); border-color:var(--grad-start); }
.filtro-chip.activo[data-estado="Sin crédito activo"]{ background:var(--gris-100); border-color:var(--gris-400); }
.filtro-fila--pareja{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}
.filtro-fila--pareja .filtro-chip{
justify-content:flex-start;
min-width:0;
white-space:normal;
text-align:left;
}
.filtro-fila--pareja .filtro-chip:last-child:nth-child(odd){ grid-column:1 / -1; }
.estado-credito-badge{ font-weight:700; font-size:12px; margin:8px 0 0; }
.estado-credito-badge[data-estado="Al día"], .local-estado[data-estado="Al día"]{ color:var(--verde); }
.estado-credito-badge[data-estado="Próximo a vencer"], .local-estado[data-estado="Próximo a vencer"]{ color:var(--ambar); }
.estado-credito-badge[data-estado="Vencido"], .local-estado[data-estado="Vencido"]{ color:var(--naranja); }
.estado-credito-badge[data-estado="Mora crítica"], .local-estado[data-estado="Mora crítica"]{ color:var(--rojo); }
.estado-credito-badge[data-estado="Crédito completado"], .local-estado[data-estado="Crédito completado"]{ color:var(--grad-start); }
.estado-credito-badge[data-estado="Sin crédito activo"], .local-estado[data-estado="Sin crédito activo"]{ color:var(--gris-400); }
.cuota-tracker{
display:grid;
grid-template-columns:repeat(12, 1fr);
gap:0;
margin:10px 0 4px;
border:1.5px solid var(--gris-200);
border-radius:8px;
overflow:hidden;
}
.cuota-seg{
aspect-ratio:1 / 1;
border-radius:0;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:700;
font-variant-numeric:tabular-nums;
line-height:1;
border:none;
border-right:1px solid rgba(17, 17, 20, .08);
margin:0;
padding:0;
font-family:inherit;
appearance:none;
-webkit-appearance:none;
background-color:var(--gris-50);
color:var(--gris-400);
user-select:none;
}
.cuota-seg:last-child{ border-right:none; }
button.cuota-seg{ cursor:pointer; }
button.cuota-seg:hover{ filter:brightness(.95); }
button.cuota-seg:focus-visible{ outline:2px solid var(--grad-start); outline-offset:-2px; }
.cuota-seg[data-estado="pagada"]{
background-color:var(--verde-solido);
color:#fff;
}
.cuota-seg[data-estado="mora"]{
background-color:var(--rojo-claro);
color:var(--rojo);
}
.cuota-seg[data-estado="pendiente"]{
background-color:var(--gris-50);
color:var(--gris-400);
}
.cuota-seg[data-proxima="1"]{
box-shadow:inset 0 0 0 2px var(--ambar);
color:var(--ambar);
}
.cuota-leyenda{
display:flex;
flex-wrap:wrap;
gap:4px 14px;
margin:0 0 4px;
}
.cuota-leyenda-item{
display:inline-flex;
align-items:center;
gap:5px;
font-size:11px;
color:var(--gris-500);
}
.cuota-leyenda-punto{
width:9px;
height:9px;
border-radius:9999px;
flex-shrink:0;
border:1.5px solid transparent;
}
.cuota-leyenda-punto[data-estado="pagada"]{ background:var(--verde-solido); }
.cuota-leyenda-punto[data-estado="mora"]{ background:var(--rojo-claro); border-color:var(--rojo); }
.cuota-leyenda-punto[data-estado="pendiente"]{ background:var(--gris-50); border-color:var(--gris-300); }
.perfil-cliente{ padding:0; }
.perfil-cab{ display:flex; align-items:center; gap:12px; padding:16px 16px 12px; }
.perfil-avatar{
width:44px; height:44px; flex:0 0 44px; border-radius:9999px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg, var(--grad-start), var(--grad-end));
color:#fff;
}
.perfil-avatar svg{ width:22px; height:22px; }
.perfil-cab .t-etiqueta{ margin:0 0 2px; }
.perfil-cab .nombre-tienda{ margin:0; font-size:16px; }
.perfil-seccion{ padding:12px 16px; border-top:1px solid var(--gris-100); }
.meta-barra-cont{
width:100%; height:10px; border-radius:9999px;
background:var(--gris-100); overflow:hidden; margin:10px 0 14px;
}
.meta-barra-relleno{
height:100%; border-radius:9999px;
background:linear-gradient(90deg, var(--grad-start) 0%, var(--grad-end) 100%);
transition:width .4s ease;
}
@media (prefers-reduced-motion: reduce){
.meta-barra-relleno{ transition:none; }
}
.meta-cifras{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; text-align:center; }
.meta-cifra-valor{ font-size:16px; font-weight:800; color:var(--tinta); font-variant-numeric:tabular-nums; margin:0; }
.meta-cifra-etq{ font-size:10px; color:var(--gris-500); font-weight:600; margin:2px 0 0; }
.cobranza-seccion[data-urgente="1"]{ background:var(--rojo-claro); }
.cobranza-item{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
padding:8px 0;
border-top:1px solid var(--gris-100);
}
.cobranza-item:first-of-type{ border-top:0; }
.cobranza-item-datos{ min-width:0; }
.cobranza-item-nombre{ margin:0; font-weight:700; font-size:13px; }
.cobranza-item .btn-recordatorio{ width:auto; flex-shrink:0; margin-top:0; }
.recordatorio-acciones{ display:flex; gap:6px; flex-shrink:0; margin-top:10px; }
.recordatorio-acciones .btn-recordatorio{ flex:1; width:auto; margin-top:0; white-space:nowrap; }
.cobranza-item .recordatorio-acciones{ margin-top:0; flex-basis:100%; }
.perfil-seccion-cab{ display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.perfil-seccion-cab .t-etiqueta{ margin:0; }
.cola-recordatorio{ margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--gris-50); border:1px solid var(--gris-100); }
.cola-recordatorio .cobranza-item-nombre{ margin:2px 0; }
.cola-recordatorio .recordatorio-acciones{ margin-top:10px; }
.perfil-ic{
width:28px; height:28px; flex:0 0 28px; border-radius:9999px;
display:flex; align-items:center; justify-content:center;
}
.perfil-ic svg{ width:15px; height:15px; }
.perfil-ic.ic-indigo{ background:var(--indigo-claro); color:var(--grad-start); }
.perfil-ic.ic-gris{ background:var(--gris-100); color:var(--gris-500); }
.perfil-ic.ic-verde{ background:var(--verde-claro); color:var(--verde); }
.perfil-dato{ display:flex; justify-content:space-between; gap:12px; margin:0 0 6px; font-size:13px; }
.perfil-dato:last-child{ margin-bottom:0; }
.perfil-dato-k{ color:var(--gris-500); flex:0 0 auto; }
.perfil-dato-v{ color:var(--gris-900); font-weight:600; text-align:right; overflow-wrap:anywhere; }
.perfil-cupo-fila{ display:flex; align-items:center; gap:10px; }
.perfil-cupo-monto{ font-size:24px; font-weight:800; margin:0; color:var(--gris-900); }
.riesgo-pill{
margin-left:auto; font-size:11px; font-weight:700;
border-radius:9999px; padding:3px 10px; white-space:nowrap;
}
.riesgo-pill[data-riesgo="Bajo"]{ background:var(--verde-claro); color:var(--verde); }
.riesgo-pill[data-riesgo="Medio"]{ background:var(--ambar-claro); color:var(--ambar); }
.riesgo-pill[data-riesgo="Alto"]{ background:var(--naranja-claro); color:var(--naranja); }
.riesgo-pill[data-riesgo="Muy alto"]{ background:var(--rojo-claro); color:var(--rojo); }
.perfil-estado{
display:flex; align-items:center; gap:8px;
border-radius:8px; padding:10px 12px; margin:0 0 8px;
font-size:13px; font-weight:700;
}
.perfil-estado svg{ flex-shrink:0; }
.perfil-estado[data-estado="Al día"]{ background:var(--verde-claro); color:var(--verde); }
.perfil-estado[data-estado="Próximo a vencer"]{ background:var(--ambar-claro); color:var(--ambar); }
.perfil-estado[data-estado="Vencido"]{ background:var(--naranja-claro); color:var(--naranja); }
.perfil-estado[data-estado="Mora crítica"]{ background:var(--rojo-claro); color:var(--rojo); }
.perfil-estado[data-estado="Crédito completado"]{ background:var(--indigo-claro); color:var(--grad-start); }
.perfil-estado[data-estado="Sin crédito activo"]{ background:var(--gris-100); color:var(--gris-600); }
.perfil-estado[data-estado="Crédito preaprobado"]{ background:var(--verde-claro); color:var(--verde); }
.perfil-stats{ display:flex; gap:8px; margin-top:8px; }
.perfil-stat{ flex:1; background:var(--hoja-2); border:1px solid var(--filete); border-radius:8px; padding:8px 10px; }
.perfil-stat .t-etiqueta{ margin:0 0 2px; }
.perfil-stat-valor{ font-size:16px; font-weight:800; margin:0; color:var(--gris-900); }
.perfil-stat-valor.verde{ color:var(--verde); }
.perfil-historial{ margin:0; }
.perfil-historial summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; }
.perfil-historial summary::-webkit-details-marker{ display:none; }
.perfil-historial summary::after{ content:"▾"; margin-left:auto; color:var(--gris-500); font-size:12px; }
.perfil-historial[open] summary::after{ content:"▴"; }
.pagos-lista{ margin-top:8px; max-height:200px; overflow-y:auto; }
.pago-item{ display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-top:1px dashed var(--gris-100); }
.pago-num{
width:20px; height:20px; flex:0 0 20px; border-radius:9999px;
background:var(--indigo-claro); color:var(--grad-start);
font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center;
}
.pago-detalle{ flex:1; }
.pago-detalle .t-mini{ margin:0; }
.pago-detalle .btn-texto{ display:block; margin:4px 0 0; }
.pago-valor{ font-weight:700; color:var(--verde); white-space:nowrap; font-size:12px; }
.pago-anulado{ opacity:.75; }
.pago-tachado{ text-decoration:line-through; }
.pago-valor.pago-tachado{ color:var(--gris-400); }
.pago-anulado-etiqueta{ color:var(--rojo); font-weight:700; margin:2px 0 0; }
.anulacion-caja{
display:flex; flex-direction:column; gap:8px;
margin-top:8px; padding:12px;
background:var(--hoja-2); border:1px solid var(--linea); border-radius:8px;
}
.anulacion-caja textarea.field-input{ resize:vertical; min-height:52px; font-family:inherit; }
.estad-fila{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.estad-dona{ width:104px; height:104px; flex-shrink:0; }
.dona-base{ fill:none; stroke:var(--gris-200); stroke-width:5; }
.dona-seg{ fill:none; stroke-width:5; transition:opacity .2s ease; }
.dona-seg[data-estado="Al día"]{ stroke:var(--verde); }
.dona-seg[data-estado="Próximo a vencer"]{ stroke:var(--ambar); }
.dona-seg[data-estado="Vencido"]{ stroke:var(--naranja); }
.dona-seg[data-estado="Mora crítica"]{ stroke:var(--rojo); }
.dona-seg[data-estado="Crédito completado"]{ stroke:var(--grad-start); }
.dona-seg[data-estado="Sin crédito activo"]{ stroke:var(--gris-400); }
.dona-total{ font-size:10px; font-weight:800; fill:var(--gris-900); text-anchor:middle; }
.dona-total-etq{ font-size:3.2px; font-weight:700; fill:var(--gris-500); text-anchor:middle; text-transform:uppercase; letter-spacing:.04em; }
.estad-leyenda{ display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.estad-item{
display:flex; align-items:center; gap:6px;
padding:2px 0; transition:opacity .2s ease;
}
.estad-item::before{
content:""; width:8px; height:8px; border-radius:9999px;
background:var(--gris-400); flex-shrink:0;
}
.estad-item[data-estado="Al día"]::before{ background:var(--verde); }
.estad-item[data-estado="Próximo a vencer"]::before{ background:var(--ambar); }
.estad-item[data-estado="Vencido"]::before{ background:var(--naranja); }
.estad-item[data-estado="Mora crítica"]::before{ background:var(--rojo); }
.estad-item[data-estado="Crédito completado"]::before{ background:var(--grad-start); }
.estad-item[data-estado="Sin crédito activo"]::before{ background:var(--gris-400); }
.estad-item-filtro{
display:flex; align-items:center; gap:6px; flex:1; min-width:0;
border:0; background:none; padding:0; text-align:left; cursor:pointer;
}
.estad-item-filtro:focus-visible{ outline:2px solid var(--grad-start); outline-offset:2px; border-radius:6px; }
.estad-item-txt{
flex:1; min-width:0;
font-size:11px; font-weight:600; color:var(--gris-600);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.estad-item-pct{ font-size:11px; color:var(--gris-500); flex-shrink:0; }
.estad-item-n{ font-size:11px; font-weight:800; color:var(--gris-900); min-width:16px; text-align:right; flex-shrink:0; }
.estad-item-ir{
display:flex; align-items:center; justify-content:center;
border:0; background:none; padding:4px; margin:-4px -4px -4px 2px;
flex-shrink:0; color:var(--gris-400); cursor:pointer; border-radius:7px;
transition:color .15s ease, background .15s ease;
}
.estad-item-ir:hover{ color:var(--grad-start); background:var(--gris-100); }
.estad-item-ir:focus-visible{ outline:2px solid var(--grad-start); outline-offset:2px; }
.estad-item-ir svg{ stroke:currentColor; }
.estad-caja.filtrada .dona-seg,
.estad-caja.filtrada .estad-item{ opacity:.3; }
.estad-caja.filtrada .dona-seg.activo,
.estad-caja.filtrada .estad-item.activo{ opacity:1; }
.estad-vacio{ margin:12px 0 0; }
.sim-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px; }
.calendario-cuotas{
max-height:220px; overflow-y:auto;
margin-top:8px; padding:8px 10px;
border:1px solid var(--gris-200); border-radius:10px;
background:var(--gris-50);
}
.calendario-cuotas p{ margin:0 0 4px; }
.calendario-cuotas p:last-child{ margin-bottom:0; }
.comparacion-plazos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:12px; }
.comparacion-plazo-col{
text-align:center; padding:8px 4px;
border:1.5px solid var(--gris-200); border-radius:10px;
background:var(--gris-50);
}
.comparacion-plazo-col.activo{ border-color:var(--grad-start); background:var(--indigo-claro); }
.comparacion-plazo-meses{ margin:0 0 4px; font-size:10.5px; font-weight:700; color:var(--gris-600); text-transform:uppercase; letter-spacing:.03em; }
.comparacion-plazo-cuota{ margin:0; font-size:16px; font-weight:800; color:var(--gris-900); font-variant-numeric:tabular-nums; }
.comparacion-plazo-etq{ margin:0 0 4px; font-size:9.5px; color:var(--gris-500); }
.comparacion-plazo-total{ margin:0; font-size:10px; font-weight:600; color:var(--gris-600); font-variant-numeric:tabular-nums; }
.sim-dato{ min-width:0; background:var(--hoja-2); border:1px solid var(--filete); border-radius:8px; padding:10px 12px; }
.sim-dato-etiqueta{ margin:0 0 2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gris-500); }
.sim-dato-valor{ margin:0; font-size:18px; font-weight:800; line-height:1.2; color:var(--gris-900); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sim-dato-sub{ margin:2px 0 0; font-size:10px; line-height:1.4; color:var(--gris-500); }
.sim-dato.destacado{ grid-column:1 / -1; text-align:center; padding:12px; background:rgba(var(--marca-rgb),.06); border:1.5px solid var(--grad-start); }
.sim-dato.destacado .sim-dato-valor{ font-size:26px; }
.sim-dato-valor.grad-text{
background-image:linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.puntos{ display:flex; align-items:center; justify-content:flex-start; gap:8px; padding:11px 14px; margin:0 0 12px; background:var(--hoja); border:1px solid var(--linea); border-radius:10px; box-shadow:var(--sombra); }
.puntos-etq{ font-size:11px; font-weight:600; color:var(--tinta-2); letter-spacing:.06em; text-transform:uppercase; margin-left:auto; }
.puntos-etq:empty{ display:none; }
.puntos.puntos--fuera{ display:none; }
.dot{ width:8px; height:8px; border-radius:9999px; background:var(--linea); transition:all .3s ease; }
.dot.active{ width:22px; background:var(--azul-vivo); }
.dot.done{ background:var(--azul-vivo); opacity:.45; }
.step-panel{ display:none; flex-direction:column; flex:1; }
.step-panel.active{ display:flex; animation:fadeSlideIn .45s ease forwards; }
.step-panel.centrado{ align-items:center; justify-content:center; text-align:center; }
#step-3.centrado{ justify-content:flex-start; }
@keyframes fadeSlideIn{
from{ opacity:0; transform:translateY(6px); }
to{ opacity:1; transform:translateY(0); }
}
.panel-anim:not(.oculto){ animation:fadeSlideIn .3s cubic-bezier(.22,.61,.36,1); }
.panel-saliendo{ transition:opacity .12s ease; opacity:0; }
@media (prefers-reduced-motion: reduce){
.panel-anim:not(.oculto){ animation:none; }
.panel-saliendo{ transition:none; }
.cam-ring.pulsing{ animation:none; }
.spin-loader{ animation:none; }
.fade-msg{ animation:none; }
}
.guia{ display:flex; align-items:center; justify-content:center; gap:6px; margin:26px 0 10px; }
.guia-paso{ display:flex; flex-direction:column; align-items:center; gap:8px; width:72px; }
.guia-num{
width:40px; height:40px; border-radius:9999px;
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:700;
background:var(--hoja); color:var(--tinta-3);
border:1.5px solid var(--linea);
}
.guia-paso.activo .guia-num{
background:var(--marca);
color:#fff; border-color:var(--marca);
box-shadow:0 6px 14px -8px rgba(var(--marca-rgb),.7);
}
.guia-txt{ font-size:11.5px; font-weight:500; color:var(--marca-tinta-2); text-align:center; line-height:1.2; margin:0; }
.guia-paso.activo .guia-txt{ color:var(--marca-tinta); font-weight:600; }
.guia-linea{ height:1.5px; width:22px; background:var(--marca-linea); margin-bottom:22px; }
.guia-frase{
display:none;
margin:2px 0 0;
font-size:12.5px; line-height:1.35; font-weight:400;
color:var(--marca-tinta-3);
}
.necesitas{ margin:18px 0 0; padding:14px 16px 16px; background:var(--hoja-2); border:1px solid var(--filete); border-radius:10px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.necesitas-titulo{ margin:0 0 2px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marca-tinta-3); }
.necesitas-item{ display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.35; color:var(--marca-tinta); font-weight:500; }
.necesitas-icono{ width:36px; height:36px; border-radius:10px; background:var(--hoja); color:var(--marca); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--marca-linea); }
.t-titulo{ font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.2; margin:0; color:var(--marca-tinta); }
.t-lead{ font-size:14px; color:var(--tinta-2); line-height:1.45; margin:6px 0 18px; }
.t-lead{ max-width:68ch; }
.t-mini{ font-size:12px; color:var(--tinta-3); line-height:1.55; } .t-mini{ max-width:68ch; }
.t-etiqueta{ font-size:11px; font-weight:700; color:var(--marca-tinta-3); text-transform:uppercase; letter-spacing:.08em; margin:0 0 4px; }
.centro{ text-align:center; }
.t-mini-legible{ font-size:11px; color:var(--gris-600); line-height:1.6; }
.t-version-build{ text-align:center; margin:18px 0 0; opacity:.65; }
.campo{ margin-bottom:14px; }
.campo-rango-caja{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.campo-rango-caja .campo{ flex:1; min-width:110px; margin-bottom:0; }
.campo-rango-caja .btn-texto{ flex-shrink:0; min-width:44px; padding-bottom:14px; white-space:nowrap; }
#f-ciudad-otra{ margin-top:8px; }
#legal-borrado-pasos{ margin:6px 0 10px; padding-left:20px; display:grid; gap:6px; }
#btn-borrar-datos{ margin-top:4px; }
.campo label{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--marca-tinta-2); margin:0 0 6px 2px; }
.campo-ayuda{ font-size:12px; font-weight:500; color:var(--marca-tinta-3); }
.field-input{
width:100%;
min-height:46px;
padding:11px 14px;
border-radius:8px;
border:1px solid var(--linea);
font-size:16px;
line-height:1.3;
background:var(--hoja);
color:var(--tinta);
font-family:inherit;
box-shadow:0 1px 2px rgba(15,22,32,.04);
transition:border-color .15s ease, box-shadow .15s ease;
-webkit-appearance:none;
appearance:none;
}
.field-input::placeholder{ color:var(--tinta-3); opacity:.8; }
select.field-input{
padding-right:42px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233D4A5A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
background-size:16px 16px;
}
.field-input:focus{ outline:none; border-color:var(--azul-vivo); box-shadow:0 0 0 3px var(--azul-vivo-suave); background:var(--hoja); }
.field-input:invalid:not(:placeholder-shown):not(select){ border-color:var(--rojo); }
.field-input.campo-invalido{ border-color:var(--rojo); background:var(--rojo-suave); }
.field-input.campo-invalido:focus{ box-shadow:0 0 0 3px rgba(239,68,68,.14); }
.acepta{
display:flex; align-items:flex-start; gap:12px;
margin:12px 0 0;
padding:12px 14px;
background:var(--hoja-2);
border:1px solid var(--linea);
border-radius:8px;
}
.acepta span{ font-size:12px; color:var(--marca-tinta-2); line-height:1.6; }
.acepta .btn-texto{ color:var(--marca); }
.acepta input{
margin-top:2px;
width:20px; height:20px;
flex:0 0 20px;
accent-color:var(--marca);
cursor:pointer;
}
.acepta input.campo-invalido{ outline:2px solid var(--rojo); outline-offset:2px; border-radius:3px; }
.error-form{
display:none;
margin-top:10px;
font-size:12.5px;
font-weight:600;
color:var(--rojo);
max-width:68ch;
}
.error-form.visible{ display:block; }
.campo-error{ margin:6px 2px 0; font-size:12.5px; font-weight:600; color:var(--rojo); line-height:1.4; }
.oculto-visual{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.form-progreso{ display:flex; align-items:center; gap:12px; margin:-6px 0 18px; }
.form-progreso-barra{ flex:1; height:4px; border-radius:9999px; background:var(--marca-linea); overflow:hidden; }
.form-progreso-relleno{ height:100%; width:0; border-radius:9999px; background:var(--marca); transition:width .25s ease; }
.form-progreso-texto{ font-size:12px; font-weight:600; color:var(--marca-tinta-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.form-progreso.completo .form-progreso-relleno{ background:var(--exito); }
.form-progreso.completo .form-progreso-texto{ color:var(--exito); }
#datos-cliente-form-wrap > div:last-child{ padding-top:18px; }
.qr-caja{
padding:12px;
background:#fff;
border-radius:10px;
box-shadow:var(--sombra);
border:1px solid var(--linea);
display:inline-block;
}
.qr-fila{ display:flex; justify-content:center; margin:8px 0; }
#qr-svg{ display:block; }
.qr-toggle{ display:none; margin:18px auto 0; }
.cam-wrap{ position:relative; width:192px; height:192px; display:flex; align-items:center; justify-content:center; }
.cam-ring{ position:absolute; inset:0; border-radius:9999px; border:3px solid var(--grad-start); opacity:0; }
.cam-ring.pulsing{ animation:pulseRing 1.4s ease-out infinite; }
@keyframes pulseRing{
0%{ transform:scale(0.9); opacity:.9; }
70%{ transform:scale(1.35); opacity:0; }
100%{ transform:scale(1.35); opacity:0; }
}
.cam-circulo{
position:relative; z-index:10;
width:160px; height:160px;
border-radius:9999px;
background:var(--gris-50);
border:2px dashed var(--gris-300);
display:flex; align-items:center; justify-content:center;
overflow:hidden;
}
@property --p {
syntax: '<percentage>';
inherits: true;
initial-value: 0%;
}
.cam-progreso{
position:absolute;
inset:12px;
z-index:5;
border-radius:9999px;
background:conic-gradient(from -90deg, var(--grad-start) var(--p, 0%), transparent 0);
-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
transition:--p .5s ease;
}
.cam-progreso.completo{ background:conic-gradient(from -90deg, var(--verde) 100%, transparent 0); }
.check-pop{ animation:popIn .4s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes popIn{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
.oculto{ display:none !important; }
.spin-loader{
width:56px; height:56px;
border:3px solid var(--marca-linea);
border-top-color:var(--grad-start);
border-radius:50%;
animation:spin .8s linear infinite;
margin-bottom:24px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.fade-msg{ animation:msgFade .7s ease; }
@keyframes msgFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.sello{
width:68px; height:68px; border-radius:9999px;
display:flex; align-items:center; justify-content:center;
margin-bottom:14px;
}
.sello.ok{ background:var(--exito-suave); color:var(--exito); }
.sello.aviso{ background:var(--aviso-suave); color:var(--aviso); }
.badge-ok, .badge-aviso{
display:inline-block;
font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
padding:5px 11px; border-radius:9999px; margin:0 0 12px;
}
.badge-ok{ background:var(--exito-suave); color:var(--exito); }
.badge-aviso{ background:var(--aviso-suave); color:var(--aviso); }
.tipo-venta-badge{
display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; padding:5px 11px; border-radius:9999px; margin:0 8px 12px 0;
}
.tipo-venta-badge[data-tipo="Crédito"]{ background:var(--indigo-claro); color:var(--grad-start); }
.tipo-venta-badge[data-tipo="Contado"]{ background:var(--verde-claro); color:var(--verde); }
.contado-elegido{
display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
margin-top:8px; padding:12px 14px; border-radius:8px;
border:1.5px solid var(--verde); background:var(--verde-claro);
}
.contado-elegido-etq{
flex-basis:100%; font-size:10px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--verde);
}
.contado-elegido-nombre{ font-size:14px; font-weight:700; color:var(--gris-900); }
.contado-elegido-precio{ font-size:18px; font-weight:800; color:var(--verde); font-variant-numeric:tabular-nums; }
.contado-recargo-nota{ display:block; font-size:12.5px; color:var(--texto-2, #565b66); }
.sim-dato-valor.contado-precio{ color:var(--verde); }
.contado-vuelto{
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
margin:0 0 14px; padding:14px 16px; border-radius:8px;
border:1.5px solid var(--verde); background:var(--verde-claro);
}
.contado-vuelto[data-falta="1"]{ border-color:var(--aviso); background:var(--aviso-suave); }
.contado-vuelto-etq{
font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--verde);
}
.contado-vuelto[data-falta="1"] .contado-vuelto-etq{ color:var(--aviso); }
.contado-vuelto-monto{
font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
color:var(--verde);
}
.contado-vuelto[data-falta="1"] .contado-vuelto-monto{ color:var(--aviso); }
.contado-cuenta{
display:flex; flex-direction:column; gap:2px; margin:0 0 14px;
padding:12px 14px; border-radius:8px; background:var(--hoja-2); border:1px solid var(--filete); color:var(--tinta);
}
.contado-cuenta-num{
font-size:18px; font-weight:800; letter-spacing:.03em;
font-variant-numeric:tabular-nums; -webkit-user-select:all; user-select:all;
}
#cupo-recibido-banner{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin:0 0 14px; padding:12px 14px; border-radius:8px;
border:1.5px solid var(--aviso); background:var(--aviso-suave);
}
#cupo-recibido-texto{ margin:0; color:var(--aviso); font-weight:600; }
#btn-aceptar-cupo{ flex-shrink:0; }
#banner-suplantacion{
position:sticky; top:0; z-index:20;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:10px 14px; background:var(--rojo-solido); color:#fff;
}
#banner-suplantacion-texto{ margin:0; font-weight:700; font-size:13px; }
#btn-volver-super-admin{
flex-shrink:0; border:1.5px solid #fff; background:transparent; color:#fff;
border-radius:8px; padding:6px 12px; font:inherit; font-weight:700; cursor:pointer;
}
#btn-volver-super-admin:hover{ background:rgba(255,255,255,.15); }
#banner-suplantacion.dp-franja{ flex-wrap:wrap; background:var(--cc-cromo,#0a3340); box-shadow:inset 5px 0 0 var(--cc-cromo,#0a3340); }
#banner-suplantacion.dp-franja[data-dp-modo="mirar"]{ background:var(--u-alerta,#b26a00); box-shadow:inset 5px 0 0 var(--u-alerta,#b26a00); }
#banner-suplantacion .dp-modo{ display:inline-flex; align-items:stretch; border:1px solid rgba(255,255,255,.55); border-radius:9px; overflow:hidden; background:rgba(255,255,255,.1); flex:none; }
#banner-suplantacion .dp-modo-op,#banner-suplantacion .dp-modo-b{ display:inline-flex; align-items:center; gap:8px; padding:3px 14px; min-height:36px; border:0; border-radius:0; margin:0; font:inherit; font-size:14px; font-weight:700; white-space:nowrap; }
#banner-suplantacion .dp-modo-op{ background:var(--cc-cromo,#0a3340); color:#fff; }
#banner-suplantacion .dp-modo[data-dp-modo="mirar"] .dp-modo-op{ background:var(--u-alerta,#b26a00); }
#banner-suplantacion .dp-modo-b{ background:transparent; color:#fff; font-weight:500; cursor:pointer; }
#banner-suplantacion .dp-modo-b:hover{ background:rgba(255,255,255,.18); }
#banner-suplantacion .dp-modo-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left; }
#banner-suplantacion .dp-modo-sub{ font-size:11px; font-weight:500; opacity:.85; white-space:nowrap; }
#app-view[data-solo-mirando] #btn-continuar-1,#app-view[data-solo-mirando] #btn-emitir-contado,#app-view[data-solo-mirando] #btn-aceptar-cupo{ opacity:.45; cursor:not-allowed; }
@media (max-width:767px){ #banner-suplantacion .dp-modo-sub{ display:none; } #banner-suplantacion-texto{ flex-basis:100%; } }
@media (pointer:coarse){ #banner-suplantacion .dp-modo-op,#banner-suplantacion .dp-modo-b{ min-height:44px; } }
.tarjeta{
width:100%;
background:var(--hoja);
border:1px solid var(--linea);
border-radius:10px;
margin-bottom:14px;
text-align:left;
overflow:hidden;
box-shadow:var(--sombra);
}
.tarjeta.centro{ text-align:center; padding:16px; }
.tarjeta.centro .btn-texto{ display:inline-block; margin-top:10px; }
.tarjeta-cuerpo{ padding:16px 16px 14px; }
.tarjeta-cuerpo a{ color:var(--grad-start); text-decoration:underline; font-weight:600; }
.cupo-monto{ font-size:30px; font-weight:800; margin:0; }
.cupo-tarjeta{
width:100%;
border-radius:12px;
padding:22px 20px 18px;
margin-bottom:14px;
text-align:center;
color:#fff;
background:
radial-gradient(120% 90% at 100% 0%, rgba(var(--marca-rgb),.55) 0%, rgba(var(--marca-rgb),0) 55%),
linear-gradient(160deg, var(--cupo-fondo) 0%, var(--marca-osc) 100%);
box-shadow:0 16px 32px -20px rgba(15,22,32,.65);
}
.cupo-tarjeta-etq{ margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.cupo-tarjeta-monto{ margin:0; font-size:48px; line-height:1; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#fff; }
.cupo-tarjeta-monto .cupo-simbolo{ font-size:26px; font-weight:600; vertical-align:top; margin-right:2px; line-height:1.45; color:rgba(255,255,255,.85); }
.cupo-tarjeta .t-mini{ margin:12px 0 0; font-size:12.5px; color:rgba(255,255,255,.8); }
.cupo-tarjeta .btn-texto{
display:inline-block; margin-top:12px; padding:9px 14px;
border:1px solid rgba(255,255,255,.35); border-radius:9999px;
color:#fff; font-size:12.5px; font-weight:600; text-decoration:none;
background:rgba(255,255,255,.06);
}
.cupo-tarjeta .btn-texto:hover{ background:rgba(255,255,255,.14); }
.cupo-tarjeta .btn-texto:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.resultado-siguiente{ margin:2px 0 16px; }
#result-view:not(.oculto){ animation:fadeSlideIn .45s ease; }
@media (prefers-reduced-motion: reduce){ #result-view:not(.oculto){ animation:none; } }
.codigo-caja{
width:100%;
border:2px dashed var(--grad-start);
background:rgba(var(--marca-rgb),0.06);
border-radius:10px;
padding:16px;
margin-bottom:16px;
text-align:center;
}
.codigo-valor{ font-size:24px; font-weight:800; letter-spacing:.16em; margin:0; }
.mini-mapa{ height:160px; width:100%; }
.wa-caja{ width:100%; border:1px solid var(--linea); border-radius:10px; margin-bottom:14px; overflow:hidden; text-align:left; }
.wa-header{
background:var(--wa-verde);
padding:8px 14px;
display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.wa-remitente{
color:#fff; font-size:11px; font-weight:700;
display:flex; align-items:center; gap:6px;
min-width:0;
}
.wa-remitente span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wa-badge{
font-size:9px; font-weight:700; color:#fff; text-transform:uppercase;
background:rgba(255,255,255,.2);
padding:2px 6px; border-radius:4px; flex-shrink:0;
}
.wa-cuerpo{ background:var(--wa-fondo); padding:14px; }
.wa-burbuja{
display:inline-block;
background:var(--wa-burbuja);
border-radius:8px 8px 8px 8px;
border-top-left-radius:0;
padding:8px 12px;
font-size:12.5px;
color:var(--wa-texto);
box-shadow:0 1px 2px rgba(0,0,0,.12);
white-space:pre-line;
}
.wa-pie{ font-size:11.5px; color:var(--marca-tinta-3); padding:9px 14px; line-height:1.45; margin:0; }
.consulta-resultado{
width:100%;
border:1px solid var(--linea);
border-radius:10px;
padding:16px;
margin-top:16px;
text-align:left;
font-size:13px;
color:var(--gris-700);
line-height:1.6;
}
.consulta-resultado.vacio{ color:var(--gris-500); }
.aviso-local{
position:fixed; bottom:0; left:0; right:0;
z-index:50;
background:var(--hoja);
border-top:1px solid var(--linea);
border-radius:10px 10px 0 0;
box-shadow:0 -10px 30px -18px rgba(15,22,32,.45);
padding:12px 16px 14px;
display:none;
align-items:center;
gap:12px;
}
.aviso-local.visible{ display:flex; }
.aviso-local p{ font-size:12px; color:var(--marca-tinta-2); line-height:1.45; flex:1; margin:0; }
.aviso-local .btn-primary{ width:auto; min-height:0; font-size:13px; padding:10px 16px; border-radius:8px; flex-shrink:0; }
.overlay{
position:fixed; inset:0; z-index:60;
background:rgba(15,15,20,.55);
display:none;
align-items:center; justify-content:center;
padding:16px;
}
.overlay.visible{ display:flex; }
.modal{
background:var(--hoja);
border:1px solid var(--linea);
border-radius:10px;
max-width:28rem;
width:100%;
max-height:82vh;
overflow-y:auto;
padding:22px 20px 24px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.modal h3{ font-size:18px; font-weight:700; margin:0; color:var(--marca-tinta); letter-spacing:-.01em; }
.modal-cerrar{ border:0; background:none; color:var(--gris-400); padding:4px; line-height:0; flex-shrink:0; }
.modal-cerrar:hover{ color:var(--gris-700); }
.borrador{
display:block;
font-size:11.5px; font-weight:600; color:var(--aviso);
background:var(--aviso-suave); border:1px solid var(--ambar-linea); border-radius:8px; padding:9px 12px;
text-transform:none; letter-spacing:0; line-height:1.45;
margin:0 0 14px;
}
.modal-texto{ font-size:13px; color:var(--marca-tinta-2); line-height:1.65; }
.modal-texto p{ margin:0 0 12px; }
.cobranza-resaltada{ animation:cobranzaResaltado 1.6s ease; border-radius:14px; }
@keyframes cobranzaResaltado{
0%, 100% { box-shadow:none; }
15%, 55% { box-shadow:0 0 0 3px var(--grad-start); }
}
@media (prefers-reduced-motion: reduce){
.cobranza-resaltada{ animation:none; }
}
.bloque-sup{ padding:8px 0 16px; }
.bloque-final{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:12px; }
.bienvenida-notas{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.fila-derecha{ display:flex; justify-content:flex-end; margin:8px 0 0; }
.step-panel > form{ flex:1 0 auto; }
.step-panel > div:last-child > .btn-primary{ margin-top:0; }
#step-1 > div:last-child{ margin-top:auto; padding-top:24px; }
#step-5 > div:last-child{ margin-top:auto; padding-top:24px; }
#result-view{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
text-align:center;
}
#result-view .btn-secundario,
#result-view .btn-primary,
#result-view > p{ margin-bottom:14px; }
#result-view > h2{ margin:0 0 18px; font-size:22px; }
#result-view .btn-primary{ margin-bottom:0; }
.nombre-tienda{ font-size:15px; font-weight:700; color:var(--marca-tinta); margin:0 0 2px; }
.tarjeta .t-mini{ margin:0; }
#loading-view{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; min-height:320px; }
#consulta-resultado p{ margin:0 0 6px; }
#consulta-resultado .cupo-monto{ font-size:24px; }
body.con-aviso .pantalla{ padding-bottom:124px; }
body.con-aviso .barra-inicio{ margin-bottom:calc(var(--aviso-alto, 90px) + 12px); }
#home-screen{
flex:1;
display:flex;
flex-direction:column;
min-height:780px;
margin-top:-22px;
padding:22px 18px 18px;
background:
radial-gradient(120% 70% at 15% 0%, rgba(118,75,162,.85) 0%, rgba(118,75,162,0) 60%),
radial-gradient(110% 60% at 90% 25%, rgba(102,126,234,.75) 0%, rgba(102,126,234,0) 55%),
linear-gradient(160deg, #1b1b2f 0%, #22183a 45%, #101024 100%);
color:#fff;
}
#home-screen.oculto{ display:none; }
.hs-statusbar{
display:flex; align-items:center; justify-content:space-between;
padding:6px 8px 0;
font-size:14px; font-weight:600;
letter-spacing:.02em;
}
.hs-iconos{ display:flex; align-items:center; gap:5px; }
.hs-reloj{ text-align:center; padding:26px 0 30px; }
.hs-fecha{ margin:0; font-size:13px; font-weight:600; opacity:.85; }
.hs-hora-grande{ margin:2px 0 0; font-size:56px; font-weight:300; line-height:1.05; letter-spacing:-.02em; }
.hs-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px 12px;
}
.hs-app{
display:flex; flex-direction:column; align-items:center; gap:6px;
background:none; border:0; padding:0;
color:#fff;
text-align:center;
}
button.hs-app{ cursor:pointer; }
button.hs-app:active .hs-icono{ transform:scale(.9); }
.hs-icono{
width:56px; height:56px;
border-radius:15px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
overflow:hidden;
transition:transform .15s ease;
}
.hs-icono svg{ width:100%; height:100%; }
.hs-nombre{ font-size:10.5px; font-weight:500; line-height:1.15; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.hs-icono-credicellqr{ background:linear-gradient(150deg, var(--grad-start) 0%, var(--grad-end) 100%); }
.hs-icono-pendientes{ background:linear-gradient(150deg, #f59e0b 0%, var(--ambar) 100%); }
.hs-tel{ background:linear-gradient(150deg,#4ade80,var(--verde)); }
.hs-msg{ background:linear-gradient(150deg,#4ade80,#22c55e); }
.hs-cam{ background:linear-gradient(150deg,var(--gris-500),var(--gris-700)); }
.hs-fotos{ background:linear-gradient(150deg,#fff,var(--gris-200)); }
.hs-mapas{ background:linear-gradient(150deg,#34d399,#059669); }
.hs-reloj-i{ background:linear-gradient(150deg,var(--gris-700),var(--tinta)); }
.hs-notas{ background:linear-gradient(150deg,#fde68a,#fbbf24); }
.hs-cal{ background:linear-gradient(150deg,#fff,var(--gris-100)); }
.hs-clima{ background:linear-gradient(150deg,#60a5fa,#2563eb); }
.hs-calc{ background:linear-gradient(150deg,var(--gris-600),#1f2937); }
.hs-ajustes{ background:linear-gradient(150deg,var(--gris-400),var(--gris-600)); }
.hs-web{ background:linear-gradient(150deg,#93c5fd,#3b82f6); }
.hs-mus{ background:linear-gradient(150deg,#fb7185,#e11d48); }
.hs-puntos{ display:flex; justify-content:center; gap:6px; margin:auto 0 14px; padding-top:22px; }
.hs-punto{ width:6px; height:6px; border-radius:9999px; background:rgba(255,255,255,.35); }
.hs-punto.activo{ background:#FFF; }
.hs-dock{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
background:rgba(255,255,255,.16);
border-radius:24px;
padding:12px 10px;
}
.barra-inicio{
display:flex; align-items:center; justify-content:center; gap:6px;
width:auto; max-width:calc(100% - 48px); height:auto;
margin:0 auto 12px;
border:1px solid var(--linea); border-radius:999px;
padding:8px 18px;
background:var(--hoja);
color:var(--tinta-2);
font-size:12.5px; font-weight:600;
cursor:pointer;
flex-shrink:0;
}
.barra-inicio::before{ content:"←"; font-size:13px; }
.barra-inicio:hover{ border-color:var(--marca); color:var(--marca); }
.barra-inicio:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }
#app-view{ flex:1; display:flex; flex-direction:column; }
#app-view.oculto{ display:none; }
@keyframes abrirApp{
from{ opacity:0; transform:scale(.86); }
to{ opacity:1; transform:scale(1); }
}
#app-view.abriendo{ animation:abrirApp .32s cubic-bezier(.2,.8,.3,1); }
#pendientes-view{
flex:1;
display:flex;
flex-direction:column;
background:var(--gris-50);
min-height:780px;
}
#pendientes-view.oculto{ display:none; }
.pend-cabecera{
background:linear-gradient(150deg, #f59e0b 0%, var(--ambar) 100%);
color:#fff;
padding:26px 22px 20px;
}
.pend-titulo{ margin:0; font-size:22px; font-weight:800; line-height:1.15; }
.pend-intro{ margin:8px 0 0; font-size:12.5px; line-height:1.5; opacity:.95; }
.pend-leyenda{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.pend-chip{
font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
padding:4px 8px; border-radius:9999px;
background:rgba(255,255,255,.22);
}
.pend-chip.bloqueante{ background:#7f1d1d; }
.pend-chip.necesario{ background:#78350f; }
.pend-chip.despues{ background:rgba(255,255,255,.28); }
.pend-lista{ flex:1; padding:18px 18px 8px; overflow-y:auto; }
.pend-bloque{ margin-bottom:22px; }
.pend-bloque-titulo{ margin:0; font-size:15px; font-weight:800; color:var(--gris-900); }
.pend-bloque-resumen{ margin:4px 0 12px; font-size:12px; color:var(--gris-500); line-height:1.5; }
.pend-item{
background:var(--hoja);
border:1px solid var(--gris-200);
border-radius:14px;
padding:14px;
margin-bottom:10px;
}
.pend-item-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.pend-que{ margin:0; font-size:13.5px; font-weight:700; color:var(--gris-900); line-height:1.35; }
.pend-estado{
font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
padding:3px 7px; border-radius:9999px; flex-shrink:0; color:#fff; white-space:nowrap;
}
.pend-estado.bloqueante{ background:var(--rojo-solido); }
.pend-estado.necesario{ background:var(--ambar-solido); }
.pend-estado.despues{ background:var(--gris-400); }
.pend-campo{ margin:0 0 6px; font-size:11.5px; color:var(--gris-600); line-height:1.55; }
.pend-campo:last-child{ margin-bottom:0; }
.pend-campo b{ color:var(--gris-700); }
.pend-depende{
margin-top:8px; padding-top:8px;
border-top:1px dashed var(--gris-200);
font-size:11px; color:var(--gris-500);
}
.pend-resumen-final{
background:var(--hoja);
border:1px solid var(--gris-200);
border-radius:14px;
padding:14px;
margin-bottom:14px;
font-size:12px;
color:var(--gris-600);
line-height:1.6;
}
.pend-resumen-final b{ color:var(--gris-900); }
.pend-filtros{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.pend-filtro{
border:1px solid rgba(255,255,255,.45);
background:rgba(255,255,255,.12);
color:#fff;
font-size:11px; font-weight:700;
padding:6px 10px;
border-radius:9999px;
display:flex; align-items:center; gap:5px;
}
.pend-filtro.activo{ background:#FFF; color:#b45309; border-color:#FFF; }
.pend-filtro-n{
font-size:10px; font-weight:800;
background:rgba(0,0,0,.18);
border-radius:9999px;
padding:1px 6px;
}
.pend-filtro.activo .pend-filtro-n{ background:rgba(180,83,9,.15); }
.pend-resp{
display:inline-block;
margin:0 0 8px;
font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
padding:3px 8px; border-radius:9999px;
}
.pend-resp.nosotros{ background:var(--indigo-claro); color:var(--azul-vivo); }
.pend-resp.ellos{ background:var(--rojo-claro); color:var(--rojo); }
.pend-resp.ambos{ background:var(--verde-suave); color:var(--verde); }
.pend-bloque.oculto, .pend-item.oculto{ display:none; }
.tarjeta-modo{
display:flex; align-items:flex-start; gap:14px;
width:100%;
text-align:left;
background:var(--hoja);
border:1px solid var(--linea);
border-radius:10px;
padding:16px;
margin-bottom:12px;
box-shadow:var(--sombra);
transition:border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.tarjeta-modo:hover{ border-color:var(--azul-vivo); transform:translateY(-1px); }
.tarjeta-modo:active{ transform:scale(.985); }
.modo-icono{
width:44px; height:44px; flex-shrink:0;
border-radius:10px;
display:flex; align-items:center; justify-content:center;
}
.modo-icono-cliente{ background:var(--azul-vivo-suave); color:var(--azul-vivo); }
.modo-icono-tienda{ background:var(--ambar-suave); color:var(--ambar); }
.modo-texto{ display:flex; flex-direction:column; gap:3px; }
.modo-titulo{ font-size:15px; font-weight:600; color:var(--tinta); }
.modo-desc{ font-size:13px; color:var(--marca-tinta-2); line-height:1.45; }
.vendedor-pregunta{
margin:8px 0 12px;
font-size:16px; font-weight:800; color:var(--gris-900);
}
.lista-vendedores{
display:flex; flex-direction:column; gap:10px;
margin:0 0 14px;
}
.vendedor-tarjeta{
display:flex; align-items:center; gap:14px;
width:100%; min-height:68px;
padding:12px 14px 12px 12px;
text-align:left;
background:var(--hoja);
border:1px solid var(--linea);
border-radius:10px;
box-shadow:var(--sombra);
color:var(--tinta);
transition:border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.vendedor-tarjeta:hover{ border-color:var(--azul-vivo); }
.vendedor-tarjeta:active{ transform:scale(.985); }
.vendedor-tarjeta:focus-visible{ outline:2px solid var(--grad-start); outline-offset:2px; }
.vendedor-avatar{
width:44px; height:44px; flex:0 0 44px;
border-radius:9999px;
display:flex; align-items:center; justify-content:center;
font-size:19px; font-weight:800; line-height:1;
text-transform:uppercase;
}
.vendedor-avatar svg{ width:22px; height:22px; }
.vendedor-tarjeta[data-tono="1"] .vendedor-avatar{ background:var(--indigo-claro); color:var(--azul-vivo); }
.vendedor-tarjeta[data-tono="2"] .vendedor-avatar{ background:var(--verde-claro); color:var(--verde); }
.vendedor-tarjeta[data-tono="3"] .vendedor-avatar{ background:var(--ambar-claro); color:var(--ambar); }
.vendedor-nombre{
flex:1 1 auto; min-width:0;
font-size:16px; font-weight:700; color:var(--gris-900);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vendedor-flecha{
flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:9999px;
background:var(--gris-100); color:var(--gris-500);
transition:background .18s ease, color .18s ease;
}
.vendedor-tarjeta:hover .vendedor-flecha{ background:var(--indigo-claro); color:var(--grad-start); }
@media (prefers-reduced-motion: reduce){
.vendedor-tarjeta, .vendedor-flecha{ transition:none; }
}
.aviso-simulado{
display:flex; flex-direction:column; gap:8px;
background:var(--ambar-suave);
border:1px solid var(--ambar-linea);
border-radius:10px;
padding:14px;
margin-bottom:16px;
}
.aviso-simulado p{ margin:0; font-size:12px; color:var(--ambar); line-height:1.55; }
.badge-simulado{
align-self:flex-start;
font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
background:var(--ambar-solido); color:#fff;
padding:3px 8px; border-radius:9999px;
}
.local-item{
display:flex; align-items:center; justify-content:space-between; gap:10px;
width:100%; text-align:left;
background:var(--hoja);
border:1px solid var(--linea);
border-radius:10px;
box-shadow:var(--sombra);
padding:13px 14px;
margin-bottom:8px;
}
.local-item:hover{ border-color:var(--grad-start); }
.local-nombre{ font-size:13px; font-weight:700; color:var(--gris-900); }
.local-ciudad{ font-size:11.5px; color:var(--gris-500); }
.local-estado{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.local-estado.abierta{ color:var(--verde); }
.local-estado.cerrada{ color:var(--rojo); }
.banner-tienda{
display:flex; flex-direction:column; gap:6px;
background:var(--ambar-suave);
border:1px solid var(--ambar-linea);
border-radius:8px;
padding:9px 12px;
margin-bottom:14px;
font-size:12px;
color:var(--ambar);
font-weight:600;
}
.banner-tienda.oculto{ display:none; }
.banner-tienda-fila{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.banner-tienda-etq{
font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
background:var(--ambar-solido); color:#fff;
padding:3px 7px; border-radius:9999px;
flex-shrink:0;
}
.banner-tienda-sync{
display:flex; align-items:center; gap:5px;
font-size:10px; font-weight:700;
color:var(--ambar);
}
.banner-tienda-sync-punto{
width:6px; height:6px; border-radius:9999px;
background:var(--ambar); flex-shrink:0;
}
.banner-tienda-sync.sincronizado{ color:var(--verde); opacity:1; }
.banner-tienda-sync.sincronizado .banner-tienda-sync-punto{
background:var(--verde);
animation:puntoSyncVivo 2s ease-in-out infinite;
}
@keyframes puntoSyncVivo{
0%, 100%{ box-shadow:0 0 0 0 rgba(16,185,129,.5); }
50%{ box-shadow:0 0 0 3px rgba(16,185,129,0); }
}
@media (prefers-reduced-motion: reduce){
.banner-tienda-sync.sincronizado .banner-tienda-sync-punto{ animation:none; }
}
.banner-tienda-sync.sin-conexion{ color:var(--rojo); opacity:1; }
.banner-tienda-sync.sin-conexion .banner-tienda-sync-punto{
background:var(--rojo);
animation:puntoSyncCaido 1.4s ease-in-out infinite;
}
@keyframes puntoSyncCaido{
0%, 100%{ opacity:1; }
50%{ opacity:.35; }
}
@media (prefers-reduced-motion: reduce){
.banner-tienda-sync.sin-conexion .banner-tienda-sync-punto{ animation:none; }
}
.pend-decisiones{
background:var(--verde-suave);
border:1px solid var(--verde);
border-radius:14px;
padding:14px;
margin-bottom:14px;
text-align:left;
}
.pend-decisiones .t-etiqueta{ color:var(--verde); }
.pend-decision{ margin:0 0 6px; font-size:11.5px; color:var(--verde); line-height:1.5; }
.pend-decision:last-child{ margin-bottom:0; }
.pend-pregunta{
margin-top:10px;
background:rgba(var(--marca-rgb),.07);
border:1px solid rgba(var(--marca-rgb),.25);
border-radius:12px;
padding:11px 12px;
}
.pend-pregunta-txt{ margin:0; font-size:12px; font-weight:700; color:var(--gris-900); line-height:1.45; }
.pend-opciones{ margin:8px 0 0; padding-left:0; list-style:none; }
.pend-opciones li{
font-size:11.5px; color:var(--gris-600); line-height:1.5;
padding-left:20px; position:relative; margin-bottom:4px;
}
.pend-opciones li::before{
content:''; position:absolute; left:0; top:3px;
width:12px; height:12px; border:1.5px solid var(--gris-300); border-radius:3px;
}
.pend-opciones-dato{ margin:8px 0 0; font-size:11.5px; color:var(--gris-500); font-style:italic; }
#pendientes-view{ flex:0 0 780px; height:780px; }
.pend-lista{ min-height:0; }
@media (max-width:600px){
#pendientes-view{ flex:0 0 100vh; height:100vh; }
}
.pos-busqueda label{ font-size:12px; font-weight:600; color:var(--gris-600); display:block; margin-bottom:8px; }
.pos-busqueda-fila{ display:flex; gap:12px; }
.pos-cedula-input{
flex:1; padding:14px 16px; letter-spacing:0.05em;
}
.pos-busqueda-fila .btn-primary{ width:auto; flex:0 0 auto; padding:0 28px; }
#pos-aviso{ margin-top:10px; margin-bottom:0; }
.pos-resultado{ width:100%; }
.historial-cupos{ margin-top:14px }
.historial-item{
border-left:4px solid var(--linea, var(--marca-linea));
padding:9px 0 9px 12px; margin:8px 0;
}
.historial-item p{ margin:2px 0 }
.historial-cabecera{ font-weight:600 }
.historial-estado{ font-weight:600 }
.historial-vivo{ border-left-color:var(--exito) }
.historial-vivo .historial-estado{ color:var(--exito) }
.historial-vencido{ border-left-color:var(--aviso) }
.historial-vencido .historial-estado{ color:var(--aviso) }
.historial-usado{ border-left-color:var(--marca-tinta-3) }
.historial-usado .historial-estado{ color:var(--marca-tinta-3) }
.js-reverificar{ margin-top:10px; width:auto; padding:.55rem 1rem }
.mensajes-listos{ margin-top:14px }
.mensajes-fila{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 }
.mensaje-listo{ width:auto; min-height:40px; padding:.5rem .9rem; margin:0 }
.marca-obra{
position:fixed; inset:0; z-index:9000;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:.35em; padding:0 6vw;
pointer-events:none; user-select:none; -webkit-user-select:none;
overflow:hidden; transform:rotate(-22deg);
}
.marca-obra p{
margin:0; text-align:center; color:var(--marca-tinta); opacity:.07;
text-transform:uppercase; letter-spacing:.08em; font-weight:800; line-height:1.08;
}
.marca-obra-titulo{ font-size:clamp(26px, 8vw, 96px) }
.marca-obra-pie{ font-size:clamp(12px, 2.8vw, 20px); letter-spacing:.16em; line-height:1.4;
opacity:.10;
max-width:min(62vw, 560px) }
.centro .t-lead, .centro .t-mini,
.t-lead.centro, .t-mini.centro,
.cupo-tarjeta .t-mini,
.tarjeta.centro .t-mini{ margin-left:auto; margin-right:auto; }
#paso-vendedor-turno > label.t-mini{ display:block; font-size:13px; font-weight:600; color:var(--marca-tinta-2); margin:0 0 6px 2px; }
#aviso-vendedor-turno:empty{ display:none; }
@media (min-width:768px){
.phone-shell{ max-width:744px; padding:20px 12px 28px; }
#step-0 .necesitas-item{ flex:0 1 auto; }
.pantalla{ padding:28px 32px 32px; }
.filtro-fila--pareja{
grid-template-columns:repeat(auto-fill, minmax(150px, max-content));
justify-items:start;
}
.filtro-fila--pareja .filtro-chip:last-child:nth-child(odd){ grid-column:auto; }
#form-datos{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px 16px;
}
#form-datos>.campo{ margin-bottom:0; }
.campo-ancho{ grid-column:1 / -1; }
.lista-tarjetas, .pos-resultado{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
gap:8px;
}
.lista-tarjetas .local-item, .pos-resultado .local-item{ margin-bottom:0; }
#step-8 > .aviso-simulado, #step-8 > #paso-codigo-tienda, #step-8 > #paso-pin-operador,
#step-8 > #paso-vendedor-turno, #step-8 > .bloque-final{
width:100%; max-width:560px; margin-left:auto; margin-right:auto;
}
.acciones-tienda-fila{
grid-template-columns:repeat(auto-fit, minmax(126px, 1fr));
gap:10px;
}
.banner-tienda{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.banner-tienda-fila{ flex:1 1 auto; min-width:0; }
.banner-tienda-sync{ flex-shrink:0; }
.tarjeta--mapa{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.tarjeta--mapa .tarjeta-cuerpo{ align-self:center; }
.tarjeta--mapa .mini-mapa{ height:auto; min-height:190px; }
.wa-burbuja{ max-width:560px; }
.necesitas{ flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:28px; row-gap:10px; }
.necesitas-titulo{ flex:0 0 100%; }
.necesitas-item{ flex:1 1 260px; }
#form-datos > .acepta{ grid-column:1 / -1; }
#form-datos > .bloque-permisos{ grid-column:1 / -1; }
#form-datos:has(#campoCiudadWrap.oculto) > .campo-ancho{ grid-column:auto; }
}
@media (min-width:1024px){
#step-0 h1.t-titulo, #step-8 .bloque-sup .t-titulo, #titulo-datos{ font-size:22px; }
#step-0 .bloque-final .btn-primary, #datos-cliente-form-wrap .btn-primary,
#datos-cliente-form-wrap .btn-secundario,
#result-view .btn-primary, #result-view .acciones-duo{ max-width:520px; margin-left:auto; margin-right:auto; }
.cupo-tarjeta{ padding:26px 24px 22px; }
.cupo-tarjeta-monto{ font-size:56px; }
.cam-wrap{ width:232px; height:232px; }
.cam-circulo{ width:196px; height:196px; }
.cam-circulo svg{ width:88px; height:88px; }
#qr-svg{ width:288px; height:288px; }
.phone-shell{ max-width:920px; padding:24px 16px 32px; }
.pantalla{ padding:32px 40px 36px; }
#step-0.active{
display:grid;
grid-template-columns:minmax(0,1fr) 340px;
align-items:center;
column-gap:36px;
}
#step-0.active > .col-portada{
display:flex;
flex-direction:column;
min-width:0;
}
#step-0 .col-portada > .bloque-sup{ text-align:left; }
#step-0 .col-portada > .guia{ justify-content:flex-start; margin:22px 0 14px; }
#step-0 .col-portada > .necesitas{ justify-content:flex-start; margin-top:0; }
#step-0.active > .bloque-final{
margin-top:0;
padding-top:0;
justify-content:flex-start;
}
#step-0 .bloque-final .btn-primary{ max-width:none; }
#step-0 .qr-caja{ margin-left:auto; margin-right:auto; }
.phone-shell{ flex:0 1 auto; justify-content:flex-start; }
.pantalla{ flex:0 1 auto; }
}
@media (min-width:1400px){
.phone-shell{ max-width:1080px; }
#step-0.active{ grid-template-columns:minmax(0,1fr) 380px; column-gap:48px; }
#qr-svg{ width:320px; height:320px; }
}
@media print{ .marca-obra{ display:none } }
.aviso-simulado,.badge-simulado,.wa-badge{display:none !important}
#step-8.desde-puerta .t-lead{display:none}
.cupo-tarjeta-codigo{margin:4px 0 6px;font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--tinta)}
.ultimo-cupo{margin:0 0 14px;padding:12px 14px;border:1px solid var(--linea);border-left:4px solid var(--azul-vivo);border-radius:8px;background:var(--hoja-2)}
.ultimo-cupo-linea{margin:4px 0 6px;font-size:15px;font-weight:600;color:var(--tinta)}
.franja-muestra{margin:0 0 12px;padding:8px 12px;border-radius:8px;background:var(--ambar-suave);color:var(--ambar);border:1px solid var(--ambar-linea);font-size:12.5px;line-height:1.45}
.cabecera-mostrador{ background:var(--rail); color:var(--rail-texto); min-height:52px; padding:0 16px; flex:0 0 auto; }
.cabecera-mostrador .dentro{ max-width:720px; margin:0 auto; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cabecera-mostrador h1{ margin:0; min-width:0; display:flex; align-items:center; gap:10px; font:700 15px/1 var(--fuente); letter-spacing:.06em; text-transform:uppercase; color:var(--blanco); }
.cabecera-mostrador .cc-topbar__inicio{ display:flex; align-items:center; flex:none; color:inherit; }
.cabecera-mostrador .cc-topbar__inicio:focus-visible{ outline:2px solid var(--azul-vivo); outline-offset:2px; border-radius:6px; }
.cabecera-mostrador .h1-sub{ font:600 12px/1 var(--fuente); letter-spacing:.06em; text-transform:uppercase; color:var(--rail-texto); padding-left:12px; margin-left:2px; border-left:1px solid rgba(255,255,255,.2); white-space:nowrap; }
.h1-sub-tienda{ display:none; }
body:has(#step-8.desde-puerta) .h1-sub-cliente,
body:has(#banner-tienda:not(.oculto)) .h1-sub-cliente{ display:none; }
body:has(#step-8.desde-puerta) .h1-sub-tienda,
body:has(#banner-tienda:not(.oculto)) .h1-sub-tienda{ display:inline; }
.cabecera-mostrador .secundario{
display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 12px;
border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08);
color:var(--blanco); font:500 13px/1 var(--fuente); cursor:pointer; flex:0 0 auto;
}
.cabecera-mostrador .secundario:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.2); }
.cabecera-mostrador .secundario:focus-visible{ outline:2px solid var(--azul-vivo); outline-offset:2px; }
.cabecera-mostrador .secundario .ic{ width:15px; height:15px; color:var(--rail-texto); }
.btn-tema .ic-sol{ display:none; }
html[data-tema="oscuro"] .btn-tema .ic-sol{ display:inline-block; }
html[data-tema="oscuro"] .btn-tema .ic-luna{ display:none; }
@media (prefers-color-scheme:dark){
html:not([data-tema]) .btn-tema .ic-sol{ display:inline-block; }
html:not([data-tema]) .btn-tema .ic-luna{ display:none; }
}
.ayuda-mas{ margin:0 0 12px; }
.ayuda-mas summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:2px 0; font:600 12px/1.3 var(--fuente); color:var(--azul-vivo); }
.ayuda-mas summary::-webkit-details-marker{ display:none; }
.ayuda-mas summary::before{ content:'?'; display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; font-size:10px; line-height:1; }
.ayuda-mas summary:focus-visible{ outline:2px solid var(--azul-vivo); outline-offset:2px; border-radius:4px; }
.ayuda-mas[open] summary{ margin-bottom:6px; }
.ayuda-mas .t-mini{ margin:0 0 6px; }
.ayuda-mas .t-mini:last-child{ margin-bottom:0; }
.bienvenida-notas.ayuda-mas{ margin-top:16px; display:block; text-align:center; }
.bienvenida-notas.ayuda-mas .t-mini{ margin-left:auto; margin-right:auto; }
.step-panel > form{ flex:0 0 auto; }
.acepta .btn-texto{ color:var(--azul-vivo); }
.btn-texto{ color:var(--tinta-3); }
.pos-busqueda label{ color:var(--tinta-2); }
@media (prefers-color-scheme:dark){
html:not([data-tema="claro"]) select.field-input{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B6C3D3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
}
html[data-tema="oscuro"] select.field-input{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B6C3D3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media (max-width:600px){
.cabecera-mostrador h1{ flex-wrap:wrap; row-gap:4px; font-size:14px; }
.cabecera-mostrador .h1-sub{ flex:0 0 100%; padding-left:40px; margin-left:0; border-left:0; font-size:11px; }
.cabecera-mostrador .secundario{ padding:0 9px; }
.pantalla{ padding:18px 14px 22px; }
}
@media (max-width:767px){
}
@media (prefers-color-scheme:dark){
html:not([data-tema="claro"]){
--fondo:#0E1622; --hoja:#172234; --hoja-2:#1D2A3E;
--linea:#2B3A50; --filete:#243349;
--tinta:#E6EDF5; --tinta-2:#B6C3D3; --tinta-3:#8B9AAE; --navy-900:#E6EDF5;
--rail:#0A1420; --rail-2:#15243A; --rail-texto:#A9B8CA;
--azul-suave:#10303a; --azul-vivo-suave:#0f2a33; --azul-vivo-osc:#2f9fb8; --marca-osc:#5cc3d9;
--verde:#3DAF86; --verde-suave:#153A2E;
--ambar:#E0A04A; --ambar-suave:#3D2A10; --ambar-linea:rgba(224,160,74,.35);
--naranja:#F08A4B; --naranja-suave:#3D2414;
--rojo:#F26D7D; --rojo-suave:#3A1A22;
--gris-medio:#7B8A9E; --cupo-fondo:#0B1A2B;
--sombra:0 1px 2px rgba(0,0,0,.4),0 8px 22px -14px rgba(0,0,0,.7);
--wa-fondo:#0B141A; --wa-burbuja:#1F2C34; --wa-texto:#E6EDF5;
color-scheme:dark;
}
}
html[data-tema="oscuro"]{
--fondo:#0E1622; --hoja:#172234; --hoja-2:#1D2A3E;
--linea:#2B3A50; --filete:#243349;
--tinta:#E6EDF5; --tinta-2:#B6C3D3; --tinta-3:#8B9AAE; --navy-900:#E6EDF5;
--rail:#0A1420; --rail-2:#15243A; --rail-texto:#A9B8CA;
--azul-suave:#10303a; --azul-vivo-suave:#0f2a33; --azul-vivo-osc:#2f9fb8; --marca-osc:#5cc3d9;
--verde:#3DAF86; --verde-suave:#153A2E;
--ambar:#E0A04A; --ambar-suave:#3D2A10; --ambar-linea:rgba(224,160,74,.35);
--naranja:#F08A4B; --naranja-suave:#3D2414;
--rojo:#F26D7D; --rojo-suave:#3A1A22;
--gris-medio:#7B8A9E; --cupo-fondo:#0B1A2B;
--sombra:0 1px 2px rgba(0,0,0,.4),0 8px 22px -14px rgba(0,0,0,.7);
--wa-fondo:#0B141A; --wa-burbuja:#1F2C34; --wa-texto:#E6EDF5;
color-scheme:dark;
}
html[data-tema="claro"]{ color-scheme:light; }
@media (max-width:767px){
.cabecera-mostrador{ position:sticky; top:0; z-index:50; }
.acciones-tienda-fila:not(.oculto){
position:fixed; left:0; right:0; bottom:0; z-index:40;
display:flex; gap:0; margin:0; padding:0 2px env(safe-area-inset-bottom);
background:var(--rail); border-top:1px solid var(--rail-linea);
box-shadow:0 -6px 24px -14px rgba(0,0,0,.55);
}
.acciones-tienda-fila:not(.oculto) .accion-tienda-btn{
flex:1 1 0; min-width:0; min-height:58px; flex-direction:column; justify-content:center; gap:4px;
padding:8px 2px 6px; border:0; border-radius:0; background:transparent; box-shadow:none;
color:var(--rail-texto); font-size:10.5px; font-weight:500; line-height:1; text-align:center; white-space:nowrap; transform:none;
}
.acciones-tienda-fila:not(.oculto) .accion-tienda-btn svg{ width:26px; height:26px; padding:0; background:transparent; stroke:currentColor; border-radius:0; }
.acciones-tienda-fila:not(.oculto) .accion-tienda-btn.activo{ background:transparent; border:0; color:#FFFFFF; position:relative; }
.acciones-tienda-fila:not(.oculto) .accion-tienda-btn.activo svg{ background:transparent; stroke:var(--azul-vivo); }
.acciones-tienda-fila:not(.oculto) .accion-tienda-btn.activo::after{ content:''; position:absolute; left:50%; bottom:2px; width:18px; height:3px; border-radius:2px; background:var(--azul-vivo); transform:translateX(-50%); }
.acciones-tienda-fila:not(.oculto) .accion-tienda-badge{ top:4px; right:auto; left:calc(50% + 6px); border-color:var(--rail); }
body:has(.acciones-tienda-fila:not(.oculto)) .phone-shell,
body:has(.acciones-tienda-fila:not(.oculto)) .step-panel.active{ transform:none; }
body:has(.acciones-tienda-fila:not(.oculto)) .phone-shell{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
body:has(.acciones-tienda-fila:not(.oculto)) .aviso-local{ bottom:calc(66px + env(safe-area-inset-bottom)); z-index:39; }
.acciones-tienda-fila:not(.oculto) #btn-venta-contado svg{ background:transparent; stroke:currentColor; }
.acciones-tienda-fila:not(.oculto) #btn-venta-contado.activo svg{ stroke:var(--azul-vivo); }
.acciones-tienda-fila:not(.oculto) #btn-venta-contado.activo,.acciones-tienda-fila:not(.oculto) #btn-venta-contado{ background:transparent; border:0; box-shadow:none; }
}
@media (max-width:767px){
.cabecera-mostrador #btn-tema{ width:44px; height:44px; min-width:44px; min-height:44px; border-radius:12px; }
.cabecera-mostrador #btn-tema svg{ width:20px; height:20px; }
#btn-volver-home,#btn-aceptar-local{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.ayuda-mas > summary{ min-height:44px; display:flex; align-items:center; }
input[type="checkbox"]{ width:22px; height:22px; }
label:has(> input[type="checkbox"]){ min-height:44px; display:flex; align-items:flex-start; gap:10px; }
}
.caja-anular{margin:18px 0 0;padding:14px;border:1px dashed var(--linea);border-radius:10px;background:var(--hoja-2)}
.caja-anular .t-mini{margin:0 0 10px}
.caja-anular .btn-secundario{width:auto;margin:0;min-height:44px}
.datos-cuenta {
margin: 0.6rem 0 0.2rem;
padding: 0.7rem 0.85rem;
border-radius: 10px;
border: 1px solid var(--linea, rgba(127, 127, 127, 0.28));
background: var(--fondo-suave, rgba(127, 127, 127, 0.07));
}
.datos-cuenta .nombre-tienda { margin: 0.15rem 0 0.25rem; }
.cuenta-numero {
margin: 0 0 0.25rem;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
user-select: all;
}
.zona-cuenta:empty { display: none; }
#salida-sin-internet{
position:fixed; inset:0; z-index:90;
background:rgba(15,15,20,.62);
display:flex; align-items:center; justify-content:center;
padding:16px;
}
.salida-sin-internet-caja{
background:var(--hoja);
border:1px solid var(--linea);
border-radius:10px;
box-shadow:var(--sombra);
max-width:26rem; width:100%;
padding:22px 20px 20px;
text-align:left;
}
.salida-sin-internet-caja h2{
margin:0 0 10px; font-size:19px; line-height:1.25; color:var(--tinta);
}
.salida-sin-internet-caja p{
margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--tinta-2);
}
.salida-sin-internet-grave{
background:var(--rojo-suave);
border-left:3px solid var(--rojo);
border-radius:6px;
padding:11px 13px;
color:var(--rojo) !important;
font-weight:600;
}
.salida-sin-internet-caja .btn{ width:100%; }
.caso-revisar{border:1px solid var(--linea);border-radius:var(--r-hoja);
background:var(--hoja);padding:14px 15px;margin:0 0 12px;box-shadow:var(--sombra)}
.caso-cabecera{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.caso-codigo{font:600 13px/1 var(--mono);letter-spacing:.04em;color:var(--tinta-3)}
.caso-espera{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
background:var(--ambar-suave);color:var(--ambar);font:600 var(--t-meta)/1.5 var(--fuente);white-space:nowrap}
.caso-espera::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.caso-cliente{margin:0 0 8px;font:600 17px/1.25 var(--fuente);color:var(--tinta)}
.caso-motivo{margin:0 0 3px;font:400 14px/1.4 var(--fuente);color:var(--tinta)}
.caso-quehacer{margin:0 0 10px;font:400 13px/1.45 var(--fuente);color:var(--tinta-3)}
.caso-etiqueta{display:block;margin:0 0 5px;font:600 var(--t-meta)/1.4 var(--fuente);color:var(--tinta-2)}
.caso-codigo-campo{width:100%;padding:11px 12px;border:1px solid var(--linea);
border-radius:var(--r-control);background:var(--hoja-2);color:var(--tinta);
font:400 15px/1.2 var(--fuente);margin:0 0 11px}
.caso-codigo-campo:focus{outline:2px solid var(--azul-vivo);outline-offset:1px;border-color:var(--azul-vivo)}
.caso-botones{display:flex;gap:9px}
.caso-botones button{flex:1;min-height:44px}
.caso-aviso{margin:9px 0 0;min-height:18px;font:400 13px/1.4 var(--fuente);color:var(--tinta-3)}
.insignia-casos{display:inline-flex;align-items:center;justify-content:center;
min-width:19px;height:19px;padding:0 5px;margin-left:5px;border-radius:999px;
background:var(--ambar-solido);color:#fff;font:700 11px/1 var(--fuente)}
.acepta-aparte{margin-top:16px;padding:12px 14px 13px;
border:1px dashed var(--gris-medio);border-radius:var(--r-hoja);
background:var(--hoja)}
.acepta-aparte input{accent-color:var(--azul-vivo)}
.acepta-aparte{flex-wrap:wrap}
.acepta-aparte > span{flex:1 1 0;min-width:0}
.acepta-aparte::before{content:'TERMINA AQUÍ MISMO';
flex:0 0 100%; order:-1; margin:0 0 9px;
font:700 10px/1 var(--fuente);letter-spacing:.08em;
color:var(--azul-vivo)}
.nota-camara strong{color:var(--tinta-2);font-weight:600}
.legal-mas{margin:-2px 0 0 2px}
.legal-mas > summary{display:inline-flex;align-items:center;gap:5px;
padding:5px 2px;cursor:pointer;list-style:none;
font:600 var(--t-meta)/1.4 var(--fuente);color:var(--azul-vivo)}
.legal-mas > summary::-webkit-details-marker{display:none}
.legal-mas > summary::after{content:'';width:5px;height:5px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease}
.legal-mas[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.legal-mas > summary:focus-visible{outline:2px solid var(--azul-vivo);
outline-offset:2px;border-radius:4px}
.legal-mas > p{margin:2px 0 0;padding:0 2px 4px;
font:400 var(--t-meta)/1.55 var(--fuente);color:var(--tinta-3)}
.legal-mas > p strong{color:var(--tinta-2);font-weight:600}
@media (prefers-reduced-motion:reduce){
.legal-mas > summary::after{transition:none}
}
.nota-camara{margin:7px 0 0;padding-left:2px;
font:400 var(--t-meta)/1.5 var(--fuente);color:var(--tinta-3)}
.result-card.pendiente{border-left:3px solid var(--ambar)}
.codigo-espera{margin:4px 0 14px;padding:13px 16px;border:1px solid var(--linea);
border-radius:var(--r-hoja);background:var(--hoja-2);color:var(--tinta);
font:700 26px/1.2 var(--mono);letter-spacing:.08em;text-align:center;user-select:all}
.t-titulo, h1, h2{ letter-spacing:-.022em; }
.t-lead{ letter-spacing:-.012em; }
.t-mini, label, .campo-label{ letter-spacing:0; }
input[type="tel"], input[inputmode="numeric"], .plata, .monto, .cupo-cifra,
.codigo, .t-cifra, table td{ font-variant-numeric:tabular-nums; }
@media (max-width:599px){
#qr-svg{ width:162px; height:162px; }
.qr-caja{ padding:9px; }
.qr-fila{ margin:2px 0; }
.qr-bloque .t-mini{ margin-bottom:2px; }
}
@media (max-width:599px) and (max-height:880px){
#qr-svg{ width:130px; height:130px; }
.qr-caja{ padding:7px; }
.qr-fila{ margin:0; }
#step-0 .t-lead{ margin-bottom:12px; }
#step-0 .t-mini{ margin-top:8px; }
}
@media (max-width:599px) and (max-height:740px){
#qr-svg{ width:136px; height:136px; }
.qr-caja{ padding:6px; }
#step-0 .t-lead{ margin-bottom:8px; }
#step-0 .guia{ margin-top:12px; margin-bottom:6px; }
#step-0 .necesitas{ margin-top:10px; }
#step-0 .t-mini{ margin-top:4px; margin-bottom:6px; }
.bloque-final{ padding-top:12px; gap:8px; }
.qr-fila{ margin:0; }
}
@media (max-width:599px) and (max-height:740px){
.bloque-final{ padding-top:10px; }
#step-0 .centro{ padding-top:4px; }
#step-0 .centro > :first-child{ margin-bottom:8px; }
#step-0 .necesitas{ padding-top:10px; padding-bottom:10px; }
}
@media (max-width:599px) and (max-height:680px){
#qr-svg{ width:116px; height:116px; }
.qr-caja{ padding:5px; }
#step-0 .centro{ padding-top:0; }
#step-0 .centro > :first-child{ margin-bottom:4px; }
#step-0 .t-lead{ margin-top:2px; margin-bottom:4px; }
#step-0 .guia{ margin-top:6px; margin-bottom:2px; }
#step-0 .necesitas{ margin-top:6px; padding-top:8px; padding-bottom:8px; }
.bloque-final{ padding-top:6px; gap:6px; }
}
.bloque-permisos{
margin:16px 0 0;
padding:12px 14px;
border:1px solid var(--linea);
border-radius:10px;
background:var(--hoja-2);
min-width:0;
}
.bloque-permisos > legend{
float:left;
width:100%;
margin:0 0 2px;
padding:0;
font-size:11px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--tinta-3);
}
.bloque-permisos > legend + *{ clear:both; }
.bloque-permisos .acepta{
margin:0;
padding:12px 0;
background:none;
border:0;
border-radius:0;
}
.bloque-permisos .acepta ~ .acepta{ border-top:1px solid var(--linea); }
.bloque-permisos .legal-mas{ margin:0 0 4px; }
#btn-en-local-1{ margin-top:10px; }
#nota-en-local{
margin:8px auto 0;
max-width:40ch;
text-align:center;
}
#app-view .pantalla{ padding-bottom:84px; }
#btn-volver-home{
position:relative;
margin-top:-68px;
}
#app-view.sin-barra-inicio > #btn-volver-home{ display:none; }
#app-view.sin-barra-inicio .pantalla{ padding-bottom:0; }
.t-titulo{
text-transform:uppercase;
letter-spacing:.01em;
}
.tarjeta-cuerpo a.t-mini{
display:inline-block;
margin-right:16px;
}
@media (max-width:767px){
.tarjeta-cuerpo a.t-mini{ min-height:44px; display:inline-flex; align-items:center; }
}
.cupo-grande{
margin:2px 0 10px;
font-size:34px;
font-weight:700;
line-height:1.1;
letter-spacing:-.02em;
color:var(--marca);
}
.necesitas{
background:none; border:0; border-radius:0;
margin:14px 0 0; padding:0;
flex-direction:row; flex-wrap:wrap; align-items:center;
gap:6px 16px; justify-content:center;
}
.necesitas-titulo{ margin:0; flex:0 0 auto; }
.necesitas-item{ gap:7px; font-size:12.5px; font-weight:600; }
.necesitas-icono{
width:24px; height:24px; border-radius:7px;
background:var(--hoja-2); border-color:var(--linea);
}
.necesitas-icono svg{ width:14px; height:14px; }
@media (max-width:599px){
.necesitas{ gap:6px 12px; }
.necesitas-titulo{ flex:1 0 100%; text-align:center; }
.necesitas-item{ font-size:11.5px; gap:6px; }
.necesitas-icono{ width:22px; height:22px; border-radius:6px; }
.necesitas-icono svg{ width:13px; height:13px; }
}
#step-0 .bloque-final{
margin-top:0;
padding-top:18px;
gap:14px;
}
#step-0 .qr-fila{ margin:4px 0 2px; }
.qr-enlace-fila{ margin:8px 0 0; text-align:center; }
.qr-enlace{
font-size:12.5px; font-weight:600; letter-spacing:.01em;
color:var(--marca); text-decoration:none;
border-bottom:1px solid var(--marca-linea); padding-bottom:1px;
}
.qr-enlace:hover{ border-bottom-color:var(--marca); }
#step-0 .bloque-sup{
position:relative;
margin:-4px -18px 0;
padding:26px 22px 22px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(var(--marca-rgb), .10) 0%, rgba(var(--marca-rgb), 0) 70%),
linear-gradient(180deg, var(--hoja-2) 0%, var(--hoja) 100%);
border-bottom:1px solid var(--filete);
border-radius:0 0 22px 22px;
}
#step-0 .bloque-sup .t-titulo{ font-size:23px; letter-spacing:-.02em; }
#step-0 .bloque-sup .t-lead{ margin-top:8px; max-width:34ch; margin-inline:auto; }
#step-0 .guia{ margin-top:20px; }
#step-0 .necesitas{ margin-top:18px; gap:8px 10px; }
#step-0 .necesitas-item{
background:var(--hoja-2);
border:1px solid var(--filete);
border-radius:999px;
padding:5px 12px 5px 6px;
gap:8px;
}
#step-0 .necesitas-icono{
width:22px; height:22px; border-radius:50%;
background:var(--hoja); border-color:var(--marca-linea);
}
#step-0 .necesitas-icono svg{ width:13px; height:13px; }
#step-0 .qr-fila{
margin:20px 0 0;
padding:16px 0 14px;
border-radius:16px;
background:linear-gradient(180deg, var(--hoja-2) 0%, rgba(0,0,0,0) 100%);
}
#step-0 .qr-caja{
box-shadow:0 10px 26px -12px rgba(15, 23, 42, .28), 0 2px 6px -2px rgba(15, 23, 42, .10);
}
#step-0 .bloque-final .btn-primary{
min-height:52px; font-size:16px;
box-shadow:0 12px 26px -12px rgba(var(--marca-rgb), .65);
}
.qr-enlace-intro{
display:block;
font-size:12px; color:var(--tinta-3);
margin-bottom:4px;
}
@media (min-width:1024px){
#step-0 .bloque-sup .t-lead{ max-width:none; margin-inline:0; }
#datos-cliente-form-wrap, #form-datos{ max-width:780px; margin-left:auto; margin-right:auto; }
#step-0 .bloque-sup{
text-align:left;
background:none;
border:0;
border-radius:0;
margin:0;
padding:0;
}
#step-0 .bloque-sup .t-titulo{ font-size:30px; line-height:1.15; }
#step-0 .bloque-sup .t-lead{ font-size:15px; margin-top:12px; }
#step-0 .necesitas-titulo{ flex:0 0 100%; }
#step-0 .col-portada > .necesitas{ margin-top:26px; }
#phone-shell #app-view #step-0 .guia{
flex-direction:column;
align-items:flex-start;
gap:0;
margin:26px 0 0;
}
#phone-shell #app-view #step-0 .guia-paso{
display:grid;
grid-template-columns:auto minmax(0,1fr);
column-gap:12px; row-gap:2px;
align-items:start;
width:auto; text-align:left;
}
#phone-shell #app-view #step-0 .guia-num{ grid-row:1 / span 2; align-self:center; }
#phone-shell #app-view #step-0 .guia-txt{ text-align:left; font-size:14px; font-weight:600; }
#phone-shell #app-view #step-0 .guia-frase{ display:block; }
#phone-shell #app-view #step-0 .guia-linea{
width:1.5px; height:16px;
margin:2px 0 2px calc(clamp(34px, 30px + 1.05vw, 44px) / 2 - 0.75px);
}
}
@media (min-width:1024px) and (max-width:1399.98px){
#step-0 .necesitas{ flex-direction:column; align-items:flex-start; row-gap:8px; }
}
#phone-shell #app-view, #phone-shell #result-view{
--t-h1:       clamp(21px, 15.5px + 1.45vw, 33px);
--t-h2:       clamp(17px, 14.6px + 0.63vw, 23px);
--t-lead:     clamp(15px, 14.1px + 0.24vw, 17px);
--t-cuerpo:   clamp(15px, 14.4px + 0.16vw, 16.5px);
--t-etiqueta: clamp(13px, 12.65px + 0.09vw, 14px);
--t-boton:    clamp(15px, 14.1px + 0.24vw, 17px);
--t-campo:    clamp(16px, 15.4px + 0.16vw, 17.5px);
--aire:       clamp(14px, 10px + 1.05vw, 26px);
--aire-corto: clamp(8px, 6px + 0.53vw, 14px);
--alto-toque: clamp(48px, 45px + 0.8vw, 56px);
}
.pantalla{ padding:var(--aire) var(--aire) calc(var(--aire) * 1.2); }
@media (max-width:599px){
.phone-shell{ padding:10px 10px 14px; }
.pantalla{ padding:20px 18px 24px; }
}
#phone-shell #app-view .t-titulo, #phone-shell #result-view .t-titulo{ font-size:var(--t-h1); line-height:1.16; }
#phone-shell #app-view .t-lead,   #phone-shell #result-view .t-lead{   font-size:var(--t-lead); line-height:1.5; }
#phone-shell #app-view .t-mini,   #phone-shell #result-view .t-mini{   font-size:var(--t-etiqueta); line-height:1.55; }
#phone-shell #app-view label, #phone-shell #app-view .campo-etiqueta{ font-size:var(--t-cuerpo); }
#phone-shell #app-view .campo-ayuda{ font-size:var(--t-etiqueta); }
#phone-shell #app-view .btn-primary, #phone-shell #app-view .btn-secundario,
#phone-shell #result-view .btn-primary, #phone-shell #result-view .btn-secundario{
min-height:var(--alto-toque);
font-size:var(--t-boton);
}
#phone-shell #app-view input:not([type=checkbox]), #phone-shell #app-view select, #phone-shell #app-view textarea{
min-height:var(--alto-toque);
font-size:var(--t-campo);
}
#phone-shell #app-view .acepta{ min-height:var(--alto-toque); align-items:center; }
#phone-shell #app-view .guia{ gap:var(--aire-corto); margin:var(--aire) 0 var(--aire-corto); }
#phone-shell #app-view .guia-paso{ width:clamp(64px, 58px + 1.6vw, 84px); }
#phone-shell #app-view .guia-num{
width:clamp(34px, 30px + 1.05vw, 44px);
height:clamp(34px, 30px + 1.05vw, 44px);
font-size:var(--t-etiqueta);
}
#phone-shell #app-view .guia-txt{ font-size:var(--t-etiqueta); }
#phone-shell #app-view .necesitas{ gap:var(--aire-corto) clamp(10px, 8px + 0.53vw, 18px); }
#phone-shell #app-view .necesitas-titulo{ font-size:var(--t-etiqueta); }
#phone-shell #app-view .necesitas-item{ font-size:var(--t-cuerpo); }
#phone-shell #app-view .necesitas-icono{
width:clamp(28px, 26px + 0.53vw, 34px);
height:clamp(28px, 26px + 0.53vw, 34px);
}
#phone-shell #qr-svg{ width:clamp(168px, 120px + 12vw, 300px); height:auto; aspect-ratio:1; }
@media (max-width:599px){
#phone-shell #qr-svg{ width:172px; }
}
@media (min-width:768px){
.phone-shell{ flex:0 1 auto; justify-content:flex-start; }
.pantalla{ flex:0 1 auto; }
}
@media (min-width:1024px){
.phone-shell{ margin-block:auto; }
}
#phone-shell #result-view .cupo-tarjeta-monto{ font-size:clamp(38px, 26px + 3.2vw, 62px); }
#phone-shell #result-view .cupo-tarjeta{ padding:var(--aire) calc(var(--aire) * .92); }
#btn-tema{ min-height:44px; min-width:44px; }
#btn-volver-home{ min-height:44px; padding-left:18px; padding-right:18px; }
#phone-shell #app-view .acepta span{ font-size:var(--t-cuerpo); line-height:1.55; }
#phone-shell #app-view .acepta .btn-texto{ font-size:inherit; }
#phone-shell #app-view .bloque-permisos > legend{ font-size:var(--t-etiqueta); letter-spacing:.04em; }
#phone-shell #app-view .legal-mas > summary{
font-size:var(--t-etiqueta);
min-height:44px;
padding-top:0; padding-bottom:0;
}
#phone-shell #app-view .legal-mas > p{ font-size:var(--t-etiqueta); line-height:1.6; }
#phone-shell #app-view .qr-enlace-intro, #phone-shell #app-view .qr-enlace{ font-size:var(--t-etiqueta); }
#phone-shell #app-view .form-progreso-texto{ font-size:var(--t-etiqueta); }
@media (min-width:1024px){
#phone-shell #app-view .bloque-permisos{
display:grid;
grid-template-columns:1fr 1fr;
align-items:start;
column-gap:28px;
row-gap:0;
}
#phone-shell #app-view .bloque-permisos > legend{ grid-column:1 / -1; grid-row:1; }
#phone-shell #app-view .bloque-permisos > .acepta:nth-of-type(1){    grid-column:1; grid-row:2; }
#phone-shell #app-view .bloque-permisos > .legal-mas:nth-of-type(1){ grid-column:1; grid-row:3; }
#phone-shell #app-view .bloque-permisos > .acepta:nth-of-type(2){    grid-column:2; grid-row:2; }
#phone-shell #app-view .bloque-permisos > .legal-mas:nth-of-type(2){ grid-column:2; grid-row:3; }
#phone-shell #app-view .bloque-permisos > .acepta:nth-of-type(2),
#phone-shell #app-view .bloque-permisos > .legal-mas:nth-of-type(2){
border-top:0;
border-left:1px solid var(--linea);
padding-left:28px;
}
#phone-shell #datos-cliente-form-wrap div:has(> #btn-continuar-1){
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
align-items:start;
max-width:780px;
margin-left:auto;
margin-right:auto;
}
#phone-shell #datos-cliente-form-wrap div:has(> #btn-continuar-1) > #nota-en-local{
grid-column:1 / -1;
}
#btn-continuar-1, #btn-en-local-1{ margin-top:0; width:100%; max-width:none; }
}
#phone-shell .aviso-verificacion{
margin:14px 0 10px;
padding:12px 14px;
border-left:3px solid var(--ambar, #d97706);
border-radius:0 8px 8px 0;
background:color-mix(in srgb, var(--ambar, #d97706) 8%, transparent);
color:var(--marca-tinta);
text-align:left;
}
@supports not (background: color-mix(in srgb, red 8%, transparent)){
#phone-shell .aviso-verificacion{ background:var(--hoja-2); }
}
#phone-shell .result-card.no-confirmada{
border-left-width:5px;
border-left-color:var(--ambar);
background:color-mix(in srgb, var(--ambar) 4%, var(--hoja));
}
#phone-shell .result-card.no-confirmada > .t-titulo{
color:var(--ambar);
}
@supports not (background: color-mix(in srgb, red 4%, transparent)){
#phone-shell .result-card.no-confirmada{ background:var(--hoja-2); }
}
@media (max-width:599px){
#phone-shell #app-view #step-0 .necesitas{
gap:2px 0;
justify-content:flex-start;
}
#phone-shell #app-view #step-0 .necesitas-titulo{
flex:0 0 100%;
margin-bottom:2px;
}
#phone-shell #app-view #step-0 .necesitas-item{
background:none;
border:0;
border-radius:0;
padding:0;
min-height:0;
gap:0;
}
#phone-shell #app-view #step-0 .necesitas-icono{ display:none; }
#phone-shell #app-view #step-0 .necesitas-item:not(:last-child)::after{
content:'·';
margin:0 8px;
color:var(--tinta-3);
font-weight:400;
}
}
@media (min-width:1024px){
#phone-shell #app-view .pantalla:has(#step-0.active){
min-height:min(700px, calc(100vh - 220px));
}
#step-0.active{
align-content:center;
padding-block:clamp(16px, 2vh, 40px);
}
#step-0.active > .col-portada{ gap:6px; }
#step-0.active .col-portada > .guia{ margin:30px 0 22px; }
#step-0.active .col-portada > .necesitas{ margin-top:6px; }
}
#phone-shell #app-view #step-0 .necesitas{
display:grid;
grid-template-columns:auto auto auto;
grid-template-rows:auto auto;
justify-content:start;
align-items:center;
column-gap:clamp(6px, 1.4vw, 16px);
row-gap:4px;
}
#phone-shell #app-view #step-0 .necesitas-titulo{
grid-column:1 / -1;
grid-row:1;
margin:0 0 2px;
}
#phone-shell #app-view #step-0 .necesitas-item{
grid-row:2;
white-space:nowrap;
min-width:0;
}
#phone-shell #app-view #step-0 .necesitas{
grid-template-columns:repeat(3, max-content);
}
#phone-shell #app-view #step-0 .necesitas-item{
min-width:max-content;
}
@media (max-width:599px){
#phone-shell #app-view #step-0 .necesitas{
background:none;
border:0;
padding:0;
margin-top:14px;
column-gap:clamp(5px, 1.6vw, 10px);
}
#phone-shell #app-view #step-0 .necesitas-titulo{
margin-bottom:6px;
}
#phone-shell #app-view #step-0 .necesitas-item{
background:var(--hoja-2);
border:1px solid var(--filete);
border-radius:999px;
padding:4px 9px;
gap:5px;
min-height:0;
font-size:clamp(11px, 3.1vw, 13.5px);
}
#phone-shell #app-view #step-0 .necesitas-item strong{
font-weight:inherit;
}
#phone-shell #app-view #step-0 .necesitas-item:not(:last-child)::after{
content:none;
}
#phone-shell #app-view #step-0 .necesitas-icono{ display:none; }
}
@media (min-width:390px) and (max-width:599px){
#phone-shell #app-view #step-0 .necesitas-item{
padding-left:4px;
}
#phone-shell #app-view #step-0 .necesitas-icono{
display:flex;
width:clamp(17px, 4.6vw, 22px);
height:clamp(17px, 4.6vw, 22px);
border-radius:50%;
background:var(--hoja);
border:1px solid var(--marca-linea);
}
#phone-shell #app-view #step-0 .necesitas-icono svg{
width:clamp(10px, 2.8vw, 13px);
height:clamp(10px, 2.8vw, 13px);
}
}
@media (min-width:600px) and (max-width:1399px){
#phone-shell #app-view #step-0 .necesitas{
column-gap:clamp(6px, 1vw, 10px);
}
#phone-shell #app-view #step-0 .necesitas-item{
padding:4px 10px 4px 4px;
gap:6px;
}
#phone-shell #app-view #step-0 .necesitas-icono{
width:clamp(20px, 14px + 1vw, 26px);
height:clamp(20px, 14px + 1vw, 26px);
}
}
@media (max-width:1023px){
#phone-shell #app-view #step-0 .necesitas{
justify-content:center;
text-align:center;
}
#phone-shell #app-view #step-0 .necesitas-titulo{
text-align:center;
}
}
@media (min-width:1024px){
#phone-shell #app-view #step-0 .necesitas{
margin-top:28px;
}
#phone-shell #app-view #step-0 .necesitas-titulo{
margin-bottom:6px;
}
}
.pos-ficha{ display:block; }
.pos-resp{
border-radius:14px;
padding:18px 17px;
margin:0 0 14px;
border:1.5px solid transparent;
}
.pos-resp-si{     background:var(--verde-suave);     border-color:rgba(11,110,79,.30); }
.pos-resp-no{     background:var(--rojo-suave);      border-color:rgba(176,0,32,.30); }
.pos-resp-neutro{ background:var(--hoja-2);          border-color:var(--linea); }
.pos-resp-rot{
font:800 11px/1.2 var(--fuente);
letter-spacing:.11em; text-transform:uppercase;
margin:0 0 7px; opacity:.85;
}
.pos-resp-si .pos-resp-rot{     color:var(--verde); }
.pos-resp-no .pos-resp-rot{     color:var(--rojo); }
.pos-resp-neutro .pos-resp-rot{ color:var(--tinta-3); }
.pos-resp-titular{
font:800 clamp(22px, 20px + 1vw, 26px)/1.12 var(--fuente);
letter-spacing:-.025em;
margin:0 0 7px;
text-wrap:balance;
}
.pos-resp-si .pos-resp-titular{     color:var(--verde); }
.pos-resp-no .pos-resp-titular{     color:var(--rojo); }
.pos-resp-neutro .pos-resp-titular{ color:var(--tinta); }
.pos-resp-porque{
font:500 14.5px/1.5 var(--fuente);
margin:0; color:var(--tinta-2);
}
.pos-resp-no .pos-resp-porque{ color:#7A1426; }
.pos-decir{
margin:14px 0 0; padding:12px 13px;
border-radius:9px;
background:rgba(255,255,255,.72);
border:1px dashed rgba(11,26,43,.18);
}
.pos-decir-rot{
font:800 11px/1.2 var(--fuente);
letter-spacing:.11em; text-transform:uppercase;
color:var(--tinta-3); margin:0 0 5px;
}
.pos-decir-txt{
font:500 italic 14.5px/1.48 var(--fuente);
color:var(--tinta); margin:0;
}
.pos-contado{
margin:12px 0 0; padding:12px 13px;
border-radius:9px;
background:var(--hoja); border:1px solid var(--linea);
display:flex; align-items:center; justify-content:space-between;
gap:11px; flex-wrap:wrap;
}
.pos-contado-t{
font:600 13px/1.4 var(--fuente);
color:var(--tinta-2); margin:0; flex:1 1 150px;
}
.pos-contado-btn{
flex:0 0 auto;
background:var(--hoja); color:var(--tinta);
border:1.5px solid var(--linea); border-radius:8px;
padding:11px 15px;
font:700 13px/1 var(--fuente);
min-height:44px;
cursor:pointer; white-space:nowrap;
}
.pos-contado-btn:hover{ border-color:var(--azul-vivo); color:var(--azul-vivo); }
.pos-contado-btn:focus-visible{ outline:2px solid var(--azul-vivo); outline-offset:2px; }
.pos-local-form{ margin:12px 0 0; }
.pos-local-form .caso-codigo-campo{ margin:4px 0 10px; }
.pos-qr-local{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:6px 0 0; }
.pos-qr-svg{ display:block; width:240px; height:240px; max-width:100%; background:#fff; padding:10px; border:1px solid var(--linea); border-radius:12px; }
.pos-qr-enlace{ font:500 13px/1.4 var(--mono); color:var(--azul-vivo); word-break:break-all; max-width:100%; }
.cp-aviso-local{ border-left:3px solid var(--azul-vivo); }
.pos-quien{
padding:0 2px 13px; margin:0 0 4px;
border-bottom:1px solid var(--filete);
}
.pos-quien-nombre{
font:800 21px/1.18 var(--fuente);
letter-spacing:-.02em; color:var(--tinta); margin:0 0 4px;
}
.pos-quien-cedula{
font:500 13.5px/1.3 var(--mono);
letter-spacing:.06em; color:var(--tinta-3); margin:0;
font-variant-numeric:tabular-nums;
}
.pos-plg{ border-bottom:1px solid var(--filete); }
.pos-plg > summary{
list-style:none; cursor:pointer;
padding:14px 2px; min-height:48px;
display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pos-plg > summary::-webkit-details-marker{ display:none; }
.pos-plg > summary:focus-visible{ outline:2px solid var(--azul-vivo); outline-offset:2px; }
.pos-plg-izq{ display:flex; flex-direction:column; gap:2px; }
.pos-plg-t{ font:650 14.5px/1.3 var(--fuente); color:var(--tinta); }
.pos-plg-s{ font:400 12.5px/1.3 var(--fuente); color:var(--tinta-3); }
.pos-plg-der{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.pos-plg-val{
font:600 16px/1 var(--mono); color:var(--tinta);
font-variant-numeric:tabular-nums;
}
.pos-plg-val.rojo{ color:var(--rojo); }
.pos-plg-fl{ font-size:11px; color:var(--gris-medio); transition:transform .15s ease; }
.pos-plg[open] .pos-plg-fl{ transform:rotate(90deg); }
.pos-plg-cuerpo{ padding:0 0 14px; }
.pos-cr{ border-radius:11px; }
.pos-cr-cab{
display:flex; align-items:center; justify-content:space-between;
gap:9px; margin:0 0 11px; flex-wrap:wrap;
}
.pos-cr-donde{ font:650 13px/1.3 var(--fuente); color:var(--tinta-2); margin:0; }
.pos-chip{
flex:0 0 auto;
font:800 11px/1 var(--fuente);
letter-spacing:.05em; text-transform:uppercase;
border-radius:5px; padding:5px 8px; white-space:nowrap;
}
.pos-chip-ok{    background:var(--verde-suave); color:var(--verde); }
.pos-chip-avisa{ background:var(--ambar-suave); color:var(--ambar); }
.pos-chip-mal{   background:var(--rojo-suave);  color:var(--rojo); }
.pos-cifras{
display:grid; grid-template-columns:1fr 1fr;
gap:12px 10px; margin:0 0 13px;
}
.pos-cf-r{
font:800 11px/1.2 var(--fuente);
letter-spacing:.1em; text-transform:uppercase;
color:var(--tinta-3); margin:0 0 3px;
}
.pos-cf-v{
font:600 19px/1.05 var(--mono); color:var(--tinta); margin:0;
font-variant-numeric:tabular-nums;
}
.pos-cf-v.sal{ color:var(--rojo); }
.pos-cf-v.pag{ color:var(--verde); }
.pos-cuotas-r{
font:800 11px/1.2 var(--fuente);
letter-spacing:.1em; text-transform:uppercase;
color:var(--tinta-3); margin:0 0 7px;
}
.pos-tira{ display:flex; gap:4px; flex-wrap:wrap; margin:0 0 13px; }
.pos-q{
flex:1 1 auto; min-width:26px;
border-radius:5px; padding:6px 2px; text-align:center;
font:600 11.5px/1 var(--mono);
border:1px solid transparent;
font-variant-numeric:tabular-nums;
}
.pos-q-pg{  background:var(--verde-suave); color:var(--verde); border-color:rgba(11,110,79,.24); }
.pos-q-hoy{ background:var(--ambar);       color:#fff; }
.pos-q-tar{ background:var(--rojo-suave);  color:var(--rojo);  border-color:rgba(176,0,32,.30); }
.pos-q-fut{ background:var(--hoja-2);      color:var(--gris-medio); border-color:var(--filete); }
.pos-proxima{
background:var(--azul-vivo-suave);
border:1px solid rgba(27,100,242,.22);
border-radius:9px; padding:11px 13px; margin:0 0 11px;
}
.pos-proxima.mal{
background:var(--ambar-suave);
border-color:var(--ambar-linea);
}
.pos-proxima-rot{
font:800 11px/1.2 var(--fuente);
letter-spacing:.1em; text-transform:uppercase;
color:var(--azul-vivo); margin:0 0 3px;
}
.pos-proxima.mal .pos-proxima-rot{ color:var(--ambar); }
.pos-proxima-val{
font:600 21px/1 var(--mono); color:var(--tinta); margin:0;
font-variant-numeric:tabular-nums;
}
.pos-proxima-cuando{
font:500 11.5px/1.4 var(--fuente);
color:var(--tinta-2); margin:4px 0 0;
}
.pos-nota{
font:400 11.5px/1.5 var(--fuente);
color:var(--tinta-3);
background:var(--hoja-2); border-radius:7px;
padding:9px 11px; margin:0 0 10px;
}
@media (min-width:900px){
.pos-plg-cuerpo{
display:grid; gap:12px;
grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
align-items:start;
}
}
.foto-comprobante{max-width:min(92vw,640px);padding:1rem;border:1px solid var(--linea);border-radius:12px}
.foto-comprobante-img{display:block;max-width:100%;max-height:70vh;margin:.5rem auto}
.foto-comprobante-titulo{margin:0;font-weight:600}
#form-datos > .correo-permisos{ grid-column:1 / -1; }
.correo-permisos{ margin:-4px 0 10px; }
.correo-permisos > p{ margin:0 0 2px 2px; }
.correo-permisos label.acepta{ flex-wrap:nowrap; align-items:flex-start; gap:12px; margin:8px 0 0; }
.correo-permisos #f-correo-permisos-legal{ margin:8px 0 0 2px; }
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-latin-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
body.cliente-ancho{
--fuente:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--cl-pet:#0b2a31; --cl-nar:#f39200; --cl-gris:#5b7076; --cl-gris2:#4a5f65; --cl-linea:#e3eaeb; --cl-suave:#f6f8f8;
background:#fff; color:var(--cl-pet);
}
body.cliente-ancho, body.cliente-ancho button, body.cliente-ancho input, body.cliente-ancho select, body.cliente-ancho textarea, body.cliente-ancho a{ font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; }
body.cliente-ancho .cc-topbar{ background:#fff; border-bottom:1px solid #eef2f3; box-shadow:none; color:var(--cl-pet); }
body.cliente-ancho .cc-topbar .h1-sub,
body.cliente-ancho .cc-topbar .cc-topbar__panel{ color:var(--cl-gris2); }
.cc-topbar__logo--color{ display:none; }
body.cliente-ancho .cc-topbar .cc-topbar__inicio img.cc-topbar__logo:not(.cc-topbar__logo--color){ display:none; }
body.cliente-ancho .cc-topbar .cc-topbar__inicio img.cc-topbar__logo--color{ display:block; }
body.cliente-ancho .cc-topbar .cc-topbar__acciones{ width:auto; flex:0 0 auto; }
body.cliente-ancho .cc-topbar .cc-btn.cp-volver-sitio{ width:auto; flex:0 0 auto; white-space:nowrap; height:auto; }
body.cliente-ancho #btn-tema{ display:none; }
.cp-volver-sitio{ text-decoration:none; }
body.cliente-ancho .cc-topbar .cc-btn.cp-volver-sitio, body.cliente-ancho .cp-volver-sitio{ color:var(--cl-pet); border:1px solid #d6dfe0; background:#fff; font-weight:600; font-size:14px; padding:10px 16px; border-radius:0; }
body.cliente-ancho .cp-volver-sitio:hover{ border-color:var(--cl-pet); }
body.cliente-ancho .phone-shell{ max-width:none; width:100%; padding:0; margin:0; background:#fff; border:0; box-shadow:none; border-radius:0; }
body.cliente-ancho .notch{ display:none; }
body.cliente-ancho #app-view:not(.oculto){
display:grid; grid-template-columns:300px minmax(0,1fr); gap:0 64px; align-items:start;
max-width:1240px; margin:0 auto; padding:24px 72px 56px; width:100%; box-sizing:border-box;
}
body.cliente-ancho[data-paso="0"] #phone-shell #app-view:not(.oculto){ grid-template-columns:minmax(0,1fr); max-width:1280px; }
body.cliente-ancho #progress-dots{ display:none; }
body.cliente-ancho .pantalla{ grid-column:2; background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; margin:0; width:100%; }
body.cliente-ancho[data-paso="0"] .pantalla{ grid-column:1; }
body.cliente-ancho #btn-volver-home{ grid-column:2; justify-self:start; }
body.cliente-ancho[data-paso="0"] #btn-volver-home{ grid-column:1; }
body.cliente-ancho .step-panel.active{ animation:none; }
.pasos-lado{ display:none; }
body.cliente-ancho .pasos-lado:not(.oculto){ display:block; grid-column:1; align-self:start; position:sticky; top:24px; }
body.cliente-ancho[data-paso="0"] .pasos-lado{ display:none; }
.pasos-lado__ceja{ display:flex; align-items:center; gap:14px; margin:0; font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--cl-gris2); }
.pasos-lado__ceja i{ width:32px; height:2px; background:var(--cl-nar); display:block; flex:none; }
.pasos-lado__lista{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.pasos-lado__item{ display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:center; padding:10px 14px 10px 10px; border:1px solid var(--cl-linea); opacity:.6; }
.pasos-lado__item b{ display:flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid #c9d4d6; color:var(--cl-pet); font-weight:700; }
.pasos-lado__item strong{ display:block; font-size:15px; color:var(--cl-pet); }
.pasos-lado__item small{ display:block; font-size:13px; color:var(--cl-gris); }
.pasos-lado__item.on{ border-color:var(--cl-nar); opacity:1; }
.pasos-lado__item.on b{ background:var(--cl-nar); border-color:var(--cl-nar); color:#fff; }
.pasos-lado__item.hecho{ opacity:1; }
.pasos-lado__item.hecho b{ background:var(--cl-pet); border-color:var(--cl-pet); color:#fff; }
.pasos-lado__item.hecho b::after{ content:""; display:block; width:7px; height:13px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg) translate(-1px,-2px); }
.pasos-lado__nota{ margin:20px 0 0; padding:16px; background:var(--cl-suave); font-size:13px; line-height:1.6; color:var(--cl-gris2); }
.pasos-lado__nota.oculto{ display:none; }
.prog-cliente{ display:none; }
body.cliente-ancho .prog-cliente:not(.oculto){ display:flex; align-items:center; gap:14px; margin:0 0 28px; font-size:13px; font-weight:600; color:var(--cl-gris); }
.prog-cliente i{ flex:1; height:6px; background:var(--cl-linea); position:relative; display:block; font-style:normal; }
.prog-cliente s{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--cl-nar); display:block; text-decoration:none; transition:width .4s ease; }
.punto-marca{ color:var(--cl-nar); }
body.cliente-ancho .pantalla h1.t-titulo,
body.cliente-ancho .pantalla h2.t-titulo{ color:var(--cl-pet); text-transform:none; }
body.cliente-ancho .pantalla .btn-primary,
body.cliente-ancho .pantalla .cc-btn--primario{ background:var(--cl-nar); color:var(--cl-pet); border:0; border-radius:0; font-weight:700; box-shadow:none; }
body.cliente-ancho .pantalla .btn-primary svg path{ stroke:currentColor; }
body.cliente-ancho .pantalla .btn-secundario,
body.cliente-ancho .pantalla .cc-btn--secundario{ background:#fff; color:var(--cl-pet); border:1px solid #c9d4d6; border-radius:0; font-weight:700; box-shadow:none; }
body.cliente-ancho #phone-shell #app-view #step-0.active{
display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px 72px; align-items:center;
min-height:calc(100vh - 170px); text-align:left;
}
body.cliente-ancho #phone-shell #app-view #step-0 .col-portada,
body.cliente-ancho #phone-shell #app-view #step-0 .bloque-final{ display:contents; }
body.cliente-ancho #phone-shell #app-view #step-0 .bloque-sup{ grid-column:1; grid-row:1; padding:0; text-align:left; background:none; border:0; box-shadow:none; border-radius:0; margin:0; width:100%; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia{ grid-column:1; grid-row:2; }
body.cliente-ancho #phone-shell #app-view #step-0 #btn-empezar{ grid-column:1; grid-row:3; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas{ grid-column:1; grid-row:4; }
body.cliente-ancho #phone-shell #app-view #step-0 #qr-bloque{ grid-column:2; grid-row:1 / 5; align-self:center; justify-self:center; }
body.cliente-ancho #phone-shell #app-view #step-0 .bloque-sup::before{ content:"Verifica tu cupo"; display:flex; align-items:center; gap:14px; font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--cl-gris2); }
body.cliente-ancho #phone-shell #app-view #step-0 .bloque-sup::before{ background:linear-gradient(var(--cl-nar),var(--cl-nar)) left center/32px 2px no-repeat; padding-left:46px; }
body.cliente-ancho .cp-bienvenida-titulo{ font-size:72px; line-height:1; letter-spacing:-.045em; margin:22px 0 0; font-weight:800; text-transform:none; }
body.cliente-ancho .cp-bienvenida-sub{ font-size:19px; color:var(--cl-gris2); margin:18px 0 0; max-width:520px; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia{ display:grid; gap:12px; margin:0; max-width:520px; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia-linea{ display:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia-paso{ display:grid; grid-template-columns:44px 1fr; gap:4px 16px; align-items:center; padding:12px 16px 12px 12px; border:1px solid var(--cl-linea); width:auto; text-align:left; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia-num{ grid-row:1 / 3; width:44px; height:44px; border:1px solid #c9d4d6; color:var(--cl-pet); background:transparent; border-radius:0; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia-paso.activo .guia-num{ background:var(--cl-nar); border-color:var(--cl-nar); color:#fff; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia-txt{ grid-column:2; font-size:16px; font-weight:700; color:var(--cl-pet); text-align:left; margin:0; text-transform:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia-frase{ grid-column:2; display:block; font-size:14px; color:var(--cl-gris); margin:0; text-align:left; }
body.cliente-ancho #phone-shell #app-view #step-0 #btn-empezar{ height:62px; font-size:18px; width:100%; max-width:520px; margin:0; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas{ display:flex; flex-wrap:nowrap; gap:18px; justify-content:space-between; max-width:520px; margin:0; padding:0; background:transparent; border:0; border-radius:0; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas-titulo{ display:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas-item{ background:transparent; border:0; padding:0; font-size:14px; color:var(--cl-gris2); white-space:nowrap; border-radius:0; gap:6px; text-transform:none; letter-spacing:0; height:auto; box-shadow:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas-icono{ display:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas-item::before{ content:"✓"; color:var(--cl-nar); font-weight:700; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas-item strong{ font-weight:500; }
body.cliente-ancho #phone-shell #app-view #step-0 #qr-bloque{ width:100%; max-width:440px; padding:36px; background:#fff; box-shadow:0 34px 70px -26px rgba(11,42,49,.3),0 0 0 1px rgba(11,42,49,.07); text-align:center; }
body.cliente-ancho #phone-shell #app-view #step-0 .qr-fila{ display:flex; justify-content:center; }
body.cliente-ancho #phone-shell #app-view #step-0 .qr-caja{
position:relative; padding:22px; display:inline-block; border:0; box-shadow:none; background:#fff; border-radius:0; cursor:pointer;
background-image:
linear-gradient(var(--cl-nar),var(--cl-nar)), linear-gradient(var(--cl-nar),var(--cl-nar)),
linear-gradient(var(--cl-nar),var(--cl-nar)), linear-gradient(var(--cl-nar),var(--cl-nar)),
linear-gradient(var(--cl-nar),var(--cl-nar)), linear-gradient(var(--cl-nar),var(--cl-nar)),
linear-gradient(var(--cl-nar),var(--cl-nar)), linear-gradient(var(--cl-nar),var(--cl-nar));
background-repeat:no-repeat;
background-size:34px 3px, 3px 34px, 34px 3px, 3px 34px, 34px 3px, 3px 34px, 34px 3px, 3px 34px;
background-position:left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
}
body.cliente-ancho #phone-shell #app-view #step-0 .qr-caja::after{ content:""; position:absolute; left:0; right:0; top:12%; height:2px; background:var(--cl-nar); box-shadow:0 0 10px 2px rgba(243,146,0,.5); animation:qr-escaneo 3.2s ease-in-out infinite alternate; pointer-events:none; }
@keyframes qr-escaneo{ from{ top:12%; } to{ top:88%; } }
body.cliente-ancho #phone-shell #app-view #step-0 #qr-svg{ width:300px; height:300px; display:block; }
.qr-dedo{ display:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .qr-dedo{ display:block; position:absolute; right:30px; bottom:40px; width:56px; filter:drop-shadow(0 6px 10px rgba(11,42,49,.3)); animation:qr-toque 6s ease-in-out infinite; pointer-events:none; }
@keyframes qr-toque{ 0%{ opacity:0; transform:translateY(8px); } 8%,30%{ opacity:1; transform:translateY(0); } 38%,100%{ opacity:0; transform:translateY(8px); } }
.qr-titulo-cliente{ display:none; }
body.cliente-ancho #phone-shell #app-view #step-0 .qr-titulo-cliente{ display:block; margin:14px 0 0; }
body.cliente-ancho #phone-shell #app-view #step-0 .qr-titulo-cliente strong{ display:block; font-size:18px; letter-spacing:-.01em; color:var(--cl-pet); }
body.cliente-ancho #phone-shell #app-view #step-0 .qr-titulo-cliente span{ display:block; margin:6px auto 0; max-width:320px; font-size:13px; line-height:1.5; color:var(--cl-gris); }
body.cliente-ancho #phone-shell #app-view #step-0 .qr-enlace-fila{ display:none; }
@media (prefers-reduced-motion:reduce){ body.cliente-ancho #phone-shell #app-view #step-0 .qr-caja::after, body.cliente-ancho #phone-shell #app-view #step-0 .qr-dedo{ animation:none; } }
body.cliente-ancho #titulo-datos{ font-size:48px; letter-spacing:-.04em; line-height:1; margin:0; font-weight:800; }
body.cliente-ancho #datos-cliente-form-wrap > div:first-child .t-lead{ color:var(--cl-gris2); margin:12px 0 0; font-size:16px; }
body.cliente-ancho .form-progreso{ margin:24px 0 28px; font-size:13px; font-weight:600; color:var(--cl-gris); }
body.cliente-ancho .form-progreso-barra{ height:6px; border-radius:0; background:var(--cl-linea); }
body.cliente-ancho .form-progreso-relleno{ background:var(--cl-nar); border-radius:0; }
body.cliente-ancho .cc-campo__etiqueta{ font-size:14px; font-weight:600; color:var(--cl-pet); }
body.cliente-ancho .field-input{ height:52px; border:1px solid #cdd8da; border-radius:0; background:#fff; color:var(--cl-pet); }
body.cliente-ancho .bloque-permisos{ margin-top:26px; border:1px solid var(--cl-linea); padding:20px 22px; border-radius:0; background:#fff; box-shadow:none; }
body.cliente-ancho .bloque-permisos legend{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--cl-gris); font-weight:700; }
body.cliente-ancho .cp-acciones-paso1{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; align-items:start; }
body.cliente-ancho #btn-continuar-1,
body.cliente-ancho #btn-en-local-1{ width:100%; height:58px; max-width:none; margin:0; font-size:16px; }
body.cliente-ancho #nota-en-local{ grid-column:1 / -1; max-width:none; text-align:left; }
body.cliente-ancho #error-datos{ grid-column:1 / -1; }
body.cliente-ancho .cp-acciones-paso1 .cp-volver-fila{ grid-column:1 / -1; }
@media (min-width:1001px){ body.cliente-ancho[data-paso="1"] #nota-en-local{ display:none; } }
body.cliente-ancho #step-3.active{ align-items:stretch; justify-content:flex-start; text-align:left; }
body.cliente-ancho #step-3 #loading-view{ align-items:flex-start; text-align:left; }
body.cliente-ancho .v2-puente{ background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; text-align:left; }
body.cliente-ancho .v2-titulo{ font-size:48px; letter-spacing:-.04em; line-height:1; margin:0; font-weight:800; }
body.cliente-ancho .v2-sub{ color:var(--cl-gris2); margin:12px 0 0; font-size:16px; }
body.cliente-ancho .v2-consejos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
body.cliente-ancho .v2-consejo{ display:flex; gap:14px; padding:20px; border:1px solid var(--cl-linea); }
body.cliente-ancho .v2-consejo__ico{ flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#fff4e5; color:var(--cl-nar); font-size:22px; font-weight:700; }
body.cliente-ancho .v2-consejo strong{ display:block; font-size:16px; color:var(--cl-pet); }
body.cliente-ancho .v2-consejo small{ display:block; margin-top:4px; font-size:13px; line-height:1.5; color:var(--cl-gris); }
body.cliente-ancho .v2-seguro{ margin:22px 0 0; padding:16px 18px; background:var(--cl-suave); font-size:14px; line-height:1.6; color:var(--cl-gris2); }
body.cliente-ancho .v2-seguro b{ color:var(--cl-pet); }
body.cliente-ancho .v2-estado{ margin:16px 0 0; font-size:14px; color:var(--cl-gris2); min-height:1.6em; }
body.cliente-ancho .v2-acciones{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
body.cliente-ancho .v2-btn{ width:100%; height:58px; font-size:16px; margin:0; max-width:none; }
body.cliente-ancho .r3{ background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; text-align:left; }
body.cliente-ancho .r3-titulo{ font-size:48px; letter-spacing:-.04em; line-height:1; margin:0; font-weight:800; }
body.cliente-ancho .r3-sub{ color:var(--cl-gris2); margin:12px 0 28px; font-size:16px; }
body.cliente-ancho .r3-cupo{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:26px 28px; border:2px solid var(--cl-pet); background:var(--cl-suave); }
body.cliente-ancho .r3-cupo__etq{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--cl-gris); font-weight:700; }
body.cliente-ancho .r3-cupo__monto{ font-size:64px; letter-spacing:-.05em; line-height:1; color:var(--cl-pet); margin:6px 0 4px; font-weight:400; }
body.cliente-ancho .r3-cupo__meta{ font-size:14px; color:var(--cl-gris2); line-height:1.6; }
body.cliente-ancho .r3-cupo__sello{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:112px; height:112px; border:2px solid var(--cl-nar); color:var(--cl-nar); font-weight:700; font-size:13px; text-align:center; line-height:1.2; }
body.cliente-ancho .r3-cupo__visto{ display:block; width:14px; height:28px; border-right:5px solid var(--cl-nar); border-bottom:5px solid var(--cl-nar); transform:rotate(45deg); margin:0 0 14px; }
body.cliente-ancho .r3-h{ font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--cl-gris); margin:30px 0 12px; font-weight:700; }
body.cliente-ancho .r3-pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
body.cliente-ancho .r3-paso{ display:flex; gap:14px; padding:20px; border:1px solid var(--cl-linea); }
body.cliente-ancho .r3-paso__num{ flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#fff4e5; color:var(--cl-nar); font-size:20px; font-weight:700; }
body.cliente-ancho .r3-paso strong{ display:block; font-size:16px; color:var(--cl-pet); }
body.cliente-ancho .r3-paso small{ display:block; margin-top:4px; font-size:13px; line-height:1.5; color:var(--cl-gris); }
body.cliente-ancho .r3-tienda{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 24px; align-items:center; padding:22px 24px; border:1px solid var(--cl-linea); }
body.cliente-ancho .r3-tienda strong{ display:block; font-size:20px; letter-spacing:-.02em; color:var(--cl-pet); }
body.cliente-ancho .r3-tienda p{ margin:6px 0 0; font-size:14px; line-height:1.6; color:var(--cl-gris2); }
body.cliente-ancho .r3-tienda__acciones{ display:grid; gap:10px; min-width:220px; }
body.cliente-ancho .r3-tienda__acciones .cc-btn,
body.cliente-ancho .r3-tienda__acciones .btn-primary,
body.cliente-ancho .r3-tienda__acciones a,
body.cliente-ancho .r3-tienda__acciones button{ height:50px; width:100%; font-size:15px; margin:0; max-width:none; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
body.cliente-ancho .r3-otro{ margin:14px 0 0; font-size:13px; color:var(--cl-gris); line-height:1.6; }
body.cliente-ancho .r3-seguro{ margin:22px 0 0; padding:16px 18px; background:var(--cl-suave); font-size:14px; line-height:1.6; color:var(--cl-gris2); }
body.cliente-ancho .r3-seguro b{ color:var(--cl-pet); }
body.cliente-ancho .r3-acciones{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
body.cliente-ancho .r3-btn{ width:100%; height:58px; font-size:16px; margin:0; max-width:none; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
body.cliente-ancho #step-3 .cp-volver-fila--resultado{ display:none; }
@media (max-width:1000px){
body.cliente-ancho #app-view:not(.oculto){ grid-template-columns:minmax(0,1fr); gap:28px 0; padding:24px 40px 48px; }
body.cliente-ancho .pantalla, body.cliente-ancho #btn-volver-home{ grid-column:1; }
body.cliente-ancho .pasos-lado:not(.oculto){ position:static; grid-column:1; }
body.cliente-ancho .pasos-lado__lista{ grid-template-columns:repeat(3,1fr); }
body.cliente-ancho .pasos-lado__item small{ display:none; }
body.cliente-ancho .pasos-lado__nota{ display:none; }
body.cliente-ancho #phone-shell #app-view #step-0.active{ grid-template-columns:1fr; gap:30px; text-align:center; justify-items:center; min-height:0; }
body.cliente-ancho #phone-shell #app-view #step-0 .bloque-sup{ text-align:center; }
body.cliente-ancho #phone-shell #app-view #step-0 .bloque-sup::before{ justify-content:flex-start; width:fit-content; margin-inline:auto; background-position:left center; padding-left:46px; }
body.cliente-ancho .cp-bienvenida-titulo{ font-size:56px; }
body.cliente-ancho .cp-bienvenida-sub{ margin-left:auto; margin-right:auto; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia, body.cliente-ancho #phone-shell #app-view #step-0 #btn-empezar, body.cliente-ancho #phone-shell #app-view #step-0 .necesitas{ max-width:none; width:100%; }
body.cliente-ancho #phone-shell #app-view #step-0 .guia{ text-align:left; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas{ justify-content:center; }
body.cliente-ancho #phone-shell #app-view #step-0 #qr-bloque{ grid-column:1; grid-row:5; }
body.cliente-ancho .v2-consejos, body.cliente-ancho .r3-pasos{ grid-template-columns:1fr 1fr; }
body.cliente-ancho .v2-acciones{ margin-top:48px; }
}
@media (max-width:600px){
body.cliente-ancho .cc-topbar{ padding:0 18px; }
body.cliente-ancho .cc-topbar .cc-topbar__marca{ flex:1 1 auto; min-width:0; }
body.cliente-ancho .cc-topbar .h1-sub-cliente{ display:none; }
.cc-topbar .h1-sub-cliente{ display:none !important; }
body.cliente-ancho .cc-topbar .cc-btn.cp-volver-sitio{ font-size:13px; padding:8px 12px; }
body.cliente-ancho #app-view:not(.oculto){ padding:18px 20px 40px; gap:22px 0; }
body.cliente-ancho .pasos-lado__lista{ gap:8px; }
body.cliente-ancho .pasos-lado__item{ grid-template-columns:1fr; justify-items:center; padding:10px 4px; text-align:center; gap:6px; }
body.cliente-ancho .pasos-lado__item strong{ font-size:12px; }
body.cliente-ancho .pasos-lado__item b{ width:32px; height:32px; }
body.cliente-ancho .cp-bienvenida-titulo{ font-size:44px; }
body.cliente-ancho .cp-bienvenida-sub{ font-size:16px; }
body.cliente-ancho #phone-shell #app-view #step-0 #btn-empezar{ height:58px; }
body.cliente-ancho #phone-shell #app-view #step-0 #qr-bloque{ padding:24px; }
body.cliente-ancho #phone-shell #app-view #step-0 #qr-svg{ width:220px; height:220px; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas{ gap:12px; font-size:12.5px; flex-wrap:wrap; }
body.cliente-ancho #phone-shell #app-view #step-0 .necesitas-item{ font-size:12.5px; }
body.cliente-ancho #titulo-datos, body.cliente-ancho .v2-titulo, body.cliente-ancho .r3-titulo{ font-size:36px; }
body.cliente-ancho .cp-acciones-paso1, body.cliente-ancho .v2-acciones, body.cliente-ancho .r3-acciones{ grid-template-columns:1fr; }
body.cliente-ancho .v2-consejos, body.cliente-ancho .r3-pasos{ grid-template-columns:1fr; gap:10px; }
body.cliente-ancho .v2-consejo, body.cliente-ancho .r3-paso{ padding:14px; }
body.cliente-ancho .r3-cupo{ grid-template-columns:1fr; padding:20px; }
body.cliente-ancho .r3-cupo__monto{ font-size:52px; }
body.cliente-ancho .r3-cupo__sello{ width:auto; height:auto; flex-direction:row; gap:10px; padding:10px 14px; }
body.cliente-ancho .r3-cupo__visto{ width:10px; height:20px; margin:0 6px 6px 0; }
body.cliente-ancho .r3-tienda{ grid-template-columns:1fr; padding:18px; }
body.cliente-ancho .r3-tienda__acciones{ min-width:0; }
}
.cc-topbar .cc-topbar__logo.cc-topbar__logo--color{display:none}
body.cliente-ancho .cc-topbar .cc-topbar__logo.cc-topbar__logo--color{display:block}
.pos-resultado > .pos-cliente-cab{ grid-column:1 / -1; margin:0 0 4px; }
@media (min-width:768px){
.pos-resultado:has(> .pos-cliente-cab){ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:start; }
}
.pos-resultado > .pos-cliente-cab{ padding:14px 18px; border-bottom:0; }
.pos-resultado > .pos-cliente-cab .pos-quien-nombre{ margin:0 0 2px; }
.pos-resp-dato{ margin-top:6px; font-size:13px; color:var(--tinta-3); }
.pos-qr-botones{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; }
.pos-qr-botones .cc-btn{ flex:1 1 180px; text-decoration:none; }
.pos-qr-nota{ font-size:13px; text-align:center; }
.campana-pos { margin: 14px 0 4px; padding: 10px 12px; border: 1px dashed var(--linea); border-radius: 10px; background: var(--hoja-2); }
.campana-pos__titulo { margin: 0 0 8px; font-size: 14px; color: var(--tinta-2); }
.campana-pos__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.campana-pos__opcion { width: auto; flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); color: var(--tinta); font: inherit; cursor: pointer; }
.campana-pos__opcion.elegida { border-color: var(--verde); background: var(--verde-suave); color: var(--verde); font-weight: 600; }
.campana-pos__opcion:disabled { opacity: .6; cursor: wait; }
.campana-pos__estado { margin: 8px 0 0; color: var(--tinta-3); }
@media (pointer:coarse),(max-width:1024px){input,select,textarea{font-size:16px!important}}
.grupo-sexo{border:0;padding:0;margin:0 0 12px;min-width:0}
.grupo-sexo__opciones{display:flex;gap:12px;flex-wrap:wrap}
.opcion-sexo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--cc-borde,#d6d6d6);border-radius:10px;cursor:pointer;font-size:16px}
.opcion-sexo input{width:20px;height:20px;margin:0}