/* ==========================================================================
   AG en Línea — UI Fase 1 (NC Mejoras de apariencia · Santo Creativo)
   Tokens de marca (archivos entregados 02-sep) + tipografía Inter + restyle de:
   barra superior (C06), logo (C01), barra de accesos estilo botones (C05),
   encabezado del pedido y títulos (C01), journey de Rastreo (C02),
   tarjetas Centro / Método de Entrega / Resumen (C03), Descargar PDF (C04).
   Solo presentación: no cambia funcionalidad ni UX. Carga al final de la
   cascada (header.tpl) para ganar a custom.css / módulos.
   ========================================================================== */
:root {
  --ag-navy: #003364;
  --ag-yellow: #FFC500;
  --ag-cyan: #00BFFF;
  --ag-green: #2DAC65;
  --ag-gray: #B2B2B2;
  --ag-chip: #EBF3FE;
  --ag-ink: #1F2933;
  --ag-muted: #6B7280;
  --ag-line: #E3E8EF;
  --ag-page: #F4F6FA;
  --ag-shadow: 0 6px 24px rgba(0, 51, 100, .08);
  --ag-shadow-sm: 0 4px 14px rgba(0, 51, 100, .10);
  --ag-font: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---- Tipografía y paleta base (re-tokeniza las utilidades del tema) ---- */
body { font-family: var(--ag-font); color: var(--ag-ink); }
.primary-color { color: var(--ag-navy); }
.secondary-color { color: var(--ag-yellow); }
.primary-bg-color { background-color: var(--ag-navy); }
.secondary-bg-color { background-color: var(--ag-yellow); }
.border-color-secondary { border-color: var(--ag-yellow); }
.border-color-primary { border-color: var(--ag-navy); }
.btn-primary, .btn-primary:hover { background: var(--ag-yellow); border-color: var(--ag-yellow); color: var(--ag-navy); }
.btn-secondary, .btn-secondary:hover { background: var(--ag-navy); border-color: var(--ag-navy); color: #fff; }
.btn-default, .btn-default:hover { border-color: var(--ag-navy); color: var(--ag-navy); }
a:hover, a:focus { color: var(--ag-navy); }
.breadcrumb a:after { color: var(--ag-yellow); }

/* Icono SVG inline (sprite components/ui-icons.tpl) */
.ag-ic { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: middle; flex: none; }

/* ---- C06 · Barra superior de bienvenida (hook displayNav, contenido de Visual Composer) ---- */
.logged-header-container #header .nav { background: var(--ag-navy); }
.logged-header-container #header .nav .vc_row.flex > .vc_col-sm-6:first-child { display: none; }
.logged-header-container #header .nav .vc_row.flex > .vc_col-sm-6:last-child { width: 100%; }
.logged-header-container #header .nav .justify-end { justify-content: center; position: relative; }
@media (min-width: 768px) {
  /* la altura fija solo en escritorio/tablet; en móvil el header de VC (visible-xs) trae su propia navegación */
  .logged-header-container #header .nav > .container > .vc_row.flex { min-height: 52px; }
  .logged-header-container #header .nav .justify-end { min-height: 52px; padding: 0 120px; }
}
.logged-header-container #header .nav .text-white { color: #fff; font: 500 14px/1.2 var(--ag-font); }
.logged-header-container #header .nav .secondary-color { color: var(--ag-yellow); font: 700 14px/1.2 var(--ag-font); }
.logged-header-container #header .nav .header_user_info { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); }
.logged-header-container #header .nav .header_user_info + .ml-10 { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; }
.logged-header-container #header .nav .fa-user.icon_header,
.logged-header-container #header .nav .fa-sign-out {
  display: inline-block; width: 30px; height: 30px; background-color: var(--ag-yellow);
  -webkit-mask: url(../img/ui/usuario.svg) center / contain no-repeat; mask: url(../img/ui/usuario.svg) center / contain no-repeat;
}
.logged-header-container #header .nav .fa-sign-out { -webkit-mask-image: url(../img/ui/salida.svg); mask-image: url(../img/ui/salida.svg); }
.logged-header-container #header .nav .fa-user.icon_header:before,
.logged-header-container #header .nav .fa-sign-out:before { content: none; }
/* Desplegable "Mi cuenta" (mismo ul.toogle_content de siempre, mismo JS dropDown()/slideDown de global.js):
   el tema base lo pinta con fondo #fafafa casi blanco sin borde ni sombra; sobre el fondo blanco del
   contenido bajo la barra (aviso + buscador) quedaba sin ningún borde que lo delimitara — se veía como
   un rectángulo en blanco "transparente". Se le da tarjeta propia (fondo sólido, sombra, radio) igual
   que el resto de Fase 1, sin tocar el JS de apertura/cierre ni la data. */
.logged-header-container #header .nav .header_user_info .languages-block_ul {
  z-index: 1200; background: #fff; border-radius: 12px; box-shadow: var(--ag-shadow);
  padding: 6px 0; overflow: hidden;
}
.logged-header-container #header .nav .header_user_info .languages-block_ul .login__item + .login__item { border-top: 1px solid var(--ag-line); }
.logged-header-container #header .nav .header_user_info .languages-block_ul .login__link {
  display: block; padding: 11px 18px; color: var(--ag-ink); font: 500 14px/1.3 var(--ag-font); white-space: nowrap;
}
.logged-header-container #header .nav .header_user_info .languages-block_ul .login__link:hover,
.logged-header-container #header .nav .header_user_info .languages-block_ul .login__link:focus {
  background: var(--ag-chip); color: var(--ag-navy); text-decoration: none;
}
.logged-header-container #header .nav .header_user_info a.current.active .icon_header { box-shadow: 0 0 0 3px rgba(255,255,255,.35); border-radius: 50%; }

/* ---- C01 · Logo "AG en Línea" (sustituye la imagen del bloque de Visual Composer sin tocar el contenido) ---- */
.header-row-container-01 .wpb_single_image img {
  box-sizing: border-box; width: 232px; max-width: 100%; height: 90px; padding-left: 232px;
  background: url(../img/ui/ag-en-linea-color.svg) left center / contain no-repeat;
}
/* móvil: la columna del logo es angosta (vc_col-xs-2); el logo se ajusta al ancho disponible */
#header .top .visible-xs .wpb_single_image img {
  box-sizing: border-box; width: 100%; max-width: 100%; height: 44px; padding-left: 100%;
  background: url(../img/ui/ag-en-linea-color.svg) left center / contain no-repeat;
}

/* ---- C05 · Barra de accesos estilo botones (menú horizontal iqitmegamenu, hook displayVcFullAreaBottomHeader) ---- */
.full_area_bottom_header #iqitmegamenu-horizontal { background: transparent; border: 0; box-shadow: none; }
/* El menú vertical (Categorías) es un float y el nav horizontal es position:relative: al dar altura al nav
   (accesos en flex) su caja transparente quedaba ENCIMA de la tarjeta y se tragaba el hover/click.
   Se eleva el bloque vertical (ya es position:relative) para que reciba el puntero y su desplegable
   de familias/subcategorías vuelva a abrir; 1000 < fancybox (8000+) para no tapar modales. */
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top { margin-right: 14px; position: relative; z-index: 1000; }
/* "Categorías" al MISMO tamaño y estilo que los 5 accesos (Marketing AG, 11-sep): 54 px de alto (= 26 icono +
   13+13 padding + 1+1 borde de los accesos), borde, sombra y hover iguales. El CSS custom del módulo trae
   `padding-left:0 !important` y `line-height:45px`, por eso aquí van con !important. */
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-title {
  display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; height: 54px;
  padding: 0 22px !important; background: #fff; color: var(--ag-navy); border: 1px solid #EEF2F7;
  border-radius: 12px; box-shadow: var(--ag-shadow-sm); font: 600 15px/1 var(--ag-font) !important;
  cursor: pointer; transition: background .15s, box-shadow .15s;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-title .icon {
  font-size: 20px; width: 26px; line-height: 1; text-align: center; color: var(--ag-cyan); margin: 0 !important;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top:hover .cbp-vertical-title,
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top.cbp-vert-expanded .cbp-vertical-title {
  background: var(--ag-chip); box-shadow: 0 8px 18px rgba(0, 51, 100, .14);
}

/* ---- Historial · filtros "Tu listado de pedidos" (Marketing AG, 11-sep): botón Filtrar más amplio y
   placeholders grises tipo CTA en Pedido / Orden de compra (form de mfordersmultisales, hook displayTopHistory) ---- */
#HistoryFilterForm .form-control::placeholder { color: #9AA3AF; opacity: 1; }
#HistoryFilterForm .form-control::-webkit-input-placeholder { color: #9AA3AF; }
#HistoryFilterForm .form-control:-ms-input-placeholder { color: #9AA3AF; }
#HistoryFilterForm .form-control { font-family: var(--ag-font); }
#HistoryFilterForm button[name="submitFilters"] {
  min-width: 170px; padding: 11px 28px; font: 600 15px/1.2 var(--ag-font); border-radius: 10px;
  box-shadow: var(--ag-shadow-sm);
}
#HistoryFilterForm button[name="submitFilters"] .fa { margin-right: 6px; }
#HistoryFilterForm button[name="resetFilters"] { padding: 11px 22px; font: 500 14px/1.2 var(--ag-font); border-radius: 10px; }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab { float: none; margin: 0; }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab > a {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ag-navy);
  border: 1px solid #EEF2F7; border-radius: 12px; box-shadow: var(--ag-shadow-sm); padding: 13px 22px;
  font: 600 15px/1 var(--ag-font); text-transform: none; transition: background .15s, box-shadow .15s, transform .15s;
}
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab > a:hover,
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab > a:focus {
  background: var(--ag-chip); color: var(--ag-navy); box-shadow: 0 8px 18px rgba(0, 51, 100, .14); transform: translateY(-1px);
}
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab > a .cbp-tab-title { color: inherit; font: inherit; }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab > a:before {
  content: ""; display: inline-block; width: 26px; height: 26px; flex: none; background-color: var(--ag-cyan);
  -webkit-mask: url(../img/ui/mi-cuenta.svg) center / contain no-repeat; mask: url(../img/ui/mi-cuenta.svg) center / contain no-repeat;
}
/* icono por pestaña (id_tab de iqitmegamenu): misma especificidad que la regla genérica para que gane por orden.
   Rastreo lleva DOS ids porque el contenido del menu vive en la DB de cada ambiente: 56 en QA, 57 en PRD
   (en PRD el 56 ya estaba ocupado por 'Pedido rapido'). Ambos apuntan al mismo icono: la regla es portable. */
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab-53 > a:before { -webkit-mask-image: url(../img/ui/mi-cuenta.svg); mask-image: url(../img/ui/mi-cuenta.svg); }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab-40 > a:before { -webkit-mask-image: url(../img/ui/mis-pedidos.svg); mask-image: url(../img/ui/mis-pedidos.svg); }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab-54 > a:before { -webkit-mask-image: url(../img/ui/estado-cuenta.svg); mask-image: url(../img/ui/estado-cuenta.svg); }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab-39 > a:before { -webkit-mask-image: url(../img/ui/soporte.svg); mask-image: url(../img/ui/soporte.svg); }
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab-56 > a:before,
.full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab-57 > a:before { -webkit-mask-image: url(../img/ui/rastreo.svg); mask-image: url(../img/ui/rastreo.svg); }
/* estado activo por página (el módulo no marca la pestaña actual) */
body#identity .full_area_bottom_header #cbp-hrmenu .cbp-hrmenu-tab-53 > a,
body#my-account .full_area_bottom_header #cbp-hrmenu .cbp-hrmenu-tab-53 > a,
body#history .full_area_bottom_header #cbp-hrmenu .cbp-hrmenu-tab-40 > a,
body#order-detail .full_area_bottom_header #cbp-hrmenu .cbp-hrmenu-tab-56 > a,
body#order-detail .full_area_bottom_header #cbp-hrmenu .cbp-hrmenu-tab-57 > a,
body#module-utilmodule-AccountsPayable .full_area_bottom_header #cbp-hrmenu .cbp-hrmenu-tab-54 > a,
body#module-displaymessagesmyaccount-default .full_area_bottom_header #cbp-hrmenu .cbp-hrmenu-tab-39 > a {
  background: var(--ag-chip); box-shadow: 0 8px 18px rgba(0, 51, 100, .14);
}
.full_area_bottom_header .hr-menu, .full_area_bottom_header .vc_separator.hr-menu { display: none; }

/* ---- C01 · Encabezado del pedido y títulos de sección ---- */
.ag-order-head { margin-bottom: 18px; }
.ag-folio { font: 800 26px/1.2 var(--ag-font); color: var(--ag-navy); letter-spacing: -.01em; }
.ag-folio small { display: inline-block; margin-left: 12px; font: 500 13px/1 var(--ag-font); color: var(--ag-muted); vertical-align: middle; }
.ag-chip {
  display: inline-block; background: var(--ag-chip); color: var(--ag-navy); border-radius: 10px;
  padding: 9px 16px; font: 600 15px/1.1 var(--ag-font); white-space: nowrap;
}
.ag-section-title { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--ag-line); margin: 6px 0 18px; }
.ag-section-title__text { font: 700 16px/1.2 var(--ag-font); color: var(--ag-navy); padding: 0 2px 10px; margin-bottom: -1px; border-bottom: 3px solid var(--ag-yellow); }

/* ---- C02 · Journey de Rastreo ---- */
.oj-row { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; }
.oj-wrap { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.oj-track { display: flex; align-items: flex-start; min-width: 900px; padding: 12px 4px 6px; }
.oj-step { flex: 1; min-width: 78px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.oj-step .oj-ln { position: absolute; top: 27px; left: -50%; width: 100%; height: 0; border-top: 2px dashed var(--ag-gray); z-index: 0; }
.oj-step:first-child .oj-ln { display: none; }
.oj-step.oj-done .oj-ln, .oj-step.oj-cur .oj-ln { border-color: var(--ag-green); }
.oj-step .oj-ic {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ag-gray); background: #fff; color: var(--ag-gray);
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
}
.oj-step .oj-ic .ag-ic { width: 30px; height: 30px; }
.oj-step.oj-done .oj-ic { border-color: var(--ag-green); color: var(--ag-green); }
.oj-step.oj-cur .oj-ic { border-color: var(--ag-navy); color: var(--ag-navy); box-shadow: 0 0 0 4px rgba(0, 51, 100, .08); }
.oj-step .oj-nm { font: 500 12px/1.25 var(--ag-font); color: var(--ag-gray); margin-top: 8px; max-width: 104px; }
.oj-step.oj-done .oj-nm { color: var(--ag-green); font-weight: 600; }
.oj-step.oj-cur .oj-nm { color: var(--ag-navy); font-weight: 700; }
.oj-step .oj-dt { font: 400 10.5px/1.2 var(--ag-font); color: var(--ag-muted); margin-top: 3px; }
.oj-step .oj-dt.oj-p { color: var(--ag-gray); font-style: italic; }

/* ---- C04 · Descargar PDF / archivo ---- */
.ag-btn-download {
  display: inline-flex; align-items: center; gap: 10px; flex: none; background: #fff; color: var(--ag-navy);
  border: 1px solid #EEF2F7; border-radius: 12px; box-shadow: var(--ag-shadow-sm); padding: 13px 18px;
  font: 600 15px/1 var(--ag-font); white-space: nowrap; text-decoration: none;
}
.ag-btn-download:hover, .ag-btn-download:focus { color: var(--ag-navy); background: var(--ag-chip); text-decoration: none; }
.ag-btn-download .ag-ic { width: 22px; height: 22px; color: var(--ag-cyan); }
.ag-link-download { display: inline-flex; align-items: center; gap: 8px; color: var(--ag-navy); font-weight: 600; }
.ag-link-download:hover { color: var(--ag-navy); text-decoration: underline; }
.ag-link-download .ag-ic { width: 20px; height: 20px; color: var(--ag-cyan); }

/* ---- C03 · Tarjetas Centro / Método de Entrega / Resumen ---- */
.ag-cards { align-items: stretch; }
.ag-card { background: #fff; border-radius: 16px; box-shadow: var(--ag-shadow); padding: 20px 22px 22px; }
.ag-card .text-base, .ag-card .primary-color { line-height: 1.45; }
.ag-card .text-gray { color: #4B5563; }
.ag-card__head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.ag-card__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ag-chip); color: var(--ag-navy); display: flex; align-items: center; justify-content: center; flex: none; }
.ag-card__icon .ag-ic { width: 22px; height: 22px; }
.ag-card__title { font: 700 17px/1.2 var(--ag-font); color: var(--ag-navy); }
.ag-chip-info {
  display: flex; align-items: center; gap: 12px; background: var(--ag-chip); color: var(--ag-navy); border-radius: 12px;
  padding: 12px 14px; margin: 0 0 14px; font: 600 14px/1.3 var(--ag-font);
}
.ag-chip-info .ag-ic { width: 28px; height: 28px; color: var(--ag-navy); }
.ag-card .alert-danger { border-radius: 10px; }
/* Resumen: partidas con scroll interno */
.ag-card--summary .ag-summary-scroll { max-height: 380px; overflow-y: auto; padding-right: 6px; margin-bottom: 6px; }
.ag-card--summary .checkout_summary_cart_row { padding: 10px 0; border-bottom: 1px solid var(--ag-line); }
.ag-card--summary .checkout_summary_cart_row:last-child { border-bottom: 0; }
.ag-card--summary .checkout_summary_cart_row img { width: 72px !important; height: 72px; object-fit: contain; border-radius: 8px; background: #F8FAFC; }
.ag-card--summary .checkout_summary_cart_row p { margin: 0; line-height: 1.3; }
.ag-card--summary .checkout_summary_cart_row .text-gray { color: var(--ag-ink); font-weight: 600; font-size: 14px; }
.ag-card--summary .checkout_summary_cart_row .secondary-color { color: #E5A800; font-weight: 700; }
.ag-card--summary .checkout_summary_cart_row .primary-color { font-weight: 700; }
.ag-card--summary .spacer { border-top: 1px solid var(--ag-line); }
.ag-card--summary .flex.justify-between { padding: 3px 0; font-size: 14px; }
.ag-card--summary .flex.justify-between.secondary-color { color: #E5A800; font-weight: 600; }
.ag-card--summary .flex.justify-between.font-bold { font-size: 16px; }
/* fondo de página del Resumen del Pedido para resaltar las tarjetas */
body#order-detail .columns-container { background: var(--ag-page); padding-bottom: 24px; }
body#order-detail .breadcrumb { background: transparent; }

/* ---- Responsive ---- */
@media (max-width: 1199px) {
  .oj-row { flex-direction: column; align-items: stretch; }
  .ag-btn-download { align-self: flex-end; }
  .logged-header-container #header .nav .justify-end { padding: 0 110px 0 10px; justify-content: flex-start; }
}
@media (max-width: 767px) {
  .ag-card { padding: 16px; margin-bottom: 14px; }
  .ag-folio { font-size: 22px; }
  .ag-folio small { display: block; margin: 4px 0 0; }
  .oj-track { min-width: 760px; }
  .full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab > a { padding: 11px 14px; font-size: 13px; }
  .logged-header-container #header .nav .justify-end { padding: 0 100px 0 8px; }
  .logged-header-container #header .nav .text-white, .logged-header-container #header .nav .secondary-color { font-size: 12px; }
}