/* ============================================================
   Talento Chaqueño — hoja de estilos propia

   Sin frameworks. La plantilla heredada traía AdminLTE y Bootstrap, pero
   public/ llegó vacío y estas pantallas son de cara al público, no un panel
   de administración: no necesitan una grilla de 12 columnas ni un menú
   lateral.

   Móvil primero: el tráfico va a venir casi todo de Android.

   Orden del archivo:
     1. Tokens
     2. Base
     3. Estructura (cabecera, contenido, pie)
     4. Botones y chips
     5. Formularios
     6. Buscador y tarjetas
     7. Perfil
     8. Registro
     9. Mensajes y estados
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Verde de marca. Sobre blanco da 5.4:1, así que pasa AA tanto para texto
     como para el blanco encima de él en los botones. No llega a AAA (7:1),
     por eso no se usa para texto largo: va en títulos, botones, códigos y
     detalles, nunca en párrafos. */
  --acento:          #007b3e;
  --acento-fuerte:   #00602f;   /* hover: más oscuro, más contraste */
  --acento-suave:    #e7f2ec;

  --tinta:           #1d1b19;
  --tinta-media:     #57514c;
  --tinta-suave:     #857d76;

  /* La base tira a crema y no a gris: con un acento verde sobre blanco puro
     la pantalla se vuelve fría y de clínica. */
  --fondo:           #faf7f2;
  --superficie:      #ffffff;
  --superficie-alt:  #f4f0e9;
  --borde:           #e5ded4;
  --borde-fuerte:    #cfc5b8;

  /* Los velos del fondo. Uno verde y uno cálido, los dos casi invisibles:
     lo que hacen es que la página no sea una plancha de un solo color. */
  --velo-1:          rgba(0, 123, 62, .08);
  --velo-2:          rgba(196, 138, 58, .07);

  /*
     TRAZOS DEL FONDO
     ----------------
     Cuatro figuras sueltas —un aro, un rectángulo redondeado inclinado, un
     grupo de rayos y unas diagonales— que repiten el motivo del logo: cajas
     con esquinas redondeadas y los rayitos que le salen al costado.

     Van como capas de background separadas y no como una sola imagen, para
     poder ubicar cada una por su cuenta en porcentajes. Así en un teléfono
     las figuras caen donde tienen que caer en lugar de aparecer aplastadas o
     recortadas al azar.

     La opacidad está horneada en cada SVG. La variable existe para poder
     cambiar el juego entero en modo noche sin repetir las posiciones.
  */
  --trazos:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='120' cy='120' r='110' fill='none' stroke='%23007b3e' stroke-opacity='.16' stroke-width='6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Crect x='42' y='42' width='156' height='156' rx='30' fill='none' stroke='%23007b3e' stroke-opacity='.13' stroke-width='6' transform='rotate(-13 120 120)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg stroke='%23c48a3a' stroke-opacity='.26' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='M22 44 L74 28'/%3E%3Cpath d='M24 80 L78 80'/%3E%3Cpath d='M22 116 L74 132'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%23007b3e' stroke-opacity='.14' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M14 186 L186 14'/%3E%3Cpath d='M58 186 L186 58'/%3E%3Cpath d='M102 186 L186 102'/%3E%3C/g%3E%3C/svg%3E");

  /* "Correcto" comparte familia con la marca a propósito: publicado,
     disponible y logrado quieren decir lo mismo acá. Lo que distingue un
     estado de otro es el ámbar de --alerta, no dos verdes casi iguales que
     nadie sabría diferenciar. */
  --ok:              #0a6b3c;
  --ok-fondo:        #e4f1e9;
  --alerta:          #8a5a06;
  --alerta-fondo:    #fdf3e0;
  --error:           #a32020;
  --error-fondo:     #fcecec;

  --radio:           14px;
  --radio-chico:     9px;
  --sombra:          0 1px 2px rgba(29, 27, 25, .06), 0 4px 12px rgba(29, 27, 25, .05);
  --sombra-alta:     0 2px 4px rgba(29, 27, 25, .08), 0 12px 28px rgba(29, 27, 25, .10);

  --ancho:           1080px;
  --paso:            1rem;

  --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --tipo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* La lupa del buscador. Va como variable y no pegada en la regla para
     poder cambiarle el color en modo noche sin repetir el dibujo. */
  --lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857d76' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    /* El verde de marca no se lee sobre fondo oscuro: en modo noche se
       aclara hasta un verde que sí contrasta. */
    --acento:          #45c180;
    --acento-fuerte:   #6fd39b;
    --acento-suave:    #11291d;

    --tinta:           #f2eee9;
    --tinta-media:     #bdb4ac;
    --tinta-suave:     #8d857d;

    --fondo:           #161715;
    --superficie:      #1f201d;
    --superficie-alt:  #292a26;
    --borde:           #35362f;
    --borde-fuerte:    #4a4b41;

    --velo-1:          rgba(69, 193, 128, .10);
    --velo-2:          rgba(196, 138, 58, .07);

    /* Mismas figuras, en el verde claro del modo noche. Un trazo oscuro
       sobre fondo oscuro no se ve, y uno blanco se ve sucio. */
    --trazos:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='120' cy='120' r='110' fill='none' stroke='%2345c180' stroke-opacity='.15' stroke-width='6'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Crect x='42' y='42' width='156' height='156' rx='30' fill='none' stroke='%2345c180' stroke-opacity='.12' stroke-width='6' transform='rotate(-13 120 120)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg stroke='%23d9a45f' stroke-opacity='.22' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='M22 44 L74 28'/%3E%3Cpath d='M24 80 L78 80'/%3E%3Cpath d='M22 116 L74 132'/%3E%3C/g%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg stroke='%2345c180' stroke-opacity='.13' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M14 186 L186 14'/%3E%3Cpath d='M58 186 L186 58'/%3E%3Cpath d='M102 186 L186 102'/%3E%3C/g%3E%3C/svg%3E");

    --lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d857d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");

    --ok:              #5cc68d;
    --ok-fondo:        #142a1d;
    --alerta:          #e0b45f;
    --alerta-fondo:    #2b2313;
    --error:           #f08585;
    --error-fondo:     #2e1a1a;

    --sombra:          0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
    --sombra-alta:     0 2px 4px rgba(0, 0, 0, .5), 0 12px 28px rgba(0, 0, 0, .4);
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/*
 * El atributo hidden tiene que ganarle a cualquier display de este archivo.
 *
 * El display:none de hidden vive en la hoja del navegador, y CUALQUIER regla
 * de autor le gana, por poco específica que sea. Con .carrito{display:inline-flex}
 * el contador de preselección se veía siempre, incluso marcado como hidden y
 * con cero perfiles. El !important es el remedio correcto acá: hidden
 * significa "no está", no "está pero tapado".
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

/*
 * Dos manchas de color enormes y casi transparentes detrás de todo: una
 * verde arriba a la izquierda y una cálida arriba a la derecha. No se ven
 * como "un degradado", se ven como que la página tiene profundidad — que es
 * lo que le faltaba a un color plano.
 *
 * Va en un pseudo-elemento fijo y NO con background-attachment: fixed, que
 * en Safari de iOS se mueve a saltones al desplazar.
 *
 * z-index -1 lo deja detrás del contenido pero delante del color de fondo
 * del body; pointer-events: none para que no se coma ningún clic.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 42rem at 8% -12%,  var(--velo-1), transparent 62%),
    radial-gradient(46rem 34rem at 96% -4%,  var(--velo-2), transparent 58%),
    radial-gradient(38rem 30rem at 70% 108%, var(--velo-1), transparent 60%);
}

/*
 * Las figuras, encima de los velos.
 *
 * Son cuatro y están repartidas por las esquinas a propósito: el centro
 * queda libre porque ahí va el contenido, y una figura detrás de un párrafo
 * lo ensucia por más suave que sea.
 *
 * Las medidas están en vmin para que cada figura ocupe siempre la misma
 * proporción de la pantalla. En un teléfono el aro mide media pantalla y se
 * nota; en un monitor grande queda del mismo tamaño relativo, sin volverse
 * un sello gigante.
 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--trazos);
  background-repeat: no-repeat;
  background-position:
    102% -6%,     /* aro, asomando por el borde de arriba a la derecha */
    -14%  34%,    /* rectángulo inclinado, saliendo por la izquierda */
    104%  62%,    /* rayos, apoyados en el borde derecho */
    -8%  104%;    /* diagonales, abajo a la izquierda */
  background-size:
    52vmin 52vmin,
    44vmin 44vmin,
    22vmin 22vmin,
    36vmin 36vmin;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; }
p  { margin: 0 0 .75rem; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento-fuerte); }

img { max-width: 100%; height: auto; }

/* Lo que tiene que leer el lector de pantalla y no hace falta dibujar. No se
   usa display:none ni [hidden]: eso lo sacaría también del lector. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Un anillo de foco igual en todo el sitio, y sólo cuando se navega con
   teclado: :focus-visible no se dispara al hacer clic con el mouse. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

code {
  font-family: var(--tipo-mono);
  font-size: .9em;
  background: var(--superficie-alt);
  padding: .1em .35em;
  border-radius: 4px;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 3px;
}

.saltar-al-contenido {
  position: absolute; left: -9999px;
  background: var(--acento); color: #fff;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radio) 0;
}
.saltar-al-contenido:focus { left: 0; top: 0; color: #fff; }

/* ---------- 3. Estructura ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--paso);
}

.cabecera {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}

.cabecera__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px; flex-wrap: wrap; padding-block: .6rem;
}

.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }

/*
 * El logo reemplazó al cuadrado verde con las letras "TC". Va sin fondo ni
 * recuadro: la imagen ya es la marca.
 */
.marca__logo {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: block;
}

/*
 * En modo noche el verde del logo (#007b3e) sobre una superficie oscura da
 * menos de 2:1 y prácticamente desaparece. Como es un color plano, subirle
 * el brillo lo aclara de forma predecible y no hace falta un segundo
 * archivo.
 */
@media (prefers-color-scheme: dark) {
  .marca__logo { filter: brightness(1.75) saturate(.92); }
}

.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__texto strong { font-size: 1.02rem; }
.marca__texto small  { color: var(--tinta-suave); font-size: .76rem; }

/*
 * flex-wrap es obligatorio acá: sin él, en un teléfono los tres elementos de
 * la navegación no entran en 390px, no bajan de línea y empujan el ancho de
 * TODA la página. El desborde no se ve en la cabecera —se ve como que el
 * resto del sitio se sale por la derecha—, que es lo que lo vuelve difícil
 * de encontrar.
 */
.navegacion {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; justify-content: flex-end;
}

/*
 * Los enlaces de la cabecera miden exactamente lo mismo que un .boton--chico:
 * mismo relleno, misma letra, mismo borde. Comparten renglón con «Registrar
 * mi perfil», y dos cosas de distinto tamaño una al lado de la otra se leen
 * como un descuido, no como una jerarquía.
 *
 * El borde transparente no se ve, pero ocupa: sin él el enlace quedaría un
 * píxel más bajo que el botón, que sí lo tiene.
 */
.navegacion__enlace {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .7rem;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  color: var(--tinta-media); text-decoration: none;
  font-size: .82rem; font-weight: 600; line-height: 1.55;
  transition: background-color .15s, color .15s;
}
.navegacion__enlace:hover  { background: var(--superficie-alt); color: var(--tinta); }
.navegacion__enlace.es-actual { color: var(--acento); background: var(--acento-suave); }

.contenido { padding: 1.75rem 0 3rem; min-height: 60vh; }

.pie {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding: 1.75rem 0;
  margin-top: 2rem;
}
.pie__privacidad {
  max-width: 62ch; color: var(--tinta-media); font-size: .9rem;
  border-left: 3px solid var(--acento); padding-left: .85rem;
}
.pie__privacidad strong { color: var(--tinta); }
.pie__legal { color: var(--tinta-suave); font-size: .82rem; margin: 0; }

/* ---------- 4. Botones y chips ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .9rem;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.boton--primario { background: var(--acento); color: #fff; }
.boton--primario:hover:not(:disabled) { background: var(--acento-fuerte); color: #fff; }

.boton--secundario {
  background: var(--superficie); color: var(--tinta-media);
  border-color: var(--borde-fuerte);
}
.boton--secundario:hover { background: var(--superficie-alt); color: var(--tinta); }

.boton--texto { background: none; color: var(--tinta-media); padding-inline: .6rem; }
.boton--texto:hover { background: var(--superficie-alt); color: var(--tinta); }

.boton--chico  { padding: .32rem .7rem; font-size: .82rem; }

/* El de enviar el registro sigue siendo el más grande de la pantalla, pero
   ya no ocupa todo el ancho en escritorio: con 44px de alto alcanza para
   tocarlo cómodo en un teléfono, que es el único sitio donde importa. */
.boton--grande { padding: .62rem 1.35rem; font-size: .95rem; width: 100%; }

.boton:disabled { opacity: .5; cursor: not-allowed; }

/* Botón trabajando: un aro girando al lado del texto, que queda donde
   estaba. El hueco del aro es el borde de arriba sin color; lo demás lo
   hereda del botón, así sirve igual sobre el verde y sobre el blanco.

   El .boton ya es inline-flex con gap, de modo que el aro se separa solo del
   texto y no hace falta margen. */
@keyframes talento-giro { to { transform: rotate(1turn); } }

.boton.esta-cargando::before {
  content: "";
  width: .85em; height: .85em; flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: talento-giro .6s linear infinite;
}

/* Apagado, pero no tan apagado como un botón que no se puede usar: este
   está haciendo algo y su texto todavía importa. */
.boton.esta-cargando:disabled { opacity: .9; cursor: wait; }

/* Con el movimiento desactivado el aro no gira, y un aro con un hueco
   quieto es sólo un círculo roto: se lo cierra. Lo que avisa ahí es el
   botón apagado y el aria-busy, que el lector de pantalla sí anuncia. */
@media (prefers-reduced-motion: reduce) {
  .boton.esta-cargando::before { border-top-color: currentColor; opacity: .6; }
}

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.chip {
  background: var(--superficie-alt); color: var(--tinta-media);
  border: 1px solid var(--borde);
  padding: .2rem .55rem; border-radius: 100px;
  font-size: .8rem; line-height: 1.4;
}
.chip--mas { background: none; border-style: dashed; color: var(--tinta-suave); }

.etiqueta {
  display: inline-block; padding: .18rem .55rem; border-radius: 100px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  background: var(--superficie-alt); color: var(--tinta-media);
}
.etiqueta--inmediata  { background: var(--ok-fondo);     color: var(--ok); }
.etiqueta--15dias     { background: var(--alerta-fondo); color: var(--alerta); }
.etiqueta--30dias     { background: var(--alerta-fondo); color: var(--alerta); }
.etiqueta--a_convenir { background: var(--superficie-alt); color: var(--tinta-media); }

/* ---------- 5. Formularios ---------- */
.campo { margin-bottom: 1rem; min-width: 0; }

.campo__etiqueta {
  display: block; margin-bottom: .3rem;
  font-size: .87rem; font-weight: 600; color: var(--tinta-media);
}
.req { color: var(--acento); }

.campo__control {
  width: 100%;
  padding: .42rem .6rem;

  /* OJO: acá el tamaño NO baja de 16px.
     Safari en iOS hace zoom automático sobre cualquier campo con letra menor
     a 16px al enfocarlo, y deja la página descuadrada. Como el formulario de
     registro se va a completar casi siempre desde un teléfono, el campo se
     achica por relleno, no por tipografía. En escritorio, donde ese zoom no
     existe, sí se reduce — está al final del archivo, bajo (pointer: fine). */
  font: inherit; font-size: 1rem;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  transition: border-color .15s, box-shadow .15s;
}
.campo__control:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
textarea.campo__control { resize: vertical; min-height: 3.2em; }

select.campo__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-suave) 50%),
                    linear-gradient(135deg, var(--tinta-suave) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.8rem;
}

.campo__nota  { margin: .3rem 0 0; font-size: .82rem; color: var(--tinta-suave); }
.campo__nota--aviso { color: var(--alerta); }
.campo__error { margin: .3rem 0 0; font-size: .84rem; color: var(--error); font-weight: 600; }

.campo--error .campo__control { border-color: var(--error); }
.campo--error .campo__control:focus { box-shadow: 0 0 0 3px var(--error-fondo); }

.campo--centrado { display: flex; align-items: flex-end; padding-bottom: .35rem; }

.campo__fila { display: grid; gap: 0 1rem; }

.casilla {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .5rem; cursor: pointer; font-size: .9rem; color: var(--tinta-media);
}
.casilla input { margin-top: .25rem; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--acento); }

.casilla--destacada { font-size: .93rem; color: var(--tinta); align-items: flex-start; }

/* ---------- 6. Buscador y tarjetas ---------- */

/*
 * La portada es lo primero que se ve y hasta ahora era un bloque de texto
 * plano del mismo peso que todo lo demás. El título ahora es claramente más
 * grande y más apretado —la letra grande necesita menos aire entre letras, o
 * se desarma— y la bajada queda en un ancho de lectura cómodo en vez de
 * estirarse hasta donde dé el contenedor.
 */
.portada { margin-bottom: 1.4rem; }

.portada__titulo {
  font-size: 1.85rem; line-height: 1.08; letter-spacing: -.025em;
  margin: 0 0 .55rem;
}
.portada__bajada {
  color: var(--tinta-media); max-width: 52ch; margin: 0;
  font-size: 1rem; line-height: 1.55;
}

/* Un trazo corto del color de marca: da un punto de apoyo a la portada
   sin sumar nada que haya que leer. Se degrada hacia la derecha para que no
   termine en seco. */
.portada::after {
  content: "";
  display: block;
  width: 54px; height: 3px;
  margin-top: 1rem;
  background: linear-gradient(90deg, var(--acento), transparent);
  border-radius: 100px;
}


/*
 * EL PANEL DE BÚSQUEDA
 *
 * Antes eran dos piezas sueltas: un campo de texto arriba y, abajo y lejos,
 * un botón «Buscar» del tamaño de un enlace. Ahora el campo y el botón son
 * una sola pieza con forma de buscador —que es lo que la gente reconoce de
 * un vistazo— y los cuatro filtros quedan debajo, como lo que son: una
 * manera de afinar, no el punto de partida.
 */
.filtros {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: .85rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sombra-alta);
}

/* El marco lo dibuja el contenedor y no el input: así el foco ilumina la
   pieza entera —lupa, campo y botón— en vez de un rectángulo de adentro. */
.buscador {
  display: flex; align-items: center; gap: .5rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 100px;
  padding: .28rem .28rem .28rem .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.buscador:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.buscador::before {
  content: "";
  flex: 0 0 auto; width: 17px; height: 17px;
  background: var(--lupa) center / contain no-repeat;
  opacity: .8;
}

.buscador__campo {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 1rem; color: var(--tinta);
  padding: .42rem 0;
}
.buscador__campo::placeholder { color: var(--tinta-suave); }

/* La cruz que Chrome y Safari le agregan a type="search" se pega al botón. */
.buscador__campo::-webkit-search-cancel-button { margin-right: .35rem; }

.buscador__boton { flex: 0 0 auto; border-radius: 100px; }

.filtros__grilla { display: grid; gap: 0 .9rem; margin-top: .85rem; }
.filtros__grilla .campo { margin-bottom: .7rem; }

/* Rótulos de filtro, no de formulario: más chicos y en versalitas, para que
   se lean como el encabezado de una columna y no compitan con el valor. */
.filtros__grilla .campo__etiqueta {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-suave); margin-bottom: .3rem;
}

.filtros__pie { display: flex; justify-content: flex-end; margin: 0; }

/*
 * La cuenta de resultados. El número manda: es el dato que se mira antes de
 * decidir si hay que filtrar más.
 */
.resultados__encabezado {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin: 1.5rem 0 .9rem;
}
.resultados__cuenta { margin: 0; color: var(--tinta-media); font-size: .95rem; }
.resultados__cuenta strong {
  color: var(--tinta); font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.02em; margin-right: .1rem;
}

/* Las tarjetas son la pantalla donde el contratante pasa el rato: cuantas
   más entren en pantalla, menos scroll y más perfiles llega a mirar. Por eso
   acá todo va apretado —tipografías chicas, separaciones cortas, un solo
   renglón por dato— sin sacarle a la tarjeta ningún dato de los que tenía. */
.tarjetas { display: grid; gap: .7rem; }

/*
 * Las tarjetas entran con un desvanecido corto y escalonado.
 *
 * No es adorno: cuando se cambia un filtro la página se recarga entera y
 * antes no había ninguna señal de que el resultado fuera otro. Así se nota
 * que la lista se rehízo.
 *
 * El relleno va en "backwards" y no en "both": con "both" el navegador deja
 * clavado el transform del último fotograma y el levantado del hover deja de
 * funcionar. Con "backwards" sólo se adelanta el estado inicial y al
 * terminar la tarjeta vuelve a mandar su propia regla.
 *
 * Quien pidió menos movimiento en su sistema no ve nada de esto: hay una
 * regla al final del archivo que apaga todas las animaciones.
 */
@keyframes tarjeta-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.tarjeta { animation: tarjeta-entra .32s ease backwards; }

.tarjeta:nth-child(1)  { animation-delay: .00s; }
.tarjeta:nth-child(2)  { animation-delay: .03s; }
.tarjeta:nth-child(3)  { animation-delay: .06s; }
.tarjeta:nth-child(4)  { animation-delay: .09s; }
.tarjeta:nth-child(5)  { animation-delay: .12s; }
.tarjeta:nth-child(6)  { animation-delay: .15s; }
.tarjeta:nth-child(7)  { animation-delay: .18s; }
.tarjeta:nth-child(8)  { animation-delay: .21s; }
.tarjeta:nth-child(n+9) { animation-delay: .24s; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .8rem .9rem;
  display: flex; flex-direction: column; min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tarjeta:hover,
.tarjeta:focus-within {
  border-color: var(--acento);
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}

.tarjeta__encabezado {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .35rem;
}
.tarjeta__codigo {
  font-family: var(--tipo-mono); font-size: .76rem; font-weight: 600;
  color: var(--acento); background: var(--acento-suave);
  padding: .15rem .45rem; border-radius: var(--radio-chico);
  letter-spacing: .03em; white-space: nowrap;
}

.tarjeta__profesion { font-size: 1.02rem; margin: 0 0 .1rem; }
.tarjeta__rubro     { font-size: .78rem; line-height: 1.25; color: var(--tinta-suave); margin: 0 0 .3rem; }

/* El titular lo escribe el postulante y a veces se le va a cuatro renglones.
   Se corta en dos: el texto entero está a un clic, en el perfil. */
.tarjeta__titular {
  font-size: .86rem; line-height: 1.35; color: var(--tinta-media); margin: 0 0 .45rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zona, edad y género en un solo renglón, separados por puntos.

   Los <dt> siguen estando en el HTML y el lector de pantalla los lee, pero
   no se dibujan: "Yacuiba", "24 años" y "Mujer" se entienden solos mirando,
   y los rótulos ocupaban un renglón entero cada uno. */
.tarjeta__datos {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem;
  padding: .4rem 0; margin-bottom: .45rem;
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  font-size: .82rem;
}
.tarjeta__datos > div { display: flex; align-items: baseline; }

/* El punto separador va pegado al dato que TERMINA, no al que empieza.
   Cuando el renglón no alcanza —una columna angosta con zona, edad y
   género— la fila se parte entre dos <div>, y con el punto adelante el
   segundo renglón arrancaba con un "· Mujer" colgado. Así el punto queda al
   final del renglón de arriba, que es donde uno espera verlo. */
.tarjeta__datos > div:not(:last-child)::after {
  content: "·"; margin-left: .45rem; color: var(--borde-fuerte);
}
.tarjeta__datos dt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.tarjeta__datos dd { color: var(--tinta-media); }
.tarjeta__datos > div:first-child dd { color: var(--tinta); font-weight: 600; }

/* Cargo, empresa y período en la misma línea, cortada a dos renglones. */
.tarjeta__experiencia {
  font-size: .84rem; line-height: 1.35; color: var(--tinta-media); margin: 0 0 .45rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta__cargo    { font-weight: 600; color: var(--tinta); }
.tarjeta__periodo  { font-size: .78rem; color: var(--tinta-suave); }
.tarjeta__periodo::before { content: "· "; }

.tarjeta__enlace {
  margin-top: auto; padding-top: .7rem;
  font-size: .86rem; font-weight: 600; text-decoration: none;
}
.tarjeta__enlace::after { content: " →"; }

/* Los chips de la tarjeta son más chicos que los de la ficha del perfil:
   acá son de reojo, allá se leen.

   Y van en un solo renglón: las habilidades son frases largas —"Calibración
   de instrumentos"— y envueltas ocupaban dos filas, más que cualquier otro
   dato de la tarjeta. El degradado del borde derecho es el que avisa que la
   fila sigue; sin él, un chip cortado al medio parece un error. */
.tarjeta .chips {
  flex-wrap: nowrap; overflow: hidden; margin-bottom: .45rem;
  /* Sin esto la fila de chips —que no envuelve— le impone a la tarjeta un
     ancho mínimo igual a la suma de todos los chips, la tarjeta se lo impone
     a su columna de la grilla y la página termina más ancha que el teléfono.
     El min-width: 0 le permite achicarse y que el sobrante se recorte, que
     es justamente lo que se quiere acá. */
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
          mask-image: linear-gradient(to right, #000 84%, transparent 100%);
}
.tarjeta .chip  { flex: 0 0 auto; font-size: .74rem; padding: .12rem .45rem; }

.paginacion {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.75rem;
}
.paginacion__estado { font-size: .88rem; color: var(--tinta-suave); }

/* ---------- 7. Perfil ---------- */
.migas { font-size: .85rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.migas a { text-decoration: none; }
.migas span { margin: 0 .35rem; }

.perfil {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  box-shadow: var(--sombra);
}

.perfil__encabezado {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--borde);
}
.perfil__codigo {
  display: inline-block; font-family: var(--tipo-mono); font-size: .85rem; font-weight: 600;
  color: var(--acento); background: var(--acento-suave);
  padding: .2rem .55rem; border-radius: var(--radio-chico); margin-bottom: .5rem;
}
.perfil__profesion { font-size: 1.45rem; margin: 0 0 .15rem; }
.perfil__rubro   { color: var(--tinta-suave); font-size: .88rem; margin: 0 0 .4rem; }
.perfil__titular { color: var(--tinta-media); margin: 0; max-width: 55ch; }

.perfil__datos {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  padding: 1rem 0; border-bottom: 1px solid var(--borde);
}
.perfil__datos dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.perfil__datos dd { font-size: .95rem; font-weight: 600; }

.perfil__seccion { padding-top: 1.25rem; }
.perfil__subtitulo { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); margin-bottom: .85rem; }

.linea { border-left: 2px solid var(--borde); padding-left: 1rem; }
.linea__item { position: relative; padding-bottom: 1.1rem; }
.linea__item::before {
  content: ""; position: absolute; left: calc(-1rem - 5px); top: .45rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento); border: 2px solid var(--superficie);
}
.linea__titulo  { font-weight: 600; margin: 0 0 .1rem; }
.linea__lugar   { font-size: .9rem; color: var(--tinta-media); margin: 0 0 .1rem; }
.linea__periodo { font-size: .82rem; color: var(--tinta-suave); margin: 0 0 .35rem; }
.linea__texto   { font-size: .9rem; color: var(--tinta-media); margin: 0; max-width: 65ch; }
.linea__nota {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--tinta-suave); background: var(--superficie-alt);
  padding: .1rem .4rem; border-radius: 4px; margin-left: .35rem;
}

.grupo-chips { margin-bottom: .85rem; }
.grupo-chips__rotulo { font-size: .8rem; font-weight: 600; color: var(--tinta-suave); margin: 0 0 .35rem; }

.perfil__accion {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borde);
}
.perfil__accion-nota { font-size: .85rem; color: var(--tinta-suave); margin: .6rem 0 0; max-width: 55ch; }

.volver { margin-top: 1.25rem; }
.volver .boton { gap: .3rem; }

/* ---------- Preselección ---------- */

.carrito { display: inline-flex; align-items: center; gap: .4rem; }
.carrito--lleno { color: var(--acento); background: var(--acento-suave); }

.carrito__n {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--acento); color: #fff;
  border-radius: 100px; font-size: .74rem; font-weight: 700;
}

/* Botón de un perfil ya marcado. */
.boton--marcado {
  background: var(--ok-fondo); color: var(--ok);
  border-color: var(--ok);
}
.boton--marcado:hover { background: var(--ok); color: #fff; }

.tarjeta__pie {
  margin-top: auto; padding-top: .55rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
}
.tarjeta__pie .tarjeta__enlace { margin: 0; padding: 0; }

/* Aviso corto que aparece al marcar o quitar un perfil. */
.aviso-flotante {
  position: fixed; left: 50%; bottom: 1.25rem;
  transform: translate(-50%, 150%);
  z-index: 60; max-width: min(90vw, 420px);
  padding: .6rem 1rem;
  background: var(--tinta); color: var(--fondo);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-alta);
  font-size: .9rem; text-align: center;
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0; pointer-events: none;
}
.aviso-flotante.es-visible { transform: translate(-50%, 0); opacity: 1; }
.aviso-flotante--error { background: var(--error); color: #fff; }

/* Lista de perfiles elegidos. */
.elegidos { display: grid; gap: .5rem; margin-bottom: 1.5rem; }

.elegido {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: .7rem .9rem;
}
.elegidos--compacto .elegido { background: var(--superficie-alt); }

.elegido__datos { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.elegido__codigo {
  font-family: var(--tipo-mono); font-size: .78rem; font-weight: 600;
  color: var(--acento); letter-spacing: .03em;
}
.elegido__profesion { font-weight: 600; font-size: .95rem; }
.elegido__menor { font-size: .8rem; color: var(--tinta-suave); }
.elegido__quitar { flex: 0 0 auto; }

.consentimiento__texto { margin: 0; font-size: .9rem; line-height: 1.55; }

/* ---------- Decisión del postulante ---------- */

.decision { max-width: 640px; margin: 0 auto; }

.decision__portada { text-align: center; margin-bottom: 1.5rem; }
.decision__codigo {
  display: inline-block; font-family: var(--tipo-mono); font-size: .8rem; font-weight: 600;
  color: var(--acento); background: var(--acento-suave);
  padding: .2rem .55rem; border-radius: var(--radio-chico); margin-bottom: .6rem;
}
.decision__titulo { font-size: 1.4rem; }
.decision__bajada { color: var(--tinta-media); margin: 0; }

.quien, .opciones, .mensaje-armado {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.quien__titulo {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-suave); margin-bottom: .85rem;
}

.quien__datos { display: grid; gap: .6rem 1.5rem; }
.quien__datos dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-suave); }
.quien__datos dd { font-size: .95rem; font-weight: 600; word-break: break-word; }

.quien__mensaje {
  margin: 1rem 0 0; padding: .75rem 1rem;
  background: var(--superficie-alt);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  font-size: .92rem; color: var(--tinta-media);
}

.opciones__titulo { font-size: 1.05rem; margin-bottom: 1rem; }
.opciones__forma { display: grid; gap: .75rem; }

.opcion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.opcion--principal { border-color: var(--acento); background: var(--acento-suave); }

.opcion__texto { flex: 1 1 220px; min-width: 0; }
.opcion__titulo { font-weight: 700; margin: 0 0 .15rem; }
.opcion__detalle { font-size: .86rem; color: var(--tinta-media); margin: 0; }
.opcion .boton { flex: 0 0 auto; }

.opciones__nota {
  margin: 1rem 0 0; font-size: .85rem; color: var(--tinta-suave); text-align: center;
}

.mensaje-armado__texto {
  font-family: var(--tipo-mono); font-size: .85rem; line-height: 1.5;
  background: var(--superficie-alt);
}
.mensaje-armado__acciones {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: .85rem 0 .75rem;
}

@media (min-width: 560px) {
  .quien__datos { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mi perfil (postulante) ---------- */

.estado-perfil {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.estado-perfil--publicado { border-left-color: var(--ok); }
.estado-perfil--pendiente { border-left-color: var(--alerta); }
.estado-perfil--oculto    { border-left-color: var(--tinta-suave); }

.estado-perfil__rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-suave); margin: 0;
}
.estado-perfil__valor { font-size: 1.1rem; font-weight: 700; margin: .1rem 0 .35rem; }
.estado-perfil__nota  { font-size: .9rem; color: var(--tinta-media); margin: 0; max-width: 60ch; }
.estado-perfil__enlace { margin: .6rem 0 0; font-size: .88rem; }

.lista-simple { margin: 0 0 1rem; padding-left: 1.1rem; }
.lista-simple li {
  list-style: disc; font-size: .92rem; color: var(--tinta-media);
  margin-bottom: .3rem;
}

/* Acciones destructivas, en tres intensidades.
   Van acá y no en admin.css para que el panel y el sitio público usen las
   mismas y no dependan de cuál hoja se cargó última. */

/* Enlace suelto en una lista de opciones. */
.boton--peligro-texto {
  background: none; color: var(--error); border-color: transparent;
}
.boton--peligro-texto:hover { background: var(--error-fondo); color: var(--error); }

/* Botón con contorno: reversible, o un paso previo a confirmar. */
.boton--peligro {
  background: var(--superficie); color: var(--error); border-color: var(--error);
}
.boton--peligro:hover { background: var(--error-fondo); color: var(--error); }

/* Relleno: la confirmación final de algo que no se puede deshacer. */
.boton--peligro-fuerte {
  background: var(--error); color: #fff; border-color: var(--error);
}
.boton--peligro-fuerte:hover { background: #8a1a1a; color: #fff; }

.registro__pie {
  margin-top: 1.5rem; text-align: center;
  font-size: .9rem; color: var(--tinta-suave);
}

.login__pie {
  margin: 1.25rem 0 0; text-align: center;
  font-size: .88rem; color: var(--tinta-suave);
}

.exito__nota {
  font-size: .84rem; color: var(--tinta-suave);
  border-top: 1px solid var(--borde); padding-top: .75rem; margin-top: 1rem;
}

/* ---------- 8. Registro ---------- */

/* El campo trampa del formulario de registro.

   Se va de la pantalla en vez de esconderse con display:none o [hidden]: un
   robot que valga algo lee el CSS y saltea lo que no se dibuja, pero pocos
   se fijan en dónde quedó. Para el lector de pantalla y el tabulador no
   existe, y eso lo resuelve el HTML —aria-hidden y tabindex="-1"— porque un
   campo que una persona pueda completar sin querer haría rebotar el
   formulario sin decirle por qué. */
.trampa {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* El captcha, cuando está prendido. */
.captcha { margin: 1.25rem 0; }

.registro { max-width: 760px; margin: 0 auto; }

.registro__portada { margin-bottom: 1.5rem; }
.registro__titulo  { font-size: 1.55rem; }
.registro__bajada  { color: var(--tinta-media); max-width: 58ch; margin: 0; }

.formulario { display: flex; flex-direction: column; gap: 1.25rem; }

.paso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  margin: 0;
  box-shadow: var(--sombra);
}

.paso__titulo {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.1rem; font-weight: 700; padding: 0; margin-bottom: .25rem;
}
.paso__numero {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: 0 0 26px;
  background: var(--acento); color: #fff;
  border-radius: 50%; font-size: .85rem;
}
.paso__ayuda { font-size: .87rem; color: var(--tinta-suave); margin-bottom: 1rem; }
.paso__ayuda--privado {
  color: var(--ok); background: var(--ok-fondo);
  padding: .5rem .7rem; border-radius: var(--radio-chico);
}

.bloque__titulo {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-suave); margin: 1.5rem 0 .75rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--borde);
}

.repetible__fila {
  position: relative;
  background: var(--superficie-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 1rem; margin-bottom: .85rem;
}
.repetible__fila .campo__control { background: var(--superficie); }

.repetible__quitar {
  position: absolute; top: .4rem; right: .4rem;
  width: 28px; height: 28px; line-height: 1;
  background: none; border: none; border-radius: var(--radio-chico);
  color: var(--tinta-suave); font-size: 1.35rem; cursor: pointer;
}
.repetible__quitar:hover { background: var(--error-fondo); color: var(--error); }

.consentimiento {
  background: var(--acento-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
}
.consentimiento .casilla { margin-top: 0; }

.formulario__acciones { text-align: center; }
.formulario__nota { font-size: .85rem; color: var(--tinta-suave); margin: .75rem 0 0; }

/* ---------- 9. Mensajes y estados ---------- */

/* Controller::setmensaje() genera marcado de Bootstrap. En vez de reescribir
   ese método —lo usa también la parte de administración— se le da estilo a
   las clases que ya emite. */
.alert {
  position: relative;
  padding: .75rem 2.5rem .75rem 1rem;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  margin-bottom: 1.25rem; font-size: .93rem;
}
.alert-danger  { background: var(--error-fondo);  color: var(--error);  border-color: var(--error); }
.alert-success { background: var(--ok-fondo);     color: var(--ok);     border-color: var(--ok); }
.alert-warning { background: var(--alerta-fondo); color: var(--alerta); border-color: var(--alerta); }

.alert .close {
  position: absolute; top: .35rem; right: .5rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: inherit; opacity: .6;
}
.alert .close:hover { opacity: 1; }

.vacio {
  background: var(--superficie);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 2.25rem 1.25rem; text-align: center;
}
.vacio--pagina { margin-top: 2rem; }
.vacio__titulo { font-size: 1.05rem; font-weight: 600; margin-bottom: .35rem; }
.vacio__texto  { color: var(--tinta-media); font-size: .92rem; max-width: 48ch; margin: 0 auto .5rem; }
.vacio__texto--apagado { color: var(--tinta-suave); font-size: .87rem; }

.exito {
  max-width: 560px; margin: 1rem auto; text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2rem 1.5rem;
  box-shadow: var(--sombra);
}
.exito__icono {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1rem;
  background: var(--ok-fondo); color: var(--ok);
  border-radius: 50%; font-size: 1.8rem; font-weight: 700;
}
.exito__titulo { font-size: 1.35rem; margin-bottom: 1.25rem; }
.exito__codigo-rotulo {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-suave); margin: 0;
}
.exito__codigo {
  font-family: var(--tipo-mono); font-size: 1.9rem; font-weight: 700; letter-spacing: .06em;
  color: var(--acento); background: var(--acento-suave);
  display: inline-block; padding: .4rem 1.1rem; border-radius: var(--radio);
  margin: .35rem 0 1.25rem;
}
.exito__texto { text-align: left; color: var(--tinta-media); font-size: .93rem; }
.exito__texto strong { color: var(--tinta); }
.exito__acciones { margin: 1.5rem 0 0; }

/* ---------- Caja de acceso (login del panel y del postulante) ---------- */
.login {
  max-width: 380px; margin: 2.5rem auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.75rem;
  box-shadow: var(--sombra);
}
.login__titulo { font-size: 1.2rem; margin-bottom: .2rem; }
.login__bajada { color: var(--tinta-suave); font-size: .88rem; margin-bottom: 1.25rem; }
.login__forma .boton--grande { margin-top: .5rem; }

/* Campo que aparece dentro de otro (el oficio que no está en la lista). */
.campo--anidado {
  margin: .6rem 0 0; padding: .75rem;
  background: var(--acento-suave);
  border-radius: var(--radio-chico);
}
.campo--anidado .campo__control { background: var(--superficie); }

/* ---------- Encuesta de resultado ---------- */
.encuesta__grupo { border: none; padding: 0; margin: 0 0 1.5rem; }
.encuesta__grupo .opciones__titulo { padding: 0; }

.casilla--opcion {
  align-items: center; gap: .6rem; margin-top: .5rem;
  padding: .7rem .9rem;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  font-size: .95rem; color: var(--tinta);
}
.casilla--opcion:hover { border-color: var(--acento); background: var(--acento-suave); }
.casilla--opcion input { margin: 0; width: 18px; height: 18px; }

/* ---------- Reenvío del enlace de verificación ---------- */
.reenvio {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--borde); text-align: left;
}
.reenvio--centrado { max-width: 420px; margin-inline: auto; border-top: none; }
.reenvio__fila { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.reenvio__fila .campo__control { flex: 1 1 200px; }
.reenvio .campo__nota { margin-top: .5rem; }

/* ---------- Puntos de quiebre ---------- */
@media (min-width: 560px) {
  .campo__fila            { grid-template-columns: 1fr 1fr; }
  .campo__fila--triple    { grid-template-columns: 1fr 1fr 1fr; }
  .filtros__grilla        { grid-template-columns: 1fr 1fr; }
  .boton--grande          { width: auto; min-width: 260px; }
}

@media (min-width: 800px) {
  body { font-size: 16px; }
  .contenido        { padding: 2.25rem 0 3.5rem; }
  .portada__titulo  { font-size: 2rem; }
  .filtros__grilla  { grid-template-columns: repeat(4, 1fr); }
  /* Columnas por ancho disponible y no por cantidad fija: en 800px entran
     dos, en un monitor de escritorio entran cuatro, y no hace falta agregar
     un punto de quiebre por cada una. */
  .tarjetas         { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .perfil, .paso    { padding: 1.75rem; }
}

/* Con mouse y pantalla grande no existe el zoom automático de iOS, así que
   acá sí se puede achicar la letra de los campos. Se apunta al dispositivo
   (pointer: fine) y no al ancho de la ventana, porque una tablet en
   horizontal supera los 1024px y seguiría siendo táctil. */
@media (pointer: fine) {
  .campo__control { font-size: .92rem; padding: .38rem .58rem; }
  .casilla        { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .tarjeta:hover { transform: none; }
}