/* =========================================================================
   Portal de circularización · Terra Auditores
   Estático puro: sin frameworks, sin fuentes externas, sin CDN. Todo lo que
   necesita el navegador viaja en este repo (la política CSP de vercel.json
   bloquea cualquier origen externo, así que no se puede añadir sin pensarlo).
   ====================================================================== */

:root {
  --navy: #1b2a4a;
  --navy-claro: #2d4370;
  --oro: #b08d35;
  --texto: #1f2733;
  --suave: #5b6773;
  --borde: #dfe3e8;
  --fondo: #f6f7f9;
  --ok: #1d7a4c;
  --alerta: #a8511b;
  --error: #a32020;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.contenedor { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera {
  background: var(--navy);
  color: #fff;
  padding: 18px 0;
}
.cabecera .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.marca { font-weight: 700; letter-spacing: .14em; font-size: 15px; }
.sello { font-size: 12px; color: #c9d2e0; }

/* ── Tarjetas ─────────────────────────────────────────────────────────── */
main { padding: 28px 0 48px; }
.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 18px;
}
h1 { font-size: 22px; margin: 0 0 6px; color: var(--navy); }
h2 { font-size: 16px; margin: 24px 0 10px; color: var(--navy); }
.intro { color: var(--suave); font-size: 15px; margin: 0 0 18px; }
.cargando-texto { color: var(--suave); text-align: center; margin: 12px 0; }

/* ── Datos del saldo ──────────────────────────────────────────────────── */
.datos { border-top: 1px solid var(--borde); margin-top: 18px; padding-top: 14px; }
.fila {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid #f0f2f4; font-size: 15px;
}
.fila:last-child { border-bottom: none; }
.fila dt { color: var(--suave); margin: 0; }
.fila dd { margin: 0; font-weight: 600; text-align: right; }
.importe {
  font-variant-numeric: tabular-nums;
  font-size: 22px; color: var(--navy); font-weight: 700;
}

/* ── Formulario ───────────────────────────────────────────────────────── */
fieldset { border: none; margin: 0; padding: 0; }
legend { font-weight: 600; margin-bottom: 8px; color: var(--navy); }
label { display: block; margin: 14px 0 5px; font-size: 14px; color: var(--suave); }
input[type="text"], input[type="email"], input[type="number"], textarea, input[type="file"] {
  width: 100%; padding: 10px 12px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--borde); border-radius: 4px; background: #fff; color: var(--texto);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--navy-claro); outline-offset: 1px; }

.opciones { display: grid; gap: 10px; margin: 6px 0 4px; }
.opcion {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: 4px; padding: 12px; cursor: pointer;
}
.opcion:hover { background: #fbfcfd; }
.opcion input { margin-top: 3px; }
.opcion span { font-size: 15px; }
.opcion small { display: block; color: var(--suave); font-size: 13px; }

.ayuda { font-size: 13px; color: var(--suave); margin: 4px 0 0; }

button {
  margin-top: 22px; width: 100%; padding: 13px 18px;
  background: var(--navy); color: #fff; border: none; border-radius: 4px;
  font-size: 16px; font-family: inherit; cursor: pointer;
}
button:hover { background: var(--navy-claro); }
button[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Mensajes ─────────────────────────────────────────────────────────── */
.aviso, .error, .exito {
  border-left: 4px solid; border-radius: 4px; padding: 14px 16px; margin: 16px 0; font-size: 15px;
}
.aviso { border-color: var(--alerta); background: #fdf5ee; color: #6d3a13; }
.error { border-color: var(--error); background: #fdf1f1; color: #7d1a1a; }
.exito { border-color: var(--ok); background: #f0f8f3; color: #145c39; }
.oculto { display: none; }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--borde); background: #fff;
  padding: 20px 0 34px; font-size: 13px; color: var(--suave);
}
.pie p { margin: 0 0 8px; }
.legal { font-size: 12px; color: #7d8894; }
a { color: var(--navy-claro); }

@media (max-width: 520px) {
  .fila { flex-direction: column; gap: 2px; }
  .fila dd { text-align: left; }
}