/* =====================================================================
   validation.css — Mensajes de validación (estilo IBM Carbon)
   Reemplaza los globos nativos del navegador por un componente propio.
   Depende de tokens.css. Ver assets/js/core/validation.js
   ===================================================================== */

:root {
  --fv-error:        #da1e28;   /* borde / icono */
  --fv-error-text:   #da1e28;   /* texto del mensaje */
  --fv-error-soft:   #fff1f1;   /* fondo del resumen */
  --fv-error-strong: #ba1b23;   /* fondo del tooltip */
  --fv-success:      #24a148;
}

[data-theme="dark"] {
  --fv-error:        #fa4d56;
  --fv-error-text:   #ff8389;
  --fv-error-soft:   rgba(250, 77, 86, .12);
  --fv-error-strong: #da1e28;
  --fv-success:      #42be65;
}

/* ---------------------------------------------------------------------
   1. Campo inválido
   Carbon marca el error con outline (no border) para no mover el layout.
   --------------------------------------------------------------------- */
.fv-invalid,
.fv-invalid:focus {
  outline: 2px solid var(--fv-error) !important;
  outline-offset: -2px !important;
  border-color: var(--fv-error) !important;
}

/* Icono de alerta dentro del control (solo inputs de texto y textarea).
 *
 * Queda fuera el campo del combo con busqueda: es un <input>, asi que le
 * tocaba por tipo, pero su galon lo dibuja `.select-buscable::after` en ese
 * mismo rincon -16px del borde, 16 de lado- y los dos se pintaban uno encima
 * del otro. Misma razon por la que el <select> de mas abajo tampoco lo lleva:
 * el control ya tiene su icono ahi. */
input.fv-invalid:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not(.select-buscable__campo),
textarea.fv-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23da1e28'%3E%3Cpath d='M8 1a7 7 0 1 0 7 7 7 7 0 0 0-7-7Zm-.75 3h1.5v5h-1.5Zm.75 8.2a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px !important;
}

textarea.fv-invalid { background-position: right 12px top 10px; }

[data-theme="dark"] input.fv-invalid:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not(.select-buscable__campo),
[data-theme="dark"] textarea.fv-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fa4d56'%3E%3Cpath d='M8 1a7 7 0 1 0 7 7 7 7 0 0 0-7-7Zm-.75 3h1.5v5h-1.5Zm.75 8.2a1 1 0 1 1 1-1 1 1 0 0 1-1 1Z'/%3E%3C/svg%3E");
}

/* El select ya trae flecha nativa: solo outline, sin icono de fondo */
select.fv-invalid { padding-right: 12px; }

/* Checkbox / radio inválidos */
input[type=checkbox].fv-invalid,
input[type=radio].fv-invalid {
  outline-offset: 2px !important;
  accent-color: var(--fv-error);
}

/* ---------------------------------------------------------------------
   2. Mensaje en línea (modo por defecto)
   --------------------------------------------------------------------- */
.fv-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--type-size-01);
  line-height: 1.34;
  letter-spacing: .32px;
  color: var(--fv-error-text);
  animation: fv-msg-in var(--dur-fast, .2s) var(--ease, cubic-bezier(.2, 0, .38, .9));
}

.fv-msg__icon {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
  fill: currentColor;
}

.fv-msg__text { min-width: 0; }

/* Cuando el mensaje cuelga de un checkbox en fila */
.field--checkbox + .fv-msg,
.fv-msg--inline { margin-left: 28px; }

@keyframes fv-msg-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   3. Tooltip flotante (modo "tooltip": data-fv-mode="tooltip")
   Equivalente al globo nativo, pero con la identidad del sistema.
   --------------------------------------------------------------------- */
.fv-tip {
  position: fixed;
  z-index: 10050;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--fv-error-strong);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--type-size-02);
  line-height: 1.35;
  letter-spacing: .16px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, .16));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast, .2s) var(--ease, ease),
              transform var(--dur-fast, .2s) var(--ease, ease);
}

.fv-tip.is-open { opacity: 1; transform: none; }

.fv-tip__icon { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: currentColor; }

/* Flecha apuntando al campo */
.fv-tip::after {
  content: '';
  position: absolute;
  left: var(--fv-tip-arrow, 16px);
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

.fv-tip[data-placement="bottom"]::after {
  top: -12px;
  border-bottom-color: var(--fv-error-strong);
}

.fv-tip[data-placement="top"]::after {
  bottom: -12px;
  border-top-color: var(--fv-error-strong);
}

/* ---------------------------------------------------------------------
   4. Resumen del formulario (data-fv-summary en el <form>)
   Reutiliza el patrón de notificación en línea de Carbon.
   --------------------------------------------------------------------- */
.fv-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: var(--sp-06, 1.5rem);
  padding: 14px 16px;
  background: var(--fv-error-soft);
  border-left: 3px solid var(--fv-error);
  font-family: var(--font-sans);
  font-size: var(--type-size-02);
  color: var(--text-primary);
  animation: fv-msg-in var(--dur-base, .3s) var(--ease, ease);
}

.fv-summary__icon { width: 20px; height: 20px; flex: none; fill: var(--fv-error); margin-top: 1px; }
.fv-summary__title { font-weight: var(--type-weight-semibold); display: block; margin-bottom: 4px; }
.fv-summary__list { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: var(--type-size-02); }
.fv-summary__list li { margin-bottom: 2px; }
.fv-summary__list a { color: var(--fv-error-text); text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------------
   5. Sacudida sutil al enviar con errores
   --------------------------------------------------------------------- */
.fv-shake { animation: fv-shake .32s var(--ease, ease); }

@keyframes fv-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  50%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .fv-msg, .fv-summary, .fv-shake, .fv-tip { animation: none !important; transition: none !important; }
}