:root {
  /* Tokens de color — paleta B2B industrial profesional (especificación §44).
     Se ajustará cuando existan los colores corporativos definitivos. */
  --smelpro-azul-900: #0b2436;
  --smelpro-azul-800: #12364f;
  --smelpro-azul-700: #1a4a6b;
  --smelpro-acento: #1f7a8c;
  --smelpro-acento-suave: #e3f2f4;
  --smelpro-texto: #1f2d3a;
  --smelpro-texto-suave: #5b6b7a;
  --smelpro-fondo: #f3f6f8;
  --smelpro-borde: #d9e2e8;
  --smelpro-ok: #2e7d32;
  --smelpro-warn: #b26a00;
  --smelpro-danger: #b3261e;
}

body.bg-app {
  background-color: var(--smelpro-fondo);
  color: var(--smelpro-texto);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Resumen económico: tarjetas de igual tamaño y jerarquía tipográfica. */
.resumen-economico-card {
  min-height: 4.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.resumen-economico-card strong {
  line-height: 1.2;
  letter-spacing: .01em;
}
@media (max-width: 575.98px) {
  .resumen-economico-card { min-height: 4.5rem; }
}

.app-navbar {
  background: linear-gradient(90deg, var(--smelpro-azul-900), var(--smelpro-azul-700));
}

/* Logo oficial Smelpro en la navbar: proporción manual (842x596 ≈ 1.41),
   sin deformar, adaptado a la altura existente del navbar. */
.navbar-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  display: inline-block;
}

.app-card {
  background: #fff;
  border: 1px solid var(--smelpro-borde);
  border-radius: 0.75rem;
}

.app-card .card-header {
  background: var(--smelpro-azul-900);
  color: #fff;
  border-radius: 0.75rem 0.75rem 0 0;
  font-weight: 600;
}

.app-rol-ceo { background: #6a1b9a; }
.app-rol-vendedor { background: #1565c0; }
.app-rol-operaciones { background: #00695c; }
.app-rol-admin_tecnico { background: #455a64; }

.app-tabla th {
  background: var(--smelpro-azul-800);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}

.app-badge-estado { font-size: 0.75rem; letter-spacing: 0.02em; }

.estado-BORRADOR { background: #eceff1; color: #37474f; }
.estado-PREPARANDO { background: #fff3e0; color: #b26a00; }
.estado-ENVIADA { background: #e3f2fd; color: #1565c0; }
.estado-SEGUIMIENTO { background: #e8f5e9; color: #2e7d32; }
.estado-GANADA { background: #2e7d32; color: #fff; }
.estado-PERDIDA { background: #ffebee; color: #b3261e; }
.estado-CANCELADA { background: #eceff1; color: #607d8b; }

/* Cabecera de revisión y resumen compacto de cliente/contacto. */
.revision-cabecera { min-width: 0; }
.revision-asunto { font-size: 1.05rem; line-height: 1.35; }
.revision-meta { line-height: 1.45; }
.revision-pill {
  color: #1f5f91;
  background: #e8f2fb;
  border: 1px solid #c4d9ea;
  font-weight: 600;
}
.revision-condiciones-toggle { color: inherit; }
.revision-condiciones-toggle:hover { color: var(--smelpro-azul-700); }
.revision-condiciones-resumen {
  color: var(--smelpro-texto-suave);
  background: #f8fafc;
  border-bottom: 1px solid var(--smelpro-borde);
  line-height: 1.45;
}
.contacto-preview {
  /* Vista previa compacta del contacto: Cargo · Correo · Teléfono. */
  font-size: 0.8rem;
  color: var(--smelpro-texto-suave);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.contacto-sin-registros {
  font-size: 0.8rem;
  color: var(--smelpro-texto-suave);
}

/* Composicion interna: franja sobria, diferenciada de los encabezados azules */
.composicion-badge {
  background: #eef2f6;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tabla-componentes thead th {
  background: #eaf1f6;
  color: #52687a;
  font-weight: 600;
  font-size: 0.75rem;
  border-bottom: 1px solid #cbd8e1;
}

/* Jerarquía visual de ítems y componentes internos de la cotización. */
.item-principal-row > td,
.item-principal-row.tiene-componentes > td {
  background-color: #fff !important;
  background-image: none !important;
  border-top: 1px solid #d6e0e7;
  border-bottom-color: #d6e0e7;
}
.item-principal-row.tiene-componentes > td {
  background-color: #f8fbfe !important;
  border-top-color: #b9d2ea;
}
.item-principal-row.tiene-componentes > td:first-child {
  box-shadow: inset 3px 0 0 #2f75b5;
}
.item-principal-row:hover > td,
.item-principal-row.tiene-componentes:hover > td {
  background-color: #eef5fa !important;
}
.item-controles {
  display: grid;
  grid-template-columns: 1.25rem 1.85rem 1.65rem;
  align-items: center;
  column-gap: .4rem;
  width: max-content;
  min-width: 5.5rem;
}
.item-controles .js-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  margin: 0 !important;
  color: #58758d !important;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.18rem;
  opacity: .95;
}
.item-controles .js-drag-handle:hover { color: #1f5f91 !important; }
.item-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.65rem;
  color: #fff;
  background: #123f79;
  border-radius: .3rem;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(11, 36, 54, .18);
}
.item-collapse-toggle,
.item-collapse-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
}
.item-collapse-toggle {
  padding: 0;
  color: #1f5f91;
  background: #f1f7fc;
  border: 1px solid #b8ccdc;
  border-radius: .42rem;
  font-size: .9rem;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.item-collapse-toggle:hover,
.item-collapse-toggle[aria-expanded="true"] {
  color: #fff;
  background: #2f75b5;
  border-color: #2f75b5;
}
.item-collapse-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 .18rem rgba(47, 117, 181, .22); }
.item-collapse-toggle .bi-chevron-down { transition: transform .18s ease; }
.item-collapse-toggle[aria-expanded="false"] .bi-chevron-down { transform: rotate(-90deg); }
.componentes-row > td { background: #f4f8fb !important; }
.componentes-panel {
  margin: .35rem .75rem .25rem 2rem;
  padding: .28rem .55rem;
  background: #f7f9fb;
  border: 1px solid #d5e0e8;
  border-left: 3px solid #8eacc4;
  border-radius: .45rem;
}
.componentes-panel .tabla-componentes { margin-top: .25rem; }
.componentes-row > td > .tabla-componentes {
  width: calc(100% - 2.75rem);
  margin-left: 2rem !important;
  margin-right: .75rem;
  border: 1px solid #d5e0e8;
  border-radius: .35rem;
  overflow: hidden;
}
.componente-interno-row > td {
  background-color: #fff !important;
  border-color: #dde5eb;
  padding-top: .3rem;
  padding-bottom: .3rem;
}
.componente-interno-row:hover > td { background-color: #eef5fa !important; }
.componente-numero {
  display: inline-block;
  min-width: 2.2rem;
  color: #365b78;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
  .componentes-panel { margin-left: .65rem; margin-right: .35rem; }
}

/* Listado principal de cotizaciones: columnas compactas y cliente/asunto amplios. */
.cotizaciones-lista .col-fecha { width: 7.5rem; }
.cotizaciones-lista .col-pea { width: 8.5rem; }
.cotizaciones-lista .col-cliente { width: 21%; }
.cotizaciones-lista .col-descripcion { width: 23%; }
.cotizaciones-lista .col-vendedor { width: 13%; }
.cotizaciones-lista .col-revision { width: 6rem; }
.cotizaciones-lista .col-estado { width: 8rem; }
.cotizaciones-lista .col-accion { width: 5rem; }
.cotizaciones-lista .cliente-cell,
.cotizaciones-lista .descripcion-cell,
.cotizaciones-lista .vendedor-cell {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cotizaciones-lista .descripcion-cell { color: var(--smelpro-texto); }
@media (max-width: 991.98px) {
  .cotizaciones-lista { min-width: 900px; }
}

/* Paginación común server-side para listados. */
.list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  flex-wrap: wrap;
  background: #fff;
}
.list-pagination-info { white-space: nowrap; }
.list-pagination-size select { width: 4.5rem; }
.list-pagination-nav { margin-left: auto; }
.list-pagination .page-link { color: var(--smelpro-azul-700); }
.list-pagination .page-item.active .page-link {
  color: #fff;
  background: var(--smelpro-azul-800);
  border-color: var(--smelpro-azul-800);
}
@media (max-width: 575.98px) {
  .list-pagination-info { width: 100%; }
  .list-pagination-nav { margin-left: 0; width: 100%; overflow-x: auto; }
}

/* Ficha comercial: vista previa del administrador y modal del cotizador. */
.ficha-preview-img {
  max-width: 260px;
  max-height: 200px;
  object-fit: contain;
  border: 1px solid var(--smelpro-borde);
  border-radius: .3rem;
}
.ficha-modal-img {
  display: inline-block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--smelpro-borde);
  border-radius: .3rem;
}
.ficha-descripcion {
  white-space: pre-line;
  color: var(--smelpro-texto);
}

/* Desplegable del buscador de catálogo (nuevo ítem) */
.dropdown-catalogo {
  position: absolute;
  z-index: 1080;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--smelpro-borde);
  border-radius: 0.5rem;
  box-shadow: 0 6px 18px rgba(11, 36, 54, 0.12);
}

/* Selector de NIVEL compacto tipo badge (no desborda el modal) */
.nivel-badge {
  appearance: none;
  -webkit-appearance: none;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-weight: 600;
  color: #0f172a;
  padding: 0.3rem 1.5rem 0.3rem 0.7rem;
  max-width: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}
.nivel-badge:focus {
  border-color: var(--smelpro-azul-500, #1d4ed8);
  box-shadow: 0 0 0 0.15rem rgba(29, 78, 216, 0.15);
}
.nivel-badge option {
  font-weight: 400;
}
.dropdown-catalogo .item-opcion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eef2f6;
  font-size: 0.85rem;
}
.dropdown-catalogo .item-opcion:hover,
.dropdown-catalogo .item-opcion.seleccionado {
  background: var(--smelpro-acento-suave);
}
.dropdown-catalogo .item-opcion .cod {
  font-family: "Consolas", monospace;
  font-size: 0.78rem;
  color: var(--smelpro-acento);
  white-space: nowrap;
}
.dropdown-catalogo .item-opcion .desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--smelpro-texto);
  flex: 1;
}
.dropdown-catalogo .item-opcion .precio {
  color: #2e7d32;
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ===========================================================================
   �rdenes de compra (m�dulo postventa) � badges de estados calculados.
   Misma paleta que los estados de cotizaciones (no se crea una nueva).
   =========================================================================== */
.oc-op-PENDIENTE_OC { background: #fff3e0; color: #b26a00; }
.oc-op-EN_PROCESO { background: #e3f2fd; color: #1565c0; }
.oc-op-ENTREGADO_CERRADO { background: #e8f5e9; color: #2e7d32; }
.oc-cob-NO_FACTURADO { background: #eceff1; color: #37474f; }
.oc-cob-POR_COBRAR { background: #e3f2fd; color: #1565c0; }
.oc-cob-VENCIDO { background: #ffebee; color: #b3261e; }
.oc-cob-PAGADO { background: #e8f5e9; color: #2e7d32; }
.oc-fac-POR_COBRAR { background: #e3f2fd; color: #1565c0; }
.oc-fac-VENCIDA { background: #ffebee; color: #b3261e; }
.oc-fac-PAGADA { background: #e8f5e9; color: #2e7d32; }