/* ============================================================
   Maxus 2026 — Global CSS Client Extension
   Cargado en la Master Page de Liferay via Client Extension type=globalCSS
   Contiene: Google Fonts, Design Tokens CSS, Reset selectivo Maxus
   ============================================================ */

/* 1. FUENTE — Rubik desde Google Fonts
   ---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');


/* 2. DESIGN TOKENS — Variables CSS globales
   ---------------------------------------------------------- */
:root {
  /* Paleta de colores */
  --maxus-color-black:            #000000;
  --maxus-color-white:            #ffffff;
  --maxus-color-cyan:             #5dbddd;   /* CTA / indicadores activos */
  --maxus-color-cyan-dark:        #006c83;   /* Acento / texto activo */
  --maxus-color-cyan-soft:        #d4edf7;   /* Fondos suaves / hover */
  --maxus-color-text-secondary:   #575757;
  --maxus-color-text-muted:       #898989;
  --maxus-color-surface-light:    #efefef;
  --maxus-color-border:           #d9d9d9;

  /* Tipografía */
  --maxus-font-family:            "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxus-font-weight-light:      300;
  --maxus-font-weight-regular:    400;
  --maxus-font-weight-medium:     500;
  --maxus-font-weight-semibold:   600;
  --maxus-font-weight-bold:       700;

  /* Escala tipográfica (valores desde Figma en px → rem) */
  --maxus-font-size-xs:    0.75rem;    /* 12px */
  --maxus-font-size-sm:    0.875rem;   /* 14px */
  --maxus-font-size-base:  1rem;       /* 16px */
  --maxus-font-size-md:    1.125rem;   /* 18px */
  --maxus-font-size-lg:    1.25rem;    /* 20px */
  --maxus-font-size-xl:    1.5rem;     /* 24px */
  --maxus-font-size-2xl:   2.25rem;    /* 36px — H1 mobile */
  --maxus-font-size-3xl:   3.375rem;   /* 54px — H1 desktop */

  /* Espaciado */
  --maxus-space-1:    0.25rem;   /* 4px  */
  --maxus-space-2:    0.5rem;    /* 8px  */
  --maxus-space-3:    0.75rem;   /* 12px */
  --maxus-space-4:    1rem;      /* 16px */
  --maxus-space-5:    1.25rem;   /* 20px */
  --maxus-space-6:    1.5rem;    /* 24px */
  --maxus-space-8:    2rem;      /* 32px */
  --maxus-space-10:   2.5rem;    /* 40px */
  --maxus-space-12:   3rem;      /* 48px */
  --maxus-space-16:   4rem;      /* 64px */

  /* Radios de borde */
  --maxus-radius-sm:    0.5rem;      /* 8px  */
  --maxus-radius-md:    1.25rem;     /* 20px — tarjetas */
  --maxus-radius-pill:  6.25rem;     /* 100px — botones */

  /* Layout / Contenedor */
  --maxus-container-max:          1190px;
  --maxus-container-pad-mobile:   1.5rem;      /* ~24px  */
  --maxus-container-pad-tablet:   2.5rem;      /* ~40px  */
  --maxus-container-pad-desktop:  7.8125rem;   /* 125px — Home desktop Figma */

  /* Alturas de barras */
  --maxus-header-height:           3.5rem;     /* 56px */
  --maxus-mobile-cta-bar-height:   4rem;       /* 64px — barra inferior mobile */

  /* Z-index */
  --maxus-z-header:       1010;
  --maxus-z-mobile-menu:  1020;
  --maxus-z-overlay:      1005;
  --maxus-z-modal:        2000;

  /* Transiciones */
  --maxus-transition-fast:   0.15s ease;
  --maxus-transition-base:   0.25s ease;
  --maxus-transition-slow:   0.4s ease;
}


/* 3. RESET SELECTIVO — Solo elementos Maxus
   Se aplica con el prefijo .maxus- para NO colisionar con la UI de Liferay
   (portlets, administración, notificaciones, etc.)
   ---------------------------------------------------------- */

/* Box-sizing universal para todos los componentes Maxus */
[class^="maxus-"],
[class*=" maxus-"],
[class^="maxus-"] *,
[class*=" maxus-"] * {
  box-sizing: border-box;
}

/* Márgenes/padding interno por defecto de los componentes */
[class^="maxus-"],
[class*=" maxus-"] {
  font-family: var(--maxus-font-family);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Imágenes y medios dentro de contextos Maxus */
[class^="maxus-"] img,
[class*=" maxus-"] img,
[class^="maxus-"] picture,
[class*=" maxus-"] picture,
[class^="maxus-"] svg,
[class*=" maxus-"] svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Botones dentro de contextos Maxus — reset de estilos del navegador */
[class^="maxus-"] button,
[class*=" maxus-"] button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

/* Links dentro de contextos Maxus */
[class^="maxus-"] a,
[class*=" maxus-"] a {
  color: inherit;
  text-decoration: none;
}

/* Listas dentro de contextos Maxus */
[class^="maxus-"] ul,
[class*=" maxus-"] ul,
[class^="maxus-"] ol,
[class*=" maxus-"] ol {
  list-style: none;
  margin: 0;
  padding: 0;
}