/* Estados de campo de componentes/validar.js. Se apoya en los tokens del sitio
   (con valores por defecto) y funciona en claro y oscuro. El color nunca va
   solo: siempre hay icono + texto. Transiciones de 150 ms. */
.v-campo{position:relative;--v-danger:var(--danger,#C53030);--v-ok:var(--ok,#15803D);--v-focus:var(--blue-500,#1B9CE5);--v-muted:var(--ink-soft,#51637B);--v-t:150ms ease-out}
.v-campo input,.v-campo select,.v-campo textarea{transition:border-color var(--v-t),box-shadow var(--v-t),background-color var(--v-t)}
.v-campo input:not([type=checkbox]),.v-campo select,.v-campo textarea{padding-right:2.6rem}
.v-campo.v-select select{padding-right:3.4rem}
/* icono dentro del campo, a la derecha (en los select, a la izquierda de la flecha) */
.v-caja{position:relative;display:block}
.v-icono{position:absolute;right:.9rem;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity var(--v-t),transform var(--v-t);
  background-repeat:no-repeat;background-size:contain}
.v-campo.v-select .v-icono{right:2.1rem}
.v-campo.v-area .v-icono{top:1.4rem}
.v-invalido .v-icono,.v-valido .v-icono,.v-comprobando .v-icono{opacity:1;transform:none}
.v-invalido .v-icono{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C53030' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E")}
.v-valido .v-icono{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.v-comprobando .v-icono{border:2px solid var(--v-muted);border-top-color:transparent;border-radius:50%;animation:vGira .8s linear infinite}
@keyframes vGira{to{transform:rotate(360deg)}}
/* bordes por estado (el foco manda: anillo del color del estado) */
.v-invalido input,.v-invalido select,.v-invalido textarea{border-color:var(--v-danger)!important;box-shadow:0 0 0 3px rgba(197,48,48,.14)}
.v-valido input,.v-valido select,.v-valido textarea{border-color:var(--v-ok)!important;box-shadow:0 0 0 3px rgba(21,128,61,.14)}
.v-invalido input:focus,.v-invalido select:focus,.v-invalido textarea:focus{box-shadow:0 0 0 3px rgba(197,48,48,.22)}
.v-valido input:focus,.v-valido select:focus,.v-valido textarea:focus{box-shadow:0 0 0 3px rgba(21,128,61,.22)}
/* la línea de ayuda reserva su alto: no hay salto de maqueta */
.v-ayuda{display:block;min-height:18px;font-size:12.5px;line-height:18px;margin-top:.1rem;color:var(--v-muted);opacity:0;transition:opacity var(--v-t),color var(--v-t)}
.v-invalido .v-ayuda{opacity:1;color:var(--v-danger)}
.v-valido .v-ayuda,.v-comprobando .v-ayuda{opacity:1}
.v-valido .v-ayuda{color:var(--v-ok)}
/* resumen sobre el botón */
.v-resumen{margin:0 0 .8rem;font-size:.9rem;font-weight:600;color:var(--danger,#C53030);display:flex;align-items:center;gap:.45rem}
.v-resumen::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.v-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.v-campo *,.v-icono,.v-ayuda{transition:none!important}.v-comprobando .v-icono{animation-duration:1.6s}}