/* Botones */
.btn, .btn-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5);
  border-radius: var(--radius-pill); border: 1px solid var(--brand);
  font-weight: 600; font-size: var(--fs-16); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-out), background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.btn { background: var(--brand); color: var(--brand-ink); }
.btn-secundario { background: transparent; color: var(--brand); }
.btn:active, .btn-secundario:active, .pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #0B4145; }
  .btn-secundario:hover { background: #EAF1F0; }
}

/* Card */
.card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-5); }

/* Campos */
.campo { display: grid; gap: var(--sp-1); }
.campo label, .campo .etiqueta { font-weight: 500; font-size: var(--fs-14); color: var(--ink); }
.campo input, .campo select {
  min-height: 44px; width: 100%; padding: 0 var(--sp-3);
  background: var(--surface); border: 1px solid var(--ink-2); border-radius: var(--radius-input);
  font-size: var(--fs-16); font-variant-numeric: tabular-nums;
}
.campo input:focus-visible, .campo select:focus-visible { outline: var(--focus-ring); outline-offset: 0; border-color: var(--brand); }
.campo .ayuda { font-size: var(--fs-14); color: var(--ink-2); }

/* Pills (presets) */
.pill {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-4);
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-14); font-weight: 500; color: var(--ink); cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-out), border-color var(--dur-hover) ease;
}
.pill[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .pill:hover { border-color: var(--ink-2); } }

/* Aviso */
.aviso { background: var(--surface); color: var(--ink); border-left: 4px solid var(--triple); padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--radius-input) var(--radius-input) 0; font-size: var(--fs-16); }
.aviso + .aviso { margin-top: var(--sp-2); }

/* Tabla */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.tabla { width: 100%; min-width: 480px; font-size: var(--fs-16); }
.tabla th, .tabla td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.tabla th { font-weight: 600; background: #F4F1EA; }
.tabla td.n, .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr:last-child td { border-bottom: 0; }

/* Recibo */
.recibo { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-5); }
.recibo dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); }
.recibo dt { color: var(--ink-2); }
.recibo dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.recibo .total { border-top: 1px solid var(--line); padding-top: var(--sp-3); font-size: var(--fs-22); color: var(--ink); }

/* Preguntas frecuentes */
.faq-item { background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--line); }
.faq-item + .faq-item { margin-top: var(--sp-2); }
.faq-item summary { cursor: pointer; padding: var(--sp-4); font-weight: 600; list-style-position: outside; margin-left: var(--sp-4); }
.faq-item > div { padding: 0 var(--sp-4) var(--sp-4); }

/* Anuncio: sin alto reservado hasta que AdSense apruebe (anuncios automáticos) */
.ad-slot { min-height: 0; }

/* Migas de pan */
.migas { font-size: var(--fs-14); color: var(--ink-2); padding: var(--sp-4) 0; }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; }
.migas li + li::before { content: "›"; margin-right: var(--sp-2); color: var(--ink-2); }
.migas a { color: var(--ink-2); }

/* Números */
.num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Leyenda de colores de la gráfica */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-14); list-style: none; padding: 0; }
.leyenda li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.leyenda i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--ink); display: inline-block; }
.leyenda .c-ord { background: var(--ordinaria); }
.leyenda .c-doble { background: var(--doble); }
.leyenda .c-triple { background: var(--triple); }

/* Tablas con cabecera de marca */
.tabla th { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.tabla tbody tr:nth-child(even) td { background: #FBF8F2; }
.tabla td.n, .tabla th.n { font-family: var(--font-mono); }
.faq-item[open] { border-color: var(--brand); }
.faq-item summary::marker { color: var(--brand); }
.recibo { box-shadow: var(--shadow-tarjeta); }