/* ============================================================
   HERRAMIENTAS — componentes comunes
   Usar SOLO estas clases en las herramientas para mantener
   un aspecto uniforme. Variables de color en ../styles.css
   ============================================================ */

.tool-page { background: var(--cream); }
.tool-main { padding: calc(var(--nav-height) + 32px) 0 72px; }
.tool-main .container { max-width: 920px; }

.tool-breadcrumb { font-size: 0.8rem; color: var(--text-light); margin-bottom: 1.5rem; }
.tool-breadcrumb a { color: var(--gold-dark); text-decoration: underline; }

.tool-header { margin-bottom: 2rem; }
.tool-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--navy); margin-bottom: 0.75rem; }
.tool-intro { font-size: 1.02rem; color: var(--text-mid); max-width: 70ch; }

/* Tarjeta principal de la herramienta */
.tool-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: 1.75rem; margin-bottom: 1.5rem;
}
.tool-card h2 { font-size: 1.35rem; color: var(--navy); margin-bottom: 1rem; font-weight: 600; }

/* Formulario */
.tool-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.tool-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tool-field.full { grid-column: 1 / -1; }
.tool-field label, .tool-field legend { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mid); }
.tool-field input, .tool-field select {
  font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid #cfd6df; border-radius: 6px;
  background: var(--white); color: var(--text-dark); width: 100%;
}
.tool-field input:focus, .tool-field select:focus { outline: 2px solid #80601F; outline-offset: 1px; border-color: #80601F; }
.tool-field .tool-hint { font-size: 0.78rem; color: var(--text-light); }
.tool-field fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tool-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; color: var(--text-dark); text-transform: none; letter-spacing: 0; font-weight: 400; }
.tool-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0.25rem; }
.tool-error { grid-column: 1 / -1; color: #b3261e; font-size: 0.88rem; min-height: 1.2em; }

/* Resultado */
.tool-result { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.tool-result[hidden] { display: none; }
.tool-result-total {
  background: var(--navy); color: var(--white); border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.tool-result-total .label { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light); }
.tool-result-total .value { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 600; line-height: 1.15; }
.tool-result-total .detail { display: block; font-size: 0.88rem; color: rgba(255,255,255,0.8); margin-top: 4px; }
.tool-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; }
.tool-badge.ok { background: #e3f1e6; color: #1d5b2c; }
.tool-badge.alert { background: #fbe4e2; color: #8c1d18; }
.tool-badge.info { background: #fdf3dc; color: #6b4e12; }

.tool-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tool-table th, .tool-table td { padding: 8px 10px; border-bottom: 1px solid #e6e1d6; text-align: left; vertical-align: top; }
.tool-table th { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); background: var(--cream); }
.tool-table td.num, .tool-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool-list { padding-left: 1.2rem; color: var(--text-mid); font-size: 0.92rem; }
.tool-list li { margin-bottom: 4px; }

/* Explicación / fuentes */
.tool-explain { font-size: 0.95rem; color: var(--text-mid); }
.tool-explain h2, .tool-explain h3 { color: var(--navy); margin: 1.25rem 0 0.5rem; }
.tool-explain h3 { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tool-explain p { margin-bottom: 0.75rem; }
.tool-explain a { color: var(--gold-dark); text-decoration: underline; }

/* Aviso y llamada a la acción */
.tool-warning {
  background: #fdf3dc; border-left: 4px solid var(--gold); border-radius: 6px;
  padding: 1rem 1.25rem; font-size: 0.88rem; color: #4a3a12; margin: 1.5rem 0;
}
.tool-cta { background: var(--navy); color: var(--white); border-radius: var(--radius-md); padding: 2rem; text-align: center; }
.tool-cta h2 { color: var(--white); font-size: 1.6rem; margin-bottom: 0.5rem; }
.tool-cta p { color: rgba(255,255,255,0.8); margin-bottom: 1.25rem; }
.tool-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tool-cta .btn-outline-dark { color: var(--gold); border: 1px solid var(--gold); padding: 14px 24px; }

/* Rejilla del índice de herramientas */
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tools-grid a.tool-tile {
  display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.5rem; color: var(--text-dark); text-decoration: none; transition: var(--transition);
}
.tools-grid a.tool-tile:hover, .tools-grid a.tool-tile:focus-visible { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-2px); outline: none; }
.tool-tile .icon { font-size: 1.8rem; }
.tool-tile h2 { font-size: 1.3rem; color: var(--navy); margin: 0.5rem 0; }
.tool-tile p { font-size: 0.92rem; color: var(--text-mid); }
.tool-tile .go { display: inline-block; margin-top: 0.75rem; font-weight: 700; font-size: 0.85rem; color: var(--gold-dark); }

@media (max-width: 768px) {
  .tool-form, .tools-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 1.25rem; }
  .tool-cta { padding: 1.5rem 1.25rem; }
}
@media print {
  #navbar, .footer, .tool-cta, .float-cta, .cb-launcher, .cb-panel, .tool-actions { display: none !important; }
  .tool-main { padding-top: 0; }
}

/* Correcciones detectadas en la primera herramienta */
.tool-field[hidden] { display: none !important; }
.tool-radio input, .tool-field input[type="radio"], .tool-field input[type="checkbox"] { width: auto; }
@media (max-width: 768px) { .tool-table td.num, .tool-table th.num { white-space: normal; } }
.tool-list { list-style: disc; }
.tool-list li { list-style: disc; }
.tool-field label.tool-radio, .tool-field .tool-radio { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.92rem; color: var(--text-dark); }

/* ============================================================
   Revisión de accesibilidad y móvil (20/10/2026)
   - Contraste AA (4,5:1) en textos pequeños: el dorado #C9A84C y
     --gold-dark (#A07830) no llegan sobre blanco/crema; se usa
     #80601F (5,8:1 sobre blanco, 5,3:1 sobre crema).
   - Gris de ayudas y migas: #5C6B7D (5,4:1 / 5,0:1).
   - Foco visible en enlaces, botones y campos de fecha.
   - Botones flotantes: margen inferior en móvil para que no tapen
     el contenido al final de la página ni al moverse con el teclado.
   ============================================================ */
.tool-page { --gold-text: #80601F; --hint-text: #5C6B7D; }
.tool-page .section-tag { color: var(--gold-text); border-bottom-color: var(--gold); }
.tool-breadcrumb { color: var(--hint-text); }
.tool-breadcrumb a,
.tool-explain a,
.tool-result a,
.tool-warning a,
.tool-tile .go { color: var(--gold-text); }
.tool-field .tool-hint, .tool-hint { color: var(--hint-text); }
.tool-page main input::placeholder { color: var(--hint-text); opacity: 1; }
.tool-card .btn-outline-dark { color: var(--gold-text); border-color: var(--gold-text); }
.tool-card .btn-outline-dark:hover, .tool-card .btn-outline-dark:focus-visible { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* Foco visible (navegación con teclado) */
.tool-page main a:focus-visible,
.tool-page main button:focus-visible,
.tool-page main summary:focus-visible,
.tool-page main input[type="radio"]:focus-visible,
.tool-page main input[type="checkbox"]:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.tool-page .tool-cta a:focus-visible,
.tool-page .tool-result-total a:focus-visible,
.tool-page .float-cta:focus-visible,
.tool-page .cb-launcher:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.tools-grid a.tool-tile:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.tool-field input:focus-within, .tool-field select:focus-within { outline: 2px solid var(--gold-text); outline-offset: 1px; border-color: var(--gold-text); }

/* Móvil: que los botones flotantes («¿Te ayudo?» y «Llamar») no tapen nada */
@media (max-width: 768px) {
  .tool-main { padding-bottom: 110px; }
  html:has(body.tool-page) { scroll-padding-bottom: 96px; }
  .tool-page .footer-bottom { padding-bottom: 96px; }
}