/* ============ GESTOR PRECIOS V1.0 — corp iqu ============ */
:root {
  --azul: #0d2c54;
  --azul-osc: #0a2244;
  --naranja: #f7941d;
  --naranja-osc: #e07b00;
  --fondo: #eef2f7;
  --carta: #ffffff;
  --gris-borde: #e3e9f1;
  --texto: #16233b;
  --texto-suave: #6b7a90;
  --radio: 14px;
  --sombra: 0 4px 18px rgba(13, 44, 84, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body, .app, .app * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Permitir escribir y seleccionar solo en campos de entrada */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

body {
  font-family: "Segoe UI", "Inter", Arial, sans-serif;
  background: #dfe6ee;
  color: var(--texto);
}

.app {
  max-width: 1280px;
  margin: 14px auto;
  background: var(--fondo);
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.oculto { display: none !important; }

/* ============ TOPBAR ============ */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 4px 4px 14px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.brand-img { height: 88px; width: auto; display: block; }

.searchbox {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--carta);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 11px 16px;
  color: var(--texto-suave);
  box-shadow: var(--sombra);
  position: relative;
}

/* ============ SUGERENCIAS DE BÚSQUEDA ============ */
.sugerencias {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(13, 44, 84, .18);
  max-height: 380px;
  overflow-y: auto;
  z-index: 45;
  padding: 6px;
}
.sugerencia {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  font-family: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.sugerencia:hover { background: #f2f6fb; }
.sugerencia svg { width: 15px; height: 15px; color: #b6c2d2; flex: 0 0 15px; }
.sugerencia span {
  flex: 1;
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sugerencia small {
  color: var(--texto-suave);
  font-size: 12px;
  background: #eef3f9;
  border-radius: 20px;
  padding: 2px 9px;
  font-weight: 600;
}
.sugerencia .palabra {
  font-style: normal;
  border-radius: 5px;
  padding: 1px 3px;
  margin: -1px -1px;
}
.sugerencia .palabra:hover {
  background: var(--naranja);
  color: #fff;
}
.searchbox input {
  flex: 1; border: none; outline: none;
  font-size: 15px; background: transparent; color: var(--texto);
}
.filter-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--texto-suave); display: flex; padding: 4px;
}
.filter-btn:hover { color: var(--azul); }

.topbar-right { min-width: 120px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fecha-lista { font-size: 12px; color: var(--texto-suave); font-weight: 600; }

/* Chip de usuario logueado */
.usuario-chip { display: flex; align-items: center; gap: 10px; }
.usuario-datos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.usuario-nombre { font-size: 13px; font-weight: 800; color: var(--azul); }
.usuario-vence { font-size: 11px; color: var(--texto-suave); }
.btn-salir {
  border: 1px solid var(--gris-borde); background: #fff; color: var(--azul);
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.btn-salir:hover { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ============ PANTALLA DE ACCESO ============ */
.auth-gate {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(135deg, #0d2c54 0%, #103a6e 55%, #1b56a5 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 20px;
}
.auth-card {
  background: #fff; border-radius: 18px; padding: 34px 34px 26px;
  width: 100%; max-width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  text-align: center;
}
.auth-logo { height: 84px; width: auto; margin-bottom: 12px; }
.auth-card h1 { font-size: 21px; color: var(--azul); margin-bottom: 6px; }
.auth-card > p { font-size: 13px; color: var(--texto-suave); margin-bottom: 20px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.auth-card label { font-size: 12px; font-weight: 700; color: var(--texto); display: flex; flex-direction: column; gap: 5px; }
.auth-card input {
  border: 1px solid var(--gris-borde); border-radius: 10px; padding: 11px 13px;
  font-size: 14px; font-family: inherit; outline: none;
}
.auth-card input:focus { border-color: var(--naranja); }
.auth-card button[type=submit] {
  margin-top: 4px; background: var(--naranja); color: #fff; border: 0; border-radius: 10px;
  padding: 12px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.auth-card button[type=submit]:hover { background: var(--naranja-osc); }
.auth-error {
  background: #fdecec; color: #c22525; border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; text-align: center;
}
.auth-demo { margin-top: 18px; font-size: 12px; color: var(--texto-suave); }
.auth-demo b { color: var(--azul); }
.auth-pie { color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; letter-spacing: .5px; }
.auth-verificando {
  background: #fff; border-radius: 18px; padding: 40px 34px;
  width: 100%; max-width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.auth-verificando p { color: var(--texto-suave); font-size: 14px; font-weight: 700; }
.auth-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid #e3e9f1; border-top-color: var(--naranja);
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.auth-admin-btn, .auth-link-btn {
  width: 100%; margin-top: 12px; border: 1px solid var(--azul); border-radius: 10px;
  padding: 10px; background: #fff; color: var(--azul); font: 800 13px inherit; cursor: pointer;
}
.auth-admin-btn:hover { background: var(--azul); color: #fff; }
.auth-link-btn { border: 0; color: var(--texto-suave); font-weight: 600; }
.auth-link-btn:hover { color: var(--azul); }

/* ============ ADMINISTRACIÓN DE USUARIOS ============ */
.admin-panel {
  width: min(1180px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: #f4f7fb; border-radius: 20px; padding: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.admin-header {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 0 2px 20px; border-bottom: 1px solid var(--gris-borde); margin-bottom: 20px;
}
.admin-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-header h1 { color: var(--azul); font-size: 25px; margin: 3px 0 4px; }
.admin-header p { color: var(--texto-suave); font-size: 13px; }
.admin-etiqueta { color: var(--naranja); font-size: 11px; font-weight: 900; letter-spacing: 1.3px; }
.admin-grid { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-user-form, .admin-users-card {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: 14px;
  padding: 20px; box-shadow: var(--sombra);
}
.admin-user-form { display: flex; flex-direction: column; gap: 13px; }
.admin-user-form h2, .admin-users-card h2 { color: var(--azul); font-size: 17px; }
.admin-user-form label {
  display: flex; flex-direction: column; gap: 5px; color: var(--texto);
  font-size: 12px; font-weight: 750;
}
.admin-user-form input, .admin-list-header input {
  width: 100%; border: 1px solid var(--gris-borde); border-radius: 9px;
  padding: 10px 11px; font: 14px inherit; outline: none;
}
.admin-user-form input:focus, .admin-list-header input:focus { border-color: var(--naranja); }
.admin-user-form small { color: var(--texto-suave); font-weight: 500; }
.admin-user-form .admin-check { flex-direction: row; align-items: center; }
.admin-check input { width: auto; accent-color: var(--naranja); }
.admin-form-actions { display: flex; gap: 8px; }
.admin-form-actions button {
  flex: 1; border: 0; border-radius: 9px; padding: 10px; cursor: pointer;
  background: var(--naranja); color: #fff; font-weight: 800;
}
.admin-form-actions button.secundario { background: #e9eef5; color: var(--azul); }
.admin-list-header {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px;
}
.admin-list-header span { color: var(--texto-suave); font-size: 12px; }
.admin-list-header input { max-width: 230px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; padding: 9px; color: var(--texto-suave);
  border-bottom: 1px solid var(--gris-borde); font-size: 11px;
}
.admin-table td { padding: 11px 9px; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
.admin-user-name { display: flex; flex-direction: column; gap: 2px; }
.admin-user-name strong { color: var(--texto); }
.admin-user-name small { color: var(--texto-suave); }
.admin-status {
  display: inline-flex; border-radius: 20px; padding: 4px 8px;
  font-size: 10px; font-weight: 850; white-space: nowrap;
}
.admin-status.activo { color: #137333; background: #e6f4ea; }
.admin-status.inactivo { color: #9b1c1c; background: #fde8e8; }
.admin-status.vencido { color: #9a5b00; background: #fff1d6; }
.admin-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.admin-actions button {
  border: 1px solid var(--gris-borde); border-radius: 7px; padding: 5px 8px;
  background: #fff; color: var(--azul); font: 700 11px inherit; cursor: pointer;
}
.admin-actions button:hover { border-color: var(--azul); }
.admin-actions button.peligro { color: #b42318; }
.admin-mensaje { border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 700; }
.admin-mensaje.ok { color: #137333; background: #e6f4ea; }
.admin-mensaje.error { color: #b42318; background: #fde8e8; }
.admin-devices { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.admin-device-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #f5f8fc; border-radius: 8px; padding: 7px 9px;
}
.admin-device-row strong { display: block; font-size: 12px; color: var(--texto); }
.admin-device-row small { display: block; color: var(--texto-suave); font-size: 11px; margin-top: 2px; }
.admin-device-empty { color: var(--texto-suave); font-size: 11px; }
.admin-nav {
  display: flex; gap: 8px; margin: -4px 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--gris-borde);
}
.admin-nav button {
  border: 1px solid var(--gris-borde); border-radius: 9px; padding: 9px 16px;
  background: #fff; color: var(--azul); font-weight: 800; cursor: pointer;
}
.admin-nav button.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.admin-price-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-user-form select {
  width: 100%; border: 1px solid var(--gris-borde); border-radius: 9px;
  padding: 10px 11px; font: 14px inherit; outline: none; background: #fff;
}
.admin-user-form select:focus { border-color: var(--naranja); }
.admin-user-form select:disabled { background: #f1f4f8; color: #8a96a8; }
.admin-form-info { color: var(--texto-suave); font-size: 12px; line-height: 1.45; }
.price-selection-info {
  border-radius: 9px; padding: 10px; background: #eef3f9;
  color: var(--azul); font-size: 12px; font-weight: 700;
}
.admin-primary-btn {
  border: 0; border-radius: 9px; padding: 11px; background: var(--naranja);
  color: #fff; font-weight: 850; cursor: pointer;
}
.admin-primary-btn:disabled { opacity: .45; cursor: default; }
.admin-refresh-btn {
  border: 1px solid var(--gris-borde); border-radius: 8px; padding: 8px 12px;
  background: #fff; color: var(--azul); font-weight: 750; cursor: pointer;
}
.price-jobs { display: flex; flex-direction: column; gap: 10px; }
.price-job {
  border: 1px solid var(--gris-borde); border-radius: 11px; padding: 12px 14px;
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.4fr);
  gap: 10px 18px; align-items: center;
}
.price-job-title { display: flex; flex-direction: column; gap: 3px; }
.price-job-title strong { color: var(--azul); font-size: 13px; }
.price-job-title small { color: var(--texto-suave); }
.price-job-progress { display: flex; flex-direction: column; gap: 6px; }
.price-progress-track { height: 7px; border-radius: 10px; background: #e7edf5; overflow: hidden; }
.price-progress-bar { height: 100%; background: var(--naranja); border-radius: inherit; }
.price-job-stats { color: var(--texto-suave); font-size: 11px; line-height: 1.5; }
.price-job-error { color: #b42318; font-size: 11px; grid-column: 1 / -1; }

/* ============ PANEL FILTROS ============ */
.panel-filtros {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  background: var(--carta); border: 1px solid var(--gris-borde);
  border-radius: var(--radio); padding: 12px 16px; margin-bottom: 12px;
  font-size: 13px; color: var(--texto); box-shadow: var(--sombra);
}
.panel-filtros label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.panel-filtros select, .panel-filtros input[type=number] {
  border: 1px solid var(--gris-borde); border-radius: 8px; padding: 6px 8px;
  font-size: 13px; max-width: 150px; background: #fff;
}
.panel-filtros button {
  border: none; background: var(--azul); color: #fff; border-radius: 8px;
  padding: 7px 16px; cursor: pointer; font-weight: 600;
}
.panel-filtros button:hover { background: var(--azul-osc); }

/* ============ LAYOUT ============ */
.layout { display: flex; gap: 20px; align-items: flex-start; }

/* ============ SIDEBAR ============ */
.sidebar {
  width: 220px; min-width: 220px;
  background: var(--azul);
  border-radius: 20px;
  padding: 14px 12px 26px;
  box-shadow: var(--sombra);
}
.sidebar-top {
  display: flex; justify-content: center; padding: 6px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.14); margin-bottom: 12px;
}
.menu { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.menu li {
  display: flex; align-items: center; gap: 12px;
  color: #dbe4f0; font-size: 15px; font-weight: 600;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  transition: background .15s;
}
.menu li:hover { background: rgba(255,255,255,.08); }
.menu li.activo { background: var(--naranja); color: #fff; }
.menu .mi { display: flex; }
.menu .mi svg { width: 20px; height: 20px; }
.badge {
  margin-left: auto; background: #fff; color: var(--azul);
  font-size: 11px; font-weight: 800; border-radius: 20px; padding: 1px 8px;
}
.menu li.activo .badge { color: var(--naranja); }

/* ============ CONTENIDO ============ */
.contenido { flex: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.fila-paneles { display: flex; gap: 18px; align-items: stretch; }

.carta {
  background: var(--carta); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px 24px;
}

.panel-lista { flex: 1; min-width: 0; }
.panel-lista h2, .carta h2 {
  font-size: 18px; font-weight: 800; color: var(--azul);
  letter-spacing: .3px; padding-bottom: 12px; border-bottom: 1px solid var(--gris-borde);
  margin-bottom: 6px;
}

.panel-cuerpo { display: flex; gap: 18px; }
.panel-img {
  width: 170px; min-width: 170px; display: flex; align-items: center; justify-content: center;
}
.panel-img svg, .panel-img img { max-width: 100%; }

/* Tabla de productos */
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; color: var(--texto-suave); font-size: 12.5px; font-weight: 700;
  padding: 8px 10px; border-bottom: 1px solid var(--gris-borde);
}
.tabla th.der, .tabla td.der { text-align: right; }
.tabla th.cen, .tabla td.cen { text-align: center; }
.tabla td { padding: 10px; border-bottom: 1px solid #f0f4f9; vertical-align: middle; }
.tabla tbody tr { cursor: pointer; transition: background .12s; }
.tabla tbody tr:hover { background: #f5f8fc; }
.tabla .nombre { font-weight: 600; color: var(--texto); }
.tabla .codigo {
  font-weight: 800; color: var(--azul); font-family: Consolas, "Courier New", monospace;
  white-space: nowrap; font-size: 12.5px;
}
.tabla .precio { font-weight: 800; color: var(--azul); white-space: nowrap; }
.tabla .marca { color: var(--texto-suave); font-weight: 600; font-size: 13px; }

.link-tabla {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--azul); background: #eef3f9; transition: all .15s;
}
.link-tabla svg { width: 17px; height: 17px; }
.link-tabla.web:hover { background: var(--azul); color: #fff; }
.link-tabla.pdf { color: #c22525; background: #fdeeee; }
.link-tabla.pdf:hover { background: #c22525; color: #fff; }
.sin-link { color: #c2cddb; }

.accion-icono {
  border: none; background: transparent; cursor: pointer; padding: 3px;
  color: #b6c2d2; display: inline-flex; vertical-align: middle;
}
.accion-icono:hover { color: var(--naranja); }
.accion-icono.on { color: var(--naranja); }
.accion-icono.admin-precio { color: var(--azul); }
.accion-icono.admin-precio:hover { color: var(--naranja); }
.btn-actualizar-precio {
  background: var(--naranja) !important; color: #fff !important; border-color: var(--naranja) !important;
}
.accion-icono svg { width: 18px; height: 18px; }

.btn-vermas {
  display: block; width: 100%; margin-top: 14px;
  background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px;
  padding: 11px; font-size: 14px; font-weight: 600; color: var(--texto);
  cursor: pointer; transition: all .15s;
}
.btn-vermas:hover { border-color: var(--azul); color: var(--azul); }

/* Panel ficha técnica */
.panel-ficha { width: 250px; min-width: 250px; display: flex; flex-direction: column; }
.ficha-preview {
  flex: 1; margin: 10px 0 14px; position: relative;
  border: 1px solid var(--gris-borde); border-radius: 10px;
  background: #fafcff; padding: 12px; min-height: 240px;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.ficha-preview .pdf-tag {
  position: absolute; top: 10px; right: 10px;
  background: #e02b2b; color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: 5px;
}
.ficha-preview .fp-titulo { font-size: 11px; font-weight: 800; color: var(--azul); padding-right: 46px; }
.ficha-preview .fp-linea { height: 6px; border-radius: 3px; background: #e6ecf4; }
.ficha-preview .fp-linea.c { background: #d3ddea; }
.ficha-preview .fp-nombre { font-size: 10px; color: var(--texto-suave); line-height: 1.4; }
.btn-ficha {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--azul); color: #fff; border: none; border-radius: 10px;
  padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-ficha:hover { background: var(--azul-osc); }
.btn-ficha svg { width: 16px; height: 16px; }

/* ============ CATEGORIAS PRINCIPALES ============ */
.cats-principales {
  background: var(--carta); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px 26px; margin-top: 20px;
}
.cats-principales h2 { font-size: 19px; font-weight: 800; color: var(--azul); margin-bottom: 16px; }
.cats-grid { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; width: 130px; user-select: none;
  border: 0; background: transparent; font-family: inherit;
}
.cat-card .foto {
  width: 105px; height: 105px; border-radius: 50%;
  background: #f2f6fa; border: 1px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cat-card .foto svg { width: 58px; height: 58px; stroke: var(--azul); fill: none; stroke-width: 1.6; }
.cat-card:hover .foto { border-color: var(--naranja); box-shadow: 0 4px 14px rgba(247,148,29,.25); }
.cat-card span { font-size: 14px; font-weight: 700; color: var(--texto); }
.cat-card small { color: var(--texto-suave); }

/* ============ PORTADA DE LISTAS ============ */
.portada-listas { padding: 34px; }
.portada-encabezado { text-align: center; max-width: 650px; margin: 0 auto 28px; }
.portada-etiqueta {
  display: inline-block; color: var(--naranja); font-size: 12px; font-weight: 800;
  letter-spacing: 1.5px; margin-bottom: 8px;
}
.portada-encabezado h1 { color: var(--azul); font-size: 30px; margin-bottom: 8px; }
.portada-encabezado p { color: var(--texto-suave); }
.lista-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.lista-card {
  min-height: 190px; border: 2px solid var(--gris-borde); background: #fff;
  border-radius: 18px; padding: 24px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 20px; color: var(--texto);
  font-family: inherit; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.lista-card:hover {
  transform: translateY(-3px); border-color: var(--naranja);
  box-shadow: 0 12px 28px rgba(13,44,84,.14);
}
.lista-icono {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: 18px;
  display: grid; place-items: center; background: var(--azul); color: #fff;
}
.lista-card.construccion .lista-icono { background: var(--naranja); }
.lista-icono svg { width: 42px; height: 42px; }
.lista-info { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lista-info strong { color: var(--azul); font-size: 21px; }
.lista-info small { color: var(--texto-suave); font-size: 13px; }
.lista-info span { font-size: 13px; color: var(--texto-suave); }
.lista-flecha { color: var(--naranja); font-size: 30px; }
.ayuda-busqueda {
  margin-top: 24px; padding: 14px 18px; border-radius: 12px;
  background: #f4f7fb; color: var(--texto-suave); font-size: 13px; line-height: 1.5;
}
.ayuda-busqueda b { color: var(--azul); }

/* ============ CATEGORÍAS AUTOMÁTICAS ============ */
.miga { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--texto-suave); font-size: 13px; }
.miga button { border: 0; background: transparent; color: var(--naranja); cursor: pointer; font-weight: 700; }
.subtitulo-categorias { color: var(--texto-suave); font-size: 13px; margin: 10px 0 16px; }
.grid-categorias-auto {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-height: 620px; overflow-y: auto; padding: 3px;
}
.categoria-auto {
  border: 1px solid var(--gris-borde); border-radius: 11px; background: #fff;
  padding: 10px 12px; text-align: left; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 11px; transition: border-color .15s, background .15s;
}
.categoria-auto:hover { border-color: var(--naranja); background: #fffaf3; }
.categoria-auto .cat-ico {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: #eef3f9; color: var(--azul);
}
.categoria-auto:hover .cat-ico { background: var(--naranja); color: #fff; }
.categoria-auto .cat-ico svg { width: 21px; height: 21px; }
.categoria-auto .cat-textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.categoria-auto .cat-textos span { color: var(--azul); font-size: 12px; font-weight: 800; line-height: 1.3; }
.categoria-auto .cat-textos small { color: var(--texto-suave); font-size: 11px; }

/* ============ GRID PRODUCTOS (vista Productos) ============ */
.toolbar-lista {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--texto-suave); padding-bottom: 4px;
}
.toolbar-lista select {
  border: 1px solid var(--gris-borde); border-radius: 8px; padding: 6px 8px; font-size: 13px;
}
.paginacion { display: flex; gap: 6px; margin-top: 14px; justify-content: center; flex-wrap: wrap; }
.paginacion button {
  min-width: 34px; padding: 7px 10px; border: 1px solid var(--gris-borde);
  background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--texto);
}
.paginacion button.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.paginacion button:disabled { opacity: .4; cursor: default; }

/* Chips de marcas / categorías en vistas */
.grid-chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
.chip-item {
  border: 1px solid var(--gris-borde); background: #fff; border-radius: 30px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--texto);
}
.chip-item:hover { border-color: var(--naranja); color: var(--naranja); }
.chip-item small { color: var(--texto-suave); font-weight: 600; }

.vacio { text-align: center; color: var(--texto-suave); padding: 40px 10px; font-size: 14px; }

/* ============ MODAL ============ */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(10, 26, 51, .55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal-caja {
  background: #fff; border-radius: 16px; max-width: 640px; width: 100%;
  max-height: 85vh; overflow: auto; padding: 26px 30px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.modal-cerrar {
  position: absolute; top: 12px; right: 16px; border: none; background: transparent;
  font-size: 28px; cursor: pointer; color: var(--texto-suave); line-height: 1;
}
.modal-caja h3 { color: var(--azul); font-size: 18px; margin-bottom: 4px; padding-right: 30px; }
.modal-caja .m-detalle { color: var(--texto-suave); font-size: 13px; margin-bottom: 14px; }
.m-datos { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; }
.m-datos td { padding: 8px 6px; border-bottom: 1px solid #f0f4f9; }
.m-datos td:first-child { color: var(--texto-suave); font-weight: 600; width: 130px; }
.m-precio { font-size: 26px; font-weight: 800; color: var(--azul); }
.m-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.m-acciones a, .m-acciones button {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; border: 1px solid var(--gris-borde);
  background: #fff; color: var(--texto);
}
.m-acciones .primario { background: var(--azul); color: #fff; border-color: var(--azul); }
.m-acciones .primario:hover { background: var(--azul-osc); }
.m-acciones a:hover, .m-acciones button:hover { border-color: var(--azul); }

/* ============ TOAST ============ */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; font-size: 14px; font-weight: 600;
  padding: 12px 22px; border-radius: 30px; z-index: 60;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; min-width: 0; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .panel-ficha { width: 100%; min-width: 0; }
  .fila-paneles { flex-direction: column; }
  .panel-img { display: none; }
  .lista-cards { grid-template-columns: 1fr; }
  .grid-categorias-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-price-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .admin-panel { padding: 16px; max-height: calc(100vh - 20px); }
  .admin-header, .admin-list-header { align-items: stretch; flex-direction: column; }
  .admin-list-header input { max-width: none; }
  .price-job { grid-template-columns: 1fr; }
}