/* ═══════════════════════════════════════════════════════════════════════
   GDM HIGH CONSULTING MÉXICO — capa común de las herramientas
   ═══════════════════════════════════════════════════════════════════════

   POR QUÉ EXISTE ESTE ARCHIVO
   Cada calculadora se escribió por separado y traía su propia paleta: una en
   azul #2563eb, otra en gris, otra con su propio juego de variables. Puestas
   detrás del mismo menú parecían de sitios distintos, y el usuario que venía de
   hcgm.com.mx sentía que había salido a otra parte.

   Aquí viven los colores y tipografía del sitio, y se cargan DESPUÉS de los
   estilos propios de cada herramienta para ganarles. Es una capa de unificación,
   no un rediseño: no toca la estructura ni la lógica de ninguna, sólo empareja
   lo que se ve.

   POR QUÉ NO SE REESCRIBIERON LAS OCHO
   Suman más de seis mil líneas de HTML con JavaScript de cálculo dentro. Tocar
   ese código para cambiar colores arriesga la aritmética —que es lo único que de
   verdad importa en una calculadora fiscal— a cambio de nada. Un archivo aparte
   se puede revisar de un vistazo y revertir sin miedo.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* Los mismos valores que css/styles.css del sitio. Si allá cambian, aquí
     también: son la misma marca y no deben divergir. */
  --hcgm-navy:       #091B4E;
  --hcgm-navy-deep:  #060F2E;
  --hcgm-navy-mid:   #0D2463;
  --hcgm-gold:       #C9A227;
  --hcgm-gold-light: #E8C547;
  --hcgm-gray-50:    #F7F8FC;
  --hcgm-gray-100:   #EEF0F8;
  --hcgm-gray-400:   #94A3B8;
  --hcgm-gray-700:   #334155;
  --hcgm-gray-900:   #0A0F1E;
  --hcgm-grad-gold:  linear-gradient(135deg, #C9A227 0%, #E8C547 50%, #C9A227 100%);
  --hcgm-sh-sm:      0 2px 12px rgba(9,27,78,.09);
  --hcgm-sh-md:      0 8px 28px rgba(9,27,78,.13);
}

/* ── Tipografía ────────────────────────────────────────────────────────
   Poppins en todo, incluidos los controles de formulario: los navegadores no
   heredan la fuente en input, select ni button, y sin nombrarlos explícitamente
   la mitad de la pantalla seguiría en la fuente del sistema. */
body,
body input, body select, body button, body textarea {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}

body {
  background: var(--hcgm-gray-50) !important;
  color: var(--hcgm-gray-900) !important;
  font-size: 15px;
  line-height: 1.6;
}

/* Escala tipográfica del sitio. Cada herramienta traía la suya, y por eso un
   mismo encabezado se veía de un tamaño en Aguinaldo y de otro en Vacaciones. */
body h1 { font-size: 30px; font-weight: 800; color: var(--hcgm-navy); line-height: 1.2; }
body h2 { font-size: 22px; font-weight: 700; color: var(--hcgm-navy); }
body h3 { font-size: 17px; font-weight: 700; color: var(--hcgm-navy); }
body label { font-size: 13px; font-weight: 600; color: var(--hcgm-gray-700); }
body small, body .hint { font-size: 12px; color: var(--hcgm-gray-400); }

/* ── Encabezado con el logo ────────────────────────────────────────────
   Lo inserta hcgm-tool.js. Es el mismo logotipo, tamaño y disposición que el
   del sitio: quien llega desde el menú debe reconocer que sigue en HCGM. */
.hcgm-bar {
  background: #fff;
  border-bottom: 1px solid var(--hcgm-gray-100);
  box-shadow: var(--hcgm-sh-sm);
  position: sticky;
  top: 0;
  z-index: 999;
}
.hcgm-bar-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hcgm-bar img { height: 38px; width: auto; display: block; }
.hcgm-bar-name {
  font-size: 14px; font-weight: 800; color: var(--hcgm-navy); letter-spacing: -.01em;
  line-height: 1.15;
}
.hcgm-bar-sub {
  font-size: 10px; font-weight: 600; color: var(--hcgm-gold);
  text-transform: uppercase; letter-spacing: .12em;
}
/* El nombre se oculta en pantallas chicas, no el logo: en un teléfono el
   logotipo solo ya identifica, y el texto empujaría el contenido. */
@media (max-width: 480px) { .hcgm-bar-text { display: none; } }

/* ── Regreso al sitio ──────────────────────────────────────────────────
   Una calculadora abierta desde el menú es un callejón sin salida: sin este
   botón, la única forma de volver es el botón atrás del navegador, y quien
   llegó por un enlace directo ni eso tiene. */
.hcgm-volver {
  max-width: 1100px;
  margin: 32px auto 40px;
  padding: 0 20px;
  text-align: center;
}
.hcgm-volver a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--hcgm-grad-gold);
  color: var(--hcgm-navy);
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(201,162,39,.38);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hcgm-volver a:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(201,162,39,.45); }
.hcgm-volver p { margin-top: 12px; font-size: 11px; color: var(--hcgm-gray-400); }

/* ── Unificación de controles ──────────────────────────────────────────
   Los botones de acción de cada herramienta venían en azules distintos. Se
   emparejan al dorado de la marca, y los secundarios al azul marino.

   Se usa !important a conciencia: los estilos originales viven en un <style>
   dentro de cada archivo, que por orden de cascada gana a una hoja externa
   aunque ésta se cargue después. Sin él, la unificación no surtiría efecto. */
body button:not(.hcgm-ignore),
body .btn-primary,
body input[type="submit"] {
  background: var(--hcgm-grad-gold) !important;
  color: var(--hcgm-navy) !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  cursor: pointer;
}
body button:not(.hcgm-ignore):hover,
body .btn-primary:hover { filter: brightness(1.05); }

/* Los secundarios conservan su papel: si todo fuera dorado, nada destacaría. */
body .btn-secondary, body .btn-ghost {
  background: #fff !important;
  color: var(--hcgm-navy) !important;
  border: 1.5px solid var(--hcgm-gray-100) !important;
}

body input:not([type="submit"]):not([type="button"]),
body select, body textarea {
  border: 1px solid var(--hcgm-gray-100) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--hcgm-gray-900) !important;
}
body input:focus, body select:focus, body textarea:focus {
  outline: none !important;
  border-color: var(--hcgm-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,.15) !important;
}

/* Tarjetas y paneles: mismo radio y misma sombra en las ocho. */
body .panel, body .card, body .result-card, body .box {
  border-radius: 14px !important;
  box-shadow: var(--hcgm-sh-sm) !important;
  border: 1px solid var(--hcgm-gray-100) !important;
}

/* Tablas de resultados. */
body table { border-collapse: collapse; width: 100%; }
body th {
  background: var(--hcgm-navy) !important;
  color: #fff !important;
  font-weight: 600; font-size: 13px;
  text-align: left; padding: 10px 12px;
}
body td { padding: 9px 12px; border-bottom: 1px solid var(--hcgm-gray-100); font-size: 14px; }