/* DeCAFacil — PWA · hoja base mobile-first (S2.1).
   CSS propio, sin framework. Paleta del kit de marca. */

:root {
  /* Paleta alineada con la landing (docs/guia-seo-estilos.md, revisión SEO/
     accesibilidad). --green queda solo para acentos decorativos y superficies
     grandes: como TEXTO (o botón con texto blanco encima) usar siempre
     --green-text, que es el único verde que cumple WCAG AA. */
  --navy:      #12395B;
  --navy-700:  #0E2C47;
  --green:     #2FA84A;   /* acento decorativo / superficies grandes, no texto */
  --green-700: #268A3D;   /* variante de hover de superficies con --green */
  --green-text:#1F6E31;   /* único verde válido para texto (6,3:1 sobre blanco) */
  --green-text-700: #17592A; /* hover de botones con --green-text */
  --ink:     #16283A;
  --muted:   #5A6570;
  --line:    #E4E8EE;
  --line-input: #DDE3EA;
  --bg:      #E7EBF0;
  --card:    #ffffff;
  --danger:  #b3261e;
  --radius:  14px;
  --shadow:  0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --maxw:    720px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--navy); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 50px; width: auto; }

.app-nav { display: flex; align-items: center; gap: 10px; }

/* ── Main / footer ──────────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.app-footer {
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  border-top: 1px solid var(--line);
}
.app-footer a { color: var(--muted); }
.app-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin-top: 8px;
}
.app-footer-legal a { text-decoration: underline; }

/* ── Páginas legales (S3.3) ─────────────────────────────────────────────── */
.legal-contenido { line-height: 1.6; }
.legal-contenido h1 { font-size: 1.3rem; color: var(--navy); margin: 24px 0 8px; }
.legal-contenido h2 { font-size: 1.1rem; color: var(--navy); margin: 24px 0 8px; }
.legal-contenido h3 { font-size: 1rem; color: var(--navy); margin: 16px 0 6px; }
.legal-contenido p, .legal-contenido ul, .legal-contenido ol { margin: 0 0 12px; }
.legal-contenido ul, .legal-contenido ol { padding-left: 22px; }
.legal-contenido blockquote {
  margin: 0 0 16px;
  padding: 8px 14px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}
.legal-contenido table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .9rem; }
.legal-contenido th, .legal-contenido td {
  border: 1px solid var(--line-input);
  padding: 6px 10px;
  text-align: left;
}
.legal-contenido a { color: var(--navy); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-700); }
.btn-accent { background: var(--green-text); color: #fff; }
.btn-accent:hover { background: var(--green-text-700); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { background: #f0f2f5; }
.btn-lg { padding: 14px 24px; font-size: 1.05rem; }

/* ── Hero (anónimo) ─────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 24px 8px; }
.hero-logo { border-radius: 22px; box-shadow: var(--shadow); }
.hero-titulo { font-size: 1.6rem; margin: 18px 0 8px; color: var(--navy); }
.hero-sub { color: var(--muted); max-width: 32rem; margin: 0 auto 22px; }
.ventajas {
  list-style: none;
  padding: 0;
  margin: 30px auto 0;
  max-width: 26rem;
  text-align: left;
}
.ventajas li {
  position: relative;
  padding: 8px 8px 8px 30px;
  border-top: 1px solid var(--line);
}
.ventajas li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--green-text);
  font-weight: 700;
}

/* ── Panel (logueado) + tiles ───────────────────────────────────────────── */
.panel { }
.panel-centrado { text-align: center; max-width: 30rem; margin: 0 auto; }
.saludo { font-size: 1.5rem; color: var(--navy); margin: 0 0 4px; }
.muted { color: var(--muted); }

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
}
.tile-titulo { font-weight: 700; color: var(--navy); }
.tile-desc { color: var(--muted); font-size: .92rem; }
.tile-disabled { opacity: .7; cursor: default; }
.tile-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #eef1f4;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ── Aviso de límites del gratuito (home, borrador de apariencia) ─────────── */
.aviso-caja {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fdf8ec;
  border: 1px solid #eadfb8;
  border-radius: var(--radius);
  font-size: .82rem;
}
.aviso-caja-titulo { margin: 0 0 6px; font-size: .88rem; color: var(--navy); }
.aviso-caja-lista { margin: 0; padding-left: 18px; }
.aviso-caja-lista li { margin-bottom: 3px; font-size: .82rem; }
.aviso-caja-cta { margin-top: 10px; font-size: .85rem; }

/* ── Formularios (base para S2.2) ───────────────────────────────────────── */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--line-input);
  border-radius: 10px;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(18,57,91,.12);
}

/* ── Login (auth) ───────────────────────────────────────────────────────── */
.auth-card {
  max-width: 24rem;
  margin: 24px auto 0;
  padding: 22px 20px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
}
.auth-card h1 { font-size: 1.35rem; color: var(--navy); margin: 0 0 6px; }
.auth-form .btn-block { margin-top: 18px; }
.btn-block { display: flex; width: 100%; }

/* Aceptación de legales en el acceso (S3.2). */
.auth-acepto {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.35;
}
/* La regla global `input { width: 100% }` (línea ~189) también alcanza al
   checkbox: al ser un flex item con flex-shrink:0, ese 100% se convertía en
   su flex-basis y se comía todo el ancho de la fila, dejando el <span> sin
   espacio (se veía desbordado fuera de la tarjeta). El fix real es acotar el
   checkbox a su tamaño natural, no solo darle flex-shrink:0. */
.auth-acepto input { width: auto; margin-top: 2px; flex-shrink: 0; }
.auth-acepto span { flex: 1 1 auto; min-width: 0; }

.form-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #fdeceb;
  border: 1px solid #f3c7c4;
  border-radius: 10px;
  color: var(--danger);
  font-size: .9rem;
}

.otp {
  letter-spacing: .5em;
  text-align: center;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.auth-secundario {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

/* HTMX: atenúa el control mientras hay una petición en curso */
.htmx-request.btn, .htmx-request .btn { opacity: .6; pointer-events: none; }
.btn.htmx-request, .btn:disabled { opacity: .6; pointer-events: none; }

/* ── Emisión (S2.3) ─────────────────────────────────────────────────────── */
.titulo-pantalla { font-size: 1.5rem; color: var(--navy); margin: 4px 0 16px; }
.subtitulo { font-size: 1.15rem; color: var(--navy); margin: 24px 0 8px; }

.bloque {
  margin: 0 0 16px;
  padding: 8px 16px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bloque legend {
  font-weight: 700;
  color: var(--navy);
  padding: 0 6px;
}
.bloque.envio legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.quitar { color: var(--danger); text-decoration: underline; font-size: .9rem; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 520px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Agrupa cada dirección/mercancía dentro del envío: su desplegable «de mi
   agenda» y sus campos quedan visualmente unidos (más claro en pantalla grande). */
.sub-bloque {
  margin: 12px 0 0;
  padding: 4px 0 10px 12px;
  border-left: 3px solid var(--line);
}
.sub-etiqueta {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ayuda { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }

.opc { color: var(--muted); font-weight: 400; font-size: .85em; }
textarea { resize: vertical; min-height: 44px; }

.anadir { margin: 4px 0 8px; }
.mt { margin-top: 16px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  margin: 18px 0 4px;
}
.check input { width: auto; margin-top: 3px; flex: 0 0 auto; }

.form-error ul { margin: 6px 0 0; padding-left: 20px; }

/* Perfil (tanda C, sesión 22) */
.ok-inline { color: var(--green-text); font-size: .9rem; margin: 12px 0 0; }
.aviso-gate {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: #fdf8ec; border: 1px solid #eadfb8; color: var(--navy);
  font-size: .88rem;
}

/* Tarjeta de éxito tras emitir */
.exito-card {
  max-width: 26rem;
  margin: 20px auto 0;
  padding: 26px 22px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.exito-check {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 1.8rem; font-weight: 700;
}
.exito-card h1 { color: var(--navy); font-size: 1.4rem; margin: 0 0 4px; }
.exito-token { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.exito-token code { color: var(--ink); }
.exito-copias { font-size: .88rem; }
/* Guardar contraparte «al vuelo» (sesión 22) */
.exito-guardar {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.exito-guardar p { margin: 0 0 8px; }
.exito-guardar-ok { color: var(--green-text); font-size: .9rem; margin-top: 10px; }
.acciones {
  display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}

/* ── Mis DeCA: badges de estado ─────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* Banner de instalación de la PWA (S3.4) — discreto, entre cabecera y contenido. */
.pwa-install {
  width: calc(100% - 24px);
  max-width: var(--maxw);
  margin: 10px auto 0;
  padding: 10px 14px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pwa-install-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.pwa-install-txt { font-size: .92rem; }
.pwa-install-acc { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pwa-install a, .pwa-install strong { color: #fff; }
.pwa-install-x { color: #fff; font-size: 1.15rem; line-height: 1; padding: 4px 9px; }

.estado-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.5;
}
.estado-emitido     { background: #e6f3ea; color: var(--green-text); }
.estado-finalizado  { background: #e7eef6; color: var(--navy); }
.estado-expirado    { background: #f1f2f4; color: var(--muted); }
.estado-reemplazada { background: #fdf1e3; color: #9a5b16; }
.estado-anulado     { background: #fbeae9; color: var(--danger); }
.estado-otro        { background: #f1f2f4; color: var(--muted); }

/* ── Mis DeCA: listado ──────────────────────────────────────────────────── */
.titulo-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.deca-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.deca-item {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
}
.deca-item:hover { border-color: #cdd5df; }
.deca-item-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.deca-fecha { font-size: .9rem; color: var(--muted); }
.deca-item-main {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
.deca-matricula { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.deca-envios { font-size: .9rem; }
.deca-item-ref { font-size: .82rem; margin-top: 4px; }
.deca-cargador { font-size: .88rem; margin-top: 4px; }
.deca-li { position: relative; }
.deca-li .deca-item { padding-bottom: 44px; }
.deca-repetir { position: absolute; right: 14px; bottom: 12px; }
.vacio { padding: 40px 0; text-align: center; }

/* Búsqueda/filtro de «Mis DeCA» (sesión 22) */
.deca-filtro {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin-top: 14px;
}
.deca-filtro-matricula { max-width: 14rem; margin: 0; }
.deca-filtro-fechas { display: flex; gap: 10px; }
.deca-filtro-fechas label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .82rem; color: var(--muted); font-weight: 600; margin: 0;
}
.deca-filtro-fechas input { width: auto; }

/* ── Ficha del DeCA ─────────────────────────────────────────────────────── */
.volver { display: inline-block; text-decoration: none; font-size: .9rem; margin-bottom: 8px; }
.ficha-cabecera { margin-bottom: 6px; }
.ficha-cabecera .titulo-pantalla { margin: 8px 0 2px; }
.ficha-ref { font-size: .9rem; margin: 0; }
.ficha-ref code { color: var(--ink); }

.ficha-bloque {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-top: 14px;
}
.ficha-h2 { font-size: 1.05rem; color: var(--navy); margin: 0 0 10px; }

.ficha-verificacion { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ficha-qr {
  display: block; width: 150px; height: 150px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.ficha-verificacion-txt { flex: 1; min-width: 200px; }
.ficha-verificacion-txt .btn { margin-top: 6px; }
.ficha-url { font-size: .82rem; margin: 8px 0 0; word-break: break-all; }

.ficha-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: flex-start; }
.compartir { display: flex; flex-direction: column; gap: 6px; }
.compartir-form { display: flex; gap: 8px; }
.compartir-form input {
  padding: 9px 12px; border: 1px solid var(--line-input); border-radius: 10px;
  font-size: 1rem; min-width: 12rem;
}
.compartir-ok  { color: var(--green-text); font-size: .9rem; margin: 0; }
.compartir-err { color: var(--danger); font-size: .9rem; margin: 0; }
.err-inline { color: var(--danger); font-size: .9rem; margin: 4px 0 0; }

/* Gestión (Finalizar / Modificar) */
.ficha-gestion .gestion-accion { margin-top: 12px; }
.ficha-gestion .gestion-accion:first-of-type { margin-top: 0; }
.confirmar { display: flex; flex-direction: column; gap: 8px; }
.confirmar-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.modificar-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.modificar-form .campo { display: flex; flex-direction: column; gap: 4px; }
.modificar-form .campo span { font-size: .82rem; color: var(--muted); }
.modificar-form .campo input {
  padding: 9px 12px; border: 1px solid var(--line-input); border-radius: 10px; font-size: 1rem;
}

.parte-rol, .envio-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 2px; }
.parte-nombre { font-weight: 700; color: var(--navy); margin: 0; }
.parte-dir { margin: 6px 0 0; line-height: 1.4; }
.dir-emp { display: block; font-weight: 600; }

.envio { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.envio:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.envio-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.envio-n { font-weight: 700; color: var(--navy); }
.envio-fecha { margin-left: auto; font-size: .9rem; }
.envio-sub { margin-top: 6px; }
.envio-merc { margin: 10px 0 0; }
.ficha-meta p { margin: 2px 0; font-size: .88rem; }

/* ── Botones auxiliares ─────────────────────────────────────────────────── */
.btn-sm { padding: 6px 12px; font-size: .9rem; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #8f1e17; }
.chip {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; background: #eef1f4; color: var(--muted);
  vertical-align: middle;
}

/* ── Mi agenda (maestros) ───────────────────────────────────────────────── */
.agenda-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 6px; }
.agenda-tab {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer;
}
.agenda-tab.is-activa { background: var(--navy); color: #fff; border-color: var(--navy); }
.agenda-barra {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap-reverse; margin: 10px 0;
}
/* Filtro por papel de la contraparte (ADR 0004): la lista es única, esto solo
   acota la vista — no hay dos pestañas. */
.agenda-filtro { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-filtro {
  margin-left: 0; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted);
  padding: 4px 10px; cursor: pointer;
}
.chip-filtro.is-activo { background: var(--navy); color: #fff; border-color: var(--navy); }
.vacio-inline { padding: 18px 0; }

.maestro-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.maestro-card {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fff);
}
.maestro-card-main { min-width: 0; }
.maestro-nombre { font-weight: 700; color: var(--navy); margin: 0 0 2px; }
.maestro-card p { margin: 2px 0; }
.maestro-dir { line-height: 1.35; }
.maestro-card-acciones { flex-shrink: 0; }
.maestro-botones { display: flex; gap: 4px; }

/* Ventana modal (alta/edición): hoja inferior en móvil, diálogo centrado en desktop */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 34rem;
  max-height: 92vh; overflow-y: auto; background: var(--card, #fff);
  border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
.modal-x {
  position: absolute; top: 8px; right: 10px; width: 36px; height: 36px;
  border: 0; background: transparent; color: var(--muted); font-size: 1.6rem;
  line-height: 1; cursor: pointer; border-radius: 8px;
}
.modal-x:hover { background: #f0f2f5; }
.maestro-form { background: transparent; }
.maestro-form .ficha-h2 { margin-top: 0; padding-right: 32px; }
.campos { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo > span, .campo-grupo legend { font-size: .82rem; color: var(--muted); }
.campo-fila { display: flex; gap: 10px; }
.campo-fila .campo { flex: 0 0 6.5rem; }
.campo-fila .campo-ancho { flex: 1 1 auto; }
.campo-check { flex-direction: row; align-items: center; gap: 8px; }
.campo-check input { width: auto; }
.campo-grupo { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.campo-grupo legend { padding: 0 6px; }
/* Variante compacta: menos interlineado entre el checkbox y su ayuda
   (p. ej. «¿Qué papel juega?» en la ficha de contraparte). */
.campo-grupo--compacto { gap: 4px; padding: 8px 12px 10px; }
.campo-grupo--compacto .campo-check { gap: 6px; }
.campo-grupo--compacto p.muted { margin: 2px 0 0; font-size: .8rem; line-height: 1.25; }

/* ── Tablet/desktop ─────────────────────────────────────────────────────── */
@media (min-width: 620px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .hero-titulo { font-size: 2rem; }
  .modal { align-items: center; padding: 20px; }
  .modal-card { border-radius: 16px; }
}