/* ============================================================
   HerramientasFiscales.com — styles.css
   Diseño mobile-first, sistema de diseño tipo SaaS premium.
   ============================================================ */

:root {
  /* Paleta */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;

  /* Azul profundo: paleta pensada para un hub fiscal/laboral serio
     (banca, administración, asesoría) en vez de un azul-violeta
     genérico de SaaS de consumo. */
  --color-primary: #1d4ed8;
  --color-primary-dark: #1e3a8a;
  --color-primary-light: #eff6ff;
  --color-accent: #0ea5e9;

  --color-plus: #059669;
  --color-plus-light: #ecfdf5;
  --color-minus: #dc2626;
  --color-minus-light: #fef2f2;
  --color-total: #1d4ed8;

  --color-ad-bg: #eef0f4;
  --color-ad-text: #94a0b3;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-primary: 0 8px 20px rgba(29, 78, 216, 0.22);

  --header-h: 64px;
  --sidebar-w: 260px;
  --content-max-w: 720px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
svg { display: block; }

/* ==================== HEADER ==================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.menu-toggle:hover { background: var(--color-surface-alt); }

.menu-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  margin: 0 auto;
  background: var(--color-text);
  border-radius: 2px;
}

/* ---- Logo ---- */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  box-shadow: var(--shadow-primary);
  flex-shrink: 0;
}

.logo-mark svg { width: 20px; height: 20px; }

.logo-text {
  display: none;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logo-text b {
  font-weight: 800;
  color: var(--color-primary);
}

.logo-text i {
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-faint);
  font-size: 0.85em;
}

@media (min-width: 480px) {
  .logo-text { display: inline; }
}

.header-search {
  position: relative;
  flex: 1;
  max-width: 480px;
  margin-left: auto;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--color-text-faint);
  pointer-events: none;
}

.header-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-alt);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.header-search input::placeholder { color: var(--color-text-faint); }

.header-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 50;
  padding: 6px;
}

.search-suggestions li a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.search-suggestions li a:hover,
.search-suggestions li a:focus {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* ==================== LAYOUT ==================== */

/* Sin max-width/margin:auto a propósito: el sidebar y la cabecera deben
   tocar el borde real de la ventana. Solo .main-content (más abajo) se
   centra dentro del hueco que queda junto al sidebar — si este bloque
   tuviera un ancho máximo centrado, el sidebar quedaría separado del
   borde izquierdo con una franja en blanco delante, que es justo el
   efecto de "no está centrado" que no queremos. */
.layout {
  display: flex;
  align-items: flex-start;
}

/* ==================== SIDEBAR ==================== */

.sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 20px 14px 24px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: 39;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sidebar.is-open {
  transform: translateX(0);
  box-shadow: var(--shadow-lg);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 38;
}

.sidebar-overlay.is-visible { display: block; }

.nav-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: 0 10px;
}

.nav-group-title svg {
  width: 24px;
  height: 24px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 7px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}

.nav-link:hover { background: var(--color-surface-alt); }

.nav-link.active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.nav-link.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}

.nav-link.is-disabled {
  color: var(--color-text-faint);
  cursor: default;
}

.nav-link.is-disabled:hover { background: transparent; }

.soon {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-faint);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ==================== SIDEBAR DERECHO (ADSENSE) ====================
   Columna propia para el anuncio, separada de la navegación: un
   rectángulo IAB (300x250/300x600) necesita un ancho fijo de verdad,
   no encajarse a presión en el sidebar de 272px de los enlaces. Solo
   se muestra en pantallas realmente anchas (ver media query) para no
   apretar el contenido central en portátiles de resolución media. */
.sidebar-right { display: none; }

/* ==================== MAIN CONTENT ==================== */

.main-content {
  flex: 1;
  min-width: 0;
  padding: 24px 16px 64px;
}

.breadcrumb {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.tool-panel h1 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tool-lead {
  color: var(--color-text-muted);
  margin: 0 0 22px;
  font-size: 15.5px;
  max-width: 62ch;
}

/* ==================== AD SLOTS ==================== */

.ad-slot {
  background: repeating-linear-gradient(
    135deg,
    var(--color-ad-bg),
    var(--color-ad-bg) 10px,
    #e5e8ee 10px,
    #e5e8ee 11px
  );
  color: var(--color-ad-text);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px;
}

/* Clase unificada para TODO hueco de AdSense: reserva un alto mínimo
   para que, al cargar el anuncio real, no empuje el contenido de
   golpe (Cumulative Layout Shift). Los tamaños concretos de cada
   ubicación (más abajo) son iguales o mayores a este mínimo. */
.adsense-container { min-height: 100px; }

.ad-top-banner { min-height: 100px; margin: 0 0 22px; }
.ad-sweet-spot { min-height: 100px; margin: 18px 0; }
.ad-in-article { min-height: 250px; margin: 24px 0; }
.ad-sidebar-sticky { min-height: 520px; }

/* ==================== CALCULATOR CARD ==================== */

.calc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calc-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.calc-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}

.calc-card-icon svg { width: 20px; height: 20px; }

.calc-card-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
}

.calc-card-subtitle {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 480px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.field input,
.field select {
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  width: 100%;
  appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.6' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent);
  border-width: 2px;
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-primary-light), 0 0 0 1px var(--color-accent);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.checkbox-label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.btn-primary,
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.btn-primary svg { width: 18px; height: 18px; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-border);
}

.btn-secondary svg { width: 17px; height: 17px; }

.btn-secondary:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); }

/* ==================== RESULTS ==================== */

.results {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 22px;
  margin-bottom: 28px;
  /* El AdSense "Sweet Spot" queda justo encima de los resultados; en
     móvil, si el anuncio real ocupa más alto que el placeholder, un
     scrollIntoView normal puede dejar los resultados justo por debajo
     de la barra de cabecera (o tapados por ella). Este margen reserva
     hueco por encima al hacer scroll, para que los números siempre
     queden visibles debajo de la cabecera fija. */
  scroll-margin-top: 120px;
  /* Entra deslizándose suavemente cada vez que el JS quita "hidden":
     pasar de display:none a visible reinicia la animación por sí solo,
     sin necesidad de tocar ninguna clase desde script.js. */
  animation: results-fade-in-up 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes results-fade-in-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .results { animation: none; }
}

.results-title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

@media (min-width: 480px) {
  .results-grid { grid-template-columns: repeat(4, 1fr); }
  .results-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .results-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Gran total destacado (ej. Total a cobrar en el finiquito) */

.grand-total {
  margin: 4px 0 20px;
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-primary);
}

.grand-total-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}

.grand-total-value {
  display: block;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.results-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-plus-light);
  color: #047857;
  font-size: 13.5px;
  font-weight: 500;
}

.results-note--neutral {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.result-box {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 13px 14px 13px 17px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* Barra de acento a la izquierda en vez de un relleno pastel plano:
   distingue el tipo de cifra (neutra/+/−/total) sin parecer "de juguete". */
.result-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-border-strong);
}

.result-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.result-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.result-plus::before { background: var(--color-plus); }
.result-plus .result-value { color: var(--color-plus); }

.result-minus::before { background: var(--color-minus); }
.result-minus .result-value { color: var(--color-minus); }

.result-total {
  background: var(--color-primary-light);
  border-color: #bfdbfe;
}
.result-total::before { background: var(--color-primary); }
.result-total .result-value { color: var(--color-primary-dark); font-size: 21px; }

/* Stacked bar (CSS-only visual) */

.stacked-bar-wrap { margin-bottom: 22px; }

.stacked-bar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.stacked-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface-alt);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.bar-segment {
  height: 100%;
  min-width: 0;
  transition: flex-basis 0.35s ease;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.bar-segment span {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  padding-left: 10px;
  white-space: nowrap;
}

.bar-base { background: var(--color-total); }
.bar-iva { background: var(--color-plus); }
.bar-irpf { background: var(--color-minus); }

.bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.bar-legend span { display: inline-flex; align-items: center; gap: 6px; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-base { background: var(--color-total); }
.dot-iva { background: var(--color-plus); }
.dot-irpf { background: var(--color-minus); }

/* Desglose de cálculo (lista clave/valor) */

.breakdown-list {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--color-border);
}

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

.breakdown-row span:first-child { color: var(--color-text-muted); }

.breakdown-row span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.breakdown-row-total { background: var(--color-primary-light); }

.breakdown-row-total span {
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* Comparativa de tramos (tarjetas tipo "pricing tier") */

.bracket-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

@media (min-width: 480px) {
  .bracket-grid { grid-template-columns: repeat(4, 1fr); }
}

.bracket-tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-alt);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bracket-tier-range {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.bracket-tier-quota {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.bracket-tier.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.bracket-tier.is-active .bracket-tier-quota { color: var(--color-primary-dark); }

.bracket-tier.is-active::after {
  content: "Tu tramo";
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-top: 2px;
}

/* Gráfico Chart.js (Bruto vs. Neto) */

.chart-wrap { margin-bottom: 20px; }

.chart-canvas-box {
  position: relative;
  height: 200px;
  max-width: 260px;
  margin: 0 auto;
}

.copy-feedback {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-plus);
  text-align: center;
}

/* ==================== RELATED TOOLS (Interlinking) ==================== */

.related-tools { margin-bottom: 36px; }

.related-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.related-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.related-card-icon svg { width: 17px; height: 17px; }

.related-card strong { font-size: 14px; font-weight: 700; }

.related-card-status {
  color: var(--color-text-faint);
  font-weight: 600;
  font-size: 12px;
}

.related-card.is-disabled { opacity: 0.7; cursor: default; }

.related-card:not(.is-disabled):hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* ==================== PORTADA / LANDING (index.html) ====================
   Sin sidebar: es la puerta de entrada al Hub, no una herramienta.
   Estructura y efectos de scroll al estilo de una landing de
   presentación (hero de impacto, secciones centradas, parallax). */

.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 20px 56px;
  text-align: center;
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 78%);
  border-bottom: 1px solid var(--color-border);
}

.landing-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.landing-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
}

.landing-hero h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--color-text);
}

.landing-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 auto;
  max-width: 60ch;
}

.landing-hero .hero-search { margin: 26px auto 0; }
.landing-hero .hero-stats { justify-content: center; }

@media (min-width: 640px) {
  .landing-hero { padding: 116px 24px 72px; }
  .landing-hero h1 { font-size: 44px; }
  .landing-lead { font-size: 17px; }
}

/* Secciones debajo del hero: ancho generoso (~1200px) centrado, tal
   como pide una landing de presentación — más aire que las páginas
   de herramientas, que priorizan la lectura del formulario. */

.landing-section { padding: 56px 20px; }
.landing-section-alt { background: var(--color-surface-alt); }

.landing-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.landing-section-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 36px;
}

.landing-section-header h2 { margin: 10px 0 12px; }
.landing-section-header .landing-lead { margin-top: 0; }

/* Formas decorativas de fondo con parallax (solo en el hero de la portada) */

.hero-decor {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.4;
  pointer-events: none;
}

.hero-decor-1 {
  top: -80px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--color-accent), transparent 70%);
}

.hero-decor-2 {
  top: 60px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, var(--color-primary), transparent 70%);
}

.hero-decor-3 {
  bottom: -100px;
  left: 40%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--color-plus), transparent 70%);
  opacity: 0.2;
}

/* Estadísticas animadas (cuentan desde 0 al entrar en pantalla) */

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}

.hero-stat { display: flex; flex-direction: column; gap: 2px; }

.hero-stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero-stat-label {
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Reveal al hacer scroll: estado inicial oculto/desplazado, y el JS
   añade .is-visible vía IntersectionObserver cuando entra en pantalla.
   Las tarjetas de herramientas usan --reveal-delay (asignado por JS)
   para que entren escalonadas (stagger) en vez de todas a la vez. */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-search {
  position: relative;
  max-width: 560px;
  margin-top: 22px;
}

.hero-search .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-faint);
  pointer-events: none;
}

.hero-search input {
  width: 100%;
  height: 56px;
  padding: 0 20px 0 50px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: 15.5px;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero-search input::placeholder { color: var(--color-text-faint); }

.hero-search input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-primary-light), 0 0 0 1px var(--color-accent);
}

.hero-search .search-suggestions {
  top: calc(100% + 8px);
  left: 0;
  right: 0;
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.tool-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: 4px;
}

.tool-card-icon svg { width: 22px; height: 22px; }

.tool-card-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}

.tool-card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-text);
}

.tool-card-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  flex: 1;
}

.tool-card-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.tool-card-cta svg { width: 16px; height: 16px; transition: transform 0.15s ease; }

.tool-card:hover .tool-card-cta svg { transform: translateX(3px); }

/* ==================== SEO CONTENT ==================== */

.seo-content {
  border-top: 1px solid var(--color-border);
  padding-top: 28px;
}

.seo-content h2 {
  position: relative;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 32px 0 14px;
  padding-left: 14px;
}

.seo-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}

.seo-content h2:first-child { margin-top: 0; }

.seo-content h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 20px 0 8px;
}

.seo-content p {
  color: var(--color-text-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 70ch;
}

.seo-content strong { color: var(--color-text); font-weight: 700; }

.seo-content a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.seo-content a:hover { color: var(--color-primary); }

.seo-content code {
  display: inline-block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 7px;
  color: var(--color-primary-dark);
  white-space: nowrap;
}

/* Widget de comentarios (contacto.html) — sin backend: se guardan en
   localStorage de cada navegador, ver initCommentsWidget en script.js */

.comments-widget { margin: 20px 0 32px; }

.comment-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  resize: vertical;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  border-width: 2px;
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-primary-light), 0 0 0 1px var(--color-accent);
}

.comment-form .btn-primary { width: auto; align-self: flex-start; padding: 0 22px; }
.comment-form .btn-primary svg { width: 18px; height: 18px; }

.comment-list-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin: 0 0 14px;
}

.comment-list { display: flex; flex-direction: column; gap: 12px; }

.comment-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.comment-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.comment-item-author { font-size: 13.5px; font-weight: 700; color: var(--color-text); }
.comment-item-date { font-size: 12px; color: var(--color-text-faint); white-space: nowrap; }

.comment-item-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-empty {
  font-size: 13.5px;
  color: var(--color-text-faint);
  text-align: center;
  padding: 18px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  margin: 0;
}

/* Tabla de tipos (ej. ITP por Comunidad Autónoma) */

.rates-table-wrap {
  margin: 20px 0 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

.rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.rates-table th,
.rates-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.rates-table th {
  background: var(--color-surface-alt);
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rates-table td:not(:first-child),
.rates-table th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rates-table tbody tr:last-child td { border-bottom: none; }

.rates-table tbody tr:hover { background: var(--color-surface-alt); }

.rates-table-note {
  margin: 0;
  padding: 10px 14px;
  font-size: 11.5px;
  color: var(--color-text-faint);
  background: var(--color-surface-alt);
  max-width: none;
}

/* ---- FAQ acordeón ---- */

.faq-section { margin-top: 8px; }

.faq-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: none; }

.faq-heading { margin: 0; }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 18px 20px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.faq-question:hover { background: var(--color-surface-alt); }

.faq-question:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.faq-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: transform 0.25s ease, color 0.25s ease;
}

.faq-question[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.faq-item.is-open .faq-answer-wrap { grid-template-rows: 1fr; }

.faq-answer-inner { overflow: hidden; }

.faq-answer-inner p {
  padding: 0 20px 18px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: none;
}

/* ==================== FOOTER ==================== */

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 28px 16px;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-mark-sm { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.logo-mark-sm svg { width: 15px; height: 15px; }
.logo-text-sm { display: inline; font-size: 14px; }

.footer-inner p { margin: 0; max-width: 62ch; }

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links a { transition: color 0.15s ease; }
.footer-links a:hover { color: var(--color-primary); }

@media (min-width: 760px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-brand { order: 1; }
  .footer-inner p { order: 2; flex: 1; margin: 0 24px; }
  .footer-links { order: 3; }
}

/* ==================== DESKTOP LAYOUT ==================== */

@media (min-width: 960px) {
  .menu-toggle { display: none; }

  /* CSS Grid en vez de flexbox: con flex, un margin:auto en un item
     con flex-grow es ambiguo (por eso el hueco saltaba de sitio en
     los intentos anteriores). Con grid, cada columna tiene un ancho
     explícito y no hay ambigüedad posible:
       - Columna 1 (sidebar): ancho fijo, SIEMPRE pegada al borde
         real izquierdo de la ventana.
       - Columna 2 (contenido): "1fr" = todo el hueco que sobre entre
         el sidebar y el anuncio. .main-content se centra DENTRO de
         esa columna con su propio margin:auto — no sobra nada fuera.
       - Columna 3 (anuncio): ancho fijo, SIEMPRE pegada al borde real
         derecho. Nunca queda "flotando" separada del contenido.
     .layout ya no tiene max-width/margin propio: así no aparece
     ningún hueco en los lados de fuera, sea cual sea el ancho de la
     ventana. */
  .layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 300px;
    column-gap: 32px;
    align-items: start;
  }

  .sidebar {
    position: sticky;
    transform: none;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
  }

  .sidebar-overlay { display: none !important; }

  /* Sin max-width/margin propio: ocupa TODO el ancho de su columna de
     grid (el hueco real entre el sidebar y el anuncio). Un max-width
     aquí es justo lo que dejaba las dos franjas en blanco a los lados
     de la tarjeta que se veían en pantalla — el contenido debe
     amoldarse al hueco disponible, no quedarse flotando más estrecho. */
  .main-content {
    width: 100%;
    padding: 36px 24px 64px;
  }

  .tool-panel h1 { font-size: 32px; }
  .tool-lead { font-size: 16.5px; }

  .sidebar-right {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

/* Sin columna derecha de anuncio: que .sidebar-right esté a display:none
   (pantallas <960px) no debe dejar un hueco vacío donde iría esa
   columna — grid-template-columns solo se aplica desde el media query
   de arriba, así que en el resto de tamaños ya no hay 3ª columna que
   reservar. */

/* ==================== BANNER DE COOKIES (RGPD) ====================
   Inyectado por script.js al cargar cualquier página (no hace falta
   tocar el HTML de cada archivo). Recuerda la elección en localStorage
   para no volver a mostrarse tras Aceptar/Rechazar. */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: cookie-banner-in 0.35s ease-out;
}

.cookie-banner-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.cookie-banner-text a { color: var(--color-primary-dark); text-decoration: underline; }

.cookie-banner-actions {
  display: flex;
  gap: 10px;
}

.cookie-banner-actions button {
  flex: 1;
  height: 42px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cookie-banner-actions button:hover { background: var(--color-surface-alt); }

.cookie-banner-actions .cookie-accept {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.cookie-banner-actions .cookie-accept:hover { background: var(--color-primary-dark); }

@keyframes cookie-banner-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 480px) {
  .cookie-banner { flex-direction: row; align-items: center; }
  .cookie-banner-actions { flex-shrink: 0; }
  .cookie-banner-actions button { flex: none; padding: 0 18px; }
}

/* ==================== IMPRESIÓN ==================== */

/* ---- Previsualización del documento (hoja simulada en pantalla) ---- */

.print-preview-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.print-preview-page {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 32px 28px;
  margin-bottom: 20px;
  overflow-x: auto;
}

/* ---- Documento de finiquito (contenido, en pantalla y al imprimir) ---- */

.print-document {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #111;
  max-width: 720px;
  margin: 0 auto;
}

.print-doc-header {
  text-align: center;
  margin-bottom: 26px;
}

.print-doc-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.print-doc-subtitle {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

.print-doc-parties,
.print-doc-period,
.print-doc-concepts {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 12.5px;
}

.print-doc-parties td {
  vertical-align: top;
  padding: 10px;
  border: 1px solid #999;
  width: 50%;
  line-height: 1.9;
}

.print-doc-period td {
  padding: 7px 10px;
  border: 1px solid #999;
}

.print-doc-period td:first-child {
  font-weight: 700;
  width: 42%;
  background: #f4f4f4;
}

.print-doc-concepts th,
.print-doc-concepts td {
  border: 1px solid #999;
  padding: 9px 10px;
  text-align: left;
}

.print-doc-concepts th {
  background: #f4f4f4;
  font-weight: 700;
}

.print-doc-concepts td:last-child,
.print-doc-concepts th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.print-doc-total-row td {
  font-weight: 800;
  font-size: 14px;
  border-top: 2px solid #111;
}

.print-doc-legal {
  font-size: 11.5px;
  line-height: 1.7;
  margin: 22px 0;
  text-align: justify;
}

.print-doc-signatures {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 60px;
}

.print-doc-signatures > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}

.print-doc-sign-line {
  height: 44px;
  border-top: 1px solid #111;
  margin-bottom: 6px;
}

.print-doc-conform {
  display: block;
  font-size: 10px;
  color: #666;
  margin-top: 3px;
}

.print-doc-place-date {
  margin-top: 30px;
  font-size: 12px;
}

.print-doc-footer-note {
  margin-top: 32px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
  font-size: 10px;
  color: #777;
  text-align: center;
}

@media print {
  .site-header,
  .sidebar,
  .sidebar-overlay,
  .ad-slot,
  .calc-card,
  .related-tools,
  .seo-content,
  .site-footer,
  .breadcrumb,
  .tool-lead,
  .btn-primary,
  .btn-secondary,
  .results-title,
  .results-grid,
  .grand-total,
  .results-note,
  .print-preview-label,
  #tool-finiquito h1,
  #tool-itp h1 {
    display: none !important;
  }

  body { background: #fff; }

  .main-content { padding: 0; max-width: none; }

  .layout { display: block; }

  .results {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .print-preview-page {
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
}