/* tools.css — estilos comunes de las herramientas Angela Clair.
 * Mobile-first. Hereda fuentes/colores del theme via variables con fallback.
 * No impone identidad visual propia: usa --ac-* que el theme puede sobreescribir.
 */
:root {
  --ac-fg: var(--ac-color-fg, #1a1a1a);
  --ac-muted: var(--ac-color-muted, #5a5a5a);
  --ac-bg: var(--ac-color-bg, #ffffff);
  --ac-surface: var(--ac-color-surface, #f6f6f4);
  --ac-border: var(--ac-color-border, #e2e2dd);
  --ac-accent: var(--ac-color-accent, #1f6f54);
  --ac-accent-fg: var(--ac-color-accent-fg, #ffffff);
  --ac-venta: #b4582a;
  --ac-alquiler: #1f6f54;
  --ac-esperar: #8a7a1f;
  --ac-radius: 10px;
  --ac-gap: 1rem;
  --ac-maxw: 720px;
}

.ac-tool { max-width: var(--ac-maxw); margin: 0 auto; padding: 1rem; color: var(--ac-fg); }
.ac-tool * { box-sizing: border-box; }
.ac-tool h1 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.15; margin: .25rem 0 .75rem; }
.ac-tool .ac-intro { color: var(--ac-muted); margin-bottom: 1.25rem; }

.ac-form { display: grid; gap: var(--ac-gap); }
.ac-fieldset { border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 1rem; margin: 0; }
.ac-fieldset > legend { font-weight: 600; padding: 0 .4rem; }
.ac-grid { display: grid; gap: var(--ac-gap); grid-template-columns: 1fr; }
@media (min-width: 560px) { .ac-grid { grid-template-columns: 1fr 1fr; } }

.ac-field { display: grid; gap: .35rem; }
.ac-field > label { font-weight: 600; font-size: .95rem; }
.ac-field .ac-help { color: var(--ac-muted); font-size: .8rem; }
.ac-field input, .ac-field select, .ac-field textarea {
  width: 100%; padding: .7rem .75rem; font: inherit; color: var(--ac-fg);
  background: var(--ac-bg); border: 1px solid var(--ac-border); border-radius: 8px;
  min-height: 44px; /* touch target accesible */
}
.ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus,
.ac-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ac-accent) 45%, transparent); outline-offset: 2px; }

.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.2rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1;
}
.ac-btn--primary { background: var(--ac-accent); color: var(--ac-accent-fg); }
.ac-btn--ghost { background: transparent; color: var(--ac-fg); border-color: var(--ac-border); }
.ac-btn--block { width: 100%; }

.ac-error { background: #fbeae8; color: #8a1f12; border: 1px solid #e9b7b0; border-radius: 8px; padding: .7rem .9rem; }

.ac-result { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 1.25rem; margin-top: 1.5rem; }
.ac-result__title { margin: 0 0 .25rem; font-size: clamp(1.3rem, 4.5vw, 1.6rem); }
.ac-result__conf { color: var(--ac-muted); margin: 0 0 1rem; }
.ac-result h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.ac-result ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.ac-result li { margin: .2rem 0; }
.ac-block--missing { border-left: 3px solid var(--ac-esperar); padding-left: .75rem; }

.ac-metric-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 560px) { .ac-metric-grid { grid-template-columns: 1fr 1fr; } }
.ac-metric {
  display: grid; gap: .25rem; min-height: 112px; padding: .9rem;
  border: 1px solid var(--ac-border); border-radius: 8px; background: var(--ac-bg);
}
.ac-metric span { color: var(--ac-muted); font-size: .82rem; font-weight: 600; }
.ac-metric b { font-size: clamp(1.2rem, 5vw, 1.55rem); line-height: 1.15; }
.ac-metric small { color: var(--ac-muted); line-height: 1.35; }

.ac-scores { display: grid; gap: .6rem; margin-bottom: .5rem; }
.ac-score__head { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .2rem; }
.ac-score__track { background: var(--ac-border); border-radius: 999px; height: 10px; overflow: hidden; }
.ac-score__fill { height: 100%; border-radius: 999px; background: var(--ac-muted); transition: width .4s ease; }
.ac-score[data-kind="venta"] .ac-score__fill { background: var(--ac-venta); }
.ac-score[data-kind="alquiler"] .ac-score__fill { background: var(--ac-alquiler); }
.ac-score[data-kind="esperar"] .ac-score__fill { background: var(--ac-esperar); }

.ac-cta { display: grid; gap: .6rem; margin-top: 1.25rem; }
@media (min-width: 560px) { .ac-cta { grid-template-columns: 1fr auto; } }
.ac-disclaimer { color: var(--ac-muted); font-size: .8rem; margin-top: 1rem; }

/* Hub */
.ac-hub { max-width: 960px; margin: 0 auto; padding: 1rem; }
.ac-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 640px) { .ac-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .ac-cards { grid-template-columns: 1fr 1fr 1fr; } }
.ac-card { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 1.1rem; background: var(--ac-bg); }
.ac-card__badge { align-self: flex-start; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 999px; background: var(--ac-surface); color: var(--ac-muted); }
.ac-card__badge[data-state="Disponible"] { background: color-mix(in srgb, var(--ac-accent) 18%, transparent); color: var(--ac-accent); }
.ac-card h2 { font-size: 1.1rem; margin: 0; }
.ac-card p { color: var(--ac-muted); margin: 0; flex: 1; }
.ac-card a.ac-card__link { align-self: flex-start; }
.ac-card[aria-disabled="true"] { opacity: .7; }

@media print { .ac-form, .ac-cta, .ac-error { display: none !important; } .ac-result { border: none; padding: 0; } }

/* Intro SEO */
.ac-seo { max-width: var(--ac-maxw); margin: 2rem auto 0; }
.ac-seo h2 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.ac-seo p { color: var(--ac-fg); line-height: 1.65; margin: 0 0 .8rem; }
.ac-faq { max-width: var(--ac-maxw); margin: 1.5rem auto 0; }
.ac-faq details { border-bottom: 1px solid var(--ac-border); padding: .6rem 0; }
.ac-faq summary { cursor: pointer; font-weight: 600; }