/* Hersalux · Mostrador — colores de la marca (hersalux.com) */
:root {
  --fondo: #f4f5f6;
  --tarjeta: #ffffff;
  --texto: #111111;
  --suave: #6b7280;
  --borde: #e4e6e8;
  --barra: #000000;          /* barra superior negra */
  --negro: #111111;          /* botones principales, como "Buscar" */
  --turquesa: #0e8a9a;       /* acento para texto sobre blanco */
  --turquesa-brillante: #22b5c8; /* acento sobre fondo negro */
  --turquesa-suave: #e3f5f7;
  --amarillo: #f2a900;       /* botón "Categorías" */
  --amarillo-suave: #fff6dc;
  --acento: var(--turquesa);
  --acento-suave: var(--amarillo-suave);
  --ok: #157347;
  --ok-suave: #e8f5ee;
  --mal: #b42318;
  --mal-suave: #fdecea;
  --mia: var(--amarillo-suave);
  --radio: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--fondo); color: var(--texto); }
a { color: var(--turquesa); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; color: var(--suave); }

/* Barra superior */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
         background: var(--barra); color: #fff; padding: .6rem 1rem; position: sticky; top: 0; z-index: 10; }
.barra .marca { color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; white-space: nowrap; }
.barra .marca:hover { text-decoration: none; }
.barra .marca { display: flex; align-items: center; gap: .6rem; }
.barra .marca img { height: 34px; width: auto; display: block; }
@media (max-width: 480px) { .barra .marca img { height: 28px; } .barra .marca span { font-size: .95rem; } }
.barra .marca span { font-weight: 500; color: var(--turquesa-brillante); letter-spacing: 0; }
.usuario { display: flex; align-items: center; gap: .9rem; font-size: .9rem; }
.usuario a, .usuario .enlace { color: #fff; font-weight: 600; }
.usuario a:hover, .usuario .enlace:hover { color: var(--turquesa-brillante); text-decoration: none; }
.usuario form { margin: 0; }
.enlace { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.sync { background: #1a1a1a; color: #d1d5db; font-size: .8rem; padding: .3rem 1rem; text-align: center; }

.contenido { max-width: 1280px; margin: 0 auto; padding: 1rem; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
           padding: 1rem; margin-bottom: 1rem; }
.nota { color: var(--suave); font-size: .85em; font-weight: 400; }
.aviso { background: var(--turquesa-suave); border-radius: var(--radio); padding: .7rem 1rem; margin-bottom: 1rem; }
.aviso-success { background: var(--ok-suave); color: var(--ok); }
.aviso-error { background: var(--mal-suave); color: var(--mal); }
.vacio { text-align: center; color: var(--suave); padding: 3rem 1rem; }

/* Formularios */
label { display: block; font-size: .85rem; color: var(--suave); }
select, input, textarea { width: 100%; font: inherit; padding: .55rem .6rem; margin-top: .2rem;
                          border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: var(--texto); }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--turquesa-brillante); border-color: var(--turquesa); }
select:disabled { background: #f8fafc; color: #9ca3af; }
.boton { background: var(--negro); color: #fff; border: 0; border-radius: 8px; padding: .6rem 1.2rem;
         font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.boton:hover { background: var(--turquesa); }
.busqueda { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; }
.busqueda .tarjeta { margin-bottom: 0; }
.selectores { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.texto { display: flex; gap: .5rem; align-items: end; }
.texto input { margin-top: 0; }
.login { max-width: 360px; margin: 3rem auto; }
.login label { margin-bottom: .8rem; }
.login .boton { width: 100%; }

/* Resultados */
.resumen { margin: 1.2rem 0 .6rem; }
.secciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.secciones a { background: #fff; border: 1px solid var(--amarillo); border-radius: 999px; padding: .2rem .7rem;
               font-size: .85rem; color: var(--texto); }
.secciones a span { color: var(--suave); }
.secciones a:hover { background: var(--amarillo-suave); text-decoration: none; }
.seccion { margin-bottom: 1.5rem; scroll-margin-top: 4rem; }
.seccion > h2 { border-bottom: 3px solid var(--turquesa-brillante); padding-bottom: .3rem; }
.seccion h3 { margin-top: 1rem; }

.tabla { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.fila { display: grid; align-items: start; gap: .3rem .8rem; padding: .55rem .8rem; border-top: 1px solid var(--borde);
        grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.7fr) minmax(0, 1fr)
                               repeat(var(--almacenes, 3), minmax(5.2rem, .6fr)) repeat(2, minmax(5.5rem, .8fr)); }
.fila.encabezado { border-top: 0; background: #f8fafc; font-size: .74rem; font-weight: 600; color: var(--suave);
                   text-transform: uppercase; }
.fila.encabezado > div { overflow-wrap: anywhere; }
.fila.sin-existencia { background: #fafafa; }
.fila.sin-existencia .ex { color: #9ca3af; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mia { background: var(--mia); border-radius: 4px; }
.ex { font-weight: 600; }
.precio { white-space: nowrap; }
.pieza strong { font-size: 1rem; }
.pieza a strong { color: var(--negro); }
.pieza a:hover strong { color: var(--turquesa); }
.fabricante { color: var(--suave); font-size: .85rem; margin-right: .2rem; }
.desc { display: block; color: #4b5563; font-size: .85rem; margin-top: .1rem; }
.medida { display: inline-block; background: var(--turquesa-suave); color: var(--turquesa); border-radius: 4px; font-size: .75rem;
          padding: 0 .35rem; margin-left: .3rem; vertical-align: middle; }
.medida.sobremedida { background: var(--amarillo-suave); color: #8a5a00; }
.etiqueta { display: inline-block; background: #e0f2fe; color: #075985; border-radius: 4px; font-size: .72rem;
            padding: 0 .35rem; margin-left: .3rem; }
.etiqueta.alerta { background: var(--mal-suave); color: var(--mal); }
.aplica span { display: block; font-size: .85rem; }
.aplica .anios { font-weight: 600; }
.aplica .motores, .aplica .notas { color: #4b5563; }
.aplica .posicion { color: #8a5a00; }
.clave span { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.clave .sin-sae { color: var(--mal); text-decoration: line-through; }

.equivalentes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
                background: var(--turquesa-suave); border-radius: 6px; padding: .35rem .6rem; font-size: .82rem; }
.equivalentes .titulo { color: var(--turquesa); font-weight: 600; }
.equivalente { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; background: #fff;
               border: 1px solid #bfe6eb; border-radius: 6px; padding: .1rem .45rem; }
.equivalente strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--negro); }
.equivalente .donde { color: var(--ok); font-weight: 600; padding: 0 .2rem; }
.equivalente .precios { color: var(--suave); }
.equivalentes .mas { font-size: .8rem; }
table.mini th.num { text-align: right; }

/* Ficha */
.volver { display: inline-block; margin-bottom: .8rem; }
.ficha-encabezado { display: flex; gap: 1rem; align-items: flex-start; }
.ficha-encabezado img { width: 140px; height: 140px; object-fit: contain; background: #fff;
                        border: 1px solid var(--borde); border-radius: 8px; }
.ruta { color: var(--suave); font-size: .85rem; margin: 0 0 .2rem; }
.variantes a { display: inline-block; border: 1px solid var(--borde); border-radius: 999px; padding: 0 .6rem;
               margin: .2rem .2rem 0 0; font-size: .85rem; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: .8rem 0; }
.datos div { background: #f8fafc; border-radius: 8px; padding: .4rem .6rem; }
.datos span { display: block; font-size: .75rem; color: var(--suave); }
.datos .costo { background: var(--amarillo-suave); border: 1px solid var(--amarillo); }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
table.mini { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.mini td, table.mini th { padding: .35rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; }
table.mini th { font-size: .78rem; color: var(--suave); text-transform: uppercase; }
table.mini td.num { text-align: right; font-weight: 600; }
table.mini tr.apagado td { color: #9ca3af; }
.tabla-scroll { max-height: 420px; overflow: auto; }
.tip { border-left: 3px solid var(--amarillo); padding-left: .7rem; margin-bottom: .7rem; }
.tip p { margin: .2rem 0 0; }
.reporte { display: grid; gap: .6rem; max-width: 520px; }
.reporte .boton { justify-self: start; }

/* Tablet y celular */
@media (max-width: 900px) {
  .busqueda { grid-template-columns: 1fr; }
  .selectores { grid-template-columns: 1fr 1fr; }
  .fila.encabezado { display: none; }
  .fila { grid-template-columns: repeat(var(--almacenes, 3), 1fr) 1fr 1fr; padding: .8rem; }
  .fila .pieza, .fila .aplica, .fila .clave { grid-column: 1 / -1; }
  .fila .num { text-align: left; font-size: .9rem; }
  .fila .num::before { content: attr(data-etiqueta); display: block; font-size: .7rem; font-weight: 400;
                       color: var(--suave); }
  .clave span { display: inline; margin-right: .6rem; }
  .columnas { grid-template-columns: 1fr; }
  .usuario .quien { display: none; }
}
@media (max-width: 480px) {
  .contenido { padding: .6rem; }
  .fila { grid-template-columns: repeat(var(--almacenes, 3), 1fr); }
  .fila .precio { grid-column: span 1; }
  .ficha-encabezado { flex-direction: column; }
}