/* Megamenús de Plataformas y Servicios (definición final, 2026-10-28).
   Componente único y compartido por todas las páginas: no se hacen variantes por página.
   El HTML lo escribe herramientas/aplicar_megamenus.py. Se carga después del <style> de cada página.
   Solo aplica en escritorio (> 1100 px); por debajo el sitio usa el drawer. */

/* ---------- Tokens: fondo gris muy pálido. Para probar el celeste pálido: --mega-bg #EEF4FB y --mega-line #D3E0F0.
   En modo oscuro el panel es un azul casi negro; en alto contraste, blanco con bordes negros. ---------- */
:root
{
  /* PROPUESTA VISIBLE (iteración 12, pendiente de aprobación visual): azul pálido #EEF4FB con línea #D3E0F0.
     Para volver al gris anterior basta cambiar estas dos variables: --mega-bg #F5F5F7 · --mega-line #DEDEE3.
     Variante intermedia ya probada: #F5F8FD · #D9E3F2. */
  --mega-bg: #EEF4FB;
  --mega-line: #D3E0F0;
  --mega-ink: var(--ink);
  --mega-muted: var(--muted);
  --mega-link: var(--accent-text);
}
:root[data-mode="dark"]
{
  --mega-bg: #141A25;
  --mega-line: #2A3446;
}
@media (prefers-color-scheme: dark)
{
  :root[data-mode="auto"]
  {
    --mega-bg: #141A25;
    --mega-line: #2A3446;
  }
}
:root[data-mode="contrast"]
{
  --mega-bg: #FFFFFF;
  --mega-line: #000000;
}

/* Círculos blancos; el ícono lleva el color de su concepto (tokens --c-* de homologacion.css, los mismos de diagramas y módulos).
   Sobre el círculo blanco todos superan 3:1 (íconos). Fleet lleva su isotipo. */
.tone-web, .tone-voz { --t-fg: #0277BD; }
.tone-sistemas, .tone-sender { --t-fg: var(--c-erp, #1967D2); }
.tone-terreno { --t-fg: var(--c-logistica, #267B3D); }
.tone-comercio { --t-fg: #D45B00; }
.tone-integracion { --t-fg: var(--c-inventario, #6D4FB8); }
.tone-fleet { --t-fg: #1D1D1F; }
:root[data-mode="contrast"] :is(.tone-web, .tone-voz, .tone-sistemas, .tone-sender, .tone-terreno, .tone-comercio, .tone-integracion, .tone-fleet)
{
  --t-fg: #000000;
}

/* ---------- Panel: segundo nivel de navegación, distinto del header ---------- */
.nav-panel
{
  background: var(--mega-bg);
  border-top: 1px solid var(--mega-line);
  border-bottom: 1px solid var(--mega-line);
  box-shadow: 0 22px 32px -26px rgba(7, 26, 54, .35);
}
.nav-panel .mega
{
  display: grid;
  gap: 1.5rem;
  padding-block: 1.25rem 1.5rem;
}
.nav-panel .mega-plataformas
{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Con 3 productos visibles (el 4.º aún no se publica) se reparten en 3 columnas para no dejar un hueco a la derecha */
.nav-panel .mega-plataformas:not(:has(.mega-item:nth-child(4)))
{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nav-panel .mega-servicios
{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ---------- Ítem: círculo + nombre, descripción, «Ver más» ---------- */
.nav-panel .mega-item
{
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: .875rem;
  row-gap: .75rem;
  align-content: start;
  padding: 1rem 1.125rem;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--mega-ink);
  transition: background-color .2s, border-color .2s;
}
/* Separador sutil entre columnas */
.nav-panel .mega-item + .mega-item::before
{
  content: "";
  position: absolute;
  left: -.8125rem;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: var(--mega-line);
}
/* Hover y foco con teclado: la tarjeta se enciende en blanco y los textos pasan a oscuro */
.nav-panel .mega-item:is(:hover, :focus-visible)
{
  background: #FFFFFF;
  border-color: var(--mega-line);
}
.nav-panel .mega-item:is(:hover, :focus-visible) .mega-nom
{
  color: #1D1D1F;
}
.nav-panel .mega-item:is(:hover, :focus-visible) small
{
  color: #4A4A4F;
}
.nav-panel .mega-item:is(:hover, :focus-visible) .mega-more
{
  color: #005DCA;
}
.nav-panel .mega-item:is(:hover, :focus-visible) .mega-nom .soon
{
  color: #4A4A4F;
  border-color: #4A4A4F;
}
/* El círculo blanco necesita borde cuando la tarjeta también es blanca */
.nav-panel .mega-item:is(:hover, :focus-visible) .mega-ico
{
  box-shadow: inset 0 0 0 1px #C9CCD3;
}
/* Foco con teclado: además de encenderse, un contorno por fuera de la tarjeta */
.nav-panel .mega-item:focus-visible
{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
:root[data-mode="contrast"] .nav-panel .mega-item:is(:hover, :focus-visible)
{
  border-color: #000000;
  box-shadow: none;
}
:root[data-mode="contrast"] .nav-panel .mega-item:is(:hover, :focus-visible) :is(.mega-nom, small, .mega-more, .soon)
{
  color: #000000;
}
:root[data-mode="contrast"] .nav-panel .mega-item:is(:hover, :focus-visible) .mega-nom .soon
{
  border-color: #000000;
}
:root[data-mode="contrast"] .nav-panel .mega-item:is(:hover, :focus-visible) .mega-ico
{
  box-shadow: inset 0 0 0 2px #000000;
}

.mega-ico
{
  grid-row: 1;
  grid-column: 1;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--t-fg);
  box-shadow: inset 0 0 0 1px var(--mega-line);
}
.mega-ico .mi
{
  font-size: 1.5rem;
}
.mega-ico img
{
  height: 1.75rem;
  width: auto;
  display: block;
}

.mega-nom
{
  grid-row: 1;
  grid-column: 2;
  align-self: center;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mega-ink);
}
.mega-nom .soon
{
  font-size: .6875rem;
  font-weight: 600;
  color: var(--mega-muted);
  border: 1px solid var(--mega-muted);
  border-radius: 999px;
  padding: .05rem .4rem;
  margin-left: .4rem;
  vertical-align: middle;
  white-space: nowrap;
}
.nav-panel .mega-item small
{
  grid-row: 2;
  grid-column: 1 / -1;
  display: block;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mega-muted);
}
.mega-more
{
  grid-row: 3;
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mega-link);
}
.mega-more .mi
{
  font-size: 1.125rem;
  transition: transform .2s var(--ease);
}
.nav-panel .mega-item:hover .mega-more .mi,
.nav-panel .mega-item:focus-visible .mega-more .mi
{
  transform: translateX(3px);
}
:root[data-mode="contrast"] .mega-more
{
  text-decoration: underline;
}

/* ---------- Anchos intermedios: Servicios pasa a 3 columnas (3 + 2) ---------- */
@media (max-width: 1240px)
{
  .nav-panel .mega-servicios
  {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: .5rem;
  }
  .nav-panel .mega-servicios .mega-item:nth-child(3n + 1)::before
  {
    display: none;
  }
}

/* Sin animaciones si la persona lo pidió en el panel de accesibilidad o en el sistema */
:root[data-motion="off"] :is(.nav-panel .mega-item, .mega-more .mi)
{
  transition: none;
}
:root[data-motion="off"] .nav-panel .mega-item:hover .mega-more .mi,
:root[data-motion="off"] .nav-panel .mega-item:focus-visible .mega-more .mi
{
  transform: none;
}
@media (prefers-reduced-motion: reduce)
{
  .nav-panel .mega-item,
  .mega-more .mi
  {
    transition: none;
  }
  .nav-panel .mega-item:hover .mega-more .mi,
  .nav-panel .mega-item:focus-visible .mega-more .mi
  {
    transform: none;
  }
}