/*!
 * NotariaFácil — Estilos del motor de formatos
 * Todo va prefijado con .nf- para no chocar con el tema ni con Elementor.
 */

/* Serif del documento: si el tema ya la carga, el navegador no la vuelve a pedir. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

.nf-formato {
  --nf-navy: #0E2A47;
  --nf-navy-alto: #123A5E;
  --nf-oro: #C79A3E;
  --nf-oro-oscuro: #B0862B;
  --nf-crema: #FBF8F2;
  --nf-crema-alt: #F4F1E9;
  --nf-borde: #E2D9C4;
  --nf-borde-suave: #EDE6D8;
  --nf-tinta: #16232F;
  --nf-tinta-media: #2A3A48;
  --nf-tinta-suave: #5E6B78;
  --nf-tinta-tenue: #7A7154;

  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--nf-tinta);
  line-height: 1.5;
  box-sizing: border-box;
}

.nf-formato *,
.nf-formato *::before,
.nf-formato *::after { box-sizing: border-box; }

/* ---- Panel ---------------------------------------------------------- */

.nf-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 24px;
}

/* La calculadora es el tercer elemento de la rejilla: en escritorio va bajo
   el panel, en la misma columna; la hoja ocupa las dos filas a la derecha. */
.nf-formato > .nf-calc { grid-column: 1; grid-row: 2; }

.nf-tarjeta {
  background: #fff;
  border: 1px solid var(--nf-borde);
  border-radius: 16px;
  padding: 22px;
}

.nf-panel-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.nf-formato .nf-h2 {
  font-family: 'Manrope', 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nf-navy);
  margin: 0;
  line-height: 1.3;
}

.nf-progreso-txt {
  font-size: 12px;
  font-weight: 600;
  color: var(--nf-tinta-tenue);
  white-space: nowrap;
}

.nf-barra {
  height: 5px;
  background: #F1EADB;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 18px;
}

.nf-barra span {
  display: block;
  height: 100%;
  background: var(--nf-oro);
  border-radius: 100px;
  transition: width .25s ease;
}

/* ---- Presets -------------------------------------------------------- */

.nf-presets {
  padding: 14px 0 18px;
  border-top: 1px solid #F1EADB;
  border-bottom: 1px solid #F1EADB;
  margin-bottom: 18px;
}

.nf-etiqueta {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--nf-tinta-tenue);
  margin-bottom: 10px;
}

.nf-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.nf-chip {
  background: var(--nf-crema);
  border: 1px solid var(--nf-borde);
  border-radius: 100px;
  padding: 7px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nf-tinta-suave);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.nf-chip:hover { border-color: var(--nf-oro); color: var(--nf-navy); }

.nf-nota {
  font-size: 12px;
  line-height: 1.55;
  color: var(--nf-tinta-tenue);
  margin: 10px 0 0;
}

/* ---- Campos --------------------------------------------------------- */

.nf-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
}

.nf-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  grid-column: span 2;
  min-width: 0;
}

.nf-campo.nf-medio { grid-column: span 1; }

.nf-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--nf-tinta-suave);
}

.nf-label em {
  font-style: normal;
  font-weight: 400;
  color: #9AA3AC;
}

.nf-formato input,
.nf-formato textarea,
.nf-formato select {
  width: 100%;
  border: 1px solid #DCD3BC;
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--nf-tinta);
  background: #FDFCF9;
  transition: border-color .15s;
}

.nf-formato textarea { resize: vertical; line-height: 1.55; }

.nf-formato input:focus,
.nf-formato textarea:focus,
.nf-formato select:focus {
  outline: none;
  border-color: var(--nf-oro);
  box-shadow: 0 0 0 3px rgba(199, 154, 62, .15);
}

.nf-ayuda {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--nf-tinta-tenue);
}

/* ---- Acciones ------------------------------------------------------- */

.nf-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.nf-acciones-fila { display: flex; gap: 10px; }
.nf-acciones-fila .nf-btn { flex: 1; }

.nf-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}

.nf-btn-primario { background: var(--nf-navy); color: #fff; }
.nf-btn-primario:hover { background: var(--nf-navy-alto); }

.nf-btn-oro { background: var(--nf-oro); color: var(--nf-navy); }
.nf-btn-oro:hover { background: var(--nf-oro-oscuro); }

.nf-btn-plano {
  background: transparent;
  border: 1px solid #DCD3BC;
  color: var(--nf-tinta-suave);
  font-weight: 600;
  padding: 11px 14px;
  font-size: 13px;
}

.nf-btn-plano:hover { border-color: var(--nf-oro); color: var(--nf-navy); }

/* ---- Aviso de privacidad -------------------------------------------- */

.nf-aviso {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--nf-crema-alt);
  border: 1px solid #E7E0D2;
  border-radius: 14px;
  padding: 15px 17px;
}

.nf-aviso svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #8B96A1;
}

.nf-aviso p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6E7A85;
}

/* ---- Calculadora ---------------------------------------------------- */

.nf-calc-controles { margin-top: 14px; }

.nf-calc-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #F5F0E4;
}

.nf-calc-label { font-size: 13.5px; color: var(--nf-tinta-media); }

.nf-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--nf-borde);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.nf-stepper button {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--nf-crema);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--nf-navy);
  cursor: pointer;
  line-height: 1;
}

.nf-stepper button:hover { background: #F1EADB; }

.nf-stepper b {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  color: var(--nf-tinta);
}

.nf-toggle {
  border: 1px solid var(--nf-borde);
  background: var(--nf-crema);
  border-radius: 8px;
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--nf-tinta-suave);
  cursor: pointer;
  flex-shrink: 0;
}

.nf-toggle.nf-on {
  background: var(--nf-navy);
  border-color: var(--nf-navy);
  color: #fff;
}

.nf-calc-desglose { margin-top: 16px; }

.nf-calc-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--nf-tinta-media);
}

.nf-calc-linea em {
  font-style: normal;
  font-size: 12px;
  color: var(--nf-tinta-tenue);
}

.nf-calc-linea b { color: var(--nf-navy); white-space: nowrap; }

.nf-calc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--nf-borde);
  font-size: 14px;
  font-weight: 600;
  color: var(--nf-tinta-suave);
}

.nf-calc-total b {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  color: var(--nf-navy);
  white-space: nowrap;
}

/* ---- Hoja del documento --------------------------------------------- */

.nf-hoja-marco { min-width: 0; grid-column: 2; grid-row: 1 / span 2; }

.nf-hoja {
  background: #fff;
  border: 1px solid var(--nf-borde-suave);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(14, 42, 71, .10);
  padding: 64px 76px 72px;
  max-width: 816px;
  font-family: 'Lora', 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

@media (max-width: 640px) {
  .nf-hoja { padding: 32px 26px 42px; }
}

.nf-hoja-cab { text-align: center; margin-bottom: 40px; }

.nf-marca {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--nf-navy);
}

.nf-hoja-cab h3 {
  font-family: 'Lora', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--nf-tinta);
  margin: 18px 0 0;
}

.nf-hoja-cab h3::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  background: var(--nf-oro);
  margin: 16px auto 0;
}

.nf-hoja-sub {
  display: block;
  font-size: 12.5px;
  font-style: italic;
  color: #7A7266;
  margin-top: 12px;
}

.nf-hoja-cuerpo {
  font-size: 15.5px;
  line-height: 1.95;
  color: #24211C;
}

.nf-hoja-cuerpo p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: justify;
  text-wrap: pretty;
  hyphens: manual;
  overflow-wrap: break-word;
  margin: 0 0 15px;
}

/* Sangría de primera línea en los párrafos corridos, como en un documento notarial. */
.nf-hoja-cuerpo > p + p:not(.nf-doc-resaltado) { text-indent: 2.2em; }

.nf-hoja-cuerpo .nf-doc-resaltado {
  hyphens: manual;
  border-left: 2px solid var(--nf-oro);
  background: var(--nf-crema);
  padding: 16px 22px;
  white-space: pre-wrap;
  text-indent: 0;
  margin: 22px 0 24px;
}

.nf-firma {
  margin-top: 72px;
  padding-top: 10px;
  border-top: 1px solid var(--nf-tinta);
  max-width: 320px;
}

.nf-firma p {
  margin: 0;
  hyphens: manual;
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
  text-indent: 0;
  color: var(--nf-tinta-suave);
}

.nf-firma p strong {
  display: block;
  color: var(--nf-tinta);
  font-size: 14.5px;
  letter-spacing: .01em;
}

.nf-hoja-pie {
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.6;
  color: #9A8F76;
  margin: 52px 0 0;
}

/* ---- Validación de campos ------------------------------------------- */

.nf-campo.nf-invalido input,
.nf-campo.nf-invalido select,
.nf-campo.nf-invalido textarea {
  border-color: #B4483C;
  background: #FDF6F5;
}

.nf-error {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  color: #A63F34;
  margin-top: 5px;
}

.nf-alerta {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 5px;
  background: #FDF0EE;
  border: 1px solid #EFC9C3;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
  color: #A63F34;
}

/* ---- Móvil ----------------------------------------------------------
   Va al final a propósito: estas reglas tienen que llegar después de las
   de escritorio para poder anularlas. Si se suben arriba del archivo, la
   hoja del documento se sale de la pantalla. */

@media (max-width: 1099px) {
  /* Una sola columna, en el orden en que están en el HTML:
     formulario → documento → calculadora. */
  .nf-formato { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nf-panel,
  .nf-hoja-marco,
  .nf-formato > .nf-calc { grid-column: 1; grid-row: auto; }
  .nf-panel { position: static !important; }
  .nf-hoja-marco { margin-top: 6px; }
}