/* CalculaValorHoy Tools — shared stylesheet.
   Mobile-first, tool-first, clean/light. Deep blue + white + one accent.
   No external fonts (system stack only). No cookies, no tracking. */

.cvh-tool {
  --cvh-blue: #123a6d;
  --cvh-blue-dark: #0b2547;
  --cvh-accent: #e8871e;
  --cvh-accent-dark: #c96f0e;
  --cvh-bg: #ffffff;
  --cvh-bg-soft: #f2f6fb;
  --cvh-border: #d7e0ec;
  --cvh-text: #1a2433;
  --cvh-muted: #5b6b80;
  --cvh-warn-bg: #fff7e6;
  --cvh-warn-border: #e8a838;
  --cvh-radius: 10px;
  box-sizing: border-box;
  max-width: 720px;
  margin: 1.5rem auto;
  padding: 1.25rem;
  background: var(--cvh-bg);
  border: 1px solid var(--cvh-border);
  border-radius: var(--cvh-radius);
  color: var(--cvh-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}
.cvh-tool *, .cvh-tool *::before, .cvh-tool *::after { box-sizing: border-box; }
.cvh-tool__title { margin: 0 0 .4rem; color: var(--cvh-blue); font-size: 1.35rem; line-height: 1.3; }
.cvh-tool__intro { margin: 0 0 1rem; color: var(--cvh-muted); }
.cvh-tool__body { display: grid; gap: .85rem; }
.cvh-sub { margin: 1.1rem 0 0; color: var(--cvh-blue); font-size: 1.05rem; }
.cvh-field { display: block; }
.cvh-field__label { display: block; margin-bottom: .3rem; font-weight: 600; }
.cvh-field__hint { display: block; margin-top: .25rem; color: var(--cvh-muted); font-size: .85rem; }
.cvh-input {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--cvh-border);
  border-radius: 8px;
  background: #fff;
  color: var(--cvh-text);
  font-size: 1rem;
}
.cvh-input:focus { outline: 2px solid var(--cvh-blue); outline-offset: 1px; border-color: var(--cvh-blue); }
.cvh-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: -.35rem; }
.cvh-chip {
  padding: .4rem .9rem;
  border: 1px solid var(--cvh-blue);
  border-radius: 999px;
  background: #fff;
  color: var(--cvh-blue);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.cvh-chip:hover, .cvh-chip:focus { background: var(--cvh-blue); color: #fff; }
.cvh-btn {
  padding: .6rem 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--cvh-blue);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.cvh-btn:hover, .cvh-btn:focus { background: var(--cvh-blue-dark); }
.cvh-btn--secondary { background: #e7edf5; color: var(--cvh-blue); }
.cvh-btn--secondary:hover, .cvh-btn--secondary:focus { background: #d7e0ec; }
.cvh-tool__result {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--cvh-bg-soft);
  border: 1px solid var(--cvh-border);
  border-left: 4px solid var(--cvh-accent);
  border-radius: 8px;
}
.cvh-result__main { font-size: 1.45rem; font-weight: 700; color: var(--cvh-blue-dark); }
.cvh-result__detail { margin-top: .5rem; font-size: .95rem; }
.cvh-result__detail table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.cvh-result__detail th, .cvh-result__detail td { text-align: left; padding: .35rem .25rem; border-bottom: 1px solid var(--cvh-border); vertical-align: top; }
.cvh-result__detail tr:last-child th, .cvh-result__detail tr:last-child td { border-bottom: 0; }
.cvh-result__detail tr.is-total th, .cvh-result__detail tr.is-total td { font-weight: 700; }
.cvh-tool__actions { margin-top: .85rem; }
.cvh-tool__source, .cvh-tool__disclaimer { margin: .85rem 0 0; color: var(--cvh-muted); font-size: .85rem; }
.cvh-tool__disclaimer { font-style: italic; }
.cvh-live { margin: .5rem 0 0; font-weight: 600; color: var(--cvh-blue); }
.cvh-alert { padding: .85rem 1rem; border: 1px solid var(--cvh-warn-border); background: var(--cvh-warn-bg); border-radius: 8px; font-size: .95rem; }
.cvh-notas-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cvh-exam__meta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .75rem; font-size: .95rem; }
.cvh-exam__q { font-weight: 600; margin-bottom: .75rem; }
.cvh-exam__options { display: grid; gap: .5rem; }
.cvh-exam__options label { display: block; padding: .6rem .75rem; border: 1px solid var(--cvh-border); border-radius: 8px; cursor: pointer; }
.cvh-exam__options label:hover { border-color: var(--cvh-blue); }
.cvh-exam__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

@media (min-width: 640px) {
  .cvh-tool { padding: 1.75rem; }
  .cvh-tool__title { font-size: 1.55rem; }
}