/* ============================================================
   ANCESTROS ITALIANOS — DESIGN TOKENS
   Paleta y tipografía unificada para todo el sitio.

   Uso:
   1. Incluí este CSS en cualquier plugin, template o página.
   2. Después usá las variables: var(--ai-rojo), var(--ai-verde-oscuro), etc.
   3. Si algún día cambia la paleta, se cambia acá y se actualiza todo.

   Versión: 1.0 — Mayo 2026
   ============================================================ */

:root {

  /* ============================================
     PALETA DE COLORES
     ============================================ */

  /* Verdes (jerarquía: oscuro → medio) */
  --ai-verde-oscuro:       #1e4d2b;   /* H1, headers, strong, labels destacados */
  --ai-verde-medio:        #4a7c3a;   /* H2, hover, acentos, summary abierto */

  /* Rojos (italiano) */
  --ai-rojo:               #c8102e;   /* botón primario, paginación activa, links destacados */
  --ai-rojo-oscuro:        #a00d24;   /* hover del botón primario */

  /* Neutros / fondos */
  --ai-crema:              #faf7f0;   /* fondo de cajas, fichas, formularios */
  --ai-blanco:             #ffffff;   /* fondo de elementos sobre crema */
  --ai-hover-tabla:        #fff7e6;   /* hover de fila en tabla */

  /* Bordes */
  --ai-borde:              #d9d2c2;   /* borde general */
  --ai-borde-detalle:      #e8e2d2;   /* borde sutil para cajas internas */

  /* Texto */
  --ai-texto:              #2b2b2b;   /* cuerpo del texto */
  --ai-texto-label:        #666666;   /* texto secundario, breadcrumbs base */
  --ai-texto-claro:        #999999;   /* separadores, texto muy secundario */


  /* ============================================
     TIPOGRAFÍA
     ============================================ */

  /* Familia */
  --ai-font:               Arial, Helvetica, sans-serif;

  /* Tamaños base */
  --ai-fs-body:            18px;
  --ai-fs-body-mobile:     17px;
  --ai-fs-pequeno:         16px;       /* metadata, contadores */
  --ai-fs-mini:            14px;       /* breadcrumbs, autoría */
  --ai-fs-tag:             13px;       /* tags uppercase */

  /* Tamaños headers */
  --ai-fs-h1:              32px;
  --ai-fs-h1-mobile:       26px;
  --ai-fs-h2:              28px;
  --ai-fs-h3:              24px;
  --ai-fs-h3-mobile:       21px;

  /* Botones */
  --ai-fs-boton:           18px;

  /* Line-heights */
  --ai-lh-body:            1.55;
  --ai-lh-titulo:          1.3;


  /* ============================================
     ESPACIADO Y RADIOS
     ============================================ */

  --ai-radio-suave:        4px;
  --ai-radio-medio:        6px;
  --ai-radio-pill:         999px;

  --ai-borde-acento:       4px;        /* grosor del borde lateral acento */


  /* ============================================
     SOMBRAS Y FOCO
     ============================================ */

  --ai-focus-ring:         0 0 0 2px rgba(74, 124, 58, 0.2);  /* foco verde medio translúcido */
}


/* ============================================================
   CLASES UTILITARIAS (opcional)

   Si en el otro plugin querés escribir menos CSS, podés usar
   directamente estas clases. Si preferís estilos propios usando
   las variables, ignorá esta sección.
   ============================================================ */

/* --- Botón primario rojo --- */
.ai-btn {
  display: inline-block;
  padding: 10px 22px;
  font-family: var(--ai-font);
  font-size: var(--ai-fs-boton);
  font-weight: 700;
  color: var(--ai-blanco);
  background: var(--ai-rojo);
  border: 1px solid var(--ai-rojo-oscuro);
  border-radius: var(--ai-radio-suave);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.ai-btn:hover {
  background: var(--ai-rojo-oscuro);
  color: var(--ai-blanco);
}
.ai-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* --- Botón secundario verde --- */
.ai-btn-secundario {
  display: inline-block;
  padding: 10px 18px;
  font-family: var(--ai-font);
  font-size: var(--ai-fs-pequeno);
  font-weight: 700;
  color: var(--ai-blanco);
  background: var(--ai-verde-oscuro);
  border: 1px solid var(--ai-verde-oscuro);
  border-radius: var(--ai-radio-suave);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.ai-btn-secundario:hover {
  background: var(--ai-verde-medio);
  color: var(--ai-blanco);
}

/* --- H1 con línea bordó debajo --- */
.ai-h1 {
  font-family: var(--ai-font);
  font-size: var(--ai-fs-h1);
  font-weight: bold;
  line-height: var(--ai-lh-titulo);
  color: var(--ai-verde-oscuro);
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ai-rojo);
  display: inline-block;
}

/* --- H2 verde medio --- */
.ai-h2 {
  font-family: var(--ai-font);
  font-size: var(--ai-fs-h2);
  font-weight: bold;
  line-height: var(--ai-lh-titulo);
  color: var(--ai-verde-medio);
  margin: 16px 0 10px;
}

/* --- Caja de contenido sobre crema con acento lateral --- */
.ai-caja {
  padding: 14px 16px;
  background: var(--ai-crema);
  border: 1px solid var(--ai-borde);
  border-left: var(--ai-borde-acento) solid var(--ai-verde-oscuro);
  border-radius: var(--ai-radio-medio);
  font-family: var(--ai-font);
  font-size: var(--ai-fs-body);
  line-height: var(--ai-lh-body);
  color: var(--ai-texto);
}
.ai-caja-rojo  { border-left-color: var(--ai-rojo); }
.ai-caja-verde-medio { border-left-color: var(--ai-verde-medio); }

/* --- Input de texto --- */
.ai-input {
  padding: 10px 12px;
  font-family: var(--ai-font);
  font-size: var(--ai-fs-body);
  border: 1px solid var(--ai-borde);
  border-radius: var(--ai-radio-suave);
  background: var(--ai-blanco);
  color: var(--ai-texto);
}
.ai-input:focus {
  outline: none;
  border-color: var(--ai-verde-medio);
  box-shadow: var(--ai-focus-ring);
}

/* --- Texto destacado (strong/labels) --- */
.ai-strong {
  color: var(--ai-verde-oscuro);
  font-weight: 700;
}

/* --- Link destacado --- */
.ai-link {
  color: var(--ai-rojo);
  text-decoration: none;
  font-weight: 700;
}
.ai-link:hover {
  text-decoration: underline;
}

/* --- Tag pequeño uppercase --- */
.ai-tag {
  display: inline-block;
  font-family: var(--ai-font);
  font-size: var(--ai-fs-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ai-verde-oscuro);
}

/* --- Breadcrumbs --- */
.ai-breadcrumbs {
  font-family: var(--ai-font);
  font-size: var(--ai-fs-mini);
  color: var(--ai-texto-label);
}
.ai-breadcrumbs a {
  color: var(--ai-verde-medio);
  text-decoration: none;
  font-weight: 700;
}
.ai-breadcrumbs a:hover {
  text-decoration: underline;
}
.ai-breadcrumbs span.sep {
  margin: 0 6px;
  color: var(--ai-texto-claro);
}


/* ============================================================
   RESPONSIVE — MÓVIL
   ============================================================ */

@media (max-width: 600px) {
  .ai-h1  { font-size: var(--ai-fs-h1-mobile); }
  .ai-btn { width: 100%; font-size: var(--ai-fs-body-mobile); }
  .ai-caja { font-size: var(--ai-fs-body-mobile); }
}