/*
 * Hoja de tokens --cpmc-* para cpmclz.com.ar (fase 2.1 de la epica; valores cerrados por el PO
 * el 2026-10-22/23). Se encola desde functions.php ANTES de astra-child-style. Origen y
 * justificacion de cada valor: docs/wordpress-design-system/puente-tokens.md.
 *
 * - CSS plano: sin Tailwind, sin build. Tambien pensado para los plugins propios.
 * - Mobile-first: solo media queries con min-width (768px y 1024px).
 * - Nombres alineados con los tokens semanticos de la app (colegiados-com), pero la PALETA es la
 *   del sitio (celeste, clara y amable), independiente de la app. Decision 2026-10-22.
 * - Solo tema claro: sin modo oscuro ni prefers-color-scheme.
 * - Los colores se expresan en hex (la app usa HSL sin funcion: aqui no se necesita).
 */

:root {
  color-scheme: light;

  /* Color: superficie y texto */
  --cpmc-background: #ffffff;
  --cpmc-foreground: #1e293b;          /* texto unico del sitio, 14.6:1 sobre blanco */
  --cpmc-card: #ffffff;
  --cpmc-muted: #f0f5fa;               /* fondo suave celeste del sitio */
  --cpmc-muted-foreground: #5b6672;    /* 5.85:1 sobre blanco; app usa #666 */
  --cpmc-border: #e3e8ee;
  --cpmc-input: #eef0f1;

  /* Color: marca */
  --cpmc-primary: #007cba;             /* azul de accion del sitio, 4.57:1 con texto blanco */
  --cpmc-primary-hover: #005a87;       /* 7.47:1 */
  --cpmc-primary-foreground: #ffffff;
  --cpmc-brand-light: #00a8e8;         /* celeste de las olas: SOLO decorativo, 2.7:1, nunca texto */
  --cpmc-ring: #007cba;

  /* Color: estados (valores de la app; en texto sobre blanco usar los -text) */
  --cpmc-success: #1daf52;
  --cpmc-success-text: #1c7a4a;        /* 5.34:1 sobre blanco */
  --cpmc-warning: #f59f0a;
  --cpmc-destructive: #ef4343;
  --cpmc-destructive-text: #721c24;
  /* Fase 3 (subastas): fondos suaves de estado y bordes/enlaces que pasan AA */
  --cpmc-success-soft: #e6f4ec;        /* #1c7a4a encima: 4.71:1 */
  --cpmc-warning-soft: #fdf0d5;
  --cpmc-warning-text: #8a4b00;        /* 6.03:1 sobre warning-soft */
  --cpmc-destructive-soft: #fdecec;    /* #721c24 encima: 9.64:1 */
  --cpmc-border-strong: #cbd5e1;       /* separadores marcados (no es un borde de control: 1.48:1 sobre blanco) */
  --cpmc-border-control: #7b8798;      /* borde de chips, paginación y botón secundario: 3.65:1 sobre blanco, 3.32:1 sobre #f0f5fa (WCAG 1.4.11) */
  --cpmc-link-on-muted: #005a87;       /* #007cba sobre #f0f5fa da 4.17:1 y no pasa AA; este da 6.81:1 */

  /* Tipografia */
  --cpmc-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cpmc-font-heading: "Montserrat", var(--cpmc-font-sans); /* decision 2026-10-23: Montserrat en titulos (la fuente aun no se sirve bien, ver plan 2.6) */
  --cpmc-text-sm: 0.875rem;
  --cpmc-text-base: 1rem;
  --cpmc-text-lg: 1.125rem;
  --cpmc-text-xl: 1.25rem;
  /* Titulos fluidos: sin saltos por breakpoint (puente-tokens.md 1.2) */
  --cpmc-text-h3: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --cpmc-text-h2: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --cpmc-text-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --cpmc-leading: 1.6;
  --cpmc-leading-tight: 1.25;

  /* Espaciado (multiplos de 4px) */
  --cpmc-space-1: 0.25rem;
  --cpmc-space-2: 0.5rem;
  --cpmc-space-3: 0.75rem;
  --cpmc-space-4: 1rem;
  --cpmc-space-6: 1.5rem;
  --cpmc-space-8: 2rem;
  --cpmc-space-12: 3rem;
  --cpmc-gutter: 1rem;                 /* margen lateral en mobile */

  /* Forma */
  --cpmc-radius-sm: 0.25rem;
  --cpmc-radius-md: 0.375rem;
  --cpmc-radius-lg: 0.5rem;
  --cpmc-radius-pill: 9999px;
  --cpmc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --cpmc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --cpmc-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --cpmc-transition: 0.2s ease;

  /* Layout */
  --cpmc-container: 1140px;            /* decision 2026-10-23: contenedor general */
  --cpmc-container-lectura: 750px;     /* decision 2026-10-23: ancho de lectura */
  --cpmc-tap-min: 44px;                /* objetivo tactil minimo; en px porque el html de Astra no es 16px (rem = ~14.6px) */

  /* Altura del logo (reemplaza las alturas sueltas de la fase 1.3) */
  --cpmc-logo-h-header: 70px;
  --cpmc-logo-h-footer: 60px;
}

@media (min-width: 768px) {
  :root {
    --cpmc-gutter: 1.5rem;
    --cpmc-logo-h-header: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --cpmc-gutter: 2rem;
    --cpmc-logo-h-header: 90px;
  }
}

/* ---------- Utilidades minimas ---------- */

.cpmc-container {
  width: 100%;
  max-width: var(--cpmc-container);
  margin-inline: auto;
  padding-inline: var(--cpmc-gutter);
  box-sizing: border-box;
}

.cpmc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cpmc-space-2);
  min-height: var(--cpmc-tap-min);
  padding: var(--cpmc-space-2) var(--cpmc-space-4);
  border: 1px solid var(--cpmc-primary);
  border-radius: var(--cpmc-radius-md);
  background: var(--cpmc-primary);
  color: var(--cpmc-primary-foreground);
  font: 500 var(--cpmc-text-sm)/1.2 var(--cpmc-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cpmc-transition), border-color var(--cpmc-transition), color var(--cpmc-transition);
}

.cpmc-btn:hover,
.cpmc-btn:focus-visible {
  background: var(--cpmc-primary-hover);
  border-color: var(--cpmc-primary-hover);
  color: var(--cpmc-primary-foreground);
}

.cpmc-btn:focus-visible {
  outline: 2px solid var(--cpmc-ring);
  outline-offset: 2px;
}

.cpmc-btn[disabled],
.cpmc-btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.cpmc-btn--outline {
  background: var(--cpmc-card);
  color: var(--cpmc-primary);
  border-color: var(--cpmc-primary);
}

.cpmc-btn--outline:hover,
.cpmc-btn--outline:focus-visible {
  background: var(--cpmc-muted);
  color: var(--cpmc-primary-hover);
  border-color: var(--cpmc-primary-hover);
}

.cpmc-card {
  background: var(--cpmc-card);
  color: var(--cpmc-foreground);
  border: 1px solid var(--cpmc-border);
  border-radius: var(--cpmc-radius-lg);
  box-shadow: var(--cpmc-shadow-sm);
  padding: var(--cpmc-space-4);
}

@media (min-width: 768px) {
  .cpmc-card {
    padding: var(--cpmc-space-6);
  }
}

/* Contenedor para tablas anchas: scroll horizontal en vez de romper la pagina */
.cpmc-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cpmc-table-responsive > table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
}

.cpmc-table-responsive th,
.cpmc-table-responsive td {
  padding: var(--cpmc-space-2) var(--cpmc-space-3);
  border-bottom: 1px solid var(--cpmc-border);
  text-align: left;
}