/* =====================================================================
 *  Tema: MJS Comercial
 *  Tomado de la propuesta de marca: azul marino de fondo, "MJS" en dorado
 *  y "COMERCIAL" en blanco. La franja bajo la barra lleva los colores de
 *  las líneas que vendrán (Snacks, Ferretería, Automotriz, Hogar).
 * ===================================================================== */

:root {
  --primario:      #E8B04B;   /* dorado: bordes, foco, franja */
  --primario-osc:  #1F2A44;   /* azul marino: botones (texto blanco) y precios */
  --suave:         #E3E7EF;
  --fondo:         #F5F6F9;
  --titulos-color: #1B2133;
  --texto:         #2A3142;
  --texto-suave:   #5F6779;
  --acento:        #E8B04B;
  --acento-claro:  #FDF3DE;

  --barra-fondo:   #1B2133;
  --barra-texto:   #FFFFFF;
  --barra-hover:   rgba(255, 255, 255, .12);

  /* Snacks (naranjo) · Ferretería (gris) · Automotriz (azul) · Hogar (verde agua) */
  --franja: linear-gradient(90deg, #E58A2B 0 25%, #8A93A6 25% 50%, #3B6FD8 50% 75%, #14998A 75% 100%);
  --titulos: "Segoe UI", system-ui, sans-serif;
}

.barra::after { height: 5px; bottom: -5px; }
.logo { height: 52px; }
.contador { background: var(--primario); color: var(--titulos-color); }
.menu .ir-admin { border-color: var(--primario); }
h1 { letter-spacing: -.01em; }