/* =============================================================================
 *  fiscal.css — Estilos de las calculadoras fiscales DEMO
 *  Contadores Grupo Alfaro
 * -----------------------------------------------------------------------------
 *  REBRAND: cambia SOLO las variables del bloque .fcalc de abajo.
 *  Todo el diseño deriva de ellas (colores, radios, sombras).
 *  Default sobrio (azul/dorado discreto) para reajustar a la marca después.
 *
 *  NOTA DE PORTABILIDAD: los tamaños de fuente van en px (no rem) y .fcalc fija
 *  su propio font-size base. Así el widget se ve igual en cualquier tema, sin
 *  importar el root font-size del sitio (Bricks aquí usa 62.5% = 10px, lo que
 *  encogía todo si se usaban rem).
 * ========================================================================== */

.fcalc {
  /* ---- PALETA (edita aquí para rebrand) ---- */
  --fc-accent:      #0c2748;   /* color principal (botones, total) */
  --fc-accent-ink:  #ffffff;   /* texto sobre el principal */
  --fc-accent-2:    #c4a04a;   /* acento secundario (badge, detalles) */
  --fc-fg:          #1b2330;   /* texto principal */
  --fc-muted:       #6b7480;   /* texto secundario */
  --fc-card:        #ffffff;   /* fondo de la tarjeta */
  --fc-field:       #f6f8fb;   /* fondo de campos */
  --fc-result:      #f7f9fc;   /* fondo del panel de resultados */
  --fc-line:        #e6e9ef;   /* bordes/separadores */

  /* ---- FORMA ---- */
  --fc-radius:      16px;
  --fc-radius-sm:   10px;
  --fc-shadow:      0 18px 44px -28px rgba(12,39,72,.40);
  --fc-maxw:        680px;

  /* base propia: NO heredar el root de 10px del tema */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fc-fg);
  max-width: var(--fc-maxw);
  margin: 22px 0;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}
.fcalc *, .fcalc *::before, .fcalc *::after { box-sizing: border-box; }

.fcalc__card {
  background: var(--fc-card);
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow);
  padding: clamp(20px, 3.5vw, 30px);
}

/* ---- Encabezado ---- */
.fcalc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fcalc__title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.18; color: var(--fc-fg); }
.fcalc__sub { margin: 5px 0 0; font-size: 14px; color: var(--fc-muted); line-height: 1.35; }
.fcalc__badge {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fc-accent-2); background: color-mix(in srgb, var(--fc-accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc-accent-2) 38%, transparent);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

/* ---- Layout campos / resultados ---- */
.fcalc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 26px); margin-top: 22px; align-items: start; }
@media (max-width: 560px) { .fcalc__grid { grid-template-columns: 1fr; } }

.fcalc__fields { display: flex; flex-direction: column; gap: 14px; }
.fcalc__field { display: flex; flex-direction: column; gap: 6px; }
.fcalc__field label { font-size: 13px; font-weight: 600; color: var(--fc-fg); line-height: 1.3; }

.fcalc__inwrap { position: relative; display: flex; align-items: center; }
.fcalc__pre { position: absolute; left: 13px; color: var(--fc-muted); font-size: 15px; pointer-events: none; }
.fcalc__input, .fcalc__field input[type="date"] {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--fc-fg);
  background: var(--fc-field); border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius-sm); padding: 12px 13px; line-height: 1.2;
  transition: border-color .15s, box-shadow .15s;
}
.fcalc__input--money { padding-left: 26px; }
.fcalc__input:focus, .fcalc__field input[type="date"]:focus {
  outline: none; border-color: var(--fc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-accent) 16%, transparent);
}
.fcalc__check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--fc-fg); cursor: pointer; line-height: 1.3; padding: 2px 0; }
.fcalc__check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--fc-accent); flex: none; cursor: pointer; }

/* ---- Resultados ---- */
.fcalc__results { background: var(--fc-result); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-sm); padding: 16px 18px; }
.fcalc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; line-height: 1.35; }
.fcalc__row-l { color: var(--fc-muted); }
.fcalc__row-v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fc-fg); white-space: nowrap; }
.fcalc__row--sep { margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--fc-line); }
.fcalc__row--fuerte .fcalc__row-l { color: var(--fc-fg); font-weight: 700; }
.fcalc__row--fuerte .fcalc__row-v { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--fc-accent); }

/* ---- Pie: nota, disclaimer, CTA ---- */
.fcalc__nota { margin: 16px 0 0; font-size: 12px; line-height: 1.45; color: var(--fc-muted);
  background: color-mix(in srgb, var(--fc-accent-2) 8%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--fc-accent-2) 55%, transparent);
  padding: 9px 12px; border-radius: 0 var(--fc-radius-sm) var(--fc-radius-sm) 0; }
.fcalc__disclaimer { margin: 14px 0 0; font-size: 12px; color: var(--fc-muted); line-height: 1.4; }

.fcalc__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--fc-accent); color: var(--fc-accent-ink); text-decoration: none;
  font-size: 15px; font-weight: 600; padding: 12px 20px; border-radius: var(--fc-radius-sm);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.fcalc__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--fc-accent) 60%, transparent); opacity: .96; }
.fcalc__cta svg { transition: transform .15s; }
.fcalc__cta:hover svg { transform: translateX(3px); }

.fcalc__foot { margin-top: 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-muted); opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .fcalc__cta, .fcalc__cta svg, .fcalc__input { transition: none; }
  .fcalc__cta:hover { transform: none; }
}