:root {
  --tinta: #17212C;
  --tinta-suave: #223140;
  --oxido: #F20A37;
  --oxido-oscuro: #C8082D;
  --papel: #FFFFFF;
  --papel-tarjeta: #FFFFFF;
  --linea: #E7E5E0;
  --texto: #1C1F24;
  --texto-tenue: #6E7178;
  --verde: #3E7A54;
  --verde-fondo: #E8F1EA;
  --rojo: #AE4A3A;
  --rojo-fondo: #FAEBE7;
  --ambar-fondo: #FBF0DF;

  --fuente-cuerpo: 'elza', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fuente-titulo: 'magistral-condensed', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radio: 7px;
  --radio-chico: 5px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

.vista[hidden] { display: none; }

/* ============ LOGIN ============ */
.vista-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FBFAF8 url('/img/fondo-inicio.png') repeat; background-size: 340px;
}

.login-panel {
  width: 100%;
  max-width: 380px;
  background: var(--papel-tarjeta);
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  padding: 2.5rem 2.25rem 2.25rem;
}

.login-marca { margin-bottom: 2.25rem; }
.login-marca-nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--tinta);
  letter-spacing: -0.015em;
}
.login-marca-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--texto-tenue);
  margin-top: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-form { display: flex; flex-direction: column; gap: 1.1rem; }

.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo-label { font-size: 0.82rem; font-weight: 500; color: var(--texto); }

input[type="email"], input[type="password"], .campo-password input {
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--papel);
  color: var(--texto);
  outline: none;
  transition: border-color 0.15s ease;
}
input[type="email"]:focus, input[type="password"]:focus, .campo-password input:focus {
  border-color: var(--oxido);
  box-shadow: 0 0 0 3px rgba(201,122,61,0.15);
}

/* Campo de contraseña con el ojo para mostrarla (login, olvidé y cambiar contraseña) */
.campo-password { position: relative; display: block; }
.campo-password input { width: 100%; padding-right: 2.8rem; }
.btn-ver-password {
  position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; padding: 0; border: none; border-radius: 4px;
  background: none; color: var(--texto-tenue, #6B6F76); cursor: pointer;
}
.btn-ver-password:hover, .btn-ver-password:focus-visible { color: var(--oxido); outline: none; background: rgba(201,122,61,0.1); }
.btn-ver-password svg[hidden] { display: none; }

/* Campo rechazado al guardar (ej. desglose más largo de lo permitido) */
input.invalido { border-color: #B00020 !important; background: #FFF6F6; }
.error-campo { display: block; min-width: 9rem; margin-top: 0.2rem; color: #B00020; font-size: 0.72rem; line-height: 1.3; white-space: normal; }

.login-error {
  font-size: 0.85rem;
  color: var(--rojo);
  background: var(--rojo-fondo);
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
}

.btn {
  font-family: var(--fuente-cuerpo);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--oxido); color: #fff; }
.btn-primario:hover { background: var(--oxido-oscuro); box-shadow: 0 4px 14px rgba(189,91,46,0.3); }
.btn-ancho { width: 100%; margin-top: 0.4rem; }

.btn-texto {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-family: var(--fuente-cuerpo);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}
.btn-texto:hover { color: var(--texto); }

/* ============ APP SHELL — sidebar ============ */
.vista-app { min-height: 100vh; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #FBFAF8;
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-marca {
  padding: 0 0.6rem;
  margin-bottom: 2rem;
}
.sidebar-marca-nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--tinta);
}
.sidebar-marca-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--texto-tenue);
  margin-top: 0.15rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.nav-item {
  background: none;
  border: none;
  border-radius: var(--radio-chico);
  color: var(--texto-tenue);
  font-family: var(--fuente-cuerpo);
  font-size: 0.87rem;
  font-weight: 500;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  text-align: left;
  transition: color 0.1s ease, background-color 0.1s ease;
}
.nav-item:hover { color: var(--texto); background: #F0EEE8; }
.nav-item-activo { color: var(--tinta); background: #F0EEE8; font-weight: 600; }
.nav-item-activo:hover { color: var(--tinta); }

.sidebar-usuario {
  border-top: 1px solid var(--linea);
  padding: 0.9rem 0.6rem 0 0.6rem;
  margin-top: 0.9rem;
}
.sidebar-usuario-info { margin-bottom: 0.5rem; }
.usuario-nombre { display: block; font-size: 0.85rem; font-weight: 600; color: var(--texto); }
.usuario-rol {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--ambar-fondo);
  color: var(--oxido-oscuro);
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
}
.sidebar-usuario-accion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.3rem 0;
  font-size: 0.8rem;
}

.contenido { flex: 1; min-width: 0; max-width: 1100px; padding: 2.25rem 2.5rem 4rem; }

.panel[hidden] { display: none; }

.panel-encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.panel-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tinta);
}
.panel-subtitulo {
  font-size: 0.88rem;
  color: var(--texto-tenue);
  margin: 0.25rem 0 0;
}

.btn-secundario {
  background: #fff;
  color: var(--tinta);
  border: 1px solid var(--linea);
}
.btn-secundario:hover { background: #F5F4F1; }

/* ---- filtros ---- */
.filtros-barra {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.filtro-input, .filtro-select {
  font-family: var(--fuente-cuerpo);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: #fff;
  color: var(--texto);
  outline: none;
}
.filtro-input { flex: 1 1 240px; min-width: 200px; }
.filtro-input:focus, .filtro-select:focus {
  border-color: var(--oxido);
  box-shadow: 0 0 0 3px rgba(201,122,61,0.12);
}
.filtro-select { cursor: pointer; }

/* ---- paginación ---- */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.25rem;
}
.paginacion[hidden] { display: none; }
.paginacion-info { font-size: 0.83rem; color: var(--texto-tenue); }
.paginacion .btn-texto:disabled { opacity: 0.35; cursor: default; }
.paginacion .btn-texto:disabled:hover { color: var(--texto-tenue); }

.estado-carga, .estado-vacio {
  padding: 3rem 0;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 0.92rem;
}

/* ============ TABLA ============ */
.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel-tarjeta);
  border-radius: 4px;
  border: 1px solid var(--linea);
  overflow: hidden;
}
.tabla thead th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--texto-tenue);
  font-weight: 600;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--linea);
  background: #F4F2EC;
}
.tabla tbody td {
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--linea);
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr.fila-clic { cursor: pointer; transition: background-color 0.1s ease; }
.tabla tbody tr.fila-clic:hover { background: #F8F6F3; }

.tabla-compacta thead th, .tabla-compacta tbody td { padding: 0.55rem 0.75rem; font-size: 0.85rem; }

.celda-folio { font-weight: 600; color: var(--tinta); }
.celda-total { font-variant-numeric: tabular-nums; }

/* ============ BADGES DE ESTATUS ============ */
.badge-estatus {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
}
.badge-nuevo { background: #EDEEF0; color: #4B5157; }
.badge-diseno { background: var(--ambar-fondo); color: var(--oxido-oscuro); }
.badge-produccion { background: #E7EEF8; color: #35578C; }
.badge-listo { background: #F1E9F9; color: #6E4A9E; }
.badge-entregado { background: var(--verde-fondo); color: var(--verde); }
.badge-cancelado { background: var(--rojo-fondo); color: var(--rojo); }

/* ============ DETALLE DE PEDIDO ============ */
.btn-volver {
  background: none;
  border: none;
  color: var(--texto-tenue);
  font-family: var(--fuente-cuerpo);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}
.btn-volver:hover { color: var(--tinta); }

.detalle-resumen-estado { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; margin-bottom: 0.3rem; }
.resumen-badge { font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 12px; display: inline-flex; align-items: center; gap: 0.3rem; }
.resumen-badge-ok { background: #E8F5E9; color: #2E7D32; }
.resumen-badge-pendiente { background: #FFF3E0; color: #E65100; }
.resumen-badge-alerta { background: #FBEAEA; color: #B00020; }
.resumen-badge-neutral { background: #EDEBE5; color: #6B6F76; }
.tarjeta-titulo-colapsable { cursor: pointer; user-select: none; }
.tarjeta-resumen { font-size: 0.78rem; font-weight: 400; color: var(--texto-tenue); margin-left: 0.5rem; }
.tarjeta-chevron { font-size: 0.8rem; color: var(--texto-tenue); transition: transform 0.15s ease; margin-left: auto; }
.tarjeta-chevron.tarjeta-chevron-colapsado { transform: rotate(-90deg); }


.detalle-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.detalle-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.detalle-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.tarjeta {
  background: var(--papel-tarjeta);
  border-radius: 4px;
  border: 1px solid var(--linea);
  padding: 1.25rem 1.35rem 1.4rem;
  margin-bottom: 1.5rem;
}
.tarjeta:last-child { margin-bottom: 0; }
.tarjeta-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
  color: var(--tinta);
}

/* ---- checklist de diseño ---- */
.checklist { display: flex; flex-direction: column; gap: 0.6rem; }
.checklist[hidden] { display: none; }
.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
}
.checklist-marca {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.checklist-marca-ok { background: var(--verde-fondo); color: var(--verde); }
.checklist-marca-pendiente { background: #EDEEF0; color: #9AA0A6; }
.checklist-completo {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
}
.checklist-completo-si { background: var(--verde-fondo); color: var(--verde); }
.checklist-completo-no { background: var(--ambar-fondo); color: var(--oxido-oscuro); }

/* ---- historial ---- */
.historial { list-style: none; margin: 0; padding: 0; }
.historial-item {
  position: relative;
  padding: 0 0 1.1rem 1.1rem;
  border-left: 2px solid var(--linea);
  margin-left: 0.35rem;
}
.historial-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.historial-item::before {
  content: '';
  position: absolute;
  left: -5px; top: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--oxido);
}
.historial-estatus { font-size: 0.85rem; font-weight: 600; color: var(--tinta); }
.historial-detalle { font-size: 0.8rem; color: var(--texto-tenue); margin-top: 0.15rem; }
.historial-fecha { font-size: 0.72rem; color: #9AA0A6; margin-top: 0.2rem; }

@media (max-width: 780px) {
  .detalle-grid { grid-template-columns: 1fr; }
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--linea); }
  .sidebar-nav { flex-direction: row; overflow-x: auto; gap: 0.3rem; }
  .contenido { padding: 1.25rem 1rem 3rem; }
}

/* ============ MÓDULOS GENÉRICOS (Clientes, Producción, Catálogo, Cotizaciones) ============ */
.panel-generico[hidden] { display: none; }

.badge-si { background: var(--verde-fondo); color: var(--verde); }
.badge-no { background: #EDEEF0; color: #6B6F76; }

/* ============ IMPRESIÓN ============ */
@media print {
  .no-imprimir, .sidebar, .filtros-barra, .paginacion, #panel-lista { display: none !important; }
  body { background: #fff; }
  .contenido { max-width: 100%; padding: 0; margin: 0; }
  .panel[hidden] { display: none !important; }
  #panel-detalle { display: block !important; }
  .tarjeta { box-shadow: none; border: 1px solid var(--linea); break-inside: avoid; }
  .detalle-grid { grid-template-columns: 1fr 1fr; }

  body:has(#modal-ver-cotizacion:not([hidden])) > *:not(#modal-ver-cotizacion) { display: none !important; }
  #modal-ver-cotizacion { position: static !important; background: none !important; padding: 0 !important; display: block !important; }
  #modal-ver-cotizacion .modal-caja { box-shadow: none !important; max-height: none !important; max-width: 100% !important; }
  body:has(#panel-impresion-pedido:not([hidden])) > *:not(#panel-impresion-pedido) { display: none !important; }
  #panel-impresion-pedido { position: static !important; }
  .panel-impresion { padding: 0.7rem !important; }
  .pi-encabezado { margin-bottom: 0.6rem !important; padding-bottom: 0.5rem !important; }
  .pi-titulo { margin: 0.3rem 0 !important; font-size: 1.1rem !important; }
  .pi-datos-grid { margin-bottom: 0.6rem !important; }
  body:has(#panel-impresion-ot:not([hidden])) > *:not(#panel-impresion-ot) { display: none !important; }
  #panel-impresion-ot { position: static !important; }
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(27,36,48,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}
.modal-overlay[hidden] { display: none; }

#modal-seleccionar-catalogo { z-index: 200; }

.modal-caja {
  background: #fff;
  border-radius: 6px;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}

.modal-encabezado {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--linea);
}
.modal-titulo { font-family: var(--fuente-titulo); font-size: 1.2rem; font-weight: 600; color: var(--tinta); margin: 0; }

.modal-cuerpo { padding: 1.25rem 1.35rem; overflow-y: auto; flex: 1; }

.filtro-select-ancho { width: 100%; padding: 0.6rem 0.7rem; }

.nc-items-encabezado {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.1rem; margin-bottom: 0.5rem;
}
.nc-items { display: flex; flex-direction: column; gap: 0.6rem; }

.nc-renglon {
  display: grid;
  grid-template-columns: 100px 1fr 70px 70px 90px 28px;
  gap: 0.4rem;
  align-items: center;
  background: #F8F6F3;
  border-radius: 4px;
  padding: 0.5rem;
}
.nc-renglon select, .nc-renglon input {
  font-family: var(--fuente-cuerpo);
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  width: 100%;
}
.nc-renglon-subtotal { font-size: 0.8rem; font-weight: 600; color: var(--tinta); text-align: right; }
.nc-quitar-renglon {
  background: none; border: none; color: var(--rojo); cursor: pointer; font-size: 1rem; padding: 0;
}

.nc-totales {
  margin-top: 1.25rem;
  border-top: 1px solid var(--linea);
  padding-top: 0.9rem;
}
.nc-totales > div { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.2rem 0; color: var(--texto-tenue); }
.nc-totales strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.nc-total-final { margin-top: 0.35rem; padding-top: 0.5rem !important; border-top: 1px dashed var(--linea); }
.nc-total-final span, .nc-total-final strong { font-size: 1rem; color: var(--tinta) !important; }

.modal-pie {
  display: flex; justify-content: flex-end; gap: 0.75rem;
  padding: 1rem 1.35rem;
  border-top: 1px solid var(--linea);
}

/* ---- crear cliente rápido dentro del modal ---- */
.nc-cliente-fila { display: flex; align-items: center; gap: 0.7rem; }
.nc-cliente-fila select { flex: 1; }
.nc-cliente-form {
  margin-top: 0.6rem;
  padding: 0.8rem;
  background: #F8F6F3;
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.nc-cliente-form input {
  font-family: var(--fuente-cuerpo); font-size: 0.85rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--linea); border-radius: 4px;
}
.nc-cliente-form-botones { display: flex; justify-content: flex-end; gap: 0.6rem; }

.nc-notas {
  font-family: var(--fuente-cuerpo); font-size: 0.85rem;
  padding: 0.6rem 0.7rem; border: 1px solid var(--linea); border-radius: 4px;
  resize: vertical; width: 100%;
}
.nc-fila-doble {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
  margin-top: 0.9rem;
}

/* ---- selector visual del catálogo (con fotos) ---- */
.modal-caja-ancha { max-width: 760px; }

.nc-renglon {
  grid-template-columns: 190px 1fr 34px 70px 70px 90px 28px;
}
.nc-ver-catalogo {
  background: #fff; border: 1px solid var(--linea); border-radius: 4px;
  cursor: pointer; font-size: 0.9rem; padding: 0.35rem;
  display: flex; align-items: center; justify-content: center;
}
.nc-ver-catalogo:hover { background: #F5F4F1; }

.msc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
  max-height: 55vh;
  overflow-y: auto;
}
.msc-card {
  border: 1px solid var(--linea);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.msc-card:hover { border-color: var(--oxido); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.msc-card-img {
  width: 100%; height: 110px;
  background: #F2F1EE center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #B9B5AC; font-size: 0.75rem;
}
.msc-card-info { padding: 0.55rem 0.65rem; }
.msc-card-nombre { font-size: 0.82rem; font-weight: 600; color: var(--texto); line-height: 1.25; }
.msc-card-categoria { font-size: 0.7rem; color: var(--texto-tenue); margin-top: 0.15rem; }
.msc-card-precio { font-size: 0.78rem; font-weight: 700; color: var(--oxido-oscuro); margin-top: 0.3rem; }

/* ---- botones de tipo de renglon (estilo "Desde Catalogo / Manual" del sistema viejo) ---- */
.nc-tipo-botones { display: flex; gap: 0.3rem; }
.nc-tipo-btn {
  font-family: var(--fuente-cuerpo); font-size: 0.72rem; font-weight: 600;
  padding: 0.4rem 0.5rem; border-radius: 4px; border: 1px solid var(--linea);
  background: #fff; color: var(--texto-tenue); cursor: pointer; white-space: nowrap;
}
.nc-tipo-btn:hover { background: #F5F4F1; }
.nc-tipo-btn-activo { background: var(--verde); border-color: var(--verde); color: #fff; }
.nc-tipo-btn-activo:hover { background: var(--verde); }

/* ============ NUEVA COTIZACIÓN — calcado del sistema anterior ============ */
.modal-caja-grande { max-width: 720px; }

.nc-campos-arriba {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.7rem;
}
.nc-campos-arriba input, .nc-campos-arriba select {
  font-family: var(--fuente-cuerpo); font-size: 0.85rem;
  padding: 0.55rem 0.6rem; border: 1px solid var(--linea); border-radius: 4px; width: 100%;
}

.nc-botones-agregar { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.nc-boton-agregar {
  font-family: var(--fuente-cuerpo); font-size: 0.82rem; font-weight: 600;
  padding: 0.55rem 0.9rem; border-radius: 4px; border: 1px solid var(--linea);
  background: #fff; color: var(--texto); cursor: pointer;
}
.nc-boton-agregar:hover { background: #F5F4F1; }
.nc-boton-agregar-activo { background: var(--verde); border-color: var(--verde); color: #fff; }
.nc-boton-agregar-activo:hover { background: var(--verde); }

.nc-items-vacio {
  text-align: center; color: var(--texto-tenue); font-size: 0.85rem;
  padding: 1.5rem 0; margin-top: 0.9rem;
}
.nc-items-vacio[hidden] { display: none; }

.nc-item-fila {
  display: grid;
  grid-template-columns: 1fr 70px 70px 90px 90px auto 28px;
  gap: 0.4rem;
  align-items: center;
  background: #F8F6F3;
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: 0.5rem;
}
.nc-item-fila input {
  font-family: var(--fuente-cuerpo); font-size: 0.8rem;
  padding: 0.4rem 0.5rem; border: 1px solid var(--linea); border-radius: 4px; width: 100%;
}
.nc-item-nombre-fijo {
  font-size: 0.82rem; font-weight: 600; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-item-subtotal { font-size: 0.82rem; font-weight: 600; text-align: right; color: var(--tinta); }
.nc-item-quitar { background: none; border: none; color: var(--rojo); cursor: pointer; font-size: 1rem; padding: 0; }

.nc-anticipo { color: var(--oxido-oscuro) !important; }
.nc-anticipo span, .nc-anticipo strong { color: var(--oxido-oscuro) !important; }

@media (max-width: 700px) {
  .nc-campos-arriba { grid-template-columns: 1fr 1fr; }
}

.btn-peligro { background: #fff; color: var(--rojo); border: 1px solid var(--rojo); }
.btn-peligro:hover { background: var(--rojo-fondo); }

.btn-restaurar { color: var(--verde); }
.btn-eliminar-def { color: var(--rojo); }

.tabla thead th:first-child, .tabla tbody td:first-child { width: 34px; text-align: center; }

.msc-card-nota { font-size: 0.68rem; color: var(--rojo); margin-top: 0.25rem; line-height: 1.2; }

.campo-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--texto); }
.campo-checkbox input { width: auto; }

.usuario-rol-tabla {
  background: var(--ambar-fondo) !important;
  color: var(--oxido-oscuro) !important;
}

.tabla-foto-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.tabla-foto-vacia { color: #B9B5AC; font-size: 0.75rem; }

/* ============ LISTAS EN TARJETA (Pedidos, Cotizaciones) ============ */
.lista-seleccionar-barra { margin-bottom: 0.7rem; }
.lista-seleccionar-barra[hidden] { display: none; }

.lista-tarjetas[hidden] { display: none; }
.lista-tarjetas { display: flex; flex-direction: column; gap: 0.55rem; }

.lista-tarjeta {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--papel-tarjeta);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.lista-tarjeta:hover { border-color: #D8CFC2; background: #FBFAF8; }

.lista-tarjeta-chk { display: flex; flex-shrink: 0; cursor: default; }
.lista-tarjeta-chk input { cursor: pointer; }

.lista-tarjeta-principal { flex: 1; min-width: 0; }
.lista-tarjeta-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lista-tarjeta-sub {
  font-size: 0.78rem;
  color: var(--texto-tenue);
  margin-top: 0.2rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lista-tarjeta-precio { flex-shrink: 0; text-align: right; min-width: 90px; }
.lista-tarjeta-total { font-size: 1rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.lista-tarjeta-precio-nota { font-size: 0.7rem; color: var(--oxido-oscuro); text-transform: capitalize; margin-top: 0.1rem; }

.lista-tarjeta-badge { flex-shrink: 0; }

.lista-tarjeta-acciones { flex-shrink: 0; display: flex; gap: 0.4rem; }
.lista-tarjeta-acciones .btn-texto { white-space: nowrap; }

@media (max-width: 700px) {
  .lista-tarjeta { flex-wrap: wrap; }
  .lista-tarjeta-principal { flex-basis: 100%; order: 1; }
  .lista-tarjeta-precio { order: 3; margin-left: auto; }
  .lista-tarjeta-badge { order: 2; }
}

.lista-tarjeta-sin-clic { cursor: default; }
.lista-tarjeta-sin-clic:hover { border-color: var(--linea); background: var(--papel-tarjeta); }

/* ---- estaciones de produccion ---- */
.estacion-bloque {
  background: #F8F6F3;
  border-radius: 6px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.7rem;
}
.estacion-encabezado { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.estacion-nombre { font-family: var(--fuente-titulo); font-size: 0.95rem; font-weight: 600; color: var(--tinta); }
.estacion-fila {
  display: grid;
  grid-template-columns: 130px 90px 90px 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.estacion-fila select, .estacion-fila input {
  font-family: var(--fuente-cuerpo); font-size: 0.8rem;
  padding: 0.4rem 0.5rem; border: 1px solid var(--linea); border-radius: 4px; width: 100%;
}
.estacion-notas {
  font-family: var(--fuente-cuerpo); font-size: 0.8rem;
  padding: 0.4rem 0.5rem; border: 1px solid var(--linea); border-radius: 4px;
  width: 100%; resize: vertical;
}
.estacion-etiqueta { font-size: 0.68rem; color: var(--texto-tenue); margin-bottom: 0.15rem; display: block; }

@media (max-width: 640px) {
  .estacion-fila { grid-template-columns: 1fr 1fr; }
}

/* ============ AJUSTES MÓVIL (consolidado) ============ */
@media (max-width: 720px) {
  /* Encabezados de panel: que el botón no se amontone con el título */
  .panel-encabezado { flex-wrap: wrap; gap: 0.8rem; }
  .panel-encabezado > div:last-child { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; }

  /* Barra de filtros: que el buscador no obligue a scroll horizontal */
  .filtros-barra { gap: 0.5rem; }
  .filtro-input { min-width: 0; flex: 1 1 100%; }
  .filtro-select { flex: 1 1 auto; }

  /* Tablas anchas (Clientes, Catálogo, Producción): scroll horizontal en vez de aplastarse */
  .tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabla th, .tabla td { white-space: nowrap; }

  /* Modales: menos aire, más espacio útil */
  .modal-overlay { padding: 0.6rem; align-items: flex-end; }
  .modal-caja, .modal-caja-ancha, .modal-caja-grande { max-width: 100%; max-height: 94vh; border-radius: 10px 10px 0 0; }
  .modal-encabezado { padding: 0.9rem 1rem; }
  .modal-cuerpo { padding: 1rem; }
  .modal-pie { padding: 0.8rem 1rem; flex-wrap: wrap; }
  .modal-pie .btn { flex: 1 1 auto; }

  /* Nueva Cotización: los grids de campos colapsan a 1 columna, sin tocar el formulario en sí */
  .nc-campos-arriba { grid-template-columns: 1fr; }
  .nc-fila-doble { grid-template-columns: 1fr; }
  .nc-tipo-botones, .nc-botones-agregar { flex-wrap: wrap; }
  .nc-item-fila {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "nombre nombre" "talla cantidad" "precio subtotal" "quitar quitar";
  }

  /* Estaciones de producción: apiladas en vez de 4 columnas */
  .estacion-fila { grid-template-columns: 1fr; }

  /* Renglones antiguos (por si quedan referenciados) */
  .nc-renglon { grid-template-columns: 1fr; }

  /* Tarjetas de lista: acciones en su propia fila, sin amontonarse */
  .lista-tarjeta-acciones { flex-basis: 100%; order: 4; flex-wrap: wrap; margin-top: 0.4rem; }

  /* Campos dobles genéricos (editar cliente/producto, etc.) */
  .nc-campos-arriba input, .nc-campos-arriba select { font-size: 0.9rem; }
}

@media (max-width: 420px) {
  .contenido { padding: 1rem 0.75rem 3rem; }
  .panel-titulo { font-size: 1.4rem; }
  .login-panel { padding: 2rem 1.5rem 1.75rem; }
  .msc-grid { grid-template-columns: repeat(2, 1fr); }
}

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }
.tabla-scroll[hidden] { display: none; }

.tarjeta-titulo-fila { display: flex; align-items: center; justify-content: space-between; }
.tarjeta-nota { font-size: 0.75rem; color: var(--texto-tenue); margin: 0.1rem 0 0.7rem; }
.lista-archivos { display: flex; flex-direction: column; gap: 0.5rem; }
.archivo-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: #F8F6F3; border-radius: 4px; padding: 0.55rem 0.75rem;
}
.archivo-fila a { font-size: 0.82rem; color: var(--oxido-oscuro); font-weight: 600; text-decoration: none; }
.archivo-fila a:hover { text-decoration: underline; }
.archivo-tipo { font-size: 0.7rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.03em; }
.archivos-vacio { font-size: 0.82rem; color: var(--texto-tenue); }

/* ============ EN PROCESO (Marketing) ============ */
.mkt-grid[hidden] { display: none; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.mkt-card {
  background: var(--papel-tarjeta); border: 1px solid var(--linea); border-radius: 6px; overflow: hidden;
}
.mkt-card-mockup {
  width: 100%; height: 150px; background: #F0EDE6 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-tenue); font-size: 0.78rem;
}
.mkt-card-cuerpo { padding: 0.9rem 1rem; }
.mkt-card-titulo { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1rem; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-card-sub { font-size: 0.78rem; color: var(--texto-tenue); margin-top: 0.15rem; }
.mkt-card-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; }
.mkt-card-etapa {
  font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 20px;
  background: var(--ambar-fondo); color: var(--oxido-oscuro);
}
.mkt-card-piezas { font-size: 0.78rem; color: var(--texto); font-weight: 600; }

/* ============ DASHBOARD ============ */
.dash-seccion-titulo { font-family: var(--fuente-titulo); font-size: 1.05rem; font-weight: 600; color: var(--tinta); margin: 1.8rem 0 0.8rem; }
.dash-seccion-titulo:first-of-type { margin-top: 0.5rem; }
.dash-nota { font-size: 0.75rem; color: var(--texto-tenue); margin-top: -0.3rem; margin-bottom: 0.3rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; }
.stat-card { background: var(--papel-tarjeta); border: 1px solid var(--linea); border-radius: 8px; padding: 1.35rem 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow 0.15s ease, transform 0.15s ease; min-width: 0; overflow: hidden; container-type: inline-size; }
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.stat-etiqueta { font-size: 0.72rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; overflow: hidden; white-space: normal; line-height: 1.2; }
.stat-valor { font-family: var(--fuente-titulo); font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 700; color: var(--tinta); margin-top: 0.45rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@supports (container-type: inline-size) {
  .stat-valor { font-size: clamp(1rem, 11cqi, 1.75rem); }
  .stat-etiqueta { font-size: clamp(0.6rem, 6cqi, 0.72rem); }
}
.dash-barra-cuello .dash-barra-relleno { background: #B00020; }
.dash-barra-badge { font-size: 0.68rem; color: #B00020; font-weight: 700; margin-left: 0.4rem; }
.stat-card-alerta { border-color: #B00020; background: #FBEAEA; }
.stat-card-alerta .stat-valor { color: #B00020; }
.stat-tendencia { font-size: 0.7rem; margin-top: 0.25rem; }
.stat-tendencia-arriba { color: #2E7D32; font-weight: 600; }
.stat-tendencia-abajo { color: #B00020; font-weight: 600; }

.dashboard-barras { display: flex; flex-direction: column; gap: 0.5rem; }
.dash-barra-fila { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 0.7rem; }
.dash-barra-etiqueta { font-size: 0.82rem; color: var(--texto); }
.dash-barra-pista { background: #EFEBE2; border-radius: 20px; height: 10px; overflow: hidden; }
.dash-barra-relleno { background: var(--oxido); height: 100%; border-radius: 20px; }
.dash-barra-numero { font-size: 0.82rem; font-weight: 600; color: var(--tinta); text-align: right; }

.dash-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.dashboard-lista { display: flex; flex-direction: column; gap: 0.4rem; }
.dash-item-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--papel-tarjeta); border: 1px solid var(--linea); border-radius: 4px; padding: 0.6rem 0.8rem;
}
.dash-item-nombre { font-size: 0.85rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-item-sub { font-size: 0.72rem; color: var(--texto-tenue); }
.dash-item-valor { font-size: 0.85rem; font-weight: 600; color: var(--oxido-oscuro); flex-shrink: 0; }

@media (max-width: 780px) {
  .dash-columnas { grid-template-columns: 1fr; }
  .dash-barra-fila { grid-template-columns: 110px 1fr 36px; }
}

.nc-comprobante-bloque { background: #F8F6F3; border-radius: 6px; padding: 0.8rem 0.9rem; margin-top: 1.1rem; }

/* ============ VER COTIZACIÓN (formato imprimible) ============ */
.mvc-encabezado { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid var(--oxido); padding-bottom: 1rem; margin-bottom: 1.2rem; }
.mvc-marca { font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 600; color: var(--tinta); }
.mvc-marca-sub { font-size: 0.75rem; color: var(--texto-tenue); margin-top: 0.2rem; }
.mvc-folio-bloque { text-align: right; }
.mvc-folio { font-family: var(--fuente-titulo); font-size: 1.1rem; font-weight: 600; color: var(--oxido-oscuro); }
.mvc-folio-sub { font-size: 0.78rem; color: var(--texto-tenue); margin-top: 0.15rem; }

.mvc-seccion-titulo { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--oxido-oscuro); margin: 1.1rem 0 0.5rem; }
.mvc-datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.5rem; }
.mvc-dato-etiqueta { font-size: 0.7rem; color: var(--texto-tenue); }
.mvc-dato-valor { font-size: 0.88rem; color: var(--texto); font-weight: 600; }

.mvc-tabla { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.mvc-tabla th { text-align: left; font-size: 0.72rem; color: var(--texto-tenue); border-bottom: 1px solid var(--linea); padding: 0.4rem 0.3rem; }
.mvc-tabla td { font-size: 0.85rem; padding: 0.5rem 0.3rem; border-bottom: 1px solid var(--linea); }
.mvc-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.mvc-totales { margin-left: auto; width: 260px; margin-top: 0.8rem; }
.mvc-totales-fila { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.3rem 0; }
.mvc-totales-fila.mvc-total-final { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--linea); margin-top: 0.3rem; padding-top: 0.5rem; color: var(--tinta); }
.mvc-totales-fila.mvc-anticipo { color: var(--oxido-oscuro); font-weight: 600; }

.mvc-notas-caja { background: #F8F6F3; border-radius: 4px; padding: 0.8rem 0.9rem; font-size: 0.78rem; color: var(--texto-tenue); white-space: pre-line; margin-top: 1rem; }

.stock-bajo { color: var(--rojo); font-weight: 700; }

.material-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: #F8F6F3; border-radius: 4px; padding: 0.55rem 0.75rem; margin-bottom: 0.4rem;
}
.material-fila-texto { font-size: 0.82rem; color: var(--texto); }
.material-fila-quitar { background: none; border: none; color: var(--rojo); cursor: pointer; font-size: 0.95rem; }

.explosion-fila {
  display: grid; grid-template-columns: 1fr 100px 100px 90px; gap: 0.6rem; align-items: center;
  padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--linea);
  font-size: 0.85rem;
}
.explosion-suficiente { color: var(--verde); font-weight: 600; }
.explosion-insuficiente { color: var(--rojo); font-weight: 600; }

/* ============ MENU HAMBURGUESA MOVIL ============ */
.btn-menu-movil {
  display: none;
  position: fixed;
  top: 0.9rem; left: 0.9rem;
  z-index: 60;
  width: 42px; height: 42px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.overlay-menu-movil {
  display: none;
  position: fixed; inset: 0;
  background: rgba(23,33,44,0.5);
  z-index: 40;
}
.overlay-menu-movil[hidden] { display: none !important; }

@media (max-width: 780px) {
  .btn-menu-movil { display: block; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 50;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    border-right: 1px solid var(--linea);
    border-bottom: none;
  }
  .sidebar.sidebar-abierto { transform: translateX(0); }
  .sidebar-nav { flex-direction: column; overflow-x: visible; }
  .overlay-menu-movil:not([hidden]) { display: block; }
  .contenido { padding-top: 4.2rem; }
}

/* ============ TABLERO DE PRODUCCION (Kanban) ============ */
.tablero-columnas {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}
.tablero-columnas[hidden] { display: none; }
.tablero-col {
  flex: 0 0 260px;
  background: #F4F2EC;
  border-radius: 8px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
}
.tablero-col-titulo {
  font-family: var(--fuente-titulo);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tablero-col-contador {
  background: #fff;
  border-radius: 100px;
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
  color: var(--texto-tenue);
}
.tablero-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tablero-tarjeta {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
}
.tablero-tarjeta-folio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--tinta);
}
.tablero-tarjeta-cliente {
  font-size: 0.78rem;
  color: var(--texto-tenue);
  margin-top: 0.1rem;
}
.tablero-tarjeta-items {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--texto);
  line-height: 1.4;
}
.tablero-tarjeta-prioridad {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 100px;
  margin-top: 0.4rem;
  background: var(--rojo-fondo);
  color: var(--rojo);
}
.tablero-tarjeta-avanzar {
  margin-top: 0.6rem;
  width: 100%;
  font-size: 0.78rem;
  padding: 0.4rem 0.5rem;
}
.tablero-vacio-col {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  text-align: center;
  padding: 1rem 0;
}

@media (max-width: 720px) {
  .tablero-col { flex: 0 0 220px; }
}


/* ============ TABLERO DE PRODUCCION (lista con prioridad) ============ */
.tablero-lista[hidden] { display: none; }
.tablero-lista { display: flex; flex-direction: column; gap: 0.6rem; }

.tablero-fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
}
.tablero-fila-flechas {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex-shrink: 0;
}
.tablero-flecha {
  width: 26px; height: 22px;
  border: 1px solid var(--linea);
  background: #F5F4F1;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--texto-tenue);
}
.tablero-flecha:hover:not(:disabled) { background: #EAE8E2; color: var(--tinta); }
.tablero-flecha:disabled { opacity: 0.3; cursor: default; }

.tablero-fila-cuerpo { flex: 1; min-width: 0; }
.tablero-fila-encabezado { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tablero-fila-folio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tinta);
}
.tablero-fila-cliente { font-size: 0.78rem; color: var(--texto-tenue); margin-top: 0.1rem; }
.tablero-fila-items {
  font-size: 0.75rem;
  color: var(--texto);
  margin-top: 0.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tablero-fila-derecha {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.tablero-etapa-badge {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 0.75rem;
  background: var(--ambar-fondo);
  color: var(--oxido-oscuro);
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
}
.tablero-btn-avanzar { font-size: 0.75rem; white-space: nowrap; }

@media (max-width: 620px) {
  .tablero-fila { flex-wrap: wrap; }
  .tablero-fila-cuerpo { flex-basis: 100%; order: 2; margin-top: 0.4rem; }
  .tablero-fila-derecha { order: 3; flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 0.4rem; }
  .tablero-fila-flechas { order: 1; flex-direction: row; }
}


/* ============ LEYENDA Y BARRA DE PROGRESO DEL TABLERO ============ */
.tablero-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  background: #F4F2EC;
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.8rem;
  font-size: 0.72rem;
  color: var(--texto-tenue);
}
.tablero-leyenda-item strong { color: var(--tinta); }

.tablero-progreso {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.tablero-paso {
  font-size: 0.65rem;
  font-weight: 700;
  width: 26px; height: 20px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: #EDEEF0;
  color: #9AA0A6;
}
.tablero-paso-completo { background: var(--verde-fondo); color: var(--verde); }
.tablero-paso-actual { background: var(--ambar-fondo); color: var(--oxido-oscuro); outline: 2px solid var(--oxido); outline-offset: -1px; }
.tablero-paso-pendiente { background: #EDEEF0; color: #9AA0A6; }

@media (max-width: 620px) {
  .tablero-leyenda { font-size: 0.68rem; gap: 0.4rem 0.7rem; }
  .tablero-paso { width: 24px; height: 18px; font-size: 0.6rem; }
}


/* ============ LINEA SECUNDARIA DE RENGLON (Tela / Tipo de prenda) ============ */
.nc-item-fila-secundaria {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.3rem;
  padding: 0 0.5rem 0.5rem;
}
.nc-item-fila-secundaria textarea {
  grid-column: 1 / -1;
  font-family: var(--fuente-cuerpo);
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  width: 100%;
  background: #fff;
  resize: vertical;
}
.mvc-item-descripcion { font-size: 0.75rem; color: var(--texto-tenue); margin-top: 0.15rem; line-height: 1.35; }
.nc-item-fila-secundaria input {
  font-family: var(--fuente-cuerpo);
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--linea);
  border-radius: 4px;
  width: 100%;
  background: #fff;
}
@media (max-width: 620px) {
  .nc-item-fila-secundaria { grid-template-columns: 1fr; }
}
.dash-semanas-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 0.6rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 50;
  min-width: 220px;
}
.dash-semanas-menu label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.dash-semanas-menu[hidden] { display: none; }

/* ===== Rediseño Dashboard profesional ===== */
.dash-seccion { margin-bottom: 1.6rem; }
.dash-seccion .dash-seccion-titulo { margin-top: 0; margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }

.dash-sec-ventas { --dash-accent: #0F0F0F; }
.dash-sec-flujo { --dash-accent: #440418; }
.dash-sec-produccion { --dash-accent: #F20A37; }
.dash-sec-desempeno { --dash-accent: #2E7D32; }
.dash-sec-semana { --dash-accent: #EA9368; }


.dash-sec-produccion .dash-barra-relleno { background: var(--dash-accent, var(--oxido)); }

@media (max-width: 640px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .stat-card { padding: 0.75rem 0.85rem; }
  .stat-valor { font-size: 1.4rem; }
  .stat-etiqueta { font-size: 0.66rem; }
  .dash-barra-fila { grid-template-columns: 90px 1fr 32px; gap: 0.5rem; }
}

/* ===== Busqueda global ===== */
.btn-buscar-global-fijo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0.9rem; right: 0.9rem;
  left: auto;
  z-index: 60;
  width: 42px; height: 42px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font-size: 1.2rem;
  cursor: pointer;
}
.bg-grupo { margin-bottom: 1rem; }
.bg-grupo-titulo { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-tenue); font-weight: 600; margin-bottom: 0.4rem; }
.bg-item { padding: 0.55rem 0.6rem; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; }
.bg-item:hover { background: #F4F2EC; }
.bg-item-titulo { font-size: 0.85rem; font-weight: 600; color: var(--tinta); }
.bg-item-sub { font-size: 0.75rem; color: var(--texto-tenue); }
.bg-vacio { font-size: 0.82rem; color: var(--texto-tenue); text-align: center; padding: 1.2rem 0; }

/* ===== Panel de Configuracion ===== */
.config-tarjeta { padding: 1.2rem 1.4rem; }
.config-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.4rem; }
.config-campo { display: flex; flex-direction: column; gap: 0.3rem; }
.config-campo-ancho { grid-column: 1 / -1; }
.config-label { font-size: 0.82rem; font-weight: 600; color: var(--tinta); }
.config-ayuda { font-size: 0.72rem; color: var(--texto-tenue); }
.config-input {
  font-family: var(--fuente-cuerpo);
  font-size: 0.9rem;
  height: 40px;
  box-sizing: border-box;
  padding: 0 0.75rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  color: var(--texto);
  outline: none;
  width: 100%;
}
.config-input:focus { border-color: var(--oxido); box-shadow: 0 0 0 3px rgba(201,122,61,0.12); }
.config-guardar-barra { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; }
@media (max-width: 640px) {
  .config-grid { grid-template-columns: 1fr; }
}

/* ===== Sistema de notificaciones (toast + confirmacion) ===== */
.toast-contenedor {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 340px;
}
.toast {
  background: #fff;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  border-left: 4px solid var(--oxido);
  font-size: 0.85rem;
  color: var(--texto);
  animation: toast-entrada 0.2s ease;
}
.toast-exito { border-left-color: #2E7D32; }
.toast-error { border-left-color: #B00020; }
.toast-info { border-left-color: var(--oxido); }
.toast { display: flex; align-items: center; gap: 0.8rem; }
.toast-accion { margin-left: auto; flex-shrink: 0; background: none; border: 1px solid var(--marca-rojo, #F20A37); color: var(--marca-rojo, #F20A37); border-radius: 6px; padding: 0.3rem 0.6rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.toast-accion:hover { background: var(--marca-rojo, #F20A37); color: #fff; }
textarea.config-input { resize: vertical; font-family: inherit; line-height: 1.4; }
@keyframes toast-entrada {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.modal-caja-chica { max-width: 380px; }
.mc-mensaje { font-size: 0.92rem; color: var(--texto); line-height: 1.5; }

/* ===== Calendario de entregas ===== */
.cal-mes-titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1rem; min-width: 160px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.cal-dia-header { font-size: 0.72rem; font-weight: 600; color: var(--texto-tenue); text-transform: uppercase; text-align: center; padding-bottom: 0.3rem; }
.cal-celda {
  position: relative;
  background: #F4F2EC;
  border-radius: 8px;
  min-height: 64px;
  padding: 0.5rem;
}
.cal-celda-vacia { background: transparent; }
.cal-celda-con-pedidos { background: #fff; border: 1px solid var(--linea); cursor: pointer; transition: box-shadow 0.15s ease; }
.cal-celda-con-pedidos:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.cal-celda-numero { font-size: 0.82rem; font-weight: 600; color: var(--tinta); }
.cal-celda-badge {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  background: var(--oxido);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 100px;
  padding: 0.1rem 0.5rem;
}
.cal-celda-badge-express { background: #7B3FA0; }
.cal-detalle-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
  font-size: 0.85rem;
}
.cal-detalle-fila:last-child { border-bottom: none; }
.cal-express-tag { font-size: 0.7rem; font-weight: 700; color: #7B3FA0; }
@media (max-width: 640px) {
  .cal-grid { gap: 0.3rem; }
  .cal-celda { min-height: 48px; padding: 0.3rem; }
  .cal-dia-header { font-size: 0.6rem; }
}

/* ===== Vista de estacion de trabajo ===== */
.et-scrap-fila {
  display: grid;
  grid-template-columns: 1fr 90px 1fr 32px;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.6rem;
}
.et-scrap-fila input { font-size: 0.85rem; padding: 0.45rem 0.6rem; border: 1px solid var(--linea); border-radius: 4px; }
.et-scrap-quitar { background: none; border: none; color: var(--rojo, #B00020); font-size: 1.1rem; cursor: pointer; }
@media (max-width: 640px) {
  .et-scrap-fila { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
}

.nc-item-agregar-talla {
  background: none;
  border: 1px solid var(--linea);
  border-radius: 4px;
  color: var(--oxido);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}
.nc-item-agregar-talla:hover { background: rgba(201,122,61,0.08); }
.nc-item-nombre-continuacion { min-height: 1px; }
@media (max-width: 640px) {
  .nc-item-agregar-talla { grid-column: 1 / -1; justify-self: start; }
}

/* ===== Hoja formal de impresion de pedido ===== */
.panel-impresion {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: var(--fuente-cuerpo);
  color: #1a1a1a;
}
.pi-encabezado { display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid var(--oxido); padding-bottom: 1rem; margin-bottom: 1.2rem; }
.pi-logo { max-height: 60px; max-width: 160px; object-fit: contain; }
.pi-empresa-nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.2rem; }
.pi-empresa-dato { font-size: 0.82rem; color: #555; }
.pi-titulo { font-family: var(--fuente-titulo); font-size: 1.4rem; margin: 0 0 1rem; }
.pi-datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; font-size: 0.9rem; margin-bottom: 1.4rem; }
.pi-tabla { width: 100%; border-collapse: collapse; margin-bottom: 0.6rem; font-size: 0.78rem; }
.pi-tabla th, .pi-tabla td { border: 1px solid #ccc; padding: 0.2rem 0.35rem; text-align: left; }
.pi-tabla th { background: #f4f2ec; }
.pi-totales { margin-left: auto; width: 280px; font-size: 0.92rem; margin-bottom: 1.4rem; }
.pi-totales div { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid #eee; }
.pi-totales .pi-saldo strong { color: var(--oxido); }
.pi-notas { font-size: 0.82rem; color: #444; margin-bottom: 2rem; white-space: pre-line; }
.pi-firmas { display: flex; justify-content: space-between; margin-top: 3rem; gap: 2rem; }
.pi-firma { flex: 1; text-align: center; font-size: 0.82rem; }
.pi-linea { border-top: 1px solid #333; margin-bottom: 0.4rem; height: 40px; }

@media print {
  .panel-impresion { max-width: 100%; padding: 0; }
}
.pi-leyenda-ot { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: #FFF3E0; border: 1px solid #E65100; border-radius: 6px; font-size: 0.78rem; color: #5C3A00; line-height: 1.4; }
.pi-producto-bloque { margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--linea); page-break-inside: avoid; }
.pi-producto-bloque:last-child { border-bottom: none; }
.pi-producto-nombre { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.1rem; }
.pi-producto-specs { font-size: 0.68rem; color: var(--texto-tenue); margin-bottom: 0.25rem; }
.sin-seleccion th:first-child, .sin-seleccion td:first-child { display: none; }
.sin-seleccion th:nth-child(7), .sin-seleccion td:nth-child(7) { display: none; }
.tablero-tarjeta-antiguedad { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 10px; display: inline-block; margin-top: 0.4rem; }
.tablero-tarjeta-antiguedad-ok { background: #E8F5E9; color: #2E7D32; }
.tablero-tarjeta-antiguedad-media { background: #FFF3E0; color: #E65100; }
.tablero-tarjeta-antiguedad-alta { background: #FBEAEA; color: #B00020; }
.tablero-col-contador-alerta { background: #FBEAEA !important; color: #B00020 !important; }
.tablero-tarjeta { border-left: 4px solid #D8D5CD; }
.tablero-tarjeta-borde-ok { border-left-color: #2E7D32; }
.tablero-tarjeta-borde-media { border-left-color: #E65100; }
.tablero-tarjeta-borde-alta { border-left-color: #B00020; }
.tablero-tarjeta-folio { font-size: 1rem; font-weight: 700; color: var(--oxido); }
.tablero-col-piezas { font-size: 0.72rem; color: var(--texto-tenue); font-weight: 400; margin-left: 0.3rem; }

/* ===== Paleta de marca GTR of Mexico: Blanco #EAE5E1, Naranja #EA9368, Rojo #F20A37, Burgundy #440418, Negro #0F0F0F ===== */
:root { --marca-blanco: #EAE5E1; --marca-naranja: #EA9368; --marca-rojo: #F20A37; --marca-burgundy: #440418; --marca-negro: #0F0F0F; }
.sidebar { background: var(--marca-negro); border-right: 1px solid #262626; }
.sidebar .sidebar-marca { border-bottom: 1px solid #262626; }
.sidebar .sidebar-marca-nombre { color: var(--marca-blanco); font-weight: 700; }
.sidebar .sidebar-marca-sub { color: #A8A29E; }
.sidebar .nav-item { color: #D6D0CB; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; }
.sidebar .nav-item:hover { background: rgba(234, 229, 225, 0.08); color: #FFFFFF; }
.sidebar .nav-item.nav-item-activo { background: var(--marca-rojo); color: #FFFFFF; font-weight: 600; }
.sidebar .sidebar-usuario { border-top: 1px solid #262626; }
.sidebar .usuario-nombre { color: var(--marca-blanco); }
.sidebar .sidebar-usuario-accion { color: #A8A29E; }
.sidebar .sidebar-usuario-accion:hover { color: #FFFFFF; }
.sidebar #btn-salir { color: var(--marca-naranja); }
.sidebar #btn-salir:hover { color: #F5B393; }
.sidebar .sidebar-logo { display: block; width: 100%; max-width: 140px; height: auto; }
.sidebar .sidebar-marca { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.sidebar .sidebar-logo { max-width: 150px; }
.login-logo { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 0.6rem; }
.login-marca { text-align: center; } .login-marca-sub { display: block; text-align: center; }
.detalle-tabs-nav { display: flex; gap: 0.4rem; border-bottom: 2px solid var(--linea); margin-bottom: 1.2rem; flex-wrap: wrap; }
.detalle-tab-btn { background: none; border: none; padding: 0.7rem 1rem; font-size: 0.88rem; font-weight: 500; color: var(--texto-tenue); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s ease, border-color 0.15s ease; }
.detalle-tab-btn:hover { color: var(--texto); }
.detalle-tab-btn.detalle-tab-btn-activo { color: var(--oxido); border-bottom-color: var(--oxido); font-weight: 600; }
.detalle-tab-panel[hidden] { display: none; }
.acciones-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.7rem; }
.dash-resumen-ejecutivo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.dash-kpi-grande { background: var(--papel-tarjeta); border: 1px solid var(--linea); border-radius: 10px; padding: 1.6rem 1.8rem; }
.dash-kpi-principal { border-color: var(--oxido); border-width: 2px; position: relative; }
.dash-kpi-etiqueta { font-size: 0.78rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.dash-kpi-valor { font-family: var(--fuente-titulo); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; color: var(--tinta); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.dash-sparkline { width: 100%; height: 40px; margin-top: 0.8rem; display: block; }
@media (max-width: 640px) { .dash-resumen-ejecutivo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 641px) {
  .dash-grid-ventas { grid-template-columns: repeat(3, 1fr); }
  .dash-grid-ventas > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* ===== Estados y seguimiento de cotizaciones ===== */
.btn-chico { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.seguimiento-texto { font-size: 0.8rem; color: var(--texto-tenue); }
.seguimiento-alerta { font-size: 0.8rem; font-weight: 600; color: #B45309; background: #FFF4E5; padding: 0.15rem 0.45rem; border-radius: 4px; display: inline-block; }
.mvc-estado { border: 1px solid var(--linea); border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 1rem; background: #FAF8F6; }
.mvc-estado-cabecera { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.mvc-linea { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.25rem; font-size: 0.82rem; color: var(--texto-tenue); }
.mvc-linea li::before { content: '○'; margin-right: 0.45rem; }
.mvc-linea li.hecho { color: var(--texto); }
.mvc-linea li.hecho::before { content: '●'; color: #2E7D32; }
.mvc-linea li.cerrada::before { color: #B00020; }
.mvc-estado-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ---- Configuracion: pestañas y matriz de permisos ---- */
.config-tab-btn { background: none; border: none; padding: 0.7rem 1rem; font-size: 0.88rem; font-weight: 500; color: var(--texto-tenue); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.config-tab-btn:hover { color: var(--texto); }
.config-tab-btn.config-tab-btn-activo { color: var(--oxido); border-bottom-color: var(--oxido); font-weight: 600; }
.tabla-permisos th { font-size: 0.72rem; text-align: center; vertical-align: bottom; }
.tabla-permisos th.tp-grupo { border-bottom: none; color: var(--texto-tenue); font-weight: 500; }
.tabla-permisos td { text-align: center; }
.tabla-permisos td:first-child, .tabla-permisos th:first-child { text-align: left; white-space: nowrap; }
.tabla-permisos tr.tp-director td { color: var(--texto-tenue); }
.tabla-historial-config td { vertical-align: top; }
.tabla-historial-config .tabla-historial-fecha { white-space: nowrap; }
.cfg-historial-paginas { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; margin-top: 0.8rem; }
.tp-nuevo { font-size: 0.65rem; background: #FFF3E0; color: #E65100; border-radius: 8px; padding: 0.05rem 0.4rem; margin-left: 0.3rem; }

/* ---- Tablero: tarjeta clicable y acciones ---- */
.tablero-tarjeta-abrible { cursor: pointer; }
.tablero-tarjeta-abrible:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.tablero-tarjeta-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }

/* ---- Entregas ---- */
.ment-saldo { background: #FFF3E0; color: #8A3C00; border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; font-size: 0.85rem; }
.ment-saldo p { margin: 0 0 0.4rem; }
.ment-saldo-bloqueado { background: #FBEAEA; color: #B00020; }
.ment-saldo-check { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.detalle-entrega { font-size: 0.85rem; color: var(--texto-tenue); margin-top: 0.5rem; }
.saldo-pendiente { color: #B00020; font-weight: 600; }

/* ---- Descripcion del producto (detalle, estacion e impresos) ---- */
.pp-descripcion { font-size: 0.82rem; margin: 0 0 0.6rem; white-space: pre-line; }
.et-descripcion { font-size: 0.85rem; margin-top: 0.7rem; white-space: pre-line; }
.et-descripcion strong { display: block; }
.ent-abrir { white-space: nowrap; }
#modal-entrega .campo { display: block; margin-bottom: 0.8rem; }
#modal-entrega .campo input { width: 100%; }

/* ---- Filtros avanzados (Pedidos y Cotizaciones) ---- */
.fav-panel { margin: 0 0 0.8rem; padding: 1rem; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem 0.9rem; }
.fav-grid .campo { margin: 0; }
.fav-grid input, .fav-grid select { width: 100%; }
.fav-check { align-self: end; padding-bottom: 0.4rem; }
.fav-estados { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.3rem; }
.fav-acciones { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 0.8rem; }
.fav-estado-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 0.6rem; }
.fav-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fav-chips[hidden] { display: none; }
.fav-chip { background: #E6F1FB; color: #0C447C; border: none; border-radius: 12px; padding: 0.25rem 0.6rem; font-size: 0.78rem; cursor: pointer; }
.fav-chip:hover { background: #B5D4F4; }
.fav-resumen { font-size: 0.82rem; color: var(--texto-tenue); }
.fav-grid .filtro-input, .fav-grid .filtro-select { flex: none; min-width: 0; }
.fav-check { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.5rem; }

/* ---- Dashboard por rol ---- */
.dash-controles { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dash-controles .filtro-input, .dash-controles .filtro-select { flex: none; min-width: 0; }
.dash-seccion-nota { font-size: 0.8rem; font-weight: 400; color: var(--texto-tenue); }
.dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.dash-kpi-card { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; background: var(--papel-tarjeta); border: 1px solid var(--linea); border-radius: 10px; padding: 0.9rem 1rem; cursor: pointer; font: inherit; color: inherit; }
.dash-kpi-card:hover { border-color: var(--oxido); }
.dash-kpi-card:disabled { cursor: default; }
.dash-kpi-card:disabled:hover { border-color: var(--linea); }
.dash-kpi-card-titulo { font-size: 0.78rem; color: var(--texto-tenue); font-weight: 500; }
.dash-kpi-card-valor { font-size: 1.45rem; font-weight: 700; }
.dash-kpi-card-nota { font-size: 0.75rem; color: var(--texto-tenue); }
.dash-kpi-aviso { background: #FFF3E0; border-color: #F5C08A; }
.dash-kpi-aviso .dash-kpi-card-valor { color: #B45309; }
.dash-kpi-peligro { background: #FBEAEA; border-color: #EBA3A3; }
.dash-kpi-peligro .dash-kpi-card-valor { color: #B00020; }
.dash-barras-tarjeta { margin-bottom: 0.8rem; }
.dash-tablas { margin-bottom: 1rem; }
.dash-tablas-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 2px solid var(--linea); margin-bottom: 0.6rem; }
.dash-tabla[hidden] { display: none; }
.dash-tabla .btn-texto { margin-top: 0.5rem; }

/* Importado del sistema anterior (lista y detalle de pedidos y cotizaciones) */
.etiqueta-origen { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 10px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap; background: #ECEAE4; color: #5F5A50; border: 1px solid #D8D4CA; }

/* Configuracion > dias inhabiles y mensajes; modal de mensajes al cliente */
.cfg-inhabil-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.cfg-inhabil-form input[type="date"] { width: auto; }
.cfg-inhabil-form input[type="text"] { flex: 1; min-width: 180px; }
.cfg-plantilla { margin-bottom: 1rem; }
.cfg-plantilla-encabezado { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.cfg-plantilla-titulo { font-size: 1rem; margin: 0; }
.cfg-plantilla-chip { font-size: 0.72rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: #EDEEF0; color: #4B5157; }
.cfg-plantilla-chip-aprobada { background: var(--verde-fondo); color: var(--verde); }
.cfg-plantilla-chip-rechazada, .cfg-plantilla-chip-pendiente { background: var(--rojo-fondo); color: var(--rojo); }
.cfg-plantilla-chip-enviada { background: var(--ambar-fondo); color: var(--oxido-oscuro); }
.cfg-pl-meta-texto, .mmsg-texto { white-space: pre-line; overflow-wrap: anywhere; font-size: 0.85rem; background: #F7F6F3; border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 0.6rem 0.8rem; }
.cfg-pl-avisos { margin: 0; padding-left: 1.2rem; color: var(--rojo); font-size: 0.8rem; }
.mmsg-item { border-bottom: 1px solid var(--linea); padding: 0.8rem 0; }
.mmsg-item:first-child { padding-top: 0; }
.mmsg-acciones { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.6rem; }
#mmsg-aviso { color: var(--rojo); margin-top: 0; }
#modal-mensajes { z-index: 110; } /* se abre encima de la cotizacion o el pedido */
@media (max-width: 640px) { .cfg-inhabil-form input[type="date"] { width: 100%; } }

/* Promociones: Configuracion y partidas de la cotizacion */
.cfg-promo-titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
#cfg-promo-editor { margin-bottom: 1rem; }
.cfg-pr-casillas { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.cfg-pr-productos { display: flex; flex-direction: column; gap: 0.4rem; max-height: 320px; overflow-y: auto; }
.cfg-pr-producto { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.cfg-pr-producto .config-input { width: 120px; flex-shrink: 0; }
.cfg-promo-estado-vigente { background: var(--verde-fondo); color: var(--verde); }
.nc-r-promo-fila { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.25rem; }
.nc-r-promo { width: 100%; }
.nc-r-promo-aviso { font-size: 0.74rem; color: var(--texto-tenue); }
.nc-r-promo-aviso.nc-r-promo-falta { color: var(--rojo); }
.mvc-item-promo { font-size: 0.75rem; color: var(--verde); margin-top: 0.15rem; line-height: 1.35; }
@media (max-width: 640px) { .cfg-pr-producto { flex-direction: column; align-items: stretch; } .cfg-pr-producto .config-input { width: 100%; } }

/* ============ CELULAR: listas como tarjetas, barra del detalle y franja de los botones fijos ============ */
@media (max-width: 720px) {
  /* Cada fila de una lista es una tarjeta; el titulo de la columna lo pone app.js en data-label */
  .tabla.tabla-tarjetas-movil { display: block; overflow: visible; border: none; background: transparent; border-radius: 0; }
  .tabla-tarjetas-movil thead { display: block; }
  .tabla-tarjetas-movil thead tr { display: flex; }
  .tabla-tarjetas-movil thead th { display: none; }
  /* La casilla "seleccionar todos" del encabezado se queda, con su texto */
  .tabla-tarjetas-movil thead th:has(input[type="checkbox"]) {
    display: flex; align-items: center; gap: 0.5rem; padding: 0 0 0.6rem; border: none; background: none;
    font-size: 0.85rem; font-weight: 400; color: var(--texto);
  }
  .tabla-tarjetas-movil thead th:has(input[type="checkbox"])::after { content: 'Seleccionar todos'; }
  .tabla-tarjetas-movil tbody { display: flex; flex-direction: column; gap: 0.6rem; }
  .tabla-tarjetas-movil tbody tr {
    display: block; position: relative; background: var(--papel-tarjeta);
    border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.55rem 0.9rem;
  }
  .tabla-tarjetas-movil tbody tr:has(> td > input[type="checkbox"]) { padding-right: 2.8rem; }
  .tabla.tabla-tarjetas-movil tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 0.28rem 0; border: none; white-space: normal; text-align: right; font-size: 0.86rem; overflow-wrap: anywhere;
  }
  .tabla-tarjetas-movil tbody td::before {
    content: attr(data-label); flex-shrink: 0; text-align: left; font-size: 0.74rem; color: var(--texto-tenue);
  }
  .tabla-tarjetas-movil tbody td[data-label=""]::before { content: none; }
  .tabla-tarjetas-movil tbody td[data-label=""] { justify-content: flex-start; text-align: left; }
  /* La casilla de cada fila, arriba a la derecha */
  .tabla.tabla-tarjetas-movil tbody td:has(> input[type="checkbox"]) { position: absolute; top: 0.6rem; right: 0.8rem; padding: 0; }
  /* Acciones en su propio renglon, al final */
  .tabla.tabla-tarjetas-movil tbody td[data-label="Acciones"] {
    justify-content: flex-start; margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--linea);
  }
  .tabla-tarjetas-movil tbody td[data-label="Acciones"]::before { content: none; }
  /* La foto del catalogo va sola, sin etiqueta */
  .tabla.tabla-tarjetas-movil tbody td[data-label="Foto"] { justify-content: flex-start; }
  .tabla-tarjetas-movil tbody td[data-label="Foto"]::before { content: none; }
  .tabla-tarjetas-movil + .paginacion, .tabla-scroll:has(> .tabla-tarjetas-movil) { overflow: visible; }

  /* Ver cotizacion: la X siempre arriba a la derecha y los botones (Mensajes, Compartir, PDF) en su propio
     renglon debajo del titulo, repartidos a lo ancho */
  #modal-ver-cotizacion .modal-encabezado { position: relative; flex-wrap: wrap; gap: 0.7rem; }
  #modal-ver-cotizacion .modal-encabezado .modal-titulo { padding-right: 2.6rem; }
  #modal-ver-cotizacion .modal-encabezado > div { width: 100%; flex-wrap: wrap; gap: 0.5rem !important; }
  #modal-ver-cotizacion .modal-encabezado > div .btn { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.6rem; font-size: 0.85rem; white-space: nowrap; }
  #mvc-cerrar { position: absolute; top: 0.75rem; right: 0.8rem; font-size: 1.3rem; padding: 0.3rem 0.5rem; }
  /* Texto que en el celular sobra (ej. "Descargar" en "Descargar PDF") */
  .solo-escritorio { display: none; }

  /* Detalle del pedido: los botones de arriba bajan de renglon en vez de salirse de la pantalla */
  .detalle-toolbar > div { flex-wrap: wrap; }

  /* Franja fija detras de los botones de menu y busqueda: el contenido pasa por debajo y no se encima */
  .app-shell::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3.75rem; z-index: 39;
    background: var(--papel); border-bottom: 1px solid var(--linea);
  }
}