:root {
  --azul: #143a6b;
  --azul2: #1e5aa8;
  --verde: #1a7a3c;
  --gris: #f5f6f8;
  --borde: #e0e3e9;
  --texto: #1f2430;
  --tenue: #6b7280;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: #fbfcfe; }

/* Header (alineado con el mismo ancho/padding que el contenido) */
.topbar { background: linear-gradient(90deg, var(--azul), var(--azul2)); color: #fff; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 12px; max-width: min(1340px, 95vw); margin: 0 auto; padding: 0 22px; }
.logout { position: absolute; top: 50%; right: max(22px, calc((100vw - min(1340px, 95vw)) / 2 + 22px)); transform: translateY(-50%);
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; opacity: .9;
  border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 6px 12px; }
.logout:hover { opacity: 1; background: rgba(255,255,255,.14); }
.topbar { position: relative; }
.logo { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255,255,255,.16); font-weight: 800; letter-spacing: .5px; font-size: 17px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt strong { font-size: 20px; }
.brand-txt .sub { font-size: 13px; opacity: .85; }

.container { max-width: min(1340px, 95vw); margin: 0 auto; padding: 22px; }
/* El buscador se mantiene a un ancho cómodo; los resultados usan todo el ancho */
.hero, .buscador, .hint { max-width: 900px; }

/* Hero */
.hero h1 { margin: 4px 0 6px; font-size: 24px; }
.hero .lead { margin: 0 0 16px; color: var(--tenue); font-size: 15px; }
.hero em { color: var(--azul2); font-style: normal; background: #eef4fc; padding: 1px 6px; border-radius: 5px; }

/* Buscador */
.buscador { display: flex; gap: 8px; flex-wrap: wrap; }
.buscador .marca { padding: 12px 12px; font-size: 15px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; min-width: 150px; }
.input-wrap { position: relative; flex: 1; min-width: 220px; display: flex; }
.input-wrap input { width: 100%; padding: 13px 48px 13px 15px; font-size: 16px; border: 1px solid var(--borde); border-radius: 10px; }
.input-wrap input:focus { outline: 2px solid var(--azul2); outline-offset: 0; border-color: var(--azul2); }
.buscador .marca:focus { outline: 2px solid var(--azul2); border-color: var(--azul2); }
.btn-borrar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: #eef0f3; color: var(--tenue); font-size: 16px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center; }
.btn-borrar:hover { background: #e0e3e9; color: var(--texto); }
.input-wrap.tiene-texto .btn-borrar { display: flex; }
.buscador button[type=submit] { padding: 13px 24px; font-size: 16px; background: var(--azul2); color: #fff; border: 0; border-radius: 10px; cursor: pointer; font-weight: 600; }
.buscador button[type=submit]:hover { background: var(--azul); }

.hint { color: var(--tenue); font-size: 13px; margin: 12px 2px 4px; }
.hint .actualizado { color: var(--verde); }
.hint .actualizado::before { content: "● "; }
.conteo { color: var(--tenue); font-size: 13px; margin: 14px 0 6px; }
.vacio { color: var(--tenue); margin-top: 16px; }
.vacio em { color: var(--azul2); font-style: normal; }

/* Tabla */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; min-width: 940px; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #f9fbfe; }
.tabla th { background: var(--gris); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--tenue); white-space: nowrap; }
/* Separadores por origen (Proveedor / Fábrica) */
.tabla th.col-prov, .tabla td.col-prov { border-left: 1px solid var(--borde); }
.tabla th.col-fab, .tabla td.col-fab { border-left: 1px solid var(--borde); background: #fcfdff; }
.tabla td.origen { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.fab-precio { color: var(--azul2); }
.reemplazo { font-size: 11px; color: #8a3b6b; margin-top: 2px; }
.reemplazo-cod { font-size: 12px; color: #8a3b6b; font-weight: 600; }
.cargando-stock { font-size: 12px; color: #b0b6c0; font-style: italic; }
.stock-td { min-width: 150px; }

/* Fila-botón "Ver más" (se reemplaza a sí misma agregando filas nuevas) */
.vermas-td { text-align: center; padding: 14px; background: #fafbfd; }
.btn-vermas { padding: 9px 22px; font-size: 14px; font-weight: 600; color: var(--azul2);
  background: #fff; border: 1px solid var(--azul2); border-radius: 10px; cursor: pointer; }
.btn-vermas:hover { background: var(--azul2); color: #fff; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .desc { min-width: 200px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: nowrap; }
.precio { font-weight: 700; }
.sec { color: var(--tenue); }
.small { font-size: 11.5px; }
.mas { font-size: 11px; color: var(--tenue); margin-left: 3px; cursor: default; }
.mas-btn { font-size: 11px; color: var(--azul2); background: #eef2f8; border: 0; border-radius: 10px;
  padding: 1px 7px; margin: 1px 2px; cursor: pointer; }
.mas-btn:hover { background: #dde6f3; }
.tag-extra { display: none; }
.tag-extra.abierto { display: inline; }

/* Botones de acción */
.btn-stock, .btn-ford { padding: 6px 12px; font-size: 13px; border-radius: 7px; cursor: pointer; background: #fff; font-weight: 600; }
.btn-stock { border: 1px solid var(--azul2); color: var(--azul2); }
.btn-stock:hover { background: var(--azul2); color: #fff; }
.btn-ford { border: 1px solid #4a6fa5; color: #4a6fa5; }
.btn-ford:hover { background: #4a6fa5; color: #fff; }

/* Stock en vivo */
.stock { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; margin-left: 5px; }
.stock.ok { background: #e5f5ea; color: var(--verde); }
.stock.fab { background: #e8effb; color: var(--azul2); }
.stock.no { background: #fdeaea; color: #b3261e; }
.stock.nd, .stock.err { background: #f0f0f0; color: var(--tenue); }
.stock-line { display: inline-block; }

/* Ford / fábrica */
.ford { display: inline-block; padding: 2px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.ford small { font-weight: 400; opacity: .8; }
.ford.ok { background: #e8effb; color: var(--azul2); }
.ford.disc { background: #f3e8ef; color: #8a3b6b; }
.ford.na { color: #b0b6c0; font-weight: 400; }

/* Etiquetas de categoría / vehículo (en columnas) */
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; margin: 1px 2px 1px 0; }
.tag.cat { background: #eaf2ea; color: var(--verde); }
.tag.mod { background: #eef2f8; color: var(--azul2); }

/* Login */
.login-form { max-width: 360px; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.login-campo { display: flex; flex-direction: column; gap: 5px; }
.login-campo span { font-size: 13px; color: var(--tenue); font-weight: 600; }
.login-campo input { padding: 12px 14px; font-size: 15px; border: 1px solid var(--borde); border-radius: 10px; }
.login-campo input:focus { outline: 2px solid var(--azul2); outline-offset: 0; border-color: var(--azul2); }
.login-form button[type=submit] { padding: 12px 22px; font-size: 16px; background: var(--azul2); color: #fff;
  border: 0; border-radius: 10px; cursor: pointer; font-weight: 600; margin-top: 4px; }
.login-form button[type=submit]:hover { background: var(--azul); }
.login-error { background: #fdeaea; color: #b3261e; border: 1px solid #f3c2c0; border-radius: 10px;
  padding: 10px 14px; font-size: 14px; }

.htmx-indicator { opacity: 0; font-size: 13px; color: var(--tenue); transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; }

.foot { text-align: center; color: #a3a9b5; font-size: 12px; padding: 26px; }

@media (max-width: 620px) {
  .buscador { flex-direction: column; }
  .buscador .marca, .buscador input, .buscador button[type=submit] { width: 100%; }
  .tabla { font-size: 13px; }
}