/* Sistema visual de Credit Rebuilt.
   NO lleva la marca de Inboundra: la clausula 5.11 prohibe usar el nombre o el logotipo
   del PROVEEDOR en material dirigido a clientes finales, y el formulario de admision se
   llena delante del cliente final. La paleta se comparte; la firma no. */

:root {
  --papel:   #FFFFFF;
  --tinta:   #0B1F3A;   /* navy profundo, texto principal */
  --tinta2:  #132A4A;
  --mut:     #5E7488;   /* texto secundario */
  --pelo:    #DCE4EE;   /* lineas de 1px */
  --fondo:   #F6F8FB;
  --acento:  #00E0C6;   /* UNICO acento. Si algo mas grita, esta mal. */
  --alerta:  #B3261E;
  --aviso:   #8A6100;
  --ok:      #0F6E4F;
  --display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--ui); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- estructura */
.barra {
  background: var(--papel); border-bottom: 1px solid var(--pelo);
  padding: 0 24px; position: sticky; top: 0; z-index: 10;
}
.barra .interior {
  max-width: 1080px; margin: 0 auto; height: 62px;
  display: flex; align-items: center; gap: 28px;
}
.marca {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--tinta); text-decoration: none;
}
.marca span { color: var(--acento); }
.barra nav { display: flex; gap: 20px; margin-left: auto; }
.barra nav a {
  color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.barra nav a:hover { color: var(--tinta); }
.barra nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }

main { max-width: 1080px; margin: 0 auto; padding: 40px 24px 96px; }
main.estrecho { max-width: 680px; }

h1 {
  font-family: var(--display); font-size: 32px; line-height: 1.2;
  font-weight: 600; letter-spacing: -0.015em; margin: 0 0 8px;
}
.sub { color: var(--mut); font-size: 15px; margin: 0 0 36px; }
h2 {
  font-family: var(--display); font-size: 20px; font-weight: 600;
  margin: 40px 0 4px; letter-spacing: -0.01em;
}
h2:first-of-type { margin-top: 0; }
.nota-seccion { color: var(--mut); font-size: 13.5px; margin: 0 0 20px; }

.tarjeta {
  background: var(--papel); border: 1px solid var(--pelo);
  border-radius: 10px; padding: 28px;
}

/* ---------------------------------------------------------------- formulario */
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { padding: 0; }

/* 26px y no 20: con dos filas de .pareja apiladas, la etiqueta de la segunda quedaba
   pegada al recuadro de la primera y se leia como si perteneciera a el. */
.campo { margin-bottom: 26px; }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.campo .ayuda { display: block; font-weight: 400; color: var(--mut); font-size: 13px; margin-top: 2px; }
.req { color: var(--alerta); font-weight: 400; }

input[type=text], input[type=tel], input[type=email], input[type=date],
input[type=password], input[type=number], select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--pelo); border-radius: 7px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus {
  outline: none; border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(0, 224, 198, .28);
}
input[aria-invalid="true"] { border-color: var(--alerta); }
.error-campo { color: var(--alerta); font-size: 13px; margin-top: 6px; display: none; }
input[aria-invalid="true"] ~ .error-campo { display: block; }

.pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
/* Los campos emparejados alinean el INPUT, no la etiqueta: cuando una ayuda ocupa dos
   lineas y la de al lado una, los dos recuadros quedaban a alturas distintas. */
.pareja .campo { display: flex; flex-direction: column; height: 100%; }
.pareja .campo input, .pareja .campo select { margin-top: auto; }
@media (max-width: 620px) { .pareja { grid-template-columns: 1fr; gap: 0; } }

button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 11px 22px; border-radius: 7px; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--papel);
  transition: background .12s;
}
button:hover:not(:disabled) { background: var(--tinta2); }
button:disabled { opacity: .5; cursor: default; }
button.secundario { background: transparent; color: var(--tinta); border-color: var(--pelo); }
button.secundario:hover:not(:disabled) { background: var(--fondo); }

/* ---------------------------------------------------------------- avisos */
.aviso {
  border: 1px solid var(--pelo); border-left: 3px solid var(--acento);
  background: var(--papel); border-radius: 0 7px 7px 0;
  padding: 14px 16px; font-size: 14px; margin: 0 0 28px; color: var(--tinta);
}
.aviso.malo  { border-left-color: var(--alerta); }
.aviso.ojo   { border-left-color: var(--aviso); }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso p { margin: 0; color: var(--mut); }

.resultado { display: none; }
.resultado.visible { display: block; }

/* ---------------------------------------------------------------- datos */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.cifra { background: var(--papel); border: 1px solid var(--pelo); border-radius: 10px; padding: 20px 22px; }
.cifra .et { font-size: 12.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.cifra .n { font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.1; margin-top: 6px; }
.cifra .pie { font-size: 13px; color: var(--mut); margin-top: 4px; }

.envoltorio-tabla { overflow-x: auto; border: 1px solid var(--pelo); border-radius: 10px; background: var(--papel); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mut); font-weight: 600; padding: 12px 16px;
  border-bottom: 1px solid var(--pelo); white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--pelo); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.tenue { color: var(--mut); }

.etiqueta {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; border: 1px solid var(--pelo); color: var(--mut); white-space: nowrap;
}
.etiqueta.cuenta { color: var(--ok); border-color: rgba(15,110,79,.3); background: rgba(15,110,79,.06); }
.etiqueta.no     { color: var(--mut); background: var(--fondo); }

.vacio { padding: 44px 24px; text-align: center; color: var(--mut); font-size: 14.5px; }

.pie-legal {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--pelo);
  color: var(--mut); font-size: 12.5px; line-height: 1.6;
}
.mono { font-family: var(--mono); font-size: 12.5px; }

/* Un armazon sin terminar debe VERSE sin terminar, o alguien lo da por listo. */
.armazon {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aviso);
  border: 1px solid currentColor; border-radius: 4px; padding: 1px 7px;
  vertical-align: middle; margin-left: 10px;
}