/* ============================================================
   Xponencial · Sistema de diseño base
   Manual de Marca v1.0 · Mayo 2026
   Incluir inline en documentos HTML autónomos.
   ============================================================ */

:root {
  /* Primaria */
  --xp-turquesa: #3898B0;
  --xp-gris-corp: #787878;
  /* Tonalidades de turquesa */
  --xp-turquesa-profundo: #2A788C;
  --xp-turquesa-medio: #88C3D2;
  --xp-turquesa-claro: #C5E2EB;
  --xp-turquesa-pale: #EAF4F7;
  /* Neutros */
  --xp-negro: #1F1F1F;
  --xp-gris-oscuro: #4A4A4A;
  --xp-gris-claro: #BFBFBF;
  --xp-gris-pale: #F2F2F2;
  --xp-blanco: #FFFFFF;
  /* Acentos semánticos (solo estados) */
  --xp-arena: #E8A672;
  --xp-rojo: #D85050;
  --xp-verde: #6FB36A;
  --xp-ambar: #F3C969;
  /* Tipografía */
  --xp-font: 'Inter', system-ui, Arial, sans-serif;
  --xp-radius: 4px;
}

body.xp {
  font-family: var(--xp-font);
  color: var(--xp-gris-oscuro);
  background: var(--xp-blanco);
  line-height: 1.6;
  font-size: 16px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* --- Jerarquía tipográfica --- */
.xp h1, .xp-titulo-portada { font-weight: 300; color: var(--xp-negro); font-size: 3rem; line-height: 1.15; margin: 0 0 .5em; }
.xp h2, .xp-titulo-seccion { font-weight: 600; color: var(--xp-negro); font-size: 1.6rem; margin: 2em 0 .5em; }
.xp h3, .xp-subtitulo      { font-weight: 600; color: var(--xp-turquesa); font-size: 1.1rem; margin: 1.5em 0 .4em; }
.xp-antetitulo  { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--xp-turquesa); }
.xp-nota        { font-size: .78rem; color: var(--xp-gris-corp); }
.xp-cita        { font-weight: 300; font-style: italic; font-size: 1.25rem; color: var(--xp-turquesa); }
.xp strong      { color: var(--xp-negro); }
.xp a           { color: var(--xp-turquesa-profundo); text-decoration: none; }
.xp a:hover     { color: var(--xp-turquesa); }

/* --- Recursos gráficos de marca --- */
.xp-linea-acento {            /* línea de cierre bajo títulos */
  width: 60px; height: 3px; background: var(--xp-turquesa);
  border: none; margin: .8em 0 1.4em;
}
.xp-callout {                 /* bloque de cita / hallazgo clave */
  background: var(--xp-turquesa-pale);
  border-left: 3px solid var(--xp-turquesa);
  padding: 14px 18px; margin: 1.2em 0;
}
.xp-cifra { font-weight: 700; font-size: 3rem; color: var(--xp-negro); line-height: 1; }
.xp-cifra.turquesa { color: var(--xp-turquesa); }
.xp-cifra-etiqueta {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--xp-gris-corp); margin-top: 6px;
}

/* --- Botones --- */
.xp-btn {
  display: inline-block; font-family: var(--xp-font); font-weight: 500;
  font-size: .95rem; padding: 11px 24px; border-radius: var(--xp-radius);
  cursor: pointer; transition: background .15s, color .15s; text-decoration: none;
}
.xp-btn-primario { background: var(--xp-turquesa); color: #fff; border: none; }
.xp-btn-primario:hover { background: var(--xp-turquesa-profundo); color: #fff; }
.xp-btn-secundario { background: transparent; color: var(--xp-turquesa); border: 1px solid var(--xp-turquesa); }
.xp-btn-secundario:hover { color: var(--xp-turquesa-profundo); border-color: var(--xp-turquesa-profundo); }

/* --- Hero --- */
.xp-hero { background: linear-gradient(180deg, var(--xp-turquesa-pale) 0%, #fff 100%); padding: 72px 0; }

/* --- Tablas --- */
.xp-tabla { border-collapse: collapse; width: 100%; font-size: .9rem; }
.xp-tabla th { background: var(--xp-negro); color: #fff; font-weight: 600; text-align: left; padding: 9px 12px; }
.xp-tabla td { padding: 8px 12px; }
.xp-tabla tbody tr:nth-child(4n+3) td, .xp-tabla tbody tr:nth-child(4n+4) td { background: var(--xp-turquesa-pale); }
.xp-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xp-tabla td.positivo { color: var(--xp-turquesa); font-weight: 600; }
.xp-tabla tr.total td { border-top: 2px solid var(--xp-turquesa); background: var(--xp-gris-pale); font-weight: 700; }

/* --- Estados (solo uso semántico) --- */
.xp-ok     { color: var(--xp-verde); }
.xp-alerta { color: var(--xp-rojo); }
.xp-aviso  { color: #A97F1B; } /* ámbar oscurecido para texto legible; usar #F3C969 solo en fondos/indicadores */