/*
 * Wizard de alta — Registro de Visitas V2
 * Prototipo de UI. Sin framework, sin build.
 *
 * TODO(B-001): mover a resources/sass/preaccreditation/** cuando exista el
 *              pipeline de assets del modulo V2.
 * TODO: no hay design system ni criterio de accesibilidad definidos.
 *       NFR-008 dice literalmente "umbrales no aportados; registrar como
 *       faltantes, no inventar". Esto respeta un piso razonable (labels
 *       asociados, foco visible, contraste alto) pero no hay nivel objetivo.
 */

/* ---------- paleta ----------
 * Los dos colores salen del LOGO (public/images/logo-principal-pi.png),
 * que es el manual de marca. Muestreados del archivo:
 *
 *   #82878A  gris   — simbolo y tipografia "Aeropuertos Argentina / CARGAS"
 *   #BDB800  oliva  — linea divisoria del logo, y fondo del sitio
 *
 * El gris es el color dominante (estructura y texto); el oliva es el ACENTO
 * y por eso lleva la accion. Todo lo demas se DERIVA de esos dos.
 *
 * NO usar el azul del boton legacy (#1364a5): no pertenece a la marca.
 */
:root {
    /* marca */
    --pw-brand:       #BDB800;   /* oliva del logo */
    --pw-brand-dark:  #a39f00;   /* hover / borde */
    --pw-brand-soft:  #f8f7e3;   /* fondo teñido */

    --pw-grey:        #82878A;   /* gris del logo */
    --pw-grey-dark:   #4a4e50;   /* titulos y texto fuerte */
    --pw-grey-soft:   #f3f4f5;   /* barras de titulo */
    --pw-grey-line:   #dcdee0;   /* bordes */

    /* texto */
    --pw-text:        #333;
    --pw-muted:       #7d8386;

    /* semanticos (el rojo ya venia del legacy) */
    --pw-error:       #c80000;
    --pw-error-soft:  #fbeceb;
    --pw-ok:          #2e7d32;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pw-brand);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--pw-text);
    line-height: 1.5;
}

.pw { display: flex; justify-content: center; padding: 32px 16px 64px; }

.pw__card {
    background: #fff;
    width: 100%;
    max-width: 640px;
    padding: 40px 48px 48px;
    border-radius: 4px;
}

/* ---------- cabecera ---------- */

/* El layout publico dibuja su propia banda con el logo sobre el fondo oliva.
   En esta pantalla se oculta: dos rectangulos blancos flotando por separado se
   leen como dos objetos sin relacion entre si. El logo pasa a ser el membrete
   del propio card, que es como estaba pensado el diseno original.

   Esta hoja la carga UNICAMENTE la vista del alta publica, asi que la regla no
   alcanza a la confirmacion ni al canal de Direccion. */
.pi-public-header { display: none; }

/* Franja de marca: sangra hasta el borde del card con margenes negativos que
   compensan su padding, para que se lea como el membrete de un documento y no
   como una imagen apoyada arriba de todo. */
.pw__brand {
    margin: -40px -48px 0;
    padding: 26px 48px 22px;
    border-bottom: 1px solid var(--pw-grey-line);
    border-radius: 4px 4px 0 0;
    text-align: center;
    background: #fff;
}

/* El logo es gris sobre transparente: sobre el oliva del fondo perderia
   contraste, por eso siempre va sobre blanco. */
.pw__logo { max-width: 232px; width: 100%; height: auto; display: inline-block; }

.pw__header { text-align: center; margin: 26px 0 28px; }
.pw__title  { font-size: 28px; font-weight: 700; margin: 0; color: var(--pw-grey-dark); }

/* ---------- stepper ---------- */

.pw__steps {
    display: flex;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    counter-reset: step;
    position: relative;
    z-index: 0;
}
.pw__step {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: var(--pw-muted);
    position: relative;
    padding-top: 26px;
}
.pw__step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--pw-grey-line);
    color: var(--pw-grey-dark);
    font-size: 11px;
    line-height: 20px;
    font-weight: 700;
}
.pw__step::after {
    content: "";
    position: absolute;
    top: 10px; left: -50%;
    width: 100%; height: 2px;
    background: var(--pw-grey-line);
    z-index: -1;
}
.pw__step:first-child::after { display: none; }

.pw__step.is-active         { color: var(--pw-grey-dark); font-weight: 700; }
.pw__step.is-active::before { background: var(--pw-brand); color: var(--pw-grey-dark); }
.pw__step.is-done::before   { background: var(--pw-brand); color: var(--pw-grey-dark); content: "\2713"; }
.pw__step.is-done::after    { background: var(--pw-brand); }

/* ---------- pasos ---------- */

/* OJO: los pasos se OCULTAN, nunca se desmontan del DOM.
   Si se destruyen, se pierden los <input type="file"> del paso 3 y los
   archivos no llegan al submit (FLW-001: se envia todo en una sola operacion). */
/* Mejora progresiva.
   Sin JavaScript el contenedor no tiene `is-enhanced` y los cuatro pasos se ven
   uno debajo del otro: el formulario sigue siendo usable y el servidor valida
   todo igual. Recien cuando wizard.js arranca se muestra un paso por vez. */
.pw__panel { display: block; }
.pw.is-enhanced .pw__panel { display: none; }
.pw.is-enhanced .pw__panel.is-current { display: block; }

/* Sin JS no hay stepper que seguir, ni navegacion, ni resumen que llenar: se
   ocultan en vez de dejar controles que no hacen nada. El boton de envio del
   ultimo paso si tiene que quedar. */
.pw:not(.is-enhanced) .pw__steps,
.pw:not(.is-enhanced) .pw-draft,
.pw:not(.is-enhanced) .pw__actions { display: none; }
.pw:not(.is-enhanced) [data-panel="4"] .pw__actions { display: flex; }
.pw:not(.is-enhanced) [data-panel="4"] .pw-review__block,
.pw:not(.is-enhanced) [data-prev],
.pw:not(.is-enhanced) [data-next] { display: none; }

/* Titulo de cada paso. Recibe el foco al cambiar de paso (tabindex="-1"), asi
   que no debe mostrar el anillo cuando el cambio lo dispara el mouse; el anillo
   visible queda para la navegacion por teclado. */
.pw__panel-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--pw-grey-dark);
}
.pw__panel-title:focus { outline: none; }
.pw__panel-title:focus-visible { outline: 2px solid var(--pw-brand-dark); outline-offset: 3px; }

/* Descripcion del requisito documental, servida por el ABM de tipos de adjunto. */
.pw-req__desc {
    margin: 4px 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pw-grey);
}

/* Error de nivel de bloque (people, adjuntos): no cuelga de ningun campo. */
.pw-field__error.is-block {
    display: block;
    margin: 0 0 16px;
}

/* Cada seccion es una TARJETA con encabezado propio.
   Un titulo con linea abajo no alcanza: se lee como separador dentro de una
   lista continua, no como "aca empieza otro bloque". */
.pw__section {
    --pw-pad: 22px;
    background: #fff;
    border: 1px solid var(--pw-grey-line);
    border-radius: 8px;
    padding: 0 var(--pw-pad) 4px;
    margin-bottom: 26px;
    box-shadow: 0 1px 3px rgba(74,78,80,.07);
    overflow: hidden;
}

/* El encabezado sale del padding de la tarjeta con margen negativo, para que
   ocupe todo el ancho y se lea como barra de titulo. El filo oliva es el
   acento de marca. */
.pw__section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pw-grey-dark);
    margin: 0 calc(var(--pw-pad) * -1) 24px;
    padding: 13px var(--pw-pad) 13px calc(var(--pw-pad) - 3px);
    background: var(--pw-grey-soft);
    border-bottom: 1px solid var(--pw-grey-line);
    border-left: 3px solid var(--pw-brand);
    line-height: 1.2;
}
/* Dato de la seccion (ej: "2 de 30"): informacion, no accion. */
.pw__section-meta {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pw-muted);
    font-size: 12px;
    flex-shrink: 0;
}

/* ---------- campos ---------- */

.pw-field { margin-bottom: 22px; }
.pw-field__label { display: block; font-size: 13px; color: var(--pw-muted); margin-bottom: 4px; }
.pw-field__req   { color: var(--pw-error); }

.pw-field__input,
.pw-field__select,
.pw-field__textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--pw-grey-line);
    padding: 8px 2px;
    font-size: 16px;
    font-family: inherit;
    color: var(--pw-text);
    background: transparent;
    border-radius: 0;
}
.pw-field__textarea { resize: vertical; min-height: 60px; }
.pw-field__input:focus,
.pw-field__select:focus,
.pw-field__textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--pw-brand);
}
.pw-field__hint { display: block; font-size: 12px; color: var(--pw-muted); margin-top: 4px; }

.pw-field.has-error .pw-field__input,
.pw-field.has-error .pw-field__select { border-bottom-color: var(--pw-error); }
/* El error va SIEMPRE visible y asociado al campo.
   El legacy lo muestra solo en :hover via ::before, que no es accesible. */
.pw-field__error { display: none; font-size: 12px; color: var(--pw-error); margin-top: 4px; }
.pw-field.has-error .pw-field__error { display: block; }

.pw-row { display: flex; gap: 20px; }
.pw-row > * { flex: 1; }

/* ---------- personas ---------- */

/* -- tarjeta colapsada: fila compacta, clickeable -- */
.pw-person {
    border: 1px solid var(--pw-grey-line);
    border-radius: 6px;
    margin-bottom: 14px;
    background: var(--pw-grey-soft);
    transition: border-color .15s, background .15s;
}
.pw-person:not(.is-open):hover { border-color: var(--pw-grey); }
/* La abierta respira más que las colapsadas. */
.pw-person.is-open { margin: 18px 0 22px; }

.pw-person__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    cursor: pointer;
}
.pw-person__n {
    font-size: 12px; font-weight: 700;
    color: #fff; background: var(--pw-grey);
    min-width: 22px; height: 22px; line-height: 22px;
    border-radius: 50%; text-align: center; flex-shrink: 0;
}
.pw-person__resume {
    flex: 1; font-size: 14px;
    /* min-width:0 es obligatorio: sin eso un flex item no se encoge por debajo
       del ancho de su contenido, el ellipsis nunca aplica y el resumen largo
       (apellido, nombre, documento y mail) empuja la fila y desborda en mobile. */
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-person__resume--empty { color: var(--pw-error); font-style: italic; }

/* -- tarjeta abierta: bloque de edicion, con peso propio -- */
.pw-person.is-open {
    background: #fff;
    border: 1px solid var(--pw-brand);
    box-shadow: 0 2px 10px rgba(189,184,0,.15);
}
.pw-person.is-open .pw-person__head {
    cursor: default;
    background: var(--pw-brand-soft);
    border-radius: 5px 5px 0 0;
}
.pw-person.is-open .pw-person__n { background: var(--pw-brand); color: var(--pw-grey-dark); }
/* Abierta muestra "Persona N", no el resumen: estas viendo el formulario,
   repetir "Sin completar" arriba es ruido. */
.pw-person.is-open .pw-person__resume {
    font-weight: 700; color: var(--pw-grey-dark); font-style: normal;
}
/* Y el lapiz sobra: ya la estas editando. */
.pw-person.is-open [data-person-toggle] { display: none; }

.pw-person__body { display: none; padding: 24px 20px 6px; }
.pw-person.is-open .pw-person__body { display: block; }

/* -- confirmacion inline, en reemplazo de window.confirm() -- */
.pw-person__confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    background: var(--pw-error-soft);
    border-top: 1px solid var(--pw-grey-line);
    font-size: 13px;
}
.pw-person__confirm[hidden] { display: none; }
.pw-person__confirm-actions { display: flex; gap: 8px; flex-shrink: 0; }

.pw-btn-mini {
    border: 1px solid var(--pw-grey-line);
    background: #fff;
    color: var(--pw-grey-dark);
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    padding: 6px 14px;
    cursor: pointer;
}
.pw-btn-mini:hover { background: var(--pw-grey-soft); }
.pw-btn-mini--danger {
    background: var(--pw-error);
    border-color: var(--pw-error);
    color: #fff;
    font-weight: 600;
}
.pw-btn-mini--danger:hover { background: #a30000; }

.pw-icon-btn {
    border: none; background: none; cursor: pointer;
    color: var(--pw-muted); font-size: 15px; padding: 4px 6px; line-height: 1;
}
.pw-icon-btn:hover { color: var(--pw-grey-dark); }
.pw-icon-btn--danger:hover { color: var(--pw-error); }
.pw-icon-btn[disabled] { opacity: .3; cursor: not-allowed; }

/* Agregar es la unica accion del bloque: va centrada y sola.
   El contador se fue a la barra de titulo de la seccion. */
.pw-people__foot {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin-top: 22px; padding-bottom: 4px;
}
.pw-btn--add {
    border-style: dashed;
    border-color: var(--pw-grey);
    color: var(--pw-grey-dark);
    padding: 11px 24px;
}
.pw-btn--add:hover:not([disabled]) {
    border-style: solid;
    border-color: var(--pw-brand);
    background: var(--pw-brand-soft);
}
/* El motivo del bloqueo va como texto, no como title: un tooltip no existe en
   touch y no lo anuncia un lector de pantalla. */
.pw-people__hint { font-size: 12px; color: var(--pw-muted); }

.pw-people__empty {
    text-align: center; color: var(--pw-muted); font-style: italic;
    padding: 24px 0;
}

/* ---------- adjuntos ---------- */

.pw-req {
    border: 1px solid var(--pw-grey-line);
    border-radius: 6px;
    padding: 18px 20px 20px;
    margin-bottom: 14px;
    transition: border-color .15s;
}
.pw-req.has-file { border-color: var(--pw-ok); }

.pw-req__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pw-req__name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pw-req__flag {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--pw-muted); flex-shrink: 0;
}
.pw-req__flag--req { color: var(--pw-error); }

.pw-req__file { margin-top: 14px; }

/* Control de archivo propio: el input nativo no se puede estilar y su texto lo
   pone el navegador (idioma y formato varian). El input real va oculto dentro
   del label, asi que sigue en el form y se envia igual. */
.pw-file {
    display: inline-flex; align-items: center; gap: 12px;
    cursor: pointer; max-width: 100%;
}
.pw-file__btn {
    flex-shrink: 0;
    border: 1px solid var(--pw-grey);
    border-radius: 3px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--pw-grey-dark);
    background: #fff;
    transition: background .15s, border-color .15s;
}
.pw-file:hover .pw-file__btn { background: var(--pw-brand-soft); border-color: var(--pw-brand); }
.pw-file__name {
    font-size: 13px; color: var(--pw-muted); font-style: italic;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pw-file__name--set { color: var(--pw-text); font-style: normal; }

.pw-req__chosen {
    color: var(--pw-ok); font-size: 12px; margin-top: 10px;
    overflow-wrap: anywhere;
}

.pw-note {
    background: var(--pw-brand-soft);
    border-left: 3px solid var(--pw-brand);
    padding: 12px 14px;
    font-size: 13px;
    margin-top: 22px;
}
.pw-empty-state {
    text-align: center; color: var(--pw-muted); font-style: italic; padding: 28px 0;
}

/* Aviso inline, en reemplazo de window.alert() */
.pw-alert {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    background: var(--pw-brand-soft);
    border-left: 3px solid var(--pw-brand);
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
.pw-alert[hidden] { display: none; }

/* ---------- revisar ---------- */

.pw-review__block { border-bottom: 1px solid var(--pw-grey-line); padding: 20px 0; }
.pw-review__block:last-of-type { border-bottom: none; }
.pw-review__head  { display: flex; justify-content: space-between; align-items: baseline; }
.pw-review__title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--pw-grey-dark);
}
/* Motivo y lista de personas pueden ser largos: que corten, no que desborden. */
.pw-review__body  { font-size: 15px; margin-top: 10px; overflow-wrap: anywhere; }

/* Personas y adjuntos como LISTA, no como texto separado por puntos:
   con tres o mas no se distingue donde termina uno y empieza el siguiente. */
.pw-review__list { list-style: none; margin: 0; padding: 0; }
.pw-review__item {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 14px;
}
.pw-review__item:nth-child(odd) { background: var(--pw-grey-soft); }
.pw-review__idx {
    font-size: 11px; font-weight: 700; color: var(--pw-muted);
    min-width: 16px; flex-shrink: 0;
}
.pw-review__who { flex: 1; min-width: 0; }
.pw-review__doc { color: var(--pw-muted); font-size: 13px; flex-shrink: 0; }
.pw-review__doc.is-ok      { color: var(--pw-ok); }
.pw-review__doc.is-missing { color: var(--pw-error); font-weight: 600; }
.pw-link {
    background: none; border: none; color: var(--pw-grey-dark);
    font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline;
    text-decoration-color: var(--pw-brand);
    text-underline-offset: 3px;
}
.pw-link:hover { color: var(--pw-brand-dark); }

/* Advertencia con el oliva de la marca, no con un ambar generico. */
.pw-warning {
    background: var(--pw-brand-soft);
    border-left: 3px solid var(--pw-brand);
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 20px;
}

/* ---------- errores globales ---------- */

.pw-errors {
    display: none;
    background: var(--pw-error-soft);
    border-left: 3px solid var(--pw-error);
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 14px;
}
.pw-errors.is-visible { display: block; }
.pw-errors ul { margin: 8px 0 0; padding-left: 18px; }
.pw-errors a  { color: var(--pw-error); }

/* ---------- acciones ---------- */

.pw__actions {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 32px;
}
.pw__actions--end { justify-content: flex-end; }

/* El oliva es el acento de la marca y por eso lleva la accion.
   Texto oscuro, no blanco: sobre #BDB800 el blanco da ~2:1 de contraste y es
   ilegible; con el gris oscuro de marca da ~7:1. */
.pw-btn {
    border: none; border-radius: 3px; cursor: pointer;
    font-size: 15px; font-weight: 600; font-family: inherit; padding: 12px 28px;
    background: var(--pw-brand);
    color: var(--pw-grey-dark);
}
.pw-btn:hover { background: var(--pw-brand-dark); }
.pw-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pw-btn--ghost {
    background: none; color: var(--pw-grey-dark);
    border: 1px solid var(--pw-grey-line); font-weight: 500;
}
.pw-btn--ghost:hover { background: var(--pw-grey-soft); border-color: var(--pw-grey); }
.pw-btn--block { width: 100%; }

.pw-spinner {
    display: none;
    width: 14px; height: 14px; margin-right: 8px;
    border: 2px solid rgba(74,78,80,.3);
    border-top-color: var(--pw-grey-dark);
    border-radius: 50%;
    animation: pw-spin .7s linear infinite;
    vertical-align: -2px;
}
.is-sending .pw-spinner { display: inline-block; }
@keyframes pw-spin { to { transform: rotate(360deg); } }

/* ---------- confirmacion ---------- */

.pw-done { text-align: center; padding: 24px 0 8px; }
.pw-done__check {
    width: 56px; height: 56px; line-height: 56px;
    border-radius: 50%; background: var(--pw-ok); color: #fff;
    font-size: 30px; margin: 0 auto 18px;
}
.pw-done__title { font-size: 22px; margin: 0 0 10px; color: var(--pw-grey-dark); }
.pw-done__text  { color: var(--pw-muted); margin: 0 0 6px; }
.pw-done__text strong { color: var(--pw-grey-dark); font-weight: 600; }

/* La referencia es lo unico que hay que conservar, asi que se trata como el
   dato principal y no como un pie de pagina: bloque propio, tenido con el color
   de marca y con el identificador en monoespaciada.

   Monoespaciada y con `word-break` porque es un UUID de 36 caracteres que
   alguien puede tener que leer en voz alta o transcribir: con una tipografia
   proporcional se confunden el 1 y la l, el 0 y la O. */
.pw-ref {
    background: var(--pw-brand-soft);
    border-left: 3px solid var(--pw-brand);
    padding: 18px 20px;
    margin: 4px 0 28px;
    text-align: center;
}
.pw-ref__label {
    margin: 0 0 6px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--pw-muted);
}
.pw-ref__value {
    margin: 0 0 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 17px; font-weight: 600; color: var(--pw-grey-dark);
    letter-spacing: .02em; word-break: break-all;
}
.pw-ref__actions { margin: 0; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pw-ref__estado  { font-size: 13px; color: var(--pw-muted); }
.pw-ref__hint    { margin: 12px 0 0; font-size: 13px; color: var(--pw-muted); }

/* El bloque `.pw-steps-next` vivia aca: estilaba la lista "Que sigue" de la
   pantalla de confirmacion, que se quito por decision de producto. Sin esa lista
   la regla no la usa nadie. */

/* Resumen en dos columnas: la etiqueta angosta y el valor libre. En pantallas
   chicas pasa a una sola columna, porque con dos el valor queda en un canal de
   pocos caracteres y se corta en todas las lineas. */
.pw-resumen { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.pw-resumen dt { color: var(--pw-muted); font-size: 14px; }
.pw-resumen dd { margin: 0; color: var(--pw-grey-dark); }

/* Boton chico para acciones secundarias dentro de un bloque. */
.pw-btn--mini { padding: 7px 14px; font-size: 13px; }

/* `.pw-btn` se usa tambien en un <a>: sin esto hereda el subrayado y el color
   de enlace del navegador. */
a.pw-btn { text-decoration: none; display: inline-block; }

/* ---------- borrador restaurado ---------- */

.pw-draft {
    display: none;
    background: var(--pw-brand-soft); border-left: 3px solid var(--pw-brand);
    padding: 10px 14px; font-size: 13px; margin-bottom: 20px;
}
.pw-draft.is-visible { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.pw-draft .pw-link { flex-shrink: 0; }

/* ---------- mobile ---------- */

@media (max-width: 560px) {
    .pw { padding: 12px 10px 40px; }
    .pw__card { padding: 22px 16px 28px; border-radius: 0; }

    .pw__brand  { margin: -22px -16px 0; padding: 18px 16px 16px; border-radius: 0; }
    .pw__logo   { max-width: 180px; }
    .pw__header { margin: 18px 0 20px; }
    .pw__title  { font-size: 21px; }

    /* Con dos columnas el valor del resumen queda en un canal de pocos
       caracteres y se parte en todas las lineas. */
    .pw-resumen { grid-template-columns: 1fr; gap: 2px 0; }
    .pw-resumen dd { margin-bottom: 10px; }
    .pw-ref { padding: 16px 14px; }
    .pw-ref__value { font-size: 15px; }

    /* Los pasos quedan solo como circulos numerados: cuatro etiquetas no
       entran sin romperse. El paso activo conserva su nombre debajo. */
    .pw__step span { display: none; }
    .pw__step.is-active span {
        display: block;
        position: absolute; top: 24px; left: 50%;
        transform: translateX(-50%);
        white-space: nowrap; font-size: 11px;
    }
    .pw__steps { margin-bottom: 40px; }

    /* El padding de la seccion baja y el margen negativo del titulo lo sigue
       por la variable, sin recalcular a mano. */
    .pw__section { --pw-pad: 14px; margin-bottom: 18px; }
    .pw__section-title { font-size: 11px; }

    .pw-row { flex-direction: column; gap: 0; }

    /* Botones apilados y a lo ancho: dos botones chicos lado a lado son
       dificiles de acertar con el pulgar. El de avanzar va primero. */
    .pw__actions {
        flex-direction: column-reverse;
        gap: 10px;
        margin-top: 24px;
    }
    .pw__actions .pw-btn { width: 100%; }

    /* Agregar persona full width, contador debajo */
    .pw-people__foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .pw-people__foot .pw-btn { width: 100%; }
    .pw-people__counter { text-align: center; }

    .pw-person__head { padding: 13px 12px; gap: 8px; }
    .pw-person__resume { font-size: 13px; }
    .pw-person__body { padding: 18px 12px 2px; }
    .pw-person__confirm { padding: 12px; }
    .pw-person__confirm-actions { width: 100%; }
    .pw-person__confirm-actions .pw-btn-mini { flex: 1; }
    .pw-btn--add { width: 100%; }

    .pw-req { padding: 14px 12px 16px; }
    .pw-req__head { flex-direction: column; gap: 2px; }
    /* El control de archivo apilado: boton arriba, nombre debajo. */
    .pw-file { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
    .pw-file__btn { text-align: center; }

    .pw-review__item { flex-wrap: wrap; gap: 4px 10px; }
    .pw-review__doc { width: 100%; padding-left: 28px; }

    .pw-review__head { flex-direction: column; align-items: flex-start; gap: 2px; }
    .pw-draft.is-visible { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* Evita el zoom automatico de iOS al enfocar un campo: Safari hace zoom si
       la tipografia del input mide menos de 16px. */
    .pw-field__input,
    .pw-field__select,
    .pw-field__textarea { font-size: 16px; }
}