/* bigger Control · pulido (movimiento y acabado). Va DESPUÉS de control.css (del diseñador, que no se edita) y de pantallas.css.
   No cambia el estilo: ningún color nuevo (solo las variables del diseñador), ninguna forma nueva. Solo suaviza: transiciones,
   entradas de avisos, diálogos y paneles, foco, estados «cargando» y ritmo del texto. Todo se apaga con prefers-reduced-motion. */

:root{
  --suave:cubic-bezier(.22,.61,.36,1);
  --rapido:140ms;
  --medio:220ms;
}

/* ── base ── */
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{text-rendering:optimizeLegibility}
h1,h2,.subtitulo{text-wrap:balance}
.ayuda,.nota,.aviso p{text-wrap:pretty}
::selection{background:var(--ambar);color:var(--texto)}

/* ── entrada de la pantalla ── */
@keyframes sube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
main,.entrada .tarjeta{animation:sube var(--medio) var(--suave) backwards}

/* ── pestañas, enlaces y botones: cambian suave, sin saltos ── */
.pestanas a,.pestanas .mas{transition:background-color var(--rapido) var(--suave),color var(--rapido) var(--suave),box-shadow var(--rapido) var(--suave)}
a{transition:color var(--rapido) var(--suave)}
.btn{transition:transform var(--rapido) var(--suave),box-shadow var(--rapido) var(--suave),background-color var(--rapido) var(--suave),color var(--rapido) var(--suave),border-color var(--rapido) var(--suave)}
.btn:active{transition-duration:60ms}
.btn:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.pestanas .mas::after{transition:transform var(--rapido) var(--suave)}
.pestanas .mas:has(+ .menu:popover-open)::after{transform:rotate(225deg) translate(-2px,-2px)}

/* ── campos ── */
input,select,textarea{transition:border-color var(--rapido) var(--suave),background-color var(--rapido) var(--suave)}
@keyframes sacude{20%{transform:translateX(-3px)}60%{transform:translateX(3px)}100%{transform:none}}
.campo.falta input,.campo.falta select,.campo.falta textarea{animation:sacude 260ms var(--suave) 1}
.campo .error{animation:aparece var(--medio) var(--suave) backwards}

/* ── tarjetas y tablas ── */
.tarjeta{transition:box-shadow var(--medio) var(--suave)}
.tabla tbody tr td{transition:background-color var(--rapido) var(--suave)}

/* ── avisos: entran con suavidad cuando dejan de estar ocultos ── */
.aviso{animation:sube var(--medio) var(--suave) backwards}

/* ── diálogos y paneles ── */
dialog[open]{animation:sube var(--medio) var(--suave) backwards}
dialog[open]::backdrop{animation:aparece var(--medio) var(--suave) backwards}
.pestanas .menu:popover-open{animation:sube var(--rapido) var(--suave) backwards}
.hoja-grande:popover-open{animation:aparece var(--medio) var(--suave) backwards}

/* ── cargando: un pulso lento en el «Un momento…», y la barra de envío entra sin brusquedad ── */
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.6}}
#vista-cargando .ayuda,[aria-busy=true]{animation:pulso 1.6s ease-in-out infinite}
.estado-envio{animation:sube var(--medio) var(--suave) backwards}

/* ── estados vacíos: un texto de ayuda suelto en una tarjeta respira ── */
.tarjeta > .ayuda:only-child{padding:6px 0}

/* ── quien prefiere menos movimiento: todo quieto ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #vista-cargando .ayuda,[aria-busy=true]{animation:none}
}

/* Plazo de crédito (meses) de Tanan: angosto y a la izquierda, como el campo de fecha (control.css del diseñador no se edita). */
input#plazo{max-width:9ch;font-variant-numeric:tabular-nums}

/* Condición de pago y plazo: radios reales con cara de botón/tarjeta (se tocan, no se escriben). control.css del diseñador no se edita. */
.campo-vence{display:grid}   /* control.css lo mostraba según el <select>; ahora lo oculta el atributo hidden (pantallas.css) */
.campo .rotulo{font:700 15px/1.3 var(--ui)}
.opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opciones.chicas{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.opciones input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.opciones label{display:grid;gap:2px;align-content:center;justify-items:center;text-align:center;min-height:56px;padding:10px 12px;background:var(--superficie);border:1.5px solid var(--borde-campo);border-radius:var(--radio);cursor:pointer;font:700 17px/1.2 var(--ui)}
.opciones label b{font:inherit}
.opciones label small{font:500 14px/1.2 var(--ui);color:var(--texto-suave)}
.opciones.chicas label{min-height:48px;font-size:16px}
.opciones label:hover{border-color:var(--texto)}
.opciones input:checked + label{border:2px solid var(--texto);box-shadow:var(--sombra) var(--rojo);background:var(--fondo)}
.opciones input:focus-visible + label{outline:3px solid var(--foco);outline-offset:2px}
#c-plazo-otro{display:grid;gap:6px;justify-items:start;margin-top:10px}

/* Descripción guiada de Grúas Tanan: tres cuadros cortos donde va la descripción, y un enlace para escribir otra. control.css del diseñador no se edita. */
.linea .guia .rotulo{display:block;margin-bottom:6px;font:700 17px/1.3 var(--ui)}
.guia-campos{display:grid;gap:10px}
.linea .modo{grid-column:1/-1;justify-self:start;min-height:44px;padding:0;background:none;border:0;color:var(--texto);font:600 16px/1.3 var(--ui);text-decoration:underline;cursor:pointer}
.linea .modo[hidden]{display:none}
details.otros{margin:0 0 14px}
details.otros summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:700 17px/1.3 var(--ui)}