/* Barra superior y paneles (Alerta inventario, Novedades) con la tipografía y los estilos del portal.
   Se carga desde WEB-INF/topbar.xhtml, después de su <style>. Solo presentación. */
.layout-wrapper .layout-topbar.eskin-topbar,
.layout-wrapper .layout-topbar.eskin-topbar *,
#eskinInventoryPanel, #eskinInventoryPanel *,
#eskinNewsPanel, #eskinNewsPanel *:not(i) {
  font-family: var(--font-sans) !important;
}
.layout-wrapper .layout-topbar.eskin-topbar .fa, #eskinNewsPanel .fa { font-family: FontAwesome, "Font Awesome 6 Free" !important; }

/* ---- Botones de la barra: icono siempre visible (con o sin etiqueta) ---- */
.layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-inventory-alert-topbar > a,
.layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-news-topbar > a {
  background: var(--white) !important; border: 1px solid var(--line) !important; color: var(--ink) !important;
  box-shadow: none !important; font-weight: 600; min-height: 44px !important; min-width: 44px !important; flex: none;
}
.layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-inventory-alert-topbar > a:hover,
.layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-news-topbar > a:hover {
  background: var(--soft) !important; border-color: var(--blue) !important; color: var(--ink) !important;
}
.eskin-topbar-icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 17px; line-height: 1; }
.eskin-inventory-alert-topbar .eskin-topbar-icon { color: #c2410c; }
.eskin-news-topbar .eskin-topbar-icon { color: #15803d; }
.layout-wrapper .layout-topbar.eskin-topbar .eskin-topbar-counter { box-shadow: none !important; font-weight: 700; }
@media (max-width: 1200px) {
  .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-inventory-alert-topbar > a,
  .layout-wrapper .layout-topbar.eskin-topbar .topbar-menu > li.eskin-news-topbar > a { display: inline-flex !important; align-items: center; justify-content: center; }
  .eskin-topbar-icon { margin-right: 0; }
}

/* ---- Panel de alerta de inventario ---- */
#eskinInventoryPanel .eskin-inventory-card {
  background: var(--white) !important; border: 1px solid var(--line) !important; border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(22, 35, 74, .10) !important;
}
#eskinInventoryPanel .eskin-inventory-row { background: var(--white) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: none !important; }
#eskinInventoryPanel .eskin-inventory-row strong { color: var(--ink) !important; font-weight: 600 !important; }
#eskinInventoryPanel .eskin-inventory-qty { color: var(--ink) !important; font-weight: 700 !important; }
#eskinInventoryPanel .eskin-inventory-status {
  background: #fffbeb !important; color: #92400e !important; border: 1px solid #fde68a !important;
  border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important;
}
#eskinInventoryPanel .eskin-inventory-row.danger .eskin-inventory-status { background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
#eskinInventoryPanel .eskin-inventory-empty { background: var(--soft) !important; color: var(--muted) !important; border: 1px dashed var(--line) !important; border-radius: 12px !important; font-weight: 500 !important; }
#eskinInventoryPanel .eskin-inventory-actions { border-top: 1px solid var(--line) !important; background: transparent !important; }
#eskinInventoryPanel .eskin-inventory-actions button {
  min-height: 44px; border-radius: 999px !important; background: var(--white) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important;
}
#eskinInventoryPanel .eskin-inventory-actions button:hover { background: var(--soft) !important; }
#eskinInventoryPanel .eskin-inventory-actions button.primary { background: var(--blue) !important; border-color: var(--blue) !important; color: var(--white) !important; }
#eskinInventoryPanel .eskin-inventory-actions button.primary:hover { background: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }

/* ---- Panel de novedades ---- */
#eskinNewsPanel .eskin-news-card { border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(22, 35, 74, .10) !important; }
#eskinNewsPanel .eskin-news-eyebrow { color: var(--blue-dark) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; }
#eskinNewsPanel .eskin-news-header h3 { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
#eskinNewsPanel .eskin-news-header p, #eskinNewsPanel .eskin-news-option p { color: var(--muted) !important; }
#eskinNewsPanel .eskin-news-option { border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: none !important; }
#eskinNewsPanel .eskin-news-option:hover { border-color: var(--blue) !important; box-shadow: none !important; }
#eskinNewsPanel .eskin-news-option h4 { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
#eskinNewsPanel .eskin-news-price strong { font-weight: 700 !important; color: var(--ink) !important; }
#eskinNewsPanel .eskin-news-close { width: 44px; height: 44px; border-radius: 999px !important; box-shadow: none !important; }
#eskinNewsPanel .eskin-news-cta {
  min-height: 44px; border-radius: 999px !important; background: var(--white) !important; color: var(--blue-dark) !important;
  border: 1px solid var(--blue) !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important;
  transition: background .16s ease, color .16s ease;
}
#eskinNewsPanel .eskin-news-cta:hover { background: var(--blue-soft) !important; }
#eskinNewsPanel .eskin-news-cta.primary { background: var(--blue) !important; border-color: var(--blue) !important; color: var(--white) !important; }
#eskinNewsPanel .eskin-news-cta.primary:hover { background: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }
#eskinInventoryPanel button:focus-visible, #eskinNewsPanel button:focus-visible, .eskin-topbar a:focus-visible {
  outline: 2px solid var(--blue-dark) !important; outline-offset: 2px !important;
}