/* CONTAFI — Herramientas (índice y calculadora de liquidación). Solo lo cargan las páginas de /herramientas/. */

/* Índice */
.tool-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.tool-card {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8); border-radius: 22px;
  background: var(--white); border: 1px solid var(--color-border); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-emphasized), box-shadow var(--duration-normal), border-color var(--duration-normal), opacity var(--motion-reveal-duration) var(--ease-emphasized);
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); border-color: var(--teal-200); }
.tool-card h2 { font-size: var(--text-xl); margin: var(--space-3) 0 0; }
.tool-card p { color: var(--color-foreground-muted); font-size: var(--text-sm); margin: 0; }
.tool-card__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-700); }
.tool-card__icon.gold { background: var(--gold-50); color: var(--gold-600); }
.tool-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool-card__more { margin-top: auto; padding-top: var(--space-4); font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--teal-600); }

/* Calculadora */
.tool-hero { padding: var(--space-10) 0 var(--space-6); background: radial-gradient(80% 120% at 100% 0%, var(--teal-50), transparent 60%); }
.tool-hero h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -0.02em; max-width: 20em; margin: var(--space-3) 0 var(--space-3); text-wrap: balance; }
.tool-hero p { color: var(--color-foreground-muted); max-width: 46em; margin: 0; }
.tool-section { padding: var(--space-8) 0 var(--space-16); }
.tool-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: start; }
.tool-form { background: var(--white); border: 1px solid var(--color-border); border-radius: 22px; padding: var(--space-8); box-shadow: 0 20px 44px -30px rgba(10,43,76,.35); }
.tool-form h2 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.tool-row { margin-bottom: var(--space-4); }
.tool-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tool-row[hidden] { display: none; }
.tool-form label { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); margin-bottom: 6px; }
.tool-form input[type="text"], .tool-form input[type="number"], .tool-form input[type="date"], .tool-form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-border-strong); border-radius: 12px; font: inherit; color: var(--color-foreground); background: var(--white);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.tool-form input:focus, .tool-form select:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(0,169,180,.18); }
.tool-checks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-2) 0 var(--space-4); }
.tool-form .tool-check { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--font-medium); margin: 0; cursor: pointer; }
.tool-check input { width: 18px; height: 18px; accent-color: var(--teal-600); }
.tool-error { color: var(--color-danger, #c0392b); font-size: var(--text-sm); min-height: 1.2em; margin: 0 0 var(--space-3); }
.tool-submit { width: 100%; }
.tool-result-wrap { position: sticky; top: 96px; }
.tool-result, .tool-placeholder { border-radius: 22px; padding: var(--space-8); }
.tool-result { background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: var(--white); box-shadow: 0 30px 60px -34px rgba(4,33,61,.7); }
.tool-result.is-new { animation: fadeInUp var(--duration-slow) var(--ease-emphasized) both; }
.tool-result h2 { color: var(--white); font-size: var(--text-xl); margin-bottom: var(--space-1); }
.tool-summary { color: var(--navy-100); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.tool-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); }
.tool-table th, .tool-table td { padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.tool-table th { text-align: left; font-weight: var(--font-semibold); }
.tool-table th small { display: block; font-weight: 400; color: var(--navy-200); font-size: var(--text-xs); margin-top: 2px; }
.tool-table td { text-align: right; font-family: var(--font-heading); font-weight: var(--font-bold); white-space: nowrap; padding-left: var(--space-4); font-variant-numeric: tabular-nums; }
.tool-table .liq-total th, .tool-table .liq-total td { border-bottom: none; padding-top: var(--space-4); font-size: var(--text-lg); }
.tool-table .liq-total td { color: var(--teal-300); font-size: var(--text-2xl); }
.tool-disclaimer { color: var(--navy-200); font-size: var(--text-xs); margin-bottom: var(--space-5); }
.tool-result .btn-outline { color: var(--white); border-color: rgba(255,255,255,.5); width: 100%; }
.tool-result .btn-outline:hover { background: rgba(255,255,255,.1); color: var(--white); }
.tool-placeholder { border: 2px dashed var(--color-border-strong); text-align: center; color: var(--color-foreground-muted); }
.tool-placeholder[hidden] { display: none; }
.tool-placeholder__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); font-size: 28px; margin-bottom: var(--space-3); }
.tool-explica { background: var(--white); padding-top: var(--space-16); }
.tool-explica .narrow { max-width: 780px; }
.tool-explica h2 { font-size: var(--text-3xl); }
.tool-explica h3 { font-size: var(--text-lg); margin-top: var(--space-6); }
.tool-explica p { color: var(--color-foreground-muted); }
@media (max-width: 900px) {
  .tool-layout, .tool-hub { grid-template-columns: 1fr; }
  .tool-result-wrap { position: static; }
}
@media (max-width: 560px) {
  .tool-row.two { grid-template-columns: 1fr; }
  .tool-form, .tool-result, .tool-placeholder { padding: var(--space-6); }
}