/**
 * EdFactura
 *
 * Copyright (c) 2026 LISANDRO ANTONIO NUNEZ MARTE.
 * Nombre comercial: ALUTECS SERVICES.
 * Todos los derechos reservados.
 *
 * Este código fuente es confidencial y propietario de ALUTECS SERVICES.
 * Su acceso está restringido exclusivamente a personas autorizadas.
 *
 * El acceso o uso del sistema EdFactura no concede ningún derecho
 * sobre este código fuente ni sobre la propiedad intelectual asociada.
 *
 * Queda estrictamente prohibida, sin autorización previa y por escrito
 * de su titular, la reproducción, copia, modificación, divulgación,
 * transferencia, publicación, distribución o utilización, total o
 * parcial, de este código fuente o de cualquier obra derivada.
 */
/* ============================================================
   EdFactura — Herramientas gratis (factura/cotización/recibo)
   Estilos complementarios a main.css del frontend v2.
   Reutiliza variables: --brand, --ink, --text, --line, etc.
   ============================================================ */

/* === Hero de la landing === */
.tools-hero {
  padding-top: 70px;
}

.tools-hero__trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}

.trust-item i {
  color: var(--brand);
}

/* === Buscador de herramientas (landing) === */
.tools-search-wrap {
  max-width: 640px;
  margin: 36px auto 0;
}

.tools-search {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 18px;
  box-shadow: 0 6px 24px rgba(15, 29, 44, .08);
  transition: border-color .2s, box-shadow .2s;
}

.tools-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 6px 28px rgba(10, 176, 156, .18);
}

.tools-search__icon {
  color: var(--muted);
  font-size: 16px;
  margin-right: 10px;
}

.tools-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  padding: 14px 6px;
}

.tools-search input::placeholder {
  color: var(--muted);
}

.tools-search__clear {
  background: var(--bg-soft);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .2s;
}

.tools-search__clear:hover {
  background: var(--brand);
  color: #fff;
}

.tools-search__empty {
  margin-top: 18px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 14px;
}

.tools-search__empty i {
  color: var(--brand);
}

.tools-search__empty span {
  color: var(--ink);
  font-weight: 600;
}

/* Cuando filtro está activo: ocultar secciones sin coincidencias */
.tools-section--hidden {
  display: none !important;
}

/* === Badge "Gratis" en el menu === */
.nav__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--brand);
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 4px;
}

.nav__active {
  color: var(--brand-darker) !important;
  font-weight: 600;
}

/* === Tarjetas de herramientas (landing) === */
.tools-cards {
  align-items: stretch;
}

.tool-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all .25s;
  display: flex;
  flex-direction: column;
}

.tool-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
}

.tool-card--featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-brand);
  position: relative;
}

.tool-card--featured::before {
  content: 'Más usada';
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.tool-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 16px;
}

.tool-card__icon--invoice {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.tool-card__icon--quote {
  background: linear-gradient(135deg, var(--indigo) 0%, #4658c9 100%);
}

.tool-card__icon--receipt {
  background: linear-gradient(135deg, var(--gold) 0%, #d99c2b 100%);
}

.tool-card__tag {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand-darker);
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tool-card h3 {
  margin: 0 0 8px;
  color: var(--ink);
}

.tool-card p {
  color: var(--text);
  font-size: var(--fs-sm);
  margin: 0 0 18px;
}

.tool-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.tool-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.tool-card__features i {
  color: var(--brand);
  font-size: 12px;
}

.btn--block {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* === Pasos === */
.steps {
  gap: 32px;
}

.step {
  text-align: center;
  padding: 24px;
}

.step__num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--bg) 100%);
  color: var(--brand-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  margin: 0 auto 16px;
  border: 2px solid var(--brand);
}

/* === SEO contenido === */
.seo-block {
  gap: 48px;
}

.seo-faq h4 {
  color: var(--ink);
  margin: 24px 0 8px;
}

.seo-faq h4:first-child {
  margin-top: 0;
}

.seo-faq p {
  color: var(--text);
  font-size: var(--fs-sm);
}

/* === CTA bottom === */
.cta-bottom {
  background: var(--bg);
  border-radius: var(--radius-xl);
  padding: 56px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.cta-bottom__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ============================================================
   Generador: layout 2 columnas (form / preview)
   ============================================================ */
.tool-app {
  padding-top: 100px;
  padding-bottom: 80px;
  background: var(--bg-soft);
  min-height: calc(100vh - 80px);
}

.tool-app__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.tool-app__head h1 {
  margin: 0;
  font-size: var(--fs-2xl);
  color: var(--ink);
}

.tool-app__head .breadcrumb {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 6px;
}

.tool-app__head .breadcrumb a {
  color: var(--brand-dark);
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brand-light);
  color: var(--brand-darker) !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-xs);
  transition: all .2s;
}

.breadcrumb-back:hover {
  background: var(--brand);
  color: #fff !important;
  transform: translateX(-3px);
}

.breadcrumb-back i {
  font-size: 11px;
}

.tool-app__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* === Form panel === */
.tool-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.tool-panel h3 {
  font-size: var(--fs-lg);
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-panel h3 i {
  color: var(--brand);
}

.tool-panel+.tool-panel {
  margin-top: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.form-row--single {
  grid-template-columns: 1fr;
}

.form-group label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10, 176, 156, .12);
}

.form-group textarea {
  resize: vertical;
  min-height: 70px;
}


/* === Items table === */
.items-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.items-table th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 6px;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
}

.items-table td {
  padding: 6px 4px;
  vertical-align: middle;
}

.items-table input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-family: inherit;
}

.items-table input[type="number"] {
  text-align: right;
}

.items-table .col-action {
  width: 36px;
  text-align: center;
}

.btn-remove-row {
  background: none;
  border: none;
  color: var(--rose);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 50%;
  transition: background .2s;
}

.btn-remove-row:hover {
  background: rgba(232, 90, 114, .1);
}

.btn-add-row {
  margin-top: 10px;
  background: var(--brand-light);
  color: var(--brand-darker);
  border: 1px dashed var(--brand);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  width: 100%;
}

.btn-add-row:hover {
  background: var(--brand);
  color: #fff;
}

/* === Totals === */
.tool-totals {
  padding: 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  margin-top: 16px;
}

.tool-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--text);
}

.tool-totals-row--grand {
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: 2px solid var(--brand);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

/* === Preview panel === */
.tool-preview {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.preview-doc {
  font-size: 13px;
  color: #1a1a1a;
  background: #fff;
  padding: 10px;
}

.preview-doc__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e6e6e6;
}

/* Bloque izquierdo: logo arriba, info empresa debajo (apilados) */
.preview-doc__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.preview-doc__brand-text {
  width: 100%;
}

.preview-doc__brand-logo {
  /* width configurable via --logo-w (default 100px). NO height — el alto se deriva
     del aspect ratio del img para evitar deformación. */
  width: var(--logo-w, 100px);
  max-width: 100%;
  min-width: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-darker);
  font-weight: 800;
  font-size: 24px;
  padding: 4px 8px;
  overflow: hidden;
}

.preview-doc__brand-logo img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

/* Si el contenedor tiene un img dentro, el fondo de marca no es necesario */
.preview-doc__brand-logo:has(img) {
  background: transparent;
  padding: 0;
}

.preview-doc__brand-text h2 {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
}

.preview-doc__brand-text small {
  color: var(--muted);
  font-size: 11px;
}

.preview-doc__type {
  border-radius: var(--radius-sm);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.preview-doc__number {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.preview-doc__date {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

.preview-doc__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.preview-doc__party h4 {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 6px;
}

.preview-doc__party p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-line;
}

.preview-doc__items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.preview-doc__items th {
  background: var(--ink);
  color: #fff;
  padding: 8px 10px;
  vertical-align: middle;
  line-height: 1.2;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.preview-doc__items table td,
.preview-doc__items table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.preview-doc__items td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}

.preview-doc__items td.num {
  text-align: right;
}

.preview-doc__totals {
  width: 50%;
  margin-left: auto;
  font-size: 13px;
}

.preview-doc__totals-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}

.preview-doc__totals-row--grand {
  padding: 3px 0;
  border-top: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  font-weight: 700;
  font-size: 16px;
  color: var(--brand-darker);
  margin-top: 8px;
}

.preview-doc__notes {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--muted);
  white-space: pre-line;
}

/* === Columna derecha del header (tipo doc + meta) ================= */
.preview-doc__meta {
  text-align: right;
}

.preview-doc__meta .preview-doc__type {
  margin-bottom: 3px;
  display: inline-block;
}

.preview-doc__meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 8px;
  margin-top: 8px;
  font-size: 11px;
  justify-content: end;
}

.preview-doc__meta-grid .lbl {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: right;
  font-weight: 600;
}

.preview-doc__meta-grid .val {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

/* Indicador "A crédito" / "De contado" — outline sobrio, sin fill colorido */
.preview-doc__meta .badge-pago {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border: 1px solid #888;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #333;
  background: #fff;
}

.preview-doc__meta .badge-pago--contado {
  border-color: #555;
}

.preview-doc__meta .badge-pago--credito {
  border-color: #555;
}

/* === Bloque del cliente (PARA) — formal, sin decoración ============
   Documento impreso: solo etiqueta tipográfica + contenido. Cero fondos
   coloreados, cero bordes de acento. */
/* Form group con checkbox de activación + input de valor — formato visual claro
   para que el usuario distinga estos campos opcionales (ITBIS, ISR, retenciones). */
.toggle-field {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color .15s, background .15s;
}

.toggle-field.is-active,
.toggle-field:has(> label input[type="checkbox"]:checked) {
  background: #eef5ff;
  border-color: #b3cdfa;
  border-left-color: var(--brand, #2856d6);
}

.toggle-field>label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
  cursor: pointer;
}

.toggle-field>label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand, #2856d6);
  cursor: pointer;
}

.toggle-field>input[type="number"] {
  width: 100%;
  font-size: 13px;
}

.toggle-field small {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--muted);
}

/* Fila cliente + meta del documento (Fecha/Vence + tipo pago) en dos columnas */
.preview-doc__client-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 18px;
  padding: 4px 0 16px;
}

.preview-doc__client-row .preview-doc__client-block {
  padding: 0;
  margin: 0;
  border: 0;
}

.preview-doc__client-meta {
  text-align: right;
}

.preview-doc__client-meta .preview-doc__meta-grid {
  margin-top: 0;
}

.preview-doc__client-meta .badge-pago {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border: 1px solid #888;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #333;
}

@media (max-width: 540px) {
  .preview-doc__client-row {
    grid-template-columns: 1fr;
  }

  .preview-doc__client-meta {
    text-align: left;
  }

  .preview-doc__client-meta .preview-doc__meta-grid {
    justify-content: start;
  }

  .preview-doc__client-meta .preview-doc__meta-grid .lbl,
  .preview-doc__client-meta .preview-doc__meta-grid .val {
    text-align: left;
  }
}

.preview-doc__client-block {
  padding: 4px 0 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e6e6e6;
}

.preview-doc__client-block h4 {
  margin: 0 0 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #777;
  font-weight: 700;
}

.preview-doc__client-block p {
  margin: 0;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.55;
}

/* === Footer del documento (siempre visible, tambien en PDF/print) === */
.preview-doc__footer {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}

.preview-doc__footer a {
  color: var(--brand-darker);
  font-weight: 600;
  text-decoration: none;
}

/* === Mobile preview toggle === */
.preview-toggle-mobile {
  display: none;
}

/* === PRINT: imprime SOLO el documento ===
   Estrategia: el body recibe la clase 'is-printing' cuando el usuario hace
   click en "Imprimir" (la quita despues). En print-mode todo se oculta menos
   el contenedor del documento. Tambien funciona con Ctrl+P del navegador. */
@media print {

  /* Page setup */
  @page {
    size: A4;
    margin: 12mm 10mm;
  }

  body {
    background: #fff;
  }

  /* Ocultar todo: header del sitio, footer, panel del form, controles, etc. */
  .site-header,
  .site-footer,
  .tool-app__head,
  .tool-app__actions,
  .preview-toggle-mobile,
  .tool-panel,
  .tool-app>.container>.tool-layout>div:first-child {
    display: none !important;
  }

  /* El layout se vuelve una sola columna ocupando todo el ancho */
  .tool-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .tool-app {
    padding: 0 !important;
    background: #fff !important;
  }

  .tool-app>.container {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* El preview se vuelve la pagina */
  .tool-preview {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
    width: 100% !important;
  }

  .preview-doc {
    font-size: 12px;
    color: #000;
  }

  .preview-doc__head {
    page-break-inside: avoid;
  }

  .preview-doc__totals,
  .preview-doc__footer {
    page-break-inside: avoid;
  }

  .preview-doc__items tr {
    page-break-inside: avoid;
  }

  /* Asegurar que los totals no se corten */
  .preview-doc__totals {
    display: block !important;
    width: 50% !important;
    margin-left: auto !important;
  }

  .preview-doc__totals-row {
    display: flex !important;
    justify-content: space-between !important;
  }
}

/* === Responsive === */
@media (max-width: 991px) {
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .tool-preview {
    position: relative;
    top: auto;
    max-height: none;
  }

  .tool-preview.is-hidden-mobile {
    display: none;
  }

  .preview-toggle-mobile {
    display: block;
    width: 100%;
    margin: 16px 0;
    padding: 12px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
  }
}

@media (max-width: 700px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .tools-cards {
    gap: 16px;
  }

  .tool-card--featured::before {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .cta-bottom {
    padding: 32px 20px;
  }

  .preview-doc__parties {
    grid-template-columns: 1fr;
  }

  .tool-app__head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   CALCULADORAS — layout simple, sin 2 columnas
   ============================================================ */
.calc-app {
  padding-top: 100px;
  padding-bottom: 80px;
  background: var(--bg-soft);
  min-height: calc(100vh - 80px);
}

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

.calc-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.calc-card h2 {
  margin: 0 0 6px;
  font-size: var(--fs-xl);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-card h2 i {
  color: var(--brand);
}

.calc-card .calc-lead {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 24px;
}

.calc-result {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg) 100%);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 20px;
}

.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}

.calc-result-row:last-child {
  border-bottom: none;
}

.calc-result-row strong {
  color: var(--ink);
  font-size: var(--fs-base);
}

.calc-result-row--big {
  padding-top: 14px;
  margin-top: 4px;
  border-top: 2px solid var(--brand);
  font-size: var(--fs-lg);
}

.calc-result-row--big strong {
  font-size: var(--fs-xl);
  color: var(--brand-darker);
}

/* SEO content block (debajo de la calculadora) */
.calc-seo {
  margin-top: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.calc-seo h3 {
  color: var(--ink);
  margin: 24px 0 8px;
}

.calc-seo h3:first-child {
  margin-top: 0;
}

.calc-seo p {
  color: var(--text);
  font-size: var(--fs-sm);
}

/* Tabla informativa de tasas */
.rates-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: var(--fs-sm);
}

.rates-table th {
  background: var(--bg-soft);
  text-align: left;
  padding: 10px 12px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}

.rates-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}

/* ============================================================
   DOCUMENTOS SIMPLES (cartas, contratos, constancias)
   Preview con look "papel A4" centrado
   ============================================================ */
/* WRAPPER decorativo SOLO para pantalla (fondo gris claro tipo escritorio).
   El contenido real va en .doc-letter (sin sombra/bordes para impresión/PDF). */
.doc-letter-preview {
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 24px;
}

/* CONTENIDO imprimible — papel limpio, lo que va al PDF/print */
.doc-letter {
  background: #fff;
  padding: 48px 60px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: #1a1a1a;
  min-height: 400px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.doc-letter-preview h1,
.doc-letter-preview h2,
.doc-letter-preview h3 {
  color: var(--ink);
}

.doc-letter .letter-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--brand);
}

/* Logo + info de empresa apilados verticalmente (no al lado) — direcciones largas no rompen el layout */
.doc-letter .letter-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.doc-letter .letter-logo {
  max-width: 120px;
  max-height: 64px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: var(--brand-light);
  border: 2px solid var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-darker);
  font-weight: 800;
  font-size: 24px;
  overflow: hidden;
  padding: 4px 8px;
}

.doc-letter .letter-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.doc-letter .letter-logo:has(img) {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

.doc-letter .letter-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.doc-letter .letter-brand-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.doc-letter .letter-date {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: right;
}

.doc-letter .letter-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 28px;
}

.doc-letter .letter-body {
  text-align: justify;
}

.doc-letter .letter-body p {
  margin: 0 0 14px;
}

.doc-letter .letter-sig {
  margin-top: 56px;
  text-align: center;
}

.doc-letter .letter-sig-line {
  display: inline-block;
  min-width: 240px;
  border-top: 1px solid var(--ink);
  padding-top: 6px;
}

.doc-letter .letter-sig-name {
  font-weight: 700;
  color: var(--ink);
}

.doc-letter .letter-sig-role {
  font-size: 11px;
  color: var(--muted);
}

.doc-letter .letter-footer {
  margin-top: 36px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}

.doc-letter .letter-footer a {
  color: var(--brand-darker);
  font-weight: 600;
}

/* Validator results */
.validator-result {
  padding: 20px;
  border-radius: var(--radius);
  margin-top: 20px;
  border-left: 6px solid;
}

.validator-result--ok {
  background: var(--brand-soft);
  border-color: var(--brand);
}

.validator-result--err {
  background: rgba(232, 90, 114, .08);
  border-color: var(--rose);
}

.validator-result--warning {
  background: rgba(245, 185, 69, .08);
  border-color: var(--gold);
}

.validator-result h4 {
  margin: 0 0 10px;
  color: var(--ink);
}

.validator-result dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: var(--fs-sm);
}

.validator-result dt {
  color: var(--muted);
  font-weight: 600;
}

.validator-result dd {
  margin: 0;
  color: var(--ink);
}

@media (max-width: 700px) {
  .calc-card {
    padding: 22px;
  }

  .doc-letter-preview {
    padding: 32px 24px;
  }
}


/* ============================================================
   Tema oscuro — lo que no alcanzan los tokens
   ============================================================
   Dos cosas no se resuelven redefiniendo variables:

   1. El DOCUMENTO. La vista previa de la factura, la carta, el recibo y el
      curriculum es la hoja que se descarga en PDF y se manda a la impresora.
      Es papel: sigue siendo blanco con tinta oscura tenga el usuario el tema
      que tenga, igual que en cualquier procesador de texto. En vez de repetir
      un color por cada elemento de dentro, la hoja vuelve a declarar la paleta
      clara para ella y sus descendientes: como todo el interior ya usa
      var(--token), hereda de aqui y no del tema.

   2. Un puñado de colores literales sueltos.
   ============================================================ */
[data-theme="dark"] .preview-doc,
[data-theme="dark"] .doc-letter,
[data-theme="dark"] .receipt-card,
[data-theme="dark"] .cv-page {
  --ink: #0f1d2c;
  --ink-soft: #3a4a5e;
  --text: #4a5a6e;
  --muted: #7a8699;
  --line: #e6ebf1;
  --line-soft: #f0f3f7;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-dark: #0f1d2c;
  --brand: #0ab09c;
  --brand-dark: #088876;
  --brand-darker: #066456;
  --brand-light: #e8faf7;
  --brand-soft: #f0fbf9;
  color-scheme: light;
}

/* El campo con interruptor conserva su azul en claro; aqui se cambia por el
   mismo matiz en profundo para que el texto encima siga leyendose. */
[data-theme="dark"] .toggle-field.is-active,
[data-theme="dark"] .toggle-field:has(> label input[type="checkbox"]:checked) {
  background: #16233d;
  border-color: #2b3f66;
}