/* =====================================================================
 * asociame.css — Sistema de diseño de Asociame.
 *
 * Paleta "Azul y amarillo", la del sitio viejo (asociame.com/empresa),
 * elegida por el dueño el 2026-10-21. Reemplaza a la "Naranja" del
 * 2026-09-23: los nombres de las variables no cambiaron, sólo sus valores.
 *
 * REGLA: los colores del sitio se piden a estas variables, NUNCA se escriben
 * a mano en una pantalla. Hasta ahora cada módulo tenía su propia paleta (el
 * CRM azul marino, las entregas amarillo, el panel de producto azul
 * degradé) y por eso el sitio no se veía como una sola cosa.
 *
 * Los nombres son por FUNCIÓN ("marca", "acción") y no por color ("naranja",
 * "azul"): si mañana cambia la paleta, se cambia acá y nada más.
 *
 * Todos los pares de letra/fondo de abajo pasan el mínimo de accesibilidad
 * web (WCAG AA, 4,5 a 1). Si se toca un color, volver a medirlo.
 *
 * Antecesor: asociame-ml.css (variables --ml-*), que sólo usan cuatro
 * pantallas. Queda como está hasta migrarlas; no agregarle nada nuevo.
 * ===================================================================== */

:root{
  /* ---- Marca: el encabezado ------------------------------------------ */
  --as-marca:          #1A4FA0;  /* fondo del encabezado */
  --as-marca-hover:    #133A78;
  --as-sobre-marca:    #FFFFFF;  /* letra sobre el azul — 7,9:1 */
  --as-sobre-marca-2:  #D9E4F5;  /* letra secundaria sobre el azul — 6,1:1 */

  /* ---- Amarillo: el acento (cartel de portada, botón «Catálogo»,
   *      subrayado del menú). Amarillo de señalización, no el #FFE600. -- */
  --as-amarillo:       #FFCC00;
  --as-amarillo-hover: #F0BC00;
  --as-sobre-amarillo: #1E1810;  /* 11,6:1 */
  --as-sobre-amarillo-2: #3A2C17;/* 9,0:1 */

  /* ---- Acción: el botón principal ("Pedir cotización") y los enlaces -- */
  --as-accion:         #1A4FA0;
  --as-accion-hover:   #133A78;
  --as-sobre-accion:   #FFFFFF;  /* 7,9:1 */
  --as-enlace:         #1A4FA0;  /* sobre blanco: 7,9:1 */

  /* ---- Resalte: etiquetas ("Nueva"), avisos suaves, hover de menús ---- */
  --as-resalte:        #FFF4C2;
  --as-sobre-resalte:  #6A4A00;  /* 7,3:1 */

  /* ---- Neutros ------------------------------------------------------- */
  --as-fondo:          #EEEDEA;  /* fondo de página, gris cálido */
  --as-superficie:     #FFFFFF;  /* tarjetas, fichas, paneles */
  --as-tinta:          #262626;  /* texto principal */
  --as-tinta-2:        #666666;  /* texto secundario — 5,7:1 sobre blanco */
  --as-tinta-3:        #767676;  /* placeholders y pistas — 4,5:1, el mínimo */
  --as-linea:          #E6E6E6;
  --as-borde:          #BDBDBD;  /* borde de campos de formulario */
  --as-fondo-2:        #F7F6F4;  /* fondo suave dentro de una tarjeta (filas alternas, foto faltante) */
  --as-ok-fondo:       #E3F2E9;  /* fondo de una insignia «ok», con --as-ok encima */

  /* ---- Estados (no son la marca: no usarlos como adorno) ------------- */
  --as-ok:             #1E7045;
  --as-alerta:         #8A5A00;
  --as-error:          #B3261E;

  /* ---- Letra --------------------------------------------------------- */
  /* Nunito Sans: una de las alternativas libres más parecidas a la de ML.
   * Se carga desde Google Fonts en titulo.php. Si no llega, cae a la del
   * sistema, que es igual de legible. */
  --as-letra: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* ---- Forma --------------------------------------------------------- */
  --as-radio:    6px;
  --as-radio-sm: 4px;
  --as-sombra:   0 1px 2px rgba(0, 0, 0, .12);
  --as-sombra-2: 0 8px 22px rgba(0, 0, 0, .14);
}


/* =====================================================================
 * Componentes base. Se usan agregando la clase; no pisan nada existente
 * porque todas empiezan con "as-".
 * ===================================================================== */

/* Botón principal: el "Pedir cotización" de la ficha. Uno solo por pantalla. */
.as-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border:0; border-radius:var(--as-radio);
  background:var(--as-accion); color:var(--as-sobre-accion);
  font:700 15px/1.2 var(--as-letra); text-decoration:none; cursor:pointer;
  transition:background-color .15s;
}
.as-btn:hover{ background:var(--as-accion-hover); color:var(--as-sobre-accion); }
.as-btn:focus-visible{ outline:3px solid var(--as-enlace); outline-offset:2px; }

/* Botón secundario: todo lo que no es la acción principal. */
.as-btn-sec{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 17px; border:1px solid var(--as-accion); border-radius:var(--as-radio);
  background:transparent; color:var(--as-accion);
  font:700 15px/1.2 var(--as-letra); text-decoration:none; cursor:pointer;
  transition:background-color .15s;
}
.as-btn-sec:hover{ background:rgba(26,79,160, .07); }
.as-btn-sec:focus-visible{ outline:3px solid var(--as-enlace); outline-offset:2px; }

/* Etiqueta: "Nueva", "Oferta", "Destacada". */
.as-badge{
  display:inline-block; padding:1px 8px; border-radius:3px;
  background:var(--as-resalte); color:var(--as-sobre-resalte);
  font:700 12px/1.6 var(--as-letra);
}

/* Tarjeta: el fondo blanco sobre el gris de la página. */
.as-card{
  background:var(--as-superficie); border-radius:var(--as-radio);
  box-shadow:var(--as-sombra);
}

.as-link{ color:var(--as-enlace); text-decoration:none; }
.as-link:hover{ text-decoration:underline; }