/* Marca de Tallers Massana: los colores de su logo y de su web (petróleo, azul del logo, cian y rojo), Poppins y Roboto. */
:root {
  --petroleo: #004466;
  --petroleo-2: #00324b;
  --cian: #2ebbe0;
  --fondo: #f1f5f7;
  --tinta: #17242c;
  --suave: #55656f;
  --tenue: #87959e;
  --linea: #dde5ea;
  --linea-2: #ebf0f3;
  --marca: #1f6f86;
  --marca-2: #185c70;
  --marca-claro: #e1f0f4;
  --azul: #1f6f86; --azul-f: #e1f0f4;
  --rojo: #a01d24; --rojo-f: #f8e8e9;
  --sombra: 0 1px 2px rgba(0, 50, 75, .06), 0 6px 20px rgba(0, 50, 75, .05);
}
body { font-family: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, .btn, .cifra b, .pestanas a, .chip, .tot-cliente, .paso-t, .siguiente h2, #menu a, #hoja-mas a, #menu-movil, .grupo-t, .paleta-grupo, .combo-tit, .hoja-num b, kbd {
  font-family: Poppins, Roboto, ui-sans-serif, system-ui, sans-serif;
}
h1 { font-weight: 600; letter-spacing: -.015em; }
h2 { font-weight: 600; }
.cifra b { font-weight: 600; letter-spacing: -.02em; }
.btn { font-weight: 500; }
:focus-visible { outline-color: var(--cian); }

/* Franja de arriba, como la de su web */
.cinta-demo { background: var(--petroleo-2); color: #cfe7ef; border-bottom: 0; font-weight: 400; letter-spacing: .01em; }
.cinta-demo::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cian); margin-right: 8px; vertical-align: 1px; }

/* Menú lateral en el petróleo de la marca, con el logo en negativo */
.lateral {
  background: linear-gradient(180deg, var(--petroleo) 0%, var(--petroleo-2) 100%); border-right: 0; color: #fff; overflow: hidden; position: sticky;
  padding: 22px 14px 18px;
}
.lateral::after {
  content: ""; position: absolute; right: -70px; bottom: -40px; width: 260px; height: 228px; pointer-events: none;
  background: url("../img/logo-negativo.svg") no-repeat center / contain; opacity: .05;
}
.marca { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 8px 6px; }
.marca-logo { height: 64px; width: auto; display: block; }
.marca small { color: rgba(255, 255, 255, .55); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
#menu a { color: rgba(255, 255, 255, .74); position: relative; font-size: 13.5px; }
#menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
#menu a.activo { background: rgba(255, 255, 255, .12); color: #fff; }
#menu a.activo::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cian); }
#menu em, #menu-movil em, #hoja-mas em { background: var(--rojo); }
#menu a.activo em { box-shadow: 0 0 0 2px var(--petroleo); }
.lateral-pie { color: rgba(255, 255, 255, .45); position: relative; z-index: 1; }

/* Botones y acentos */
.btn.primario { background: linear-gradient(180deg, #267f97, var(--marca)); border-color: var(--marca); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 2px 6px rgba(31, 111, 134, .25); }
.btn.primario:hover { background: var(--marca-2); }
.pasos-flujo .actual .paso-punto { box-shadow: 0 0 0 4px rgba(46, 187, 224, .22); }
.siguiente { border-color: #c6e1ea; background: linear-gradient(120deg, #fff 0%, #fff 45%, var(--marca-claro) 100%); position: relative; overflow: hidden; }
.siguiente::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--cian), var(--marca)); }
.siguiente.alerta::before { background: var(--rojo); }
.siguiente.ok::before { background: var(--verde); }
.siguiente p.sig-eti { color: var(--marca); }
.cifra { position: relative; overflow: hidden; }
.cifra::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--marca), var(--cian)); opacity: .55; }
.cifra.alerta::after { background: var(--rojo); opacity: .8; }
.chip.activo { background: var(--petroleo); border-color: var(--petroleo); }
.pestanas { background: #e2e9ed; }
.ubi { background: var(--marca-claro); color: var(--marca-2); }
.avatar { background: var(--marca-claro); color: var(--marca-2); }
.columna-t { background: #e6edf1; }
.tabla th { background: #f7fafb; }
.nivel i { background: linear-gradient(90deg, var(--marca), var(--cian)); }
.nivel.bajo i { background: var(--rojo); }
.combo-cod { color: var(--marca); }
#menu-nuevo button .ic, .docs .ic { color: var(--marca); }

/* Factura con su logo */
.hoja-cab { border-bottom-color: var(--petroleo); align-items: center; }
.hoja-logo { height: 64px; width: auto; display: block; margin-bottom: 4px; }
.hoja-emisor { color: var(--petroleo); font-family: Poppins, Roboto, sans-serif; }

/* Móvil: logo en la barra y menú de abajo con la marca */
.barra-logo { display: none; }
@media (max-width: 820px) {
  .barra-logo { display: block; flex: none; }
  .barra-logo img { height: 34px; width: auto; display: block; }
  #barra { background: rgba(241, 245, 247, .94); }
  #menu-movil .activo { color: var(--marca); }
  #menu-movil .activo .ic { background: var(--marca-claro); border-radius: 10px; padding: 2px 8px; width: 40px; height: 26px; box-sizing: border-box; }
}
@media print { .hoja-logo { height: 56px; } }

.marca:hover { text-decoration: none; }
.buscador-global { min-width: 0; }