/* =============================================================================
   Preacreditaciones V2 — Design System (CSS servible)
   -----------------------------------------------------------------------------
   Iniciativa 30 — Actualización Preacreditaciones.
   Especificación normativa: docs/preacreditaciones-v2/ESPECIFICACION_TECNICA_V2.md
   (§8 Design system V2 y §9 Experiencia de usuario).

   DE DÓNDE SALE LA PALETA
   -----------------------
   Del FORMULARIO PÚBLICO QUE HOY ESTÁ EN PRODUCCIÓN (la vista `/`, es decir
   `register.blade.php` + `layouts/register.blade.php` + `public/css/register.css`
   + `public/form-theme/css/main.css`), medida con `getComputedStyle` sobre la
   página real. El canal público V2 tiene que verse como el que la gente ya usa:
   fondo verde oliva `#bcb822`, tarjeta blanca de radio 10px, botón con degradado
   azul, tipografía Poppins servida localmente y rojo de error `#c80000`.

   CÓMO SE MANTIENE ESTE ARCHIVO
   -----------------------------
   La fuente conceptual del design system es `resources/sass/preaccreditation-v2.scss`.
   Este repositorio NO tiene `node_modules` instalado, por lo que no hay pipeline de
   compilación de SASS disponible: este `.css` está escrito a mano y es el
   equivalente funcional del `.scss` (mismas reglas, mismo orden de secciones,
   mismos valores). Toda modificación debe aplicarse en LOS DOS archivos, en la
   misma sección, para que no se desfasen. Cuando el proyecto vuelva a tener
   `laravel-mix` operativo, este archivo pasa a ser el resultado de compilar el
   `.scss` y deja de editarse a mano.

   REGLAS DE CONVIVENCIA
   ---------------------
   - Todo selector lleva el prefijo `pi-`. No se redefine ni se pisa ninguna clase
     de Bootstrap, de Voyager ni del tema legacy (`custom.css`, `register.css`).
   - No hay dependencias externas: ni frameworks, ni CDN de JS, de CSS ni de
     tipografías. Poppins se sirve desde el propio repositorio con las `@font-face`
     de la sección 0, igual que hace hoy el formulario de producción.
   - Mobile-first: las reglas base valen para teléfono; los ajustes viven en
     `@media (min-width: 768px)` (tablet) y `@media (min-width: 1200px)` (escritorio).
   - Accesibilidad: foco siempre visible con `--pi-focus-ring`, contraste ≥ 4.5:1
     en texto sobre color, y `.pi-visually-hidden` para el texto de lectores.

   ÍNDICE
   ------
    0. Tipografía local (@font-face Poppins)
    1. Tema (:root)
    2. Base, caja, foco y utilidades
    3. Cascarón público (banda de logo y pie)
    4. Tipografía del módulo
    5. pi-card
    6. pi-stepper
    6.1 pi-carousel (pasos del alta pública)
    7. pi-field y controles (input / select / textarea / checkbox / radio-card)
    8. pi-btn
    9. pi-badge
   10. pi-table
   11. pi-tabs
   12. pi-person-row (editor dinámico de personas)
   13. pi-dropzone
   14. pi-alert
   15. pi-timeline
   16. pi-empty
   17. pi-kpi
   18. pi-toolbar
   19. pi-pagination
   20. Preferencias de movimiento
   ========================================================================== */


/* =============================================================================
   0. TIPOGRAFÍA LOCAL — Poppins servida desde el repositorio.
   Los `.ttf` ya existen en `public/form-theme/fonts/poppins/` y son los mismos
   que usa el formulario de producción; las rutas son relativas a `public/css/`.
   Los NOMBRES DE FAMILIA son exactamente los de `form-theme/css/main.css`
   (`Poppins-Regular`, `Poppins-Medium`, `Poppins-SemiBold`, `Poppins-Bold`), así
   que si una página cargara los dos archivos las declaraciones coinciden y no
   chocan. Cada familia declara SU peso real: pidiendo el peso que corresponde se
   evita que el navegador sintetice una negrita falsa sobre una fuente que ya es
   negrita. `font-display: swap` muestra el texto con la fuente de respaldo
   mientras baja el `.ttf`, en vez de dejar el bloque en blanco.
   ========================================================================== */

@font-face {
  font-family: 'Poppins-Regular';
  src: url('../form-theme/fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins-Medium';
  src: url('../form-theme/fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins-SemiBold';
  src: url('../form-theme/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins-Bold';
  src: url('../form-theme/fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =============================================================================
   1. TEMA — variables exactas de §8 de la especificación.
   Paleta del formulario público vigente. No se inventan colores: sólo se derivan
   tintes translúcidos y dos tintas oscurecidas (documentadas donde se usan) a
   partir de estos mismos valores, cuando el color base no llega a 4.5:1.
   ========================================================================== */
:root {
  /* Marca — tomados del formulario público vigente */
  --pi-brand:          #bcb822;  /* verde oliva institucional: fondo del canal público */
  --pi-brand-dark:     #9c9a1c;  /* borde/hover derivado del anterior */
  --pi-primary:        #1364a5;  /* azul del botón (inicio del degradado) */
  --pi-primary-strong: #0f4f83;  /* hover/active del primario */
  --pi-primary-soft:   #e7f0f8;  /* fondos suaves, chips, filas seleccionadas */
  --pi-secondary:      #1F8BE4;  /* azul claro (fin del degradado) */
  --pi-gradient:       linear-gradient(to right, #1364a5, #1F8BE4, #1364a5, #1F8BE4);

  /* Semánticos — derivados, manteniendo el rojo real del formulario */
  --pi-success:        #1e8f6e;  /* aceptada */
  --pi-warning:        #c98a1e;  /* pendiente */
  --pi-danger:         #c80000;  /* rechazada — es el rojo de error del form actual */
  --pi-danger-strong:  #a30000;
  --pi-neutral:        #999999;  /* cancelada, deshabilitado — el gris del form actual */

  /* Superficies y texto — los del formulario actual */
  --pi-surface:        #ffffff;
  --pi-surface-alt:    #f7f7f2;
  --pi-border:         #d9d9d9;
  --pi-border-strong:  #adadad;
  --pi-text:           #333333;
  --pi-text-muted:     #666666;

  --pi-focus-ring:     rgba(19,100,165,.35);
  --pi-radius:         6px;
  --pi-radius-lg:      10px;   /* el de la tarjeta del formulario actual */
  --pi-shadow:         0 1px 3px rgba(0,0,0,.08);
  --pi-shadow-lg:      0 6px 18px rgba(0,0,0,.12);

  /* Tipografía — Poppins, servida localmente desde el theme que ya está en public/ */
  --pi-font:           'Poppins-Regular', 'Poppins', -apple-system, "Segoe UI", Roboto, sans-serif;
  --pi-font-medium:    'Poppins-Medium', 'Poppins', sans-serif;
  --pi-font-semibold:  'Poppins-SemiBold', 'Poppins', sans-serif;
  --pi-font-bold:      'Poppins-Bold', 'Poppins', sans-serif;
}


/* =============================================================================
   2. BASE, CAJA, FOCO Y UTILIDADES
   El reset de caja se aplica sólo dentro de los contenedores del módulo para no
   alterar nada del portal legacy ni del panel Voyager.
   ========================================================================== */

.pi-shell,
.pi-shell *,
.pi-shell *::before,
.pi-shell *::after,
.pi-admin,
.pi-admin *,
.pi-admin *::before,
.pi-admin *::after {
  box-sizing: border-box;
}

/* Cuerpo del canal público (clase propia: no toca `body` a secas).
   El fondo es el verde oliva institucional del formulario de producción: las
   tarjetas blancas del contenido se recortan sobre él igual que hoy. */
.pi-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--pi-brand);
  font-family: var(--pi-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--pi-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Contenedor central de contenido, tanto público como administrativo. */
.pi-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  font-family: var(--pi-font);
  color: var(--pi-text);
}

@media (min-width: 768px) {
  .pi-shell { padding: 24px 24px 64px; }
}

@media (min-width: 1200px) {
  .pi-shell { max-width: 1180px; }
}

/* Ámbito administrativo: hereda tipografía y color del módulo dentro de Voyager. */
.pi-admin {
  font-family: var(--pi-font);
  color: var(--pi-text);
}

/* Cada familia Poppins es un archivo de un solo peso, así que la negrita del
   marcado corriente se pide por familia y no por `font-weight`; si no, el
   navegador engrosaría artificialmente la Regular. */
.pi-shell strong,
.pi-shell b,
.pi-admin strong,
.pi-admin b {
  font-family: var(--pi-font-bold);
  font-weight: 700;
}

/* --- Foco visible -----------------------------------------------------------
   Patrón estándar en dos pasos: se pinta el anillo en `:focus` (sirve en
   navegadores sin `:focus-visible`) y se retira sólo cuando el foco vino del
   puntero. El `outline: none` está justificado porque la regla siguiente
   garantiza el reemplazo para teclado; además, los navegadores que no entienden
   `:focus-visible` descartan la regla entera y conservan el anillo. */
.pi-shell :focus,
.pi-admin :focus {
  outline: 3px solid var(--pi-focus-ring);
  outline-offset: 2px;
}

.pi-shell :focus:not(:focus-visible),
.pi-admin :focus:not(:focus-visible) {
  outline: none;
}

.pi-shell :focus-visible,
.pi-admin :focus-visible {
  outline: 3px solid var(--pi-focus-ring);
  outline-offset: 2px;
}

/* --- Utilidades ------------------------------------------------------------ */

/* Texto sólo para lectores de pantalla (etiquetas, contextos, encabezados). */
.pi-visually-hidden {
  position: absolute !important; /* imprescindible: sacarlo del flujo sin ocultarlo del árbol de accesibilidad */
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.pi-muted   { color: var(--pi-text-muted); }
.pi-strong  { font-family: var(--pi-font-bold); font-weight: 700; }
.pi-nowrap  { white-space: nowrap; }
.pi-right   { text-align: right; }
.pi-center  { text-align: center; }
.pi-mono    { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Separador horizontal del módulo. */
.pi-divider {
  height: 1px;
  margin: 16px 0;
  border: 0;
  background: var(--pi-border);
}

/* Rejilla simple de 1 columna en móvil y N columnas desde tablet. */
.pi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .pi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .pi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* =============================================================================
   3. CASCARÓN PÚBLICO — banda de logo y pie.
   La banda comparte el verde oliva del cuerpo, como el formulario de producción.
   El logotipo institucional es gris sobre fondo transparente, por lo que se
   apoya en una placa blanca centrada: así conserva su contraste sobre el verde.
   ========================================================================== */

.pi-public-header {
  background: var(--pi-brand);
  padding: 18px 16px;
  text-align: center;
}

.pi-public-header__plate {
  display: inline-block;
  padding: 10px 18px;
  background: var(--pi-surface);
  border-radius: var(--pi-radius-lg);
  box-shadow: var(--pi-shadow-lg);
}

.pi-public-header__logo {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
}

@media (min-width: 768px) {
  .pi-public-header { padding: 24px 24px; }
  .pi-public-header__logo { max-width: 280px; }
}

/* El pie va sobre el verde de marca, así que usa `--pi-text` (6:1) y no el gris
   apagado, que sobre `#bcb822` no llegaría al mínimo de contraste. */
.pi-public-footer {
  padding: 18px 16px 28px;
  text-align: center;
  font-size: .82rem;
  color: var(--pi-text);
  font-family: var(--pi-font);
}

.pi-public-footer__brand {
  font-family: var(--pi-font-semibold);
  font-weight: 600;
  color: var(--pi-text);
}


/* =============================================================================
   4. TIPOGRAFÍA DEL MÓDULO
   Los títulos usan Poppins-Bold y el color `#333333`, igual que
   `.contact100-form-title` del formulario actual.
   ========================================================================== */

.pi-title {
  margin: 0 0 4px;
  font-family: var(--pi-font-bold);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pi-text);
}

.pi-subtitle {
  margin: 0 0 18px;
  font-size: .95rem;
  color: var(--pi-text-muted);
}

.pi-section-title {
  margin: 0 0 10px;
  font-family: var(--pi-font-bold);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-lead {
  font-size: 1rem;
  color: var(--pi-text);
}

@media (min-width: 768px) {
  .pi-title { font-size: 1.6rem; }
}


/* =============================================================================
   5. pi-card — superficie base de todo el módulo.
   Blanca y con radio 10px, como la tarjeta del formulario de producción.
   ========================================================================== */

.pi-card {
  background: var(--pi-surface);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius-lg);
  box-shadow: var(--pi-shadow);
  margin: 0 0 20px;
  overflow: hidden;
}

.pi-card--flat   { box-shadow: none; }
.pi-card--raised { box-shadow: var(--pi-shadow-lg); }

.pi-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pi-border);
}

.pi-card__header-main { min-width: 0; }

.pi-card__title {
  margin: 0;
  font-family: var(--pi-font-bold);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-card__subtitle {
  margin: 2px 0 0;
  font-family: var(--pi-font);
  font-size: .85rem;
  font-weight: 400;
  color: var(--pi-text-muted);
}

.pi-card__body { padding: 16px; }

.pi-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--pi-border);
  background: var(--pi-surface-alt);
}

@media (min-width: 768px) {
  .pi-card__header { padding: 18px 22px; }
  .pi-card__body   { padding: 20px 22px; }
  .pi-card__footer { padding: 14px 22px; }
}


/* =============================================================================
   6. pi-stepper — pasos del alta pública (§9.1). Indica en qué paso del carrusel
   está parado el usuario y ADEMÁS navega: cada paso es un `<button>` real
   (`.pi-stepper__button`), habilitado sólo cuando se puede llegar a ese paso.
   Móvil: lista vertical con línea de unión. Tablet+: fila horizontal.
   ========================================================================== */

.pi-stepper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.pi-stepper__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--pi-font-semibold);
  font-size: .92rem;
  font-weight: 600;
  color: var(--pi-text-muted);
}

/* Línea vertical que une un paso con el siguiente (sólo móvil). */
.pi-stepper__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: -4px;
  left: 14px;
  width: 2px;
  background: var(--pi-border);
}

/* Botón que hace navegable cada paso. Hereda tipografía y color del `<li>` para
   que el aspecto del stepper no cambie respecto de cuando era decorativo: lo
   único que agrega es el cursor, el foco visible y el estado deshabilitado. */
.pi-stepper__button {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: var(--pi-radius);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* El foco visible general de la sección 2 ya pinta el anillo; acá sólo se suma
   un fondo suave para que el paso enfocado se distinga del resto. */
.pi-stepper__button:focus,
.pi-stepper__button:focus-visible { background: var(--pi-primary-soft); }

.pi-stepper__button:hover:not([disabled]) { background: var(--pi-primary-soft); }

/* Paso al que todavía no se puede ir: se ve apagado y no responde al puntero.
   El motivo se explica con texto al lado de "Siguiente", nunca sólo con color. */
.pi-stepper__button[disabled] {
  cursor: not-allowed;
  opacity: .55;
  background: none;
}

.pi-stepper__marker {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--pi-border);
  border-radius: 50%;
  background: var(--pi-surface);
  font-family: var(--pi-font-bold);
  font-size: .85rem;
  font-weight: 700;
  color: var(--pi-text-muted);
}

.pi-stepper__label { min-width: 0; }

.pi-stepper__step.is-active { color: var(--pi-primary); }

.pi-stepper__step.is-active .pi-stepper__marker {
  border-color: var(--pi-primary);
  background: var(--pi-primary-soft);
  color: var(--pi-primary);
  box-shadow: 0 0 0 4px var(--pi-focus-ring);
}

.pi-stepper__step.is-done { color: var(--pi-text); }

.pi-stepper__step.is-done .pi-stepper__marker {
  border-color: var(--pi-primary);
  background: var(--pi-primary);
  color: var(--pi-surface);
}

@media (min-width: 768px) {
  .pi-stepper {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .pi-stepper__step {
    flex: 1 1 0;
    padding: 6px 4px;
  }

  .pi-stepper__step:not(:last-child)::before { display: none; }

  /* Conector horizontal entre pasos. */
  .pi-stepper__step:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 16px;
    height: 2px;
    margin-left: 8px;
    background: var(--pi-border);
  }

  .pi-stepper__step.is-done:not(:last-child)::after { background: var(--pi-primary); }
}


/* =============================================================================
   6.1 pi-carousel — pasos del alta pública (§9.1, REQ-004, FLW-001).

   Es SÓLO PRESENTACIÓN: el `<form>` sigue siendo uno solo y se envía entero al
   final. Acá no hay nada que decida qué se manda, únicamente qué se ve.

   El paso que no se está viendo lleva el atributo `hidden` de verdad, no una
   clase: así queda fuera del orden de tabulación y de la lectura del lector de
   pantalla aunque este CSS no cargue. La regla `[hidden]` de abajo existe porque
   `.pi-carousel__paso` declara `display`, y un `display` explícito le gana al
   `display: none` que el navegador aplica por defecto a `[hidden]`.

   Paleta: sólo variables de `:root`. No se introduce ningún color nuevo.
   ========================================================================== */

.pi-carousel {
  display: block;
  min-width: 0;
}

.pi-carousel__paso {
  display: block;
  min-width: 0;
  /* Aparición discreta al cambiar de paso. La sección 20 la anula entera cuando
     el sistema pide movimiento reducido. */
  animation: pi-carousel-entra .18s ease-out both;
}

.pi-carousel__paso[hidden] { display: none !important; }

@keyframes pi-carousel-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Barra de navegación: "Atrás" a la izquierda, "Siguiente" o "Enviar solicitud"
   a la derecha, y en el medio el motivo por el que no se puede avanzar.
   Móvil: los botones ocupan el ancho completo y el aviso va arriba, porque en
   una columna angosta un botón chico al lado de un texto largo es ilegible. */
.pi-carousel__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
}

.pi-carousel__nav [hidden] { display: none !important; }

/* Empuja "Siguiente" / "Enviar solicitud" contra el borde derecho. */
.pi-carousel__nav-espacio {
  flex: 1 1 auto;
  min-width: 0;
}

/* Motivo por el que "Siguiente" no dejó avanzar. Vacío no ocupa lugar: el
   `:empty` evita que quede un renglón en blanco entre los botones. */
.pi-carousel__aviso {
  flex: 1 1 100%;
  order: -1;
  margin: 0;
  font-family: var(--pi-font-medium);
  font-size: .85rem;
  font-weight: 500;
  color: var(--pi-danger);
}

.pi-carousel__aviso:empty { display: none; }

/* En móvil los dos botones de navegación ocupan todo el ancho disponible. */
.pi-carousel__nav .pi-btn { flex: 1 1 auto; }

@media (min-width: 768px) {
  .pi-carousel__nav { flex-wrap: nowrap; }

  .pi-carousel__nav .pi-btn { flex: 0 0 auto; }

  .pi-carousel__aviso {
    flex: 1 1 auto;
    order: 0;
    text-align: right;
  }
}


/* =============================================================================
   7. pi-field Y CONTROLES
   Contrato de marcado: todo control lleva `id` y su `<label for>` dentro de
   `.pi-field`; los errores se anuncian con `aria-invalid="true"` y texto, nunca
   sólo con color (§8, accesibilidad mínima).
   Etiquetas, campos y errores replican `.label-input100`, `.input100` y el
   mensaje de validación del formulario de producción.
   ========================================================================== */

.pi-field { margin: 0 0 14px; }

/* Etiqueta: 13px, `#666666`, Poppins-Regular — igual que `.label-input100`. */
.pi-field__label {
  display: block;
  margin: 0 0 4px;
  font-family: var(--pi-font);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--pi-text-muted);
}

/* Marca de campo obligatorio; el texto para lectores va aparte, en el label. */
.pi-field__required {
  margin-left: 2px;
  font-family: var(--pi-font-bold);
  color: var(--pi-danger);
  font-weight: 700;
}

.pi-field__hint {
  display: block;
  margin: 4px 0 0;
  font-size: .8rem;
  color: var(--pi-text-muted);
}

/* Error de validación: `#c80000`, 13px, Poppins-Regular — el del formulario. */
.pi-field__error {
  display: block;
  margin: 4px 0 0;
  font-family: var(--pi-font);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--pi-danger);
}

.pi-field--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* --- Controles de texto ---------------------------------------------------- */

.pi-input,
.pi-select,
.pi-textarea {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  background: var(--pi-surface);
  font-family: var(--pi-font-medium);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pi-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pi-input::placeholder,
.pi-textarea::placeholder {
  color: var(--pi-text-muted);
  opacity: 1; /* Firefox aclara el placeholder por defecto */
}

.pi-input:hover,
.pi-select:hover,
.pi-textarea:hover { border-color: var(--pi-border-strong); }

.pi-input:focus,
.pi-select:focus,
.pi-textarea:focus {
  border-color: var(--pi-primary);
  box-shadow: 0 0 0 3px var(--pi-focus-ring);
}

.pi-input:disabled,
.pi-select:disabled,
.pi-textarea:disabled,
.pi-input[readonly],
.pi-textarea[readonly] {
  background: var(--pi-surface-alt);
  border-color: var(--pi-border);
  color: var(--pi-neutral);
  cursor: not-allowed;
}

.pi-input[aria-invalid="true"],
.pi-select[aria-invalid="true"],
.pi-textarea[aria-invalid="true"],
.pi-field.is-invalid .pi-input,
.pi-field.is-invalid .pi-select,
.pi-field.is-invalid .pi-textarea {
  border-color: var(--pi-danger);
  background: rgba(200, 0, 0, .06);
}

.pi-textarea {
  min-height: 96px;
  resize: vertical;
}

/* Flecha del select dibujada con un SVG embebido (sin dependencias externas). */
.pi-select {
  padding-right: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

.pi-select[multiple] {
  padding-right: 12px;
  background-image: none;
  min-height: 120px;
}

/* Contador de caracteres del comentario de decisión (§9.3). */
.pi-charcount {
  display: block;
  margin: 4px 0 0;
  font-size: .78rem;
  color: var(--pi-text-muted);
  text-align: right;
}

.pi-charcount.is-over { color: var(--pi-danger); font-family: var(--pi-font-bold); font-weight: 700; }

/* --- Checkbox -------------------------------------------------------------- */

.pi-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .92rem;
  color: var(--pi-text);
  cursor: pointer;
}

.pi-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--pi-primary);
  cursor: pointer;
}

.pi-checkbox input[type="checkbox"]:disabled { cursor: not-allowed; }

.pi-checkbox input[type="checkbox"]:disabled ~ .pi-checkbox__text { color: var(--pi-neutral); }

.pi-checkbox__text { min-width: 0; }

/* --- Lista de casillas que se acomoda al contenido -------------------------
   Para conjuntos de opciones CORTAS —códigos de sector, por ejemplo—, donde una
   grilla de columnas fijas dejaría cada casilla sola en su celda con más espacio
   vacío que texto. Acá cada una ocupa lo que necesita y se envuelven. */
.pi-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pi-opciones .pi-checkbox {
  align-items: center;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid var(--pi-border-strong);
  border-radius: var(--pi-radius);
  background: var(--pi-surface);
}

.pi-opciones .pi-checkbox:hover { border-color: var(--pi-primary); }

.pi-opciones .pi-checkbox:focus-within {
  outline: 2px solid var(--pi-primary);
  outline-offset: 2px;
}

/* Tinte de la opción marcada. Es DECORACIÓN: el estado real siempre lo dice la
   casilla nativa, así que un navegador sin `:has()` no pierde información. */
.pi-opciones .pi-checkbox:has(input:checked) {
  border-color: var(--pi-primary);
  background: var(--pi-primary-soft);
}

/* --- Estado actual, en modo lectura, arriba del selector de destino --------
   El valor se empuja al extremo derecho con `margin-left: auto` en vez de con
   `justify-content: space-between`: así sigue quedando pegado a la derecha
   aunque el bloque envuelva en pantallas angostas. */
.pi-estado-actual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 16px;
}

.pi-estado-actual .pi-field__label { margin: 0; }

.pi-estado-actual__valor {
  display: inline-flex;
  margin-left: auto;
}

/* --- Bloques dentro de una tarjeta -----------------------------------------
   Agrupan campos por asunto (estado, vigencia, sectores) para que no se lean
   como una única columna indiferenciada. El separador va entre bloques y no
   arriba de cada uno, así el primero no arranca con una línea suelta bajo el
   encabezado de la tarjeta. */
.pi-bloque + .pi-bloque {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--pi-border);
}

/* Un `fieldset` trae borde, márgenes y padding propios del navegador que
   romperían la separación uniforme entre bloques. */
fieldset.pi-bloque {
  min-width: 0;
  border: 0;
  padding: 0;
}

/* Un `legend` recibe del navegador un tratamiento especial: se apoya SOBRE el
   borde superior del `fieldset`, interrumpiéndolo. Como ese borde es justamente
   el separador entre bloques, el título quedaba montado sobre la línea en vez de
   debajo, al revés que en los bloques que usan `h3`.

   Flotarlo es la forma de sacarlo de ese renderizado especial: pasa a ser una
   caja común y la línea queda entera arriba. Se mantiene el `<legend>` y no se
   lo reemplaza por un `h3` porque es el encabezado que anuncian los lectores de
   pantalla al entrar al grupo de casillas. */
fieldset.pi-bloque > legend {
  float: left;
  width: 100%;
  padding: 0;

  /* Bootstrap 3 —que Voyager carga en el panel— le pone a TODO `legend` un
     `border-bottom: 1px solid #e5e5e5`. `.pi-section-title` le gana el margen y
     el tamaño por especificidad, pero no declara `border`, así que esa línea
     sobrevivía y dibujaba un separador de más justo debajo del título. */
  border: 0;
}

/* Todo float deja de aportar altura a lo que sigue: sin despejar, las casillas
   se le subirían encima al título. */
fieldset.pi-bloque > legend ~ * {
  clear: both;
}

/* --- Radio-card: tarjetas grandes Individual / Múltiple (§9.1) --------------
   Contrato de marcado:
     <label class="pi-radio-card">
       <input class="pi-radio-card__input" type="radio" name="request_mode" value="INDIVIDUAL">
       <span class="pi-radio-card__check" aria-hidden="true"></span>
       <span class="pi-radio-card__body">
         <span class="pi-radio-card__title">Individual</span>
         <span class="pi-radio-card__text">Una sola persona.</span>
       </span>
     </label>
   El estado seleccionado del recuadro completo se marca con `.is-selected`
   (lo agrega el JS de la vista) y, en navegadores modernos, también por `:has()`.
   ------------------------------------------------------------------------- */

.pi-radio-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--pi-border);
  border-radius: var(--pi-radius-lg);
  background: var(--pi-surface);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.pi-radio-card:hover { border-color: var(--pi-primary); }

.pi-radio-card:focus-within {
  border-color: var(--pi-primary);
  box-shadow: 0 0 0 3px var(--pi-focus-ring);
}

.pi-radio-card__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.pi-radio-card__check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--pi-border-strong);
  border-radius: 50%;
  background: var(--pi-surface);
}

.pi-radio-card__body { min-width: 0; }

.pi-radio-card__title {
  display: block;
  font-family: var(--pi-font-bold);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-radio-card__text {
  display: block;
  margin-top: 2px;
  font-size: .85rem;
  color: var(--pi-text-muted);
}

.pi-radio-card__input:checked ~ .pi-radio-card__check {
  border-color: var(--pi-primary);
  background: radial-gradient(circle at center, var(--pi-primary) 0 45%, var(--pi-surface) 46% 100%);
}

.pi-radio-card__input:checked ~ .pi-radio-card__body .pi-radio-card__title { color: var(--pi-primary); }

.pi-radio-card.is-selected {
  border-color: var(--pi-primary);
  background: var(--pi-primary-soft);
}

.pi-radio-card__input:disabled ~ .pi-radio-card__body { opacity: .6; }

/* Mejora progresiva: si el navegador soporta `:has()`, el recuadro reacciona
   solo, sin depender del JS que agrega `.is-selected`. */
@supports selector(:has(*)) {
  .pi-radio-card:has(.pi-radio-card__input:checked) {
    border-color: var(--pi-primary);
    background: var(--pi-primary-soft);
  }
}

/* Grupo de tarjetas de modo. */
.pi-radio-card-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 4px;
}

@media (min-width: 768px) {
  .pi-radio-card-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-radio-card { padding: 18px; }
}


/* =============================================================================
   8. pi-btn
   El primario calca el botón del formulario de producción: degradado
   `--pi-gradient` de izquierda a derecha, texto blanco y Poppins-Medium. El
   degradado se pinta al doble de ancho y se desplaza en `:hover`, que es la
   forma declarativa de reproducir el corrimiento que hoy hace `.contact100-form-bgbtn`.
   Contraste: blanco sobre `--pi-primary` da 6.2:1 y sobre `--pi-danger` 6.1:1;
   `--pi-brand` es claro, así que el botón de acento lleva texto `--pi-text` (6:1).
   ========================================================================== */

.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--pi-radius);
  background: var(--pi-surface);
  font-family: var(--pi-font-medium);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--pi-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, background-position .4s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.pi-btn:hover { text-decoration: none; }

.pi-btn:active { transform: translateY(1px); }

/* Deshabilitado: gris `#999999` del formulario actual. El shorthand `background`
   también limpia el degradado del primario. Los controles deshabilitados están
   exentos del mínimo de contraste. */
.pi-btn:disabled,
.pi-btn.is-disabled {
  background: var(--pi-surface-alt);
  border-color: var(--pi-border);
  color: var(--pi-neutral);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.pi-btn--primary {
  background-color: var(--pi-primary); /* respaldo si el degradado no se aplica */
  background-image: var(--pi-gradient);
  background-size: 200% 100%;
  background-position: 0 0;
  border-color: var(--pi-primary);
  color: var(--pi-surface);
}

.pi-btn--primary:hover,
.pi-btn--primary:active {
  background-color: var(--pi-primary-strong);
  background-position: 100% 0;
  border-color: var(--pi-primary-strong);
  color: var(--pi-surface);
}

.pi-btn--ghost {
  background: transparent;
  border-color: var(--pi-border-strong);
  color: var(--pi-primary);
}

/* Glifo que acompaña al texto de un botón (una flecha, un signo). Va un punto
   más grande que el texto y con la línea ajustada para que no lo desalinee. */
.pi-btn__icono {
  font-size: 1.05em;
  line-height: 1;
}

/* --- Cabecera de página: título a la izquierda, acciones a la derecha --------
   El `h1.page-title` lo escribe el layout del módulo, así que ajustarle el
   margen acá no alcanza a ninguna pantalla de Voyager. */
.pi-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.pi-page-header .page-title {
  margin: 0;
  min-width: 0;
}

.pi-page-header__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pi-btn--ghost:hover,
.pi-btn--ghost:active {
  background: var(--pi-primary-soft);
  border-color: var(--pi-primary);
  color: var(--pi-primary-strong);
}

/* Acento de marca: el verde oliva sólo aparece en detalles puntuales (§8). Como
   `--pi-brand-dark` con texto oscuro se queda en 4.2:1, el hover no oscurece el
   relleno: refuerza el borde, que mantiene el texto en 6:1. */
.pi-btn--accent {
  background: var(--pi-brand);
  border-color: var(--pi-brand-dark);
  color: var(--pi-text);
}

.pi-btn--accent:hover,
.pi-btn--accent:active {
  background: var(--pi-brand);
  border-color: var(--pi-brand-dark);
  color: var(--pi-text);
  box-shadow: inset 0 0 0 2px var(--pi-brand-dark);
}

.pi-btn--danger {
  background: var(--pi-danger);
  border-color: var(--pi-danger);
  color: var(--pi-surface);
}

.pi-btn--danger:hover,
.pi-btn--danger:active {
  background: var(--pi-danger-strong);
  border-color: var(--pi-danger-strong);
  color: var(--pi-surface);
}

.pi-btn--sm {
  padding: 5px 10px;
  font-size: .82rem;
}

.pi-btn--lg {
  padding: 13px 24px;
  font-size: 1.05rem;
}

.pi-btn--block {
  display: flex;
  width: 100%;
}

/* Fila de acciones: apilada en móvil, alineada a la derecha desde tablet. */
.pi-btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .pi-btn-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .pi-btn--block-mobile { width: auto; }
}


/* =============================================================================
   9. pi-badge — mapeo semántico de estados (§8).
   El color de fondo es el que fija la tabla de la especificación; el color de
   texto se elige por contraste:
     · `--pi-danger` (#c80000), `--pi-primary` y `--pi-text-muted` son oscuros:
       texto blanco (6.1:1, 6.2:1 y 5.7:1).
     · `--pi-warning` es claro: texto casi negro (5.6:1); `--pi-text` solo daría 4.3:1.
     · `--pi-success` con blanco se queda en 4.0:1, así que el relleno usa el
       mismo verde oscurecido (#166b53, 6.4:1) y el borde conserva `--pi-success`.
     · `--cancelled` es la excepción: `#999999` no llega a 4.5:1 ni con blanco
       (2.9:1) ni con texto oscuro (4.0:1), así que se resuelve con superficie
       neutra, borde `--pi-neutral` y punto de color.
   ========================================================================== */

.pi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--pi-surface-alt);
  font-family: var(--pi-font-semibold);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--pi-text);
  white-space: nowrap;
}

.pi-badge--lg {
  padding: 6px 16px;
  font-size: 1rem;
}

.pi-badge--pending {
  background: var(--pi-warning);
  border-color: var(--pi-warning);
  color: #1f1f1f; /* negro suavizado: `--pi-text` sobre `--pi-warning` sólo daría 4.3:1 */
}

.pi-badge--accepted {
  background: #166b53; /* verde oscurecido del propio `--pi-success`, para llegar a 6.4:1 con texto blanco */
  border-color: var(--pi-success);
  color: var(--pi-surface);
}

.pi-badge--rejected {
  background: var(--pi-danger);
  border-color: var(--pi-danger-strong);
  color: var(--pi-surface);
}

.pi-badge--cancelled {
  background: var(--pi-surface-alt);
  border-color: var(--pi-neutral);
  color: var(--pi-text);
}

.pi-badge--cancelled::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pi-neutral);
}

.pi-badge--no-response {
  background: var(--pi-text-muted);
  border-color: var(--pi-text-muted);
  color: var(--pi-surface);
}

.pi-badge--approved {
  background: var(--pi-primary);
  border-color: var(--pi-primary);
  color: var(--pi-surface);
}

/* Etiqueta de requisito documental: Obligatorio / Opcional. */
.pi-badge--required {
  background: var(--pi-primary-soft);
  border-color: var(--pi-primary);
  color: var(--pi-primary-strong);
}

.pi-badge--optional {
  background: var(--pi-surface-alt);
  border-color: var(--pi-border-strong);
  color: var(--pi-text-muted);
}


/* =============================================================================
   10. pi-table — la unidad de fila es la SOLICITUD, no la persona (§9.3).
   `.pi-table-wrap` da el scroll horizontal en pantallas chicas;
   `.pi-table-wrap--scroll` agrega el scrollport vertical que necesita la
   cabecera sticky para pegarse.
   ========================================================================== */

.pi-table-wrap {
  /* `position: relative` no es decorativo: convierte al contenedor en el bloque
     contenedor de sus descendientes absolutos.

     Sin esto, todo lo que la tabla lleva adentro con `position: absolute`
     —`.pi-visually-hidden`, que es como se etiquetan las celdas para lectores de
     pantalla— tiene como bloque contenedor el de la PÁGINA, porque no hay ningún
     ancestro posicionado. Su posición estática cae dentro de la tabla scrolleada,
     lejos a la derecha, y un absoluto anclado a la página suma al área desplazable
     del DOCUMENTO. Resultado: scroll horizontal en toda la pantalla y una franja
     blanca a la derecha del contenido y del pie, mientras la barra superior
     —que es `fixed`— se ve bien.

     Con el contenedor posicionado, esos elementos quedan anclados acá y su
     desborde lo absorbe este scrollport, que es justamente para lo que existe. */
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pi-table-wrap--scroll {
  max-height: 60vh;
  overflow-y: auto;
}

.pi-table {
  width: 100%;
  min-width: 720px; /* obliga al scroll horizontal en móvil en vez de romper el diseño */
  border-collapse: collapse;
  font-family: var(--pi-font);
  font-size: .9rem;
  color: var(--pi-text);
  background: var(--pi-surface);
}

.pi-table th,
.pi-table td {
  padding: 11px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--pi-border);
}

.pi-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pi-surface-alt);
  border-bottom: 2px solid var(--pi-border-strong);
  font-family: var(--pi-font-semibold);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--pi-text-muted);
  white-space: nowrap;
}

.pi-table tbody tr:hover { background: var(--pi-primary-soft); }

.pi-table tbody tr.is-selected { background: var(--pi-primary-soft); }

.pi-table__num { text-align: right; font-variant-numeric: tabular-nums; }

.pi-table__actions {
  text-align: right;
  white-space: nowrap;
}

/* Botón que despliega la fila de personas sin salir de la lista (§9.3). */
.pi-table__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--pi-border-strong);
  border-radius: var(--pi-radius);
  background: var(--pi-surface);
  color: var(--pi-primary);
  font-family: var(--pi-font-bold);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.pi-table__toggle:hover {
  background: var(--pi-primary-soft);
  border-color: var(--pi-primary);
}

/* Fila expandible: oculta hasta que el disparador le agrega `.is-open`. */
.pi-table__row-expandable { display: none; }

.pi-table__row-expandable.is-open { display: table-row; }

.pi-table__row-expandable > td {
  padding: 0;
  background: var(--pi-surface-alt);
  border-bottom: 2px solid var(--pi-border-strong);
}

.pi-table__row-expandable .pi-table__panel { padding: 12px 16px; }

.pi-table--compact th,
.pi-table--compact td { padding: 6px 8px; font-size: .85rem; }

.pi-table--compact { min-width: 0; }

@media (min-width: 1200px) {
  .pi-table { font-size: .92rem; }
  .pi-table th,
  .pi-table td { padding: 12px 14px; }
}


/* =============================================================================
   11. pi-tabs — Preaprobadas · Todas · una por Dirección activa (§9.3)
   ========================================================================== */

.pi-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--pi-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pi-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: var(--pi-font-semibold);
  font-size: .92rem;
  font-weight: 600;
  color: var(--pi-text-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pi-tabs__item:hover {
  color: var(--pi-primary);
  background: var(--pi-primary-soft);
  text-decoration: none;
}

.pi-tabs__item.is-active {
  color: var(--pi-primary);
  border-bottom-color: var(--pi-primary);
  font-family: var(--pi-font-bold);
  font-weight: 700;
}

.pi-tabs__count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pi-surface-alt);
  font-family: var(--pi-font-semibold);
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
  color: var(--pi-text);
}

.pi-tabs__item.is-active .pi-tabs__count {
  background: var(--pi-primary-soft);
  color: var(--pi-primary-strong);
}


/* =============================================================================
   12. pi-person-row — editor dinámico de personas (§9.1)
   Móvil: tarjeta apilada con todos los campos en bloque.
   Tablet+: fila en rejilla, con el botón de quitar al final.
   Navegación completa por teclado: el botón de quitar es un <button> real.
   ========================================================================== */

.pi-person-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.pi-person-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius-lg);
  background: var(--pi-surface);
}

.pi-person-row__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pi-primary-soft);
  font-family: var(--pi-font-semibold);
  font-size: .78rem;
  font-weight: 600;
  color: var(--pi-primary-strong);
}

.pi-person-row__field { min-width: 0; }

.pi-person-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--pi-border-strong);
  border-radius: var(--pi-radius);
  background: var(--pi-surface);
  font-family: var(--pi-font-semibold);
  font-size: .82rem;
  font-weight: 600;
  color: var(--pi-danger);
  cursor: pointer;
}

.pi-person-row__remove:hover {
  background: var(--pi-danger);
  border-color: var(--pi-danger-strong);
  color: var(--pi-surface);
}

.pi-person-row__remove:disabled {
  color: var(--pi-neutral);
  background: var(--pi-surface-alt);
  border-color: var(--pi-border);
  cursor: not-allowed;
}

/* Documento duplicado dentro de la Solicitud (BR-030): rojo + texto, nunca sólo color. */
.pi-person-row.is-invalid {
  border-color: var(--pi-danger);
  background: rgba(200, 0, 0, .06);
}

.pi-person-row__error {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--pi-font-semibold);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pi-danger);
}

/* Contador "N / máximo" siempre visible (§9.1). */
.pi-person-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pi-font-semibold);
  font-size: .85rem;
  font-weight: 600;
  color: var(--pi-text-muted);
}

.pi-person-counter.is-at-limit { color: var(--pi-danger); }

@media (min-width: 768px) {
  .pi-person-row {
    grid-template-columns: 28px repeat(2, minmax(0, 1.2fr)) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
    align-items: end;
    gap: 10px;
    margin: 0;
    padding: 10px 4px;
    border: 0;
    border-bottom: 1px solid var(--pi-border);
    border-radius: 0;
    background: transparent;
  }

  .pi-person-row.is-invalid {
    border-radius: var(--pi-radius);
    box-shadow: inset 3px 0 0 var(--pi-danger);
  }

  .pi-person-row__index { margin-bottom: 8px; }

  .pi-person-row__remove {
    margin-bottom: 1px;
    padding: 8px 10px;
  }

  /* Las etiquetas se muestran una sola vez, en la cabecera de la lista. */
  .pi-person-list--labelled .pi-person-row:not(:first-child) .pi-field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* =============================================================================
   13. pi-dropzone — un requisito documental por zona (0..1 archivo, BR-005)
   Contrato de marcado: <label class="pi-dropzone"> con un <input type="file">
   dentro, para que el clic y el teclado funcionen sin JS.
   ========================================================================== */

.pi-dropzone {
  position: relative;
  display: block;
  padding: 16px;
  border: 2px dashed var(--pi-border-strong);
  border-radius: var(--pi-radius-lg);
  background: var(--pi-surface-alt);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.pi-dropzone:hover { border-color: var(--pi-primary); background: var(--pi-primary-soft); }

.pi-dropzone:focus-within {
  border-color: var(--pi-primary);
  box-shadow: 0 0 0 3px var(--pi-focus-ring);
}

.pi-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pi-dropzone__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
}

.pi-dropzone__title {
  font-family: var(--pi-font-bold);
  font-size: .95rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-dropzone__icon {
  display: block;
  margin: 0 auto 6px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--pi-primary);
}

.pi-dropzone__hint {
  display: block;
  font-size: .8rem;
  color: var(--pi-text-muted);
}

.pi-dropzone__file {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--pi-font-semibold);
  font-size: .85rem;
  font-weight: 600;
  color: var(--pi-text);
  word-break: break-all;
}

/* Mismo tratamiento que `.pi-field__error`: 13px, Poppins-Regular, `#c80000`. */
.pi-dropzone__error {
  display: block;
  margin-top: 6px;
  font-family: var(--pi-font);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--pi-danger);
}

.pi-dropzone.is-dragover {
  border-color: var(--pi-primary);
  background: var(--pi-primary-soft);
  box-shadow: var(--pi-shadow-lg);
}

.pi-dropzone.is-filled {
  border-style: solid;
  border-color: var(--pi-success);
  background: rgba(30, 143, 110, .10);
}

.pi-dropzone.is-filled .pi-dropzone__file { display: flex; }

.pi-dropzone.is-invalid {
  border-color: var(--pi-danger);
  background: rgba(200, 0, 0, .08);
}

@media (min-width: 768px) {
  .pi-dropzone { padding: 20px; }
}


/* =============================================================================
   14. pi-alert — mensajes de sesión y resúmenes de validación
   Los tintes son translúcidos sobre superficie clara, con texto `--pi-text`,
   de modo que el contraste no depende del color del tinte.
   ========================================================================== */

.pi-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--pi-border);
  border-left: 4px solid var(--pi-text-muted);
  border-radius: var(--pi-radius);
  background: var(--pi-surface-alt);
  font-size: .92rem;
  color: var(--pi-text);
}

.pi-alert__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pi-surface);
  font-family: var(--pi-font-bold);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
}

.pi-alert__content { min-width: 0; }

.pi-alert__title {
  margin: 0 0 2px;
  font-family: var(--pi-font-bold);
  font-size: .95rem;
  font-weight: 700;
}

.pi-alert__text { margin: 0; }

.pi-alert__list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.pi-alert__list li + li { margin-top: 2px; }

/* Los tintes van OPACOS, no en rgba.
 *
 * Eran translucidos (8% a 16% de alfa), lo que funciona mientras el fondo de
 * pagina sea blanco: el navegador los compone contra el blanco y sale el tinte
 * palido buscado. Pero el canal publico tiene fondo oliva de marca, y ahi un 12%
 * de verde sobre oliva no da un aviso: da una mancha del mismo color que el
 * fondo, sin separacion entre figura y fondo.
 *
 * Cada valor es el equivalente exacto del rgba anterior compuesto sobre blanco,
 * asi que en el workbench —que si es blanco— no cambia un pixel. */

.pi-alert--info {
  border-color: var(--pi-primary-soft);
  border-left-color: var(--pi-primary);
  background: #ecf3f8;
}

.pi-alert--info .pi-alert__icon { color: var(--pi-primary); }

.pi-alert--success {
  border-color: #b0d8cc;
  border-left-color: var(--pi-success);
  background: #e4f2ee;
}

.pi-alert--success .pi-alert__icon { color: #166b53; } /* verde oscurecido del propio --pi-success, para llegar a 4.5:1 sobre el tinte */

.pi-alert--warning {
  border-color: #e9d0a5;
  border-left-color: var(--pi-warning);
  background: #f6ecdb;
}

.pi-alert--warning .pi-alert__icon { color: #8a5e12; } /* ocre oscurecido del propio --pi-warning */

.pi-alert--danger {
  border-color: #efb3b3;
  border-left-color: var(--pi-danger);
  background: #fbebeb;
}

.pi-alert--danger .pi-alert__icon { color: var(--pi-danger-strong); }


/* =============================================================================
   15. pi-timeline — auditoría de la Solicitud (§9.3)
   ========================================================================== */

.pi-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
}

.pi-timeline__item {
  position: relative;
  padding: 0 0 18px 24px;
}

/* Punto del evento. */
.pi-timeline__item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--pi-surface);
  border-radius: 50%;
  background: var(--pi-primary);
  box-shadow: 0 0 0 1px var(--pi-primary);
}

/* Línea vertical hacia el evento siguiente. */
.pi-timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: var(--pi-border);
}

.pi-timeline__item:last-child { padding-bottom: 0; }

.pi-timeline__time {
  display: block;
  font-family: var(--pi-font-semibold);
  font-size: .78rem;
  font-weight: 600;
  color: var(--pi-text-muted);
  font-variant-numeric: tabular-nums;
}

.pi-timeline__title {
  display: block;
  font-family: var(--pi-font-bold);
  font-size: .95rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-timeline__meta {
  display: block;
  font-size: .82rem;
  color: var(--pi-text-muted);
}

/* Quien decidio desde el canal de Direccion. Va con mas peso que el resto del
   meta porque, cuando el correo es de un area compartida, es el unico dato que
   identifica a la persona. */
.pi-timeline__actor {
  display: block;
  font-family: var(--pi-font-bold);
  font-weight: 700;
  font-size: .88rem;
  color: var(--pi-text);
}

/* El canal no autentica: el nombre lo declara quien decide. La aclaracion evita
   que se lea como una identidad verificada. */
.pi-timeline__actor-nota {
  font-family: var(--pi-font);
  font-weight: 400;
  font-size: .78rem;
  color: var(--pi-text-muted);
}

.pi-timeline__comment {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--pi-border-strong);
  background: var(--pi-surface-alt);
  border-radius: 0 var(--pi-radius) var(--pi-radius) 0;
  font-size: .88rem;
  color: var(--pi-text);
}

.pi-timeline__item--success::before { background: var(--pi-success); box-shadow: 0 0 0 1px var(--pi-success); }
.pi-timeline__item--warning::before { background: var(--pi-warning); box-shadow: 0 0 0 1px var(--pi-warning); }
.pi-timeline__item--danger::before  { background: var(--pi-danger); box-shadow: 0 0 0 1px var(--pi-danger); }
.pi-timeline__item--neutral::before { background: var(--pi-neutral); box-shadow: 0 0 0 1px var(--pi-neutral); }


/* =============================================================================
   16. pi-empty — nunca se muestra una lista vacía sin explicación (§9.4)
   ========================================================================== */

.pi-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--pi-text-muted);
}

.pi-empty__icon {
  display: block;
  margin: 0 auto 10px;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--pi-neutral);
}

.pi-empty__title {
  margin: 0 0 4px;
  font-family: var(--pi-font-bold);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-empty__text {
  margin: 0 auto;
  max-width: 460px;
  font-size: .9rem;
}

.pi-empty__action { margin-top: 14px; }


/* =============================================================================
   17. pi-kpi — indicadores de la bandeja (§9.3)
   ========================================================================== */

.pi-kpi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 18px;
}

.pi-kpi {
  padding: 14px 16px;
  border: 1px solid var(--pi-border);
  border-left: 4px solid var(--pi-primary);
  border-radius: var(--pi-radius-lg);
  background: var(--pi-surface);
  box-shadow: var(--pi-shadow);
}

.pi-kpi__value {
  display: block;
  font-family: var(--pi-font-bold);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--pi-primary);
  font-variant-numeric: tabular-nums;
}

.pi-kpi__label {
  display: block;
  margin-top: 2px;
  font-family: var(--pi-font-semibold);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pi-text-muted);
}

.pi-kpi__hint {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--pi-text-muted);
}

.pi-kpi--success { border-left-color: var(--pi-success); }
.pi-kpi--success .pi-kpi__value { color: #166b53; } /* verde oscurecido del propio --pi-success */

.pi-kpi--warning { border-left-color: var(--pi-warning); }
.pi-kpi--warning .pi-kpi__value { color: #8a5e12; } /* ocre oscurecido del propio --pi-warning */

.pi-kpi--danger { border-left-color: var(--pi-danger); }
.pi-kpi--danger .pi-kpi__value { color: var(--pi-danger-strong); }

.pi-kpi--neutral { border-left-color: var(--pi-neutral); }
.pi-kpi--neutral .pi-kpi__value { color: var(--pi-text); }

@media (min-width: 768px) {
  .pi-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .pi-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pi-kpi__value { font-size: 2rem; }
}


/* =============================================================================
   18. pi-toolbar — filtros y acciones de la bandeja. Los filtros viajan por
   query string, así que la barra es un <form method="get"> (§9.3).
   ========================================================================== */

.pi-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius-lg);
  background: var(--pi-surface);
  box-shadow: var(--pi-shadow);
}

/* Barra de filtros dentro de una tarjeta. La versión suelta trae borde, fondo y
   sombra propios porque vive directamente en la página; anidada quedaría una
   caja dentro de otra, así que acá se reduce a un separador. */
.pi-toolbar--embebida {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--pi-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.pi-toolbar__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pi-toolbar__title {
  margin: 0;
  font-family: var(--pi-font-bold);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-toolbar__meta {
  font-size: .85rem;
  color: var(--pi-text-muted);
}

.pi-toolbar .pi-field { margin: 0; }

@media (min-width: 768px) {
  /* Los campos se alinean por ARRIBA, no por abajo.
     Con `flex-end` los campos que llevan aclaración quedaban más altos y su
     control subía respecto de los demás: en la bandeja, "Buscar" y "Enviadas
     hasta" tienen `.pi-field__hint` y sus inputs no coincidían con los de
     Dirección, Estado final ni "Enviadas desde".
     Alineando por arriba, todas las etiquetas arrancan a la misma altura y, al
     ser de una sola línea, los controles quedan alineados solos. Las
     aclaraciones cuelgan debajo del campo que las tiene, sin empujar a nadie. */
  .pi-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .pi-toolbar__group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  /* Los botones van a la altura de los CONTROLES, no del borde superior de la
     barra: sin esto quedarían al nivel de las etiquetas. El desfase es
     exactamente el bloque que ocupa una `.pi-field__label` —su tamaño de fuente
     por el alto de línea heredado de `.pi-body`, más su margen inferior—, así
     que si la etiqueta cambia de tipografía este número se recalcula con ella. */
  .pi-toolbar__group--end {
    justify-content: flex-end;
    padding-top: calc(0.8125rem * 1.5 + 4px);
  }
}


/* =============================================================================
   19. pi-pagination
   ========================================================================== */

.pi-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pi-pagination__item { display: inline-flex; }

.pi-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--pi-border-strong);
  border-radius: var(--pi-radius);
  background: var(--pi-surface);
  font-family: var(--pi-font-semibold);
  font-size: .88rem;
  font-weight: 600;
  color: var(--pi-primary);
  text-decoration: none;
}

.pi-pagination__link:hover {
  background: var(--pi-primary-soft);
  border-color: var(--pi-primary);
  text-decoration: none;
}

.pi-pagination__item.is-active .pi-pagination__link {
  background: var(--pi-primary);
  border-color: var(--pi-primary);
  color: var(--pi-surface);
  cursor: default;
}

.pi-pagination__item.is-disabled .pi-pagination__link {
  background: var(--pi-surface-alt);
  border-color: var(--pi-border);
  color: var(--pi-neutral);
  pointer-events: none;
}

.pi-pagination__summary {
  margin-left: auto;
  font-size: .82rem;
  color: var(--pi-text-muted);
}


/* =============================================================================
   20. pi-matrix — matriz editable de requisitos documentales (§5.3, REQ-017)

   Una fila por tipo de adjunto, una columna por tipo de acreditación, y en cada
   celda un selector con los tres estados posibles. Los colores son los mismos
   de .pi-badge--required / --optional para que la celda se lea igual que el
   badge que reemplaza.
   ========================================================================== */

/* Alto de la matriz: 8 tipos de adjunto a la vista y el resto se scrollea.
   El encabezado ya es `position: sticky` en `.pi-table thead th`; lo único que
   le faltaba era un contenedor con altura limitada contra el cual pegarse.

   Las medidas van como variables para poder cambiar cuántas filas se muestran
   sin recalcular a mano: `--pi-matriz-alto-fila` es lo que ocupa una fila con su
   nombre, su código debajo y el selector. */
.pi-table-wrap--matriz {
  --pi-matriz-filas: 8;
  --pi-matriz-alto-fila: 58px;
  --pi-matriz-alto-encabezado: 44px;

  max-height: calc(
    var(--pi-matriz-alto-encabezado) + (var(--pi-matriz-filas) * var(--pi-matriz-alto-fila))
  );
  overflow-y: auto;

  /* Aire entre la última columna y la barra de scroll. En un contenedor que
     scrollea, la barra se dibuja pegada al borde y el padding queda del lado del
     contenido, así que es lo que los separa: sin esto los selectores de la última
     columna quedan tocando la barra. */
  padding-right: 12px;
}

/* Con `border-collapse: collapse` el borde de una celda pegada no acompaña al
   scroll en todos los navegadores: la fila de arriba se le "come" el borde. La
   sombra interior sí viaja con la celda. */
.pi-table-wrap--matriz .pi-matrix thead th {
  box-shadow: inset 0 -2px 0 var(--pi-border-strong);
}

.pi-matrix__leyenda {
  margin: 0 0 12px;
}

/* El código va debajo del nombre, en la cabecera de fila. */
.pi-matrix__codigo {
  display: block;
  font-size: .78rem;
  font-weight: 400;
}

.pi-matrix th[scope="row"] {
  min-width: 180px;
}

.pi-matrix td {
  vertical-align: middle;
}

/* El selector ocupa la celda: el ancho lo fija la columna, no el contenido. */
.pi-matrix__select {
  width: 100%;
  min-width: 132px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: .85rem;
}

.pi-matrix__select.is-required {
  background-color: var(--pi-primary-soft);
  border-color: var(--pi-primary);
  color: var(--pi-primary-strong);
}

.pi-matrix__select.is-optional {
  background-color: var(--pi-surface-alt);
  border-color: var(--pi-border-strong);
  color: var(--pi-text-muted);
}

/* "No lo pide" es el estado por defecto: se deja neutro para que las celdas que
   sí piden algo salten a la vista. */
.pi-matrix__select.is-none {
  color: var(--pi-text-muted);
}

/* Empuja el botón de guardar hacia la derecha del pie de la tarjeta. */
.pi-matrix__aviso {
  margin-right: auto;
  font-size: .82rem;
}

@media (max-width: 640px) {
  .pi-matrix th[scope="row"] {
    min-width: 140px;
  }

  .pi-matrix__select {
    min-width: 118px;
  }
}


/* =============================================================================
   21. pi-modal — edición sin abandonar la pantalla (§5.3)

   Se abre de dos maneras, a propósito:
     · `:target`, cuando se navega al ancla. Es el camino sin JavaScript.
     · `.is-open`, que agrega el script al abrir, y que el servidor también
       imprime cuando rechaza una edición y hay que mostrar el error.
   ========================================================================== */

.pi-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Por encima del `navbar-fixed-top` de Bootstrap 3, que Voyager usa para la
     barra superior y que vale 1030. No alcanza con superar los z-index del
     módulo —el mayor es 2—: el modal convive con el panel, y con un valor menor
     la barra se dibuja ENCIMA del diálogo. La escala de Bootstrap termina en
     1070 (tooltip), así que 1080 queda arriba de todo sin pelear con nada. */
  z-index: 1080;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}

.pi-modal:target,
.pi-modal.is-open {
  display: flex;
}

.pi-modal__backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .45);
  cursor: default;
}

.pi-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: auto;
  border-radius: var(--pi-radius-lg);
  background: var(--pi-surface);
  box-shadow: var(--pi-shadow-lg);
}

.pi-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pi-border);
}

.pi-modal__close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--pi-radius);
  color: var(--pi-text-muted);
  font-size: 1.5rem;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
}

.pi-modal__close:hover {
  background: var(--pi-surface-alt);
  color: var(--pi-text);
  text-decoration: none;
}

/* Diálogo de confirmación: no lleva formulario, sólo una frase y dos botones. */
.pi-modal__dialog--sm { max-width: 440px; }

/* Visor de adjuntos: tan ancho como la pantalla permita, porque un PDF a 560px
   obliga a scrollear de costado para leer un renglón. */
.pi-modal__dialog--lg { max-width: 1100px; }

/* El visor ocupa el alto disponible en vez de crecer con el contenido: el que
   scrollea es el documento adentro del marco, no el modal. */
.pi-modal--visor { padding: 16px; }

/* La decisión es un formulario largo —estado, comentario, vigencia, sectores y
   el resumen de confirmación—, así que necesita el mismo ancho que el visor. */
.pi-modal--decision .pi-modal__dialog { max-width: 900px; }

/* --- pi-fab: acceso permanente a la decisión -------------------------------
   El detalle es una pantalla larga y el panel de decisión quedaba al final.
   Este botón lo deja alcanzable desde cualquier punto del scroll.

   `z-index` por encima de la barra de Voyager (1030) pero por DEBAJO del modal
   (1080): cuando el diálogo está abierto el botón tiene que quedar tapado por
   el fondo oscuro, no flotando encima de él. */
.pi-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  gap: 8px;
  /* La etiqueta va en una sola línea. Al ser `fixed` y sin ancho propio, el botón
     se achica hasta el ancho disponible, y con un texto largo el navegador lo
     partiría en dos renglones dentro de una píldora redondeada, que queda
     deforme. Prefiere crecer a lo ancho. */
  white-space: nowrap;
  padding: 14px 22px;
  border: 1px solid var(--pi-primary);
  border-radius: 999px;
  background: var(--pi-primary);
  color: var(--pi-surface);
  font-family: var(--pi-font-semibold);
  font-size: .95rem;
  font-weight: 600;
  box-shadow: var(--pi-shadow-lg);
}

.pi-fab:hover,
.pi-fab:focus {
  background: var(--pi-primary-strong);
  border-color: var(--pi-primary-strong);
  color: var(--pi-surface);
}

@media (max-width: 640px) {
  .pi-fab {
    right: 16px;
    bottom: 16px;
  }
}

.pi-visor { padding: 0; }

.pi-visor__marco {
  display: block;
  width: 100%;
  height: 78vh;
  border: 0;
  border-bottom-left-radius: var(--pi-radius-lg);
  border-bottom-right-radius: var(--pi-radius-lg);
  background: var(--pi-surface-alt);
}

.pi-modal__body { padding: 16px; }

/* Bajada explicativa arriba de los campos de un modal. */
.pi-modal__intro { margin: 0 0 14px; }

.pi-confirmacion__texto {
  margin: 0;
  font-size: .95rem;
  color: var(--pi-text);
}

.pi-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--pi-border);
}

/* Congela el fondo mientras hay un modal abierto. La agrega y la saca el
   script; sin JavaScript no hace falta, porque `:target` no deja el fondo
   operable de todas formas. */
.pi-sin-scroll { overflow: hidden; }

/* Dos o más acciones en una misma celda de tabla. `.pi-table__actions` sola no
   alcanza: los formularios son de bloque y se apilarían. */
.pi-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* Botón que cambia el estado de la fila. Lleva ancho mínimo porque su texto
   cambia según el estado ("Dar de baja" contra "Reactivar") y, sin esto, el
   bloque de acciones arranca en una `x` distinta en cada fila. */
.pi-acciones__estado {
  min-width: 7.5rem;
  justify-content: center;
}

/* Anchos fijos de las columnas cuyo contenido cambia de largo según la fila. Sin
   ellos el ancho lo decide el texto más largo que haya en la tabla, así que el
   bloque de acciones se corre de lugar según qué datos toquen. */
.pi-col-estado   { width: 140px; }
.pi-col-acciones { width: 240px; }

@media (max-width: 640px) {
  .pi-col-estado,
  .pi-col-acciones { width: auto; }

  .pi-acciones__estado { min-width: 0; }
}


/* =============================================================================
   22. PREFERENCIAS DE MOVIMIENTO
   ========================================================================== */

/* 19.1 Administracion de Direcciones: navegacion compacta, alta guiada y acordeones. */
.pi-nav-admin {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 20px;
  padding: 2px 0 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pi-nav-admin .pi-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pi-directions-page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.pi-page-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 10px;
}

.pi-page-intro__eyebrow {
  margin: 0 0 3px;
  font-family: var(--pi-font-semibold);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pi-primary);
}

.pi-page-intro__text {
  max-width: 760px;
  margin: 0;
  font-size: .95rem;
  color: var(--pi-text-muted);
}

.pi-context-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  background: var(--pi-surface);
}

.pi-context-badge__label {
  font-size: .75rem;
  color: var(--pi-text-muted);
}

.pi-context-badge__value {
  font-family: var(--pi-font-bold);
  font-size: .85rem;
  font-weight: 700;
  color: var(--pi-primary-strong);
}

.pi-disclosure > summary,
.pi-direction > summary {
  list-style: none;
}

.pi-disclosure > summary::-webkit-details-marker,
.pi-direction > summary::-webkit-details-marker {
  display: none;
}

.pi-disclosure[open] .pi-disclosure__chevron,
.pi-direction[open] .pi-disclosure__chevron {
  transform: rotate(225deg);
}

.pi-disclosure__chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--pi-primary);
  border-bottom: 2px solid var(--pi-primary);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.pi-disclosure__summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--pi-surface);
  transition: background-color .15s ease;
}

.pi-disclosure__summary:hover {
  background: var(--pi-primary-soft);
}

.pi-disclosure__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pi-primary);
  font-family: var(--pi-font-medium);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--pi-surface);
  transition: transform .15s ease;
}

.pi-disclosure[open] .pi-disclosure__symbol {
  transform: rotate(45deg);
}

.pi-disclosure__heading {
  min-width: 0;
}

.pi-disclosure__title,
.pi-disclosure__subtitle {
  display: block;
}

.pi-disclosure__title {
  font-family: var(--pi-font-bold);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-disclosure__subtitle {
  margin-top: 1px;
  font-size: .82rem;
  color: var(--pi-text-muted);
}

.pi-disclosure__action {
  display: none;
  font-family: var(--pi-font-semibold);
  font-size: .82rem;
  font-weight: 600;
  color: var(--pi-primary);
}

.pi-disclosure__content {
  padding: 16px;
  border-top: 1px solid var(--pi-border);
  background: var(--pi-surface);
}

.pi-setup-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.pi-setup-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  background: var(--pi-surface-alt);
}

.pi-setup-steps__item.is-current {
  border-color: var(--pi-primary);
  background: var(--pi-primary-soft);
}

.pi-setup-steps__number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pi-primary);
  font-family: var(--pi-font-bold);
  font-size: .75rem;
  font-weight: 700;
  color: var(--pi-surface);
}

.pi-setup-steps__title,
.pi-setup-steps__text {
  display: block;
}

.pi-setup-steps__title {
  font-family: var(--pi-font-semibold);
  font-size: .85rem;
  font-weight: 600;
  color: var(--pi-text);
}

.pi-setup-steps__text {
  margin-top: 1px;
  font-size: .78rem;
  color: var(--pi-text-muted);
}

.pi-form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pi-border);
}

.pi-form-actions__hint {
  font-size: .8rem;
  color: var(--pi-text-muted);
}

.pi-direction--attention {
  border-color: var(--pi-warning);
}

.pi-direction__summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 18px;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  min-height: 68px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--pi-surface);
  transition: background-color .15s ease;
}

.pi-direction__summary:hover {
  background: var(--pi-primary-soft);
}

.pi-direction[open] > .pi-direction__summary {
  border-bottom: 1px solid var(--pi-border);
  background: var(--pi-surface-alt);
}

.pi-direction__status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pi-neutral);
}

.pi-direction__status.is-active {
  background: var(--pi-success);
}

.pi-direction__status.is-inactive {
  background: var(--pi-neutral);
}

.pi-direction__heading {
  min-width: 0;
}

.pi-direction__title,
.pi-direction__meta {
  display: block;
}

.pi-direction__title {
  overflow: hidden;
  font-family: var(--pi-font-bold);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pi-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-direction__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--pi-text-muted);
}

.pi-direction__summary-badges {
  grid-column: 2;
  min-width: 0;
}

.pi-direction__action {
  display: none;
  font-family: var(--pi-font-semibold);
  font-size: .82rem;
  font-weight: 600;
  color: var(--pi-primary);
}

.pi-direction__content {
  padding: 16px;
  background: var(--pi-surface);
}

.pi-badge--warning {
  background: var(--pi-warning);
  border-color: var(--pi-warning);
  color: #1f1f1f;
}

.pi-badge--info {
  background: var(--pi-primary-soft);
  border-color: var(--pi-primary);
  color: var(--pi-primary-strong);
}

.pi-management-section + .pi-management-section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--pi-border);
}

.pi-management-section__heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
}

.pi-management-section__number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pi-primary);
  font-family: var(--pi-font-bold);
  font-size: .8rem;
  font-weight: 700;
  color: var(--pi-surface);
}

.pi-management-section__title {
  margin: 0;
  font-family: var(--pi-font-bold);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-management-section__subtitle {
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--pi-text-muted);
}

.pi-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.pi-inline-form .pi-input {
  flex: 1 1 180px;
  min-width: 0;
}

.pi-inline-form .pi-field__error {
  flex-basis: 100%;
}

.pi-input--sm {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: .85rem;
}

.pi-recipient-create {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  background: var(--pi-surface-alt);
}

.pi-recipient-create__title {
  margin: 0;
  font-family: var(--pi-font-bold);
  font-size: .95rem;
  font-weight: 700;
  color: var(--pi-text);
}

.pi-recipient-create__subtitle {
  margin: 2px 0 14px;
  font-size: .8rem;
  color: var(--pi-text-muted);
}

.pi-danger-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid rgba(200, 0, 0, .25);
  background: rgba(200, 0, 0, .08);
}

.pi-danger-zone__copy {
  min-width: 0;
}

.pi-danger-zone__title {
  margin: 0;
  font-family: var(--pi-font-bold);
  font-size: .9rem;
  font-weight: 700;
  color: var(--pi-danger-strong);
}

.pi-danger-zone__text {
  margin: 2px 0 0;
  font-size: .8rem;
  color: var(--pi-text-muted);
}

@media (min-width: 768px) {
  .pi-page-intro {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .pi-disclosure__summary {
    grid-template-columns: 36px minmax(0, 1fr) auto 18px;
    padding: 16px 20px;
  }

  .pi-disclosure__action {
    display: inline;
  }

  .pi-disclosure__content {
    padding: 20px;
  }

  .pi-setup-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pi-form-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .pi-direction__summary {
    grid-template-columns: 12px minmax(220px, 1fr) auto auto 18px;
    padding: 14px 20px;
  }

  .pi-direction__summary-badges {
    grid-column: auto;
  }

  .pi-direction__action {
    display: inline;
  }

  .pi-direction__content {
    padding: 20px;
  }

  .pi-danger-zone {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
  }
}

@media (max-width: 767px) {
  .pi-direction .pi-table-wrap {
    overflow: visible;
  }

  .pi-direction .pi-table,
  .pi-direction .pi-table tbody,
  .pi-direction .pi-table tr,
  .pi-direction .pi-table td {
    display: block;
    width: 100%;
  }

  .pi-direction .pi-table thead {
    display: none;
  }

  .pi-direction .pi-table tr {
    padding: 10px 12px;
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius);
    background: var(--pi-surface);
  }

  .pi-direction .pi-table tr + tr {
    margin-top: 10px;
  }

  .pi-direction .pi-table td {
    padding: 6px 0;
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .pi-direction .pi-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-family: var(--pi-font-semibold);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pi-text-muted);
  }

  .pi-direction .pi-table__actions form {
    display: inline-flex;
  }

  .pi-inline-form {
    flex-direction: column;
  }

  .pi-inline-form .pi-input,
  .pi-inline-form .pi-btn {
    width: 100%;
  }

  .pi-inline-form .pi-input {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pi-shell *,
  .pi-admin * {
    transition-duration: .01ms !important; /* imprescindible: gana a las transiciones declaradas por componente */
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .pi-btn:active { transform: none; }
}