/* ============================================================================
   Guía de campos obligatorios: los estilos de /pse-campos.js. UNA sola fuente para
   la intranet y la web pública.

   Toma los colores de /pse-tokens.css cuando la página los tiene (la intranet, con su
   tema claro y oscuro) y, si no, usa los de respaldo que están acá (la web pública,
   que no carga los tokens). Por eso no hay un bloque aparte para el tema oscuro: los
   tokens ya cambian solos.

   Dos estados que se tienen que distinguir de un vistazo:
     .pc-guia   «esto es lo próximo a completar»: borde rojo parejo, de un píxel, con
                un halo suave. No acusa: guía.
     .pc-falta  «quisiste seguir y esto quedó vacío»: borde más grueso y más oscuro,
                fondo teñido y un signo de admiración adentro del campo.
   Ninguno depende solo del color: la guía lleva su leyenda debajo, la falta lleva el
   signo y el mensaje junto al botón, y los obligatorios llevan asterisco.
   ========================================================================== */
:root{
  --pc-vivo:#E5484D;                              /* el recuadro: se ve sobre claro y sobre oscuro */
  --pc-rojo:var(--color-error,#B42318);           /* texto: pasa 4,5:1 en los dos temas */
  --pc-fondo:var(--color-error-bg,#FDECEC);
  --pc-texto:var(--color-text,#4A1410);
  --pc-foco:var(--color-focus,#001A5A);
  --pc-halo:rgba(229,72,77,.2);
  --pc-halo-fuerte:rgba(229,72,77,.34);
}

/* Asterisco de la etiqueta y su texto para lectores de pantalla. */
.pc-ast{color:var(--pc-rojo);font-weight:700;margin-left:3px;cursor:help}
.pc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Guía: el próximo campo a completar ──────────────────────────────────── */
/* !important porque cada pantalla define el borde de sus campos con selectores propios
   (.sp-form input, .crm-alta input…) y este estado tiene que ganarles a todos. */
.pc-guia:not([type=checkbox]):not([type=radio]){border-color:var(--pc-vivo)!important;box-shadow:0 0 0 3px var(--pc-halo)!important}
.pc-guia[type=checkbox],.pc-guia[type=radio]{outline:2px solid var(--pc-vivo);outline-offset:2px}

/* ── Falta: quiso seguir y quedó vacío ───────────────────────────────────── */
/* El segundo píxel del borde va como sombra: engrosar el borde de verdad movería el campo. */
.pc-falta:not([type=checkbox]):not([type=radio]){border-color:var(--pc-rojo)!important;box-shadow:0 0 0 1px var(--pc-rojo),0 0 0 4px var(--pc-halo-fuerte)!important;background-color:var(--pc-fondo)!important}
.pc-falta:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=date]):not([type=time]):not([type=number]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23E5484D'/%3E%3Cpath d='M8 4.2v4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='1.05' fill='%23fff'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-size:16px 16px!important;background-position:right 10px center!important}
select.pc-falta:not([multiple]){background-position:right 28px center!important}
.pc-falta[type=checkbox],.pc-falta[type=radio]{outline:2px solid var(--pc-rojo);outline-offset:2px;box-shadow:0 0 0 6px var(--pc-halo-fuerte)}

/* El foco del teclado se sigue viendo por fuera del recuadro rojo. */
.pc-guia:focus-visible,.pc-falta:focus-visible{outline:2px solid var(--pc-foco)!important;outline-offset:3px!important}

/* ── La leyenda ──────────────────────────────────────────────────────────── */
/* Dice QUÉ hay que completar («Elegí la versión del vehículo para seguir»). Ocupa su
   propio renglón debajo del campo: nunca tapa lo que sigue. */
.pc-msj{display:block;margin:5px 0 0;padding:0;font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.35;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;color:var(--pc-rojo)}
.pc-msj-falta{font-weight:700}
/* Campo suelto dentro de una fila: la leyenda baja a un renglón entero, al final de la fila. */
.pc-msj.pc-al-final{order:9999;flex:0 0 auto;width:100%;margin-top:0}
/* Fila alineada por abajo: a los vecinos del campo resaltado se les deja debajo el alto de
   la leyenda, para que todos los campos de la fila sigan a la misma altura (ver filaDe). */
.pc-fila>:not(.pc-con-msj):not(.pc-msj):not(.pc-resumen){margin-bottom:var(--pc-alto,0px)!important}

/* ── El mensaje junto al botón: cuántos faltan ───────────────────────────── */
.pc-resumen{display:block;flex:1 0 100%;width:100%;box-sizing:border-box;margin:10px 0 0;padding:9px 12px 9px 14px;border:1px solid var(--pc-rojo);border-left-width:4px;border-radius:8px;background:var(--pc-fondo);color:var(--pc-texto);font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.4;text-align:left}

/* ── El botón, mientras falta algo ───────────────────────────────────────── */
/* Se ve en espera pero se puede apretar: al hacerlo muestra qué falta. */
.pc-incompleto{opacity:.7}

@media (prefers-reduced-motion:no-preference){
  .pc-guia,.pc-falta{transition:border-color .15s ease,box-shadow .15s ease}
  .pc-incompleto{transition:opacity .15s ease}
  /* Un solo latido cuando el recuadro llega a un campo: es lo que hace que se note que
     «pasó al siguiente». */
  /* Va por `outline` y no por la sombra: la sombra de arriba lleva !important y una
     animación no le gana a un !important. */
  .pc-guia:not([type=checkbox]):not([type=radio]):not(:focus-visible){animation:pcLlega .7s ease-out 1}
  @keyframes pcLlega{0%{outline:0 solid var(--pc-halo-fuerte)}50%{outline:7px solid var(--pc-halo)}100%{outline:7px solid transparent}}
}
@media print{.pc-msj,.pc-resumen{display:none!important}.pc-guia,.pc-falta{box-shadow:none!important}}