/* Pulido visual del portal (Rodrigo, 21 oct 2026): botones duotono, letras unificadas, entradas con vida y menús con resorte.
   Se carga al final de index.html; todo sale de las variables de los modos de manejo (modos.css), así funciona en
   Original, Carrera, Híbrido, EV, Sport y Nitro. Movimiento: solo transform y opacity, 150–500 ms, y con
   «reducir movimiento» todo aparece sin moverse. */

/* ---------- curvas ---------- */
/* son las del sistema (sistema.css): una sola familia de curvas en todo el portal */
/* son las del sistema (sistema.css): una sola familia de curvas en todo el portal */
/* son las del sistema (sistema.css): una sola familia de curvas en todo el portal */
:root{--pl-resorte:var(--curva-resorte);--pl-suave:var(--curva-entra);--pl-sale:var(--curva-sale)}

/* ================= 1. BOTONES DUOTONO =================
   Como los de Linear, Stripe o Raycast: un degradado de dos tonos vecinos del color del modo (en Original va de
   verde azulado a verde limón, el mismo viaje del semitono que mandó Rodrigo pero casi imperceptible), un filo de luz
   arriba, una sombra fina abajo y un resplandor del mismo color. Al pasar el mouse el degradado se recorre despacio. */
.btn,.btn-esc{position:relative;isolation:isolate;-webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-1) var(--pl-suave),box-shadow var(--dur-3) var(--curva-entra),background-position .7s var(--pl-suave),border-color var(--dur-2) var(--curva-entra),color var(--dur-2) var(--curva-entra),filter var(--dur-2) var(--curva-entra)}
.btn:focus-visible,.btn-esc:focus-visible{outline:2px solid var(--menta);outline-offset:3px}

/* principal: dos colores vecinos claramente distintos por modo (Rodrigo, 21 oct: «que se vea a la primera»).
   El texto va sobre el color más oscuro de los dos y se lee igual en ambos extremos. */
:root{--dt1:#89FF9E;--dt2:#27FDEC}                                /* menta → turquesa · L 0.907/0.897 · +38° · 16.9:1 / 16.3:1 */
html[data-modo="carrera"]{--dt1:#FF2E3E;--dt2:#FA5C12}            /* rojo → naranja de llama · L 0.647/0.676 · +16° · 5.7:1 / 6.6:1 */
html[data-modo="hibrido"]{--dt1:#3DA9FF;--dt2:#19B6CA}            /* azul → cian · L 0.713/0.712 · -38° · 8.3:1 / 8.6:1 */
html[data-modo="sport"]{--dt1:#FF8A1F;--dt2:#EB9917}              /* papaya → ámbar · L 0.748/0.748 · +15° · 8.9:1 / 9.1:1 */
html[data-modo="nitro"]{--dt1:#B57BFF;--dt2:#FC3FCE}              /* violeta → magenta · L 0.698/0.694 · +38° · 7.2:1 / 6.7:1 */
html[data-modo="rosa"]{--dt1:#FF6FAE;--dt2:#FD6257}               /* fucsia → coral · L 0.734/0.694 · +32° · 8.1:1 / 7.1:1 */
html[data-modo="lila"]{--dt1:#D2B4FF;--dt2:#93B8FD}               /* lila → pervinca · L 0.822/0.782 · -40° · 11.7:1 / 10.5:1 */
html[data-modo="ev"]{--dt1:#07863E;--dt2:#0E807B}                 /* verde → petróleo (letra blanca) · L 0.543/0.543 · +40° · 4.7:1 / 4.8:1 */
html[data-modo="ev"] :is(.portada-esc,.es-lic,.es-mini,.cm-hist,.es-fiesta,.tj,.banner){--dt1:#3FE07A;--dt2:#20DAD0}
.btn:not(.sec):not(.wa):not(.listo),.cm-fab{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%) 0 0/100% 100%,
             linear-gradient(120deg,var(--dt1) 0%,var(--dt2) 48%,var(--dt1) 100%) 0 0/170% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.28),-6px 8px 22px -10px var(--dt1),6px 8px 22px -10px var(--dt2)}
@media(hover:hover){
  .btn:not(.sec):not(.wa):not(.listo):hover{background-position:0 0,100% 0;transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.16),0 2px 4px rgba(0,0,0,.25),-8px 14px 30px -12px var(--dt1),8px 14px 30px -12px var(--dt2)}
}
.btn:not(.sec):active,.btn-esc:active,.cm-fab:active{transform:translateY(0) scale(.975);transition-duration:var(--dur-1)}
.btn:not(.sec):not(.wa):not(.listo):active{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 2px 6px rgba(0,0,0,.2),0 2px 8px -4px rgba(var(--menta-rgb),.5)}
.btn:disabled,.btn[aria-disabled=true]{filter:saturate(.5);opacity:.6;box-shadow:none;transform:none;cursor:default}
/* EV es claro y lleva letra blanca encima: el resplandor más corto para que no se vea manchado */
html[data-modo="ev"] main .btn:not(.sec):not(.wa):not(.listo){box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.18),0 6px 16px -8px rgba(var(--menta-rgb),.7)}

/* WhatsApp: sus propios dos verdes, mismo tratamiento */
.btn.wa{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%) 0 0/100% 100%,
    linear-gradient(115deg,#12B886 0%,#25D366 45%,#5EE06A 100%) 0 0/220% 100%;color:#03140a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.28),0 8px 22px -8px rgba(37,211,102,.6)}
@media(hover:hover){.btn.wa:hover{background-position:0 0,100% 0;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.16),0 14px 30px -10px rgba(37,211,102,.75)}}

/* secundario: vidrio. Fondo casi transparente con un filo de luz; al pasar el mouse el borde toma el color del modo */
.btn.sec{background:linear-gradient(180deg,rgba(var(--tinta-rgb),.075),rgba(var(--tinta-rgb),.025));border:1px solid rgba(var(--tinta-rgb),.15);color:var(--tinta);
  box-shadow:inset 0 1px 0 rgba(var(--tinta-rgb),.08),0 1px 2px rgba(0,0,0,.2)}
@media(hover:hover){.btn.sec:hover{border-color:rgba(var(--menta-rgb),.55);background:linear-gradient(180deg,rgba(var(--menta-rgb),.1),rgba(var(--menta-rgb),.03));transform:translateY(-1px)}}
.btn.sec:active{background:rgba(var(--tinta-rgb),.1)}
html[data-modo="ev"] main .btn.sec{background:linear-gradient(180deg,#fff,#F5F8F6);border-color:var(--linea2);box-shadow:0 1px 2px rgba(14,23,19,.08)}

/* chico: mismo sistema, sombra más corta */
.btn.chico:not(.sec):not(.wa){box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.25),0 5px 14px -6px rgba(var(--menta-rgb),.55)}
.btn.chico{border-radius:var(--radio-2);letter-spacing:-.005em}

/* botón de vidrio de la portada: el relleno al pasar el mouse también es duotono */
.btn-esc:hover{background:linear-gradient(120deg,var(--dt1),var(--dt2))}

/* estados elegidos (pestañas del muro, horario de la agenda, marca en cobertura): el mismo duotono, sin resplandor.
   «html» delante: comunidad.css, agenda.css y cobertura se cargan después que este archivo y pintaban su verde liso encima */
html .cm-tabs button.on,html .ag-hueco.on,html .ce-marcas .pas.on,html .cm-video-btn.on,html .tp-tipos button.on,html .cm-nuevo.modo-historia .cm-foto-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),linear-gradient(120deg,var(--dt1),var(--dt2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}

/* letra de los botones (Rodrigo eligió la opción A, 21 oct): Saira Semi Condensed 600, la de los títulos, ya cargada.
   Con !important porque varias hojas (comunidad, agenda, cobertura, precios) se cargan después y ponen la suya */
html :is(.btn,.btn-esc,.btn-registro,.btn-cuenta,.nv-btn,.pas,.cm-tabs button,.ag-hueco,.ce-marcas .pas,.cm-video-btn,.cm-foto-btn,.tp-tipos button,.ag-no,.ag-si,.ag-nueva,.bj-borrar,.bj-quedo,.av-subir,.av-quitar,.cm-vacio-btn,.es-fiesta-comp,.es-mini-ver){
  font-family:var(--num,'Saira Semi Condensed'),sans-serif!important;font-weight:600!important;letter-spacing:.015em!important}
html .btn{font-size:var(--t-4)}html .btn.chico{font-size:var(--t-4)}

/* ================= 2. LETRAS =================
   Inter para todo lo pequeño y Saira Semi Condensed para títulos. Fuera las mayúsculas muy separadas (0.2–0.3 em)
   con letra condensada, que se veían de plantilla. */
/* título de la hoja del menú de abajo («Mis productos»): como título, no como etiqueta */
@media(max-width:900px){
  .ng-hoja-t{margin:8px 12px 8px!important;font:600 italic var(--t-6)/1.1 var(--num)!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--tinta)!important}
  .ng-hoja .ng-op b{font-weight:600;letter-spacing:-.01em}
  .ng-hoja .ng-op small{font-size:var(--t-3);color:var(--gris)}
}
/* etiquetas pequeñas: Inter seminegra, mayúsculas con espacio corto */
.av-sub,.av-grupo,.cn-cab span,.nv-marca,.gl-txt small,.gar-ante,.cm-fijo,.ce-paso{font-family:var(--f)!important;font-weight:600!important;letter-spacing:.06em!important}
.av-sub{font-size:var(--t-2)!important}.av-grupo,.cn-cab span{font-size:var(--t-1)!important}
.ng-tag-pronto{font-family:var(--f)!important;letter-spacing:.06em!important;font-weight:600!important}
body .ng-op .burbuja.punto::before{font:700 var(--t-1)/1 var(--f)!important;letter-spacing:.06em!important}
/* portada: el lema y la insignia «distribuidor oficial» dejan la letra de videojuego (Audiowide) */
.lema{font-family:var(--f)!important;font-weight:600!important;letter-spacing:.16em!important}
.lema.lema-pie{letter-spacing:-.01em!important}
@media(max-width:640px){.lema{letter-spacing:.12em!important}}
.oficial{font:600 italic var(--t-4) var(--num)!important;letter-spacing:.06em!important}
.piloto-globo em{font-family:var(--num)!important;font-style:italic!important;font-weight:700}
/* menú de arriba: mismo peso y tamaño parejo */
.ng-disparo{font-family:var(--f);font-weight:500;letter-spacing:-.005em}
.ng-op b{font-family:var(--f);font-weight:600;letter-spacing:-.01em}

/* ================= 3. ENTRADAS CON VIDA =================
   Lo que entra a la vista sube 14 px y aparece (pulido.js pone las clases); el primero de cada sección recibe un
   solo barrido de luz. Nada se esconde si no corre el código. */
.pl-rev{opacity:0;transform:translate3d(0,14px,0)}
.pl-rev.pl-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--curva-entra),transform var(--dur-3) var(--pl-suave)!important;transition-delay:var(--pl-d,0ms)!important}
.pl-luz{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3}
.pl-luz i{position:absolute;top:-20%;bottom:-20%;left:0;width:45%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 80%,transparent 100%);
  transform:translate3d(-120%,0,0) skewX(-12deg);animation:plLuz 1.1s var(--pl-suave) forwards}
html[data-modo="ev"] main .pl-luz i{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%)}
@keyframes plLuz{to{transform:translate3d(320%,0,0) skewX(-12deg)}}

/* ================= 4. MENÚS CON RESORTE ================= */
@media(max-width:900px){
  /* píldora que se desliza entre pestañas (pulido.js la crea); las pestañas ya no pintan su propio fondo */
  nav.abajo.pl-pil > button,nav.abajo.pl-pil .ng-tab{position:relative;z-index:1;background:transparent!important}
  .pl-pildora{position:absolute;left:0;top:0;border-radius:24px;background:rgba(var(--tinta-rgb),.12);
    box-shadow:inset 0 1px 0 rgba(var(--tinta-rgb),.08);pointer-events:none;z-index:0;opacity:0;
    transform:translate3d(var(--x,0),var(--y,0),0);transition:transform var(--dur-3) var(--pl-resorte),opacity var(--dur-2) var(--curva-entra),width var(--dur-3) var(--pl-suave)}
  .pl-pildora.si{opacity:1}
  /* el ícono de la pestaña: brinquito al elegirla */
  nav.abajo .pl-brinca svg{animation:plBrinca var(--dur-3) var(--pl-resorte)}

  /* hoja: nace de la pestaña con resorte; al cerrar se va rápido hacia abajo */
  .ng-hoja{transform:translate3d(0,14px,0) scale(.92)!important;transition:transform var(--dur-2) var(--pl-sale),opacity var(--dur-1) var(--curva-sale)!important}
  .ng-hoja.abierta{transform:none!important;transition:transform var(--dur-3) var(--pl-suave),opacity var(--dur-1) var(--curva-entra)!important}
  .ng-hoja>*{opacity:0;transform:translate3d(0,10px,0) scale(.98);transition:opacity var(--dur-1) var(--curva-sale),transform var(--dur-1) var(--pl-sale)!important;transition-delay:0s!important}
  .ng-hoja.abierta>*{opacity:1;transform:none;transition:opacity var(--dur-2) var(--curva-entra),transform var(--dur-3) var(--pl-suave)!important;transition-delay:calc(40ms + var(--i,0) * 32ms)!important}
  /* la opción que tocas se hunde */
  .ng-hoja .ng-op{transition:background-color var(--dur-1) var(--curva-entra)}
  .ng-hoja .ng-op:active{background:rgba(var(--menta-rgb),.12);transform:scale(.98)!important;transition-duration:var(--dur-1)!important}
}
@keyframes plBrinca{0%{transform:scale(.82)}100%{transform:none}}

/* menú de arriba (computadora): baja con resorte y las opciones llegan escalonadas */
@media(min-width:901px){
  .ng-menu{transform:translateX(-50%) translateY(-6px) scale(.97);transform-origin:50% 0;transition:opacity var(--dur-1) var(--curva-sale),transform var(--dur-1) var(--pl-sale)}
  .ng-grupo.abierto .ng-menu{transform:translateX(-50%);transition:opacity var(--dur-1) var(--curva-entra),transform var(--dur-3) var(--pl-suave)}
  .ng-menu>.ng-op{opacity:0;transform:translateY(-4px);transition:opacity var(--dur-1),transform var(--dur-1)}
  .ng-grupo.abierto .ng-menu>.ng-op{opacity:1;transform:none;transition:opacity var(--dur-2) var(--curva-entra),transform var(--dur-3) var(--pl-suave),background-color var(--dur-1);transition-delay:calc(30ms + var(--i,0) * 22ms)}
  .ng-grupo.abierto .ng-menu>.ng-op:hover{transition-delay:0s}
  .ng-disparo{transition:color var(--dur-1),background-color var(--dur-1)}
}

@media(prefers-reduced-motion:reduce){
  .pl-rev{opacity:1!important;transform:none!important}
  .pl-luz{display:none}
  .pl-pildora{transition:opacity var(--dur-1)!important}
  nav.abajo .pl-brinca svg{animation:none}
  .ng-menu,.ng-grupo.abierto .ng-menu{transform:translateX(-50%)!important}
  .ng-menu>.ng-op,.ng-hoja,.ng-hoja.abierta,.ng-hoja>*{transform:none!important;transition-delay:0s!important}
  .btn,.btn-esc{transition:none}
}

/* ================= 5. CAMPOS =================
   Un solo lenguaje para inputs, selects, horas, casillas e interruptores (Rodrigo, 22 oct: «sutiles, no cuadros toscos»):
   44 px de alto en celular (mínimo para el dedo), radio 12, borde de 1 px, letra de 16 px (así iOS no hace zoom) y casillas
   de 20 px con el color del modo. «html» delante y algunos !important: agenda, herramientas, precios y comunidad se cargan después */
html :is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button],[type=image]),select,textarea):not(.codigo input,.tp-nom,.cob-form input,.ct-fotos input,.x-entrada input,.cm-comp textarea,.cm-comp input){
  min-height:44px;padding:12px 16px;border-radius:var(--radio-2);border:1px solid rgba(var(--tinta-rgb),.14);background-color:rgba(var(--tinta-rgb),.045);
  color:var(--tinta);font-size:var(--t-4);line-height:1.3;transition:border-color var(--dur-1),box-shadow var(--dur-1),background-color var(--dur-1)}
html :is(input,select,textarea):not([type=checkbox],[type=radio]):hover{border-color:rgba(var(--tinta-rgb),.24)}
html :is(input,select,textarea):not([type=checkbox],[type=radio]):focus{outline:none;border-color:var(--menta);box-shadow:0 0 0 3px rgba(var(--menta-rgb),.18);background-color:rgba(var(--tinta-rgb),.06)}
html main.pg :is(input:not([type=checkbox],[type=radio],[type=file]),select,textarea){background-color:rgba(var(--tinta-rgb),.045)}
html textarea:not(.cm-comp textarea){min-height:96px;resize:vertical}
/* select con flecha fina propia */
html select:not([multiple]){-webkit-appearance:none;appearance:none;padding-right:40px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239AA3B0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px!important}
/* los que llevan algo a la izquierda (lupa, $) conservan su espacio */
html .buscar input{padding-left:44px!important}   /* !important: la regla general de campos (arriba) pesa más y la lupa tapaba el texto */
/* Tabla de precios: el precio a la misma escala que los demás campos (antes 20 px condensada) */
html .tp-precio input{min-height:44px;padding:12px 16px 12px 28px!important;font:600 var(--t-4)/1.3 var(--f)!important}
html .tp-precio label span{left:14px;font-weight:600}
html .tp-meta select{min-height:44px;padding:12px 40px 12px 16px!important;font-size:16px!important}
html .ct-part input{padding:12px 12px;font-size:var(--t-4)}
@media(min-width:901px){
  html :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select):not(.codigo input,.tp-nom,.cob-form input,.ct-fotos input){min-height:42px;font-size:var(--t-4)}
  html :is(.tp-precio input,.tp-meta select){font-size:15px!important}
}
/* casillas y opciones: 20 px, borde fino; marcadas toman el duotono del modo */
html :is(label,.check,.ct-check,.ct-guardar-cli) > input[type=checkbox]:not(label.ag-com input),html input[type=checkbox].casilla{
  -webkit-appearance:none;appearance:none;flex:none;box-sizing:border-box;padding:0!important;min-height:0;width:20px!important;height:20px!important;margin:1px 0 0;border-radius:var(--radio-1);border:1.5px solid rgba(var(--tinta-rgb),.32);
  background:rgba(var(--tinta-rgb),.04) center/12px no-repeat;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
html :is(label,.check,.ct-check,.ct-guardar-cli) > input[type=checkbox]:not(label.ag-com input):checked{border-color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(120deg,var(--dt1,var(--menta)),var(--dt2,var(--menta)))}
html[data-modo="ev"] main :is(label,.check,.ct-check,.ct-guardar-cli) > input[type=checkbox]:checked{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.3 5 8.6l4.5-5'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(120deg,var(--dt1),var(--dt2))}
html :is(label,.check,.ct-check) > input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;box-sizing:border-box;padding:0!important;min-height:0;width:20px!important;height:20px!important;margin:1px 0 0;border-radius:50%;
  border:1.5px solid rgba(var(--tinta-rgb),.32);background:rgba(var(--tinta-rgb),.04);cursor:pointer;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
html :is(label,.check,.ct-check) > input[type=radio]:checked{border-color:var(--menta);box-shadow:inset 0 0 0 4px var(--panel,#0B0F14);background:linear-gradient(120deg,var(--dt1,var(--menta)),var(--dt2,var(--menta)))}
html[data-modo="ev"] main :is(label,.check,.ct-check) > input[type=radio]:checked{box-shadow:inset 0 0 0 4px #fff}
html :is(label,.check,.ct-check,.ct-guardar-cli) > input:is([type=checkbox],[type=radio]):focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--menta-rgb),.25)}
/* botones rectangulares: mismo radio que los campos */
html .btn{border-radius:var(--radio-2)}html .btn.chico{border-radius:var(--radio-2)}
html[data-modo="ev"] main select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234D5A53' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat;background-position:right 14px center;background-size:12px}

/* ================= 6. FORMULARIOS COMPACTOS =================
   Rodrigo, 22 oct: «hiciste más pequeños los cuadros pero dejaste el mismo aire». Una escala de espacios para todos los
   formularios (Cotizador, Agenda, Tabla de precios, Registro, Perfil, Configuración, Soporte, Panel): etiqueta chica y gris
   pegada a su campo, 12 px entre campos y tarjetas con 16 px de relleno en celular */
:root{--esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:24px}
html label:not([class]){display:block;margin:var(--esp-3) 0 6px;font-size:var(--t-3);line-height:1.3;font-weight:600;color:var(--gris);letter-spacing:0}
html :is(.dos,.tres,.ct-cli,.ct-auto) > div > label:not([class]):first-child,html .caja > label:not([class]):first-child,html .paso + label:not([class]),html .paso + .dos > div > label:first-child{margin-top:0}
html main.pg .dos{gap:var(--esp-3)}
html .caja:has(input:not([type=checkbox],[type=radio]),select,textarea) > .paso:first-child{margin:0 0 var(--esp-3);font-size:var(--t-5);gap:var(--esp-2)}
html .ct-form .caja{margin-bottom:var(--esp-3)}
html .hint{margin-top:var(--esp-1)}
@media(max-width:640px){
  html main.pg .caja:has(input:not([type=checkbox],[type=radio]),select,textarea){padding:var(--esp-4)}
}
/* casillas de una línea: texto chico al lado, sin hueco antes del paréntesis */
html .ct-check{gap:var(--esp-2);align-items:center;margin:var(--esp-1) 0 0;font-size:var(--t-3);line-height:1.35}
html .ct-check small{font-size:var(--t-2);color:var(--gris);white-space:nowrap}
html .ct-guardar-cli{align-self:center}
/* Cotizador › Cliente y Auto: en celular los campos cortos van en pareja (WhatsApp + Correo, Placa + Kilometraje) */
@media(max-width:860px) and (min-width:360px){
  html .ct-cli,html .ct-auto{grid-template-columns:1fr 1fr;grid-auto-flow:row dense}
  html .ct-cli > :first-child,html .ct-cli > .ct-guardar-cli,html .ct-auto > :first-child,html .ct-auto > :nth-child(3){grid-column:1/-1}
}
/* Tabla de precios en pantallas angostas: duración y categoría una sobre otra para que «Sin categoría» se lea completo */
@media(max-width:359px){html .tp-meta{flex-direction:column}}
/* barra de abajo: Inicio al centro, un poco destacado (ícono más grande) */
@media(max-width:900px){nav.abajo > button.ng-centro svg{width:26px;height:26px}nav.abajo > button.ng-centro{font-weight:700}}
/* Videos: solo la flecha de regresar, en un círculo de 40 px */
html .cm-rl-x{width:40px;padding:0;justify-content:center}

/* El Club: los nombres con la letra de los títulos (Saira Semi Condensed en itálica, como «Mis productos») en muro, comentarios,
   historias, Videos y perfil; la palomita azul sigue al lado y los nombres largos terminan en «…» */
html :is(.cm-quien b,.cm-com b[data-perfil],.cm-rl-c-cab b,.cm-hist-cab b,.cm-perfil-txt h2,.cm-circ small,.cm-rl-autor){font-family:var(--num)!important;font-style:italic!important;font-weight:600!important;letter-spacing:.005em}
html :is(.cm-quien b,.cm-com b[data-perfil],.cm-rl-c-cab b,.cm-hist-cab b){display:inline-block;max-width:calc(100% - 34px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;padding-right:.12em}
html .cm-quien b{font-size:var(--t-4)!important;line-height:1.25}
html :is(.cm-com b[data-perfil],.cm-rl-c-cab b,.cm-hist-cab b){font-size:15px!important}
html .cm-circ small{font-size:var(--t-2)!important}
html .cm-rl-autor{font-size:16.5px!important}
html .cm-rl-autor small{font-family:var(--f)!important;font-style:normal!important;font-weight:500!important}

/* ================= 7. PANEL EN CELULAR =================
   Rodrigo, 22 oct: la tabla se salía por la izquierda y las acciones quedaban gruesas. En celular cada renglón es una tarjeta
   (tablas.js pone el nombre de la columna en cada celda): arriba quién, en medio los datos en 2 columnas, abajo las acciones.
   Nada se sale de la pantalla y no hay desplazamiento de lado. En computadora la tabla se queda. */
html #panel .acciones{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-2)}
html #panel .ac-campo{display:flex;flex-direction:column;gap:4px;margin:0;font-size:var(--t-2);font-weight:600;color:var(--gris);min-width:0}
html #panel .ac-campo :is(input,select){width:auto;min-width:0;margin:0}
html #panel .acciones .btn{margin:0;width:auto}
@media(max-width:700px){
  html #panel .tabla{overflow:visible;background:none;border:0;border-radius:0}
  html #panel .tabla table.tb-cel{display:block;min-width:0;width:100%}
  html #panel .tabla table.tb-cel tbody{display:grid;gap:var(--esp-3)}
  html #panel .tabla table.tb-cel tr.tb-cab{display:none}
  html #panel .tabla table.tb-cel tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-3) var(--esp-3);padding:var(--esp-4);
    background:var(--sup);border:1px solid var(--linea);border-radius:var(--radio-2)}
  html #panel .tabla table.tb-cel td{display:block;min-width:0;padding:0;border:0;overflow-wrap:anywhere;font-size:var(--t-3)}
  html #panel .tabla table.tb-cel td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:var(--t-2);font-weight:600;color:var(--gris)}
  /* quién (primera columna) arriba y a lo ancho, sin etiqueta; las acciones (última) abajo y a lo ancho */
  html #panel .tabla table.tb-cel td:first-child{grid-column:1/-1;font-weight:600;font-size:var(--t-4)}
  html #panel .tabla table.tb-cel td:first-child::before{display:none}
  html #panel .tabla table.tb-cel td:last-child:not(:first-child){grid-column:1/-1}
  html #panel .tabla table.tb-cel td:last-child:not([data-label]),html #panel .tabla table.tb-cel td[colspan]{grid-column:1/-1}
  html #panel .tabla table.tb-cel td:empty{display:none}
  html #panel .tabla td .meta{font-weight:400;font-size:var(--t-3)}
  /* comprobante como botón */
  html #panel .tabla a[data-comp]{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--linea2);border-radius:var(--radio-2);color:var(--tinta);text-decoration:none;font-weight:600;font-size:var(--t-3)}
  /* acciones: Garantía y Vence en pareja, precio a lo ancho, Aprobar y Rechazar en una fila */
  html #panel .tabla .acciones{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--esp-2) var(--esp-3);padding-top:var(--esp-3);border-top:1px solid var(--linea)}
  html #panel .tabla .ac-campo :is(input,select){width:100%}
  html #panel .tabla .ac-campo.ac-ancho{grid-column:1/-1}
  html #panel .tabla .acciones .btn{width:100%;justify-content:center}
  html #panel .tabla .acciones:has(.ac-campo:only-of-type) .btn{align-self:end}
}
/* Panel: cifras y títulos sin tocarse; el select de garantía cabe aun a 320 px */
html #panel .cuenta em{margin-bottom:4px}
html #panel h2{line-height:1.15}
html #panel .ac-campo select{padding-right:32px!important;background-position:right 10px center!important}
/* pie: Grupo EMIR (Rodrigo, 5 nov: «ya no somos solo Diagnóstico EMIR sino Grupo EMIR»; 8 nov: «algo más pro»).
   Celular: una lista agrupada (icono, nombre, línea, flecha) con filas de 64 px. Escritorio: cuatro tarjetas iguales.
   Solo tokens del tema (11 modos); iconos de línea 1.8 como los del portal; sin franja de color a la izquierda; «Muy pronto» en chip neutro. */
#pie .grupo-emir{margin:28px 0 20px;padding-top:24px;border-top:1px solid var(--linea);text-align:left}
#pie .ge-tit{margin:0 0 14px;font:700 italic 22px/1.05 var(--num);letter-spacing:-.005em;text-transform:none;color:var(--texto)}
#pie .ge-tit i{font-style:italic;color:var(--gris)}
#pie .ge-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border:1px solid var(--linea2);border-radius:16px;background:var(--sup);overflow:hidden}
#pie .ge-lista li{min-width:0}
#pie .ge-lista li+li{border-top:1px solid var(--linea)}
#pie .ge-marca{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:14px;min-height:64px;padding:12px 14px 12px 12px;color:inherit;text-decoration:none;font-weight:400;
  transition:background-color var(--dur-1,140ms) ease,transform var(--dur-1,140ms) ease;-webkit-tap-highlight-color:transparent}
#pie .ge-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--fondo);border:1px solid var(--linea2);color:var(--texto)}
#pie .ge-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#pie .ge-txt{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
#pie .ge-txt strong{flex:1 1 100%;font:600 15px/1.25 var(--f);letter-spacing:-.005em;color:var(--texto)}
#pie .ge-txt small{font:400 13px/20px var(--f);color:var(--gris)}
#pie .ge-pronto{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid var(--linea2);border-radius:99px;font:600 11px/1 var(--f);font-style:normal;letter-spacing:.02em;color:var(--texto2,var(--texto));white-space:nowrap}
#pie .ge-ir{width:20px;height:20px;fill:none;stroke:var(--gris);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-1,140ms) ease,stroke var(--dur-1,140ms) ease}
#pie .ge-marca:hover{background:var(--sup2)}
#pie .ge-marca:hover .ge-ir{stroke:var(--texto);transform:translateX(3px)}
#pie .ge-marca[target]:hover .ge-ir{transform:translate(2px,-2px)}
#pie .ge-marca:active{transform:scale(.985)}
#pie .ge-marca:focus-visible{outline:2px solid var(--texto);outline-offset:-2px;border-radius:inherit}
@media(min-width:760px){
  #pie .grupo-emir{margin-top:32px;padding-top:28px}
  #pie .ge-tit{font-size:26px;margin-bottom:16px}
  #pie .ge-lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border:0;border-radius:0;background:none;overflow:visible}
  #pie .ge-lista li+li{border-top:0}
  #pie .ge-marca{grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:auto 1fr;align-content:start;gap:18px 10px;height:100%;min-height:148px;padding:18px;
    border:1px solid var(--linea2);border-radius:16px;background:var(--sup);transition:background-color var(--dur-1,140ms) ease,border-color var(--dur-1,140ms) ease,transform 180ms ease}
  #pie .ge-ico{grid-column:1;grid-row:1}
  #pie .ge-ir{grid-column:2;grid-row:1;align-self:start}
  #pie .ge-txt{grid-column:1/-1;grid-row:2;align-self:end}
  #pie .ge-txt strong{font:700 italic 20px/1.1 var(--num);letter-spacing:0;margin-bottom:4px}
  #pie .ge-marca:hover{border-color:color-mix(in srgb,var(--texto) 34%,transparent);transform:translateY(-2px)}
  #pie .ge-marca:active{transform:translateY(0) scale(.99)}
}
@media(prefers-reduced-motion:reduce){#pie .ge-marca,#pie .ge-ir{transition:none}#pie .ge-marca:hover,#pie .ge-marca:active,#pie .ge-marca:hover .ge-ir{transform:none}}