/**
 * main.css — Estilos globales compartidos Axogenix
 * Variables CSS, reset mínimo, utilidades comunes
 */

:root {
  --primary-color: #006CFA;
  --primary-hover: #0058C4;
  --accent-color: #00C79F;
  --accent2-color: #FF6633;
  --accent3-color: #FFCC33;
  --accent4-color: #9980FA;
  --dark-text: #0B132B;
  --gray-text: #6C757D;
  --light-text: #FFFFFF;
  --light-bg: #EAF2FF;
  --medium-bg: #CCE2FF;
  --border-color: #E2E8F0;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --shadow-card: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.08);
}

body {
  font-family: var(--font-body);
  color: var(--dark-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
 * Menu de navegacion movil (header inline con
 * #mobile-menu-button / #navigation-menu). Aplica a todas las
 * paginas que cargan main.css. La home replica esto en su
 * <style> propio porque no carga main.css.
 * ============================================================ */

/* Submenu "Servicios" en desktop (>= lg): oculto salvo hover */
@media (min-width: 1024px) {
  #navigation-menu .axo-submenu { display: none; }
  #navigation-menu .group:hover .axo-submenu { display: block; }
}

/* Panel desplegable en movil (< lg) */
@media (max-width: 1023px) {
  #navigation-menu {
    left: 12px;
    right: 12px;
    width: auto;
    margin-top: 12px;
    padding: 8px 8px 12px;
    background: #ffffff;
    border: 1px solid var(--border-color, #E2E8F0);
    border-radius: 16px;
    box-shadow: 0 20px 45px -12px rgba(11, 19, 43, 0.28);
    overflow: hidden;
  }
  #navigation-menu:not(.hidden) { animation: axoMenuIn 0.22s ease-out; }
  @keyframes axoMenuIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #navigation-menu > ul > li {
    border: 0;
    padding: 0;
  }
  #navigation-menu > ul > li > a,
  #navigation-menu > ul > li > div > button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 14px;
    border-radius: 10px;
    font-weight: 500;
    color: var(--dark-text, #0B132B);
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  #navigation-menu > ul > li > a:active,
  #navigation-menu > ul > li > a:hover,
  #navigation-menu > ul > li > div > button:hover {
    background: var(--light-bg, #EAF2FF);
    color: var(--primary-color, #006CFA);
  }
  #navigation-menu > ul > li + li { border-top: 1px solid #f1f4f9; }

  /* Submenu Servicios como acordeon (colapsado por defecto) */
  #navigation-menu .axo-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }
  #navigation-menu .axo-submenu.axo-open {
    max-height: 320px;
    opacity: 1;
  }
  #navigation-menu .axo-submenu > div {
    margin: 4px 6px 6px;
    border: 0;
    box-shadow: none;
    background: var(--light-bg, #EAF2FF);
    border-radius: 12px;
  }
  #navigation-menu .axo-submenu a {
    color: var(--gray-text, #6C757D);
    font-size: 0.95rem;
  }
  #navigation-menu .axo-submenu a:hover { color: var(--primary-color, #006CFA); }
  #navigation-menu .axo-submenu-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
  }

  /* Bloque de autenticacion a ancho completo */
  #navigation-menu #auth-buttons {
    margin-top: 10px;
    padding: 12px 8px 4px;
    border-top: 1px solid #f1f4f9;
    gap: 10px;
  }
  #navigation-menu #auth-buttons > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 16px;
    border-radius: 10px;
    font-weight: 600;
  }
  #navigation-menu #auth-buttons > a[href="/login"] {
    border: 1px solid var(--border-color, #E2E8F0);
  }

  /* Menu de usuario (sesion iniciada) a ancho completo */
  #navigation-menu #user-menu {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f1f4f9;
  }
  #navigation-menu #user-menu #user-menu-button {
    width: 100%;
    justify-content: flex-start;
    padding: 13px 14px;
    border-radius: 10px;
  }
  #navigation-menu #user-menu #user-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    width: 100%;
    padding-top: 4px;
  }
  #navigation-menu #user-menu #user-dropdown > div {
    box-shadow: none;
    border: 0;
    background: var(--light-bg, #EAF2FF);
    border-radius: 12px;
  }
}