/* 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: .opciones las estila control.css (tema 3); aquí solo lo que el tema no sabe. */
.campo-vence{display:grid}   /* control.css lo mostraba según el <select>; ahora lo oculta el atributo hidden (pantallas.css) */
#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}

/* Inicio: sin permiso para emitir, el botón se oculta y su párrafo también (no deja un hueco). */
p:has(> #i-nueva[hidden]){display:none}

/* Administración: la fecha límite del CAI ocupa el mismo ancho que los demás campos de su tarjeta (control.css la deja en 13ch; ese archivo no se edita). */
input#cai-limite{max-width:none}
.campo:has(#cai-limite){justify-items:stretch}

/* Administración: «Para empezar a facturar», una lista de pasos con ✓ cuyos renglones llevan a su sección. */
.pasos-lista{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.pasos-lista a{display:flex;align-items:center;min-height:44px;font:700 18px/1.3 var(--ui);color:var(--texto);text-decoration:underline;text-underline-offset:3px}


/* Vista de la factura en pantalla ancha: la barra de acciones en UNA fila (control.css la apila en columna). */
@media (min-width:700px){
  .banda-acciones,.banda-acciones[class]{flex-direction:row;align-items:center;gap:12px;padding:10px 18px}
  .banda-acciones .derecha{order:0;margin-left:auto}
  .banda-acciones .btn,.banda-acciones .btn.secundario{flex:0 0 auto;min-height:48px;padding-block:10px}
}

/* Compras: la tabla del libro en el teléfono (una tarjeta por compra, como Facturas) y el motivo de una anulación bajo su estado. control.css del diseñador no se edita. */
.tabla .sub{display:block;font-size:14px;color:var(--texto-suave);white-space:normal}
@media (max-width:760px){
  .tabla td[data-r="ISV"],.tabla td[data-r="¿Baja su ISV?"]{grid-column:1/-1;font-size:15px;color:var(--texto-suave)}
  .tabla td[data-r="ISV"]::before,.tabla td[data-r="¿Baja su ISV?"]::before{content:attr(data-r) ": ";font-weight:700}
}

/* Impuestos: el borrador del 201 es una tabla de dos columnas (concepto y monto); en el teléfono se queda así, lado a lado, en vez de la tarjeta de Facturas. */
@media (max-width:760px){
  .tabla.casillas tbody tr{grid-template-columns:1fr auto;align-items:start}
  .tabla.casillas td:first-child{grid-column:1;grid-row:1}
  .tabla.casillas td:last-child{grid-column:2;grid-row:1;margin:0;font-weight:800;text-align:right}
}
.tabla.casillas td{white-space:normal}
.tabla.casillas td:first-child{width:72%}
.tabla.casillas .total td{font-size:17px}
/* ── Cotizaciones ── */
.acciones-fila{display:flex;flex-wrap:wrap;gap:6px}
dialog.dlg-cot{width:min(720px,94vw)}
dialog.dlg-hoja{width:min(900px,96vw)}
/* La hoja entera, achicada (cotizaciones.js la escala): sin barra de desplazamiento dentro del recuadro. */
.hoja-cot-caja{position:relative;height:calc(100dvh - 280px);min-height:300px;overflow:hidden;border:2px solid var(--texto);background:#8a8378;margin-block:12px}
.hoja-cot-marco{position:absolute;top:0;left:0;display:block;width:864px;height:1104px;border:0;background:#fff;transform-origin:0 0}
.fila-cot{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px}
@media (max-width:699px){.fila-cot{grid-template-columns:1fr}}