/* Shell administrativo del KAM: navegación, contenido y perfil. Solo lo carga index.html (el portal no). */

/* Sin Bootstrap (3.37.0): esto es lo único de su «reboot» que el KAM necesitaba. */
*::before, *::after { box-sizing: border-box; }
[hidden] { display:none !important; }
p { margin:0 0 var(--esp-3); }
h1, h4, h5, h6 { margin-top:0; }
h4 { font-size:var(--texto-md); margin-bottom:var(--esp-2); }
small { font-size:.875em; }
img, svg { vertical-align:middle; }
textarea { resize:vertical; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--esp-4);
  padding: var(--esp-4);
  background: var(--bg);
}

.sidebar {
  position: sticky;
  top: var(--esp-4);
  align-self: start;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2 * var(--esp-4));
  min-height: 560px;
  padding: var(--esp-4) var(--esp-3) var(--esp-3);
  color: var(--barra-fg);
  background: var(--barra-bg);
  border: 1px solid var(--barra-borde);
  border-radius: var(--radio-2xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-barra);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 52px;
  padding: 0 var(--esp-2) var(--esp-4);
  border-bottom: 1px solid var(--barra-borde);
  color: var(--barra-fg);
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-brand img { width: 36px; height: 36px; border-radius: var(--radio-lg); }
.brand-name { font-size: var(--texto-lg); font-weight: var(--peso-fuerte); letter-spacing: -0.035em; }
.brand-product {
  margin-left: 0.1rem;
  color: var(--barra-fg);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-label {
  margin: var(--esp-5) var(--esp-2) var(--esp-2);
  color: var(--barra-fg-muted);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-nav { display: grid; gap: var(--esp-1); }
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--esp-3);
  width: 100%;
  min-height: 2.8rem;
  padding: 0 var(--esp-3);
  border: 1px solid transparent;
  border-radius: var(--radio-lg);
  background: transparent;
  color: var(--barra-fg-muted);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: left;
  white-space: nowrap;
  transition: color var(--duracion-rapida) ease, background var(--duracion-rapida) ease;
}
.sidebar-link:hover { color: var(--barra-fg); background: var(--barra-hover); filter: none; box-shadow: none; }
.sidebar-link[aria-current="page"] {
  color: var(--barra-fg);
  background: var(--barra-activo);
  border-color: var(--barra-borde);
}
.sidebar-link[aria-current="page"]::before {
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: -1px;
  width: 3px;
  border-radius: var(--radio-pastilla);
  background: var(--marca-ambar-hasta);
  content: "";
}
.sidebar-link .icono { font-size: var(--texto-md); opacity: .85; }
.sidebar-link[aria-current="page"] .icono { color: var(--marca-ambar-desde); opacity: 1; }
.sidebar-spacer { flex: 1; min-height: var(--esp-6); }
.sidebar-footer { position: relative; padding-top: var(--esp-3); border-top: 1px solid var(--barra-borde); }

.profile-trigger {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--esp-2);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--esp-2);
  border: 1px solid transparent;
  border-radius: var(--radio-lg);
  background: transparent;
  color: var(--barra-fg);
  text-align: left;
}
.profile-trigger:hover, .profile-trigger[aria-expanded="true"] { background: var(--barra-hover); filter: none; box-shadow: none; }
.profile-avatar {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radio-redondo);
  background: var(--barra-avatar);
  color: var(--barra-fg);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}
.profile-trigger-copy { display: grid; min-width: 0; flex: 1; gap: 1px; }
.profile-trigger-copy strong, .profile-trigger-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-trigger-copy strong { color: var(--barra-fg); font-size: var(--texto-xs); font-weight: var(--peso-semi); }
.profile-trigger-copy small { color: var(--barra-fg-muted); font-size: var(--texto-xs); }
.profile-chevron { display: inline-grid; color: var(--barra-fg-muted); font-size: 1rem; transform: rotate(180deg); transition: transform var(--duracion-rapida) ease; }
.profile-trigger[aria-expanded="true"] .profile-chevron { transform: none; }

.profile-dropdown {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--esp-2));
  left: 0;
  z-index: var(--z-menu);
  padding: var(--esp-2);
  border: 1px solid var(--border);
  border-radius: var(--radio-xl);
  background: var(--surface);
  color: var(--txt);
  box-shadow: var(--shadow-lg);
  animation: menu-in var(--duracion-rapida) var(--curva-salida);
}
.profile-dropdown[hidden] { display: none; }
.profile-menu-heading { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-2) var(--esp-3); }
.profile-menu-heading > span:last-child { display: grid; min-width: 0; gap: 2px; }
.profile-menu-heading strong { font-size: var(--texto-sm); }
.profile-menu-heading small { overflow: hidden; color: var(--muted); font-size: var(--texto-xs); text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-icon { display: inline-grid; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; place-items: center; color: var(--color-slate-700); font-size: 1rem; }
.profile-menu-item {
  display: flex;
  justify-content: flex-start;
  gap: var(--esp-2);
  width: 100%;
  min-height: 2.65rem;
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--radio-md);
  background: transparent;
  color: var(--txt);
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  text-align: left;
}
.profile-menu-item:hover { background: var(--surface-sunken); filter: none; }
.profile-version { display: flex; justify-content: space-between; margin: var(--esp-2) 0 var(--esp-1); padding: var(--esp-3) var(--esp-2) var(--esp-2); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--texto-xs); }
.profile-version strong { color: var(--color-slate-600); font-weight: var(--peso-medio); }
.profile-logout { margin-top: var(--esp-1); border-top: 1px solid var(--border); border-radius: 0 0 var(--radio-md) var(--radio-md); color: var(--bad); }
.profile-logout .profile-menu-icon { color: var(--bad); }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding: 0 var(--esp-2);
  border: 0;
  background: transparent;
  color: var(--muted);
}
.menu-movil, .velo-menu { display: none; }
.app-context { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-xs); }
.app-context strong { color: var(--txt); font-weight: var(--peso-medio); }
.header-actions { display: flex; align-items: center; gap: var(--esp-2); }
.btn-new-business { min-height: 2.55rem; padding-inline: var(--esp-4); border-radius: var(--radio-lg); box-shadow: var(--shadow-sm); }
.app-shell .wrap { width: 100%; max-width: none; margin: 0; padding: var(--esp-3) var(--esp-2) var(--esp-7); animation: entrar var(--duracion-media) var(--curva-salida); }
.app-shell .cabecera-pagina { align-items: center; margin-bottom: var(--esp-5); }
.app-shell .cabecera-pagina h1 { font-size: clamp(1.55rem, 2vw, 2rem); letter-spacing: -0.04em; }
.app-shell .cabecera-pagina .page-description { max-width: 760px; margin: var(--esp-1) 0 var(--esp-6); color: var(--muted); font-size: var(--texto-sm); line-height: var(--interlineado); }
.app-shell .filtros-crm { margin-bottom: var(--esp-3); }
.app-shell .acciones-tabla { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-3); }
/* Filtros y subpestañas como chips: no compiten con la acción primaria de la pantalla. */
.app-shell .wrap .filtros-crm button, .app-shell .wrap [data-sub] {
  min-width: 0; min-height: 2.25rem; padding: var(--esp-1) var(--esp-4); border-radius: var(--radio-pastilla);
  background: var(--surface); color: var(--color-slate-700); border-color: var(--border-fuerte); font-weight: var(--peso-medio); }
.app-shell .wrap .filtros-crm button:hover:not(:disabled), .app-shell .wrap [data-sub]:hover:not(:disabled) {
  background: var(--surface-sunken); color: var(--txt); filter: none; box-shadow: none; }
.app-shell .wrap .filtros-crm button[aria-pressed="true"], .app-shell .wrap [data-sub][aria-current="page"] {
  background: var(--txt); color: var(--surface); border-color: var(--txt); }
.app-shell .card { color: var(--txt); border-radius: var(--radio-xl); box-shadow: var(--shadow-sm); }
.app-shell .card:hover { box-shadow: var(--shadow-md); }
.app-shell .cohortes-nota { margin: var(--esp-4) 0 0; }
.app-shell .kam-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--esp-4); }
.app-shell .kam-settings-grid > .card { min-width: 0; }
.app-shell .kam-settings-grid > .card + .card { margin-top: 0; }
.app-shell .kam-settings-lateral { display: grid; align-content: start; gap: var(--esp-4); min-width: 0; }
.app-shell .kam-settings-lateral > .card + .card { margin-top: 0; }
.app-shell .plan-create-trigger { display: inline-flex; margin: 0 0 var(--esp-5); }
.app-shell dialog.plan-create-dialog { width: min(560px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow: auto; }
.app-shell .plan-create-modal-header { margin-bottom: var(--esp-4); }
.app-shell .plan-create-modal-header h3 { margin: 0 0 var(--esp-1); }
.app-shell .plan-create-modal-header p { margin: 0; color: var(--muted); font-size: var(--texto-sm); }
.app-shell .plan-create-form { display: grid; gap: var(--esp-3); }
.app-shell .plan-create-form label { margin-bottom: var(--esp-1); }
.app-shell .plan-create-form input { width: 100%; max-width: none; margin: 0; }
.app-shell .plan-create-form .ayuda { margin: var(--esp-1) 0 0; }
.app-shell .plan-create-form .acciones { margin-top: var(--esp-2); }
.app-shell .plan-create-form .acciones button { width: max-content; }
.app-shell .vendedores-toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.app-shell .vendedores-toolbar-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); }
.app-shell .vendedores-toolbar-acciones button { margin: 0; }
.app-shell .filtro-tipo { display: grid; grid-template-columns: minmax(180px, 240px); align-items: stretch; gap: var(--esp-1); }
.app-shell .filtro-tipo label { margin: 0; }
.app-shell .filtro-tipo select { width: 100%; max-width: 240px; margin: 0; }
.app-shell .vendedores-toolbar > button { margin: 0; }
.app-shell .vendedores-pre-tabla { display: grid; gap: var(--esp-1); margin-bottom: var(--esp-4); padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--border); border-radius: var(--radio-lg); background: var(--surface-sunken); }
.app-shell .vendedores-pre-tabla .ayuda { margin: 0; }
/* Código del vendedor: la dirección completa sigue en el texto, recortada a la vista y entera al pasar el ratón. */
.app-shell .codigo-vendedor { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); margin-top: var(--esp-1); }
.app-shell .codigo-vendedor a { display: inline-block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--muted); }
/* Los avisos dentro de «Estado» como etiquetas, no como párrafos rojos sueltos. */
.app-shell .vendedor-estado-cell .err { display: block; margin: var(--esp-1) 0 0; padding: var(--esp-1) var(--esp-2); border-radius: var(--radio-md);
  background: var(--badge-danger-bg); color: var(--badge-danger-fg); line-height: var(--interlineado-ajustado); }
.app-shell .vendedores-pre-tabla .acciones { margin: 0; }
.app-shell .vendedores-costo-ayuda { margin: 0; }
.app-shell .vendedor-estado-cell { min-width: 190px; }
.app-shell .vendedor-acciones-cell { min-width: 250px; }
/* «Más» de una fila: se despliega en la misma celda, las opciones una bajo otra. */
.menu-fila { margin: 0; padding: 0; border: 0; }
.menu-fila > summary { display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 2rem; padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--border-fuerte); border-radius: var(--radio-md); background: var(--surface); color: var(--txt);
  font-size: var(--texto-xs); font-weight: var(--peso-semi); list-style: none; cursor: pointer;
  transition: background-color var(--duracion-rapida) ease; }
.menu-fila > summary::-webkit-details-marker { display: none; }
.menu-fila > summary:hover, .menu-fila[open] > summary { background: var(--surface-sunken); }
.menu-fila-opciones { position: fixed; z-index: var(--z-menu); min-width: 12rem; display: grid; justify-items: stretch; gap: var(--esp-1); padding: var(--esp-2);
  border: 1px solid var(--border); border-radius: var(--radio-md); background: var(--surface); box-shadow: var(--shadow-md);
  animation: menu-in var(--duracion-rapida) var(--curva-salida); }
.app-shell .wrap .menu-fila-opciones button { width: 100%; justify-content: flex-start; }
.app-shell .vendedor-acciones-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); }
.app-shell .vendedor-acciones-list button { width: max-content; margin: 0; }
.app-shell dialog.vendedor-action-dialog { width: min(560px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow: auto; }
.app-shell .vendedor-modal-header { margin-bottom: var(--esp-4); }
.app-shell .vendedor-modal-header h3 { margin: 0; }
.app-shell .vendedor-modal-content { display: grid; gap: var(--esp-3); }
.app-shell .vendedor-modal-content > .ayuda { margin: 0; }
.app-shell .vendedor-accion-campo { display: grid; gap: var(--esp-1); }
.app-shell .vendedor-accion-campo label { margin: 0; }
.app-shell .vendedor-accion-campo input { width: 100%; max-width: none; margin: 0; }
.app-shell .vendedor-action-dialog .vendedor-rut-grid { width: 100%; max-width: none; }
.app-shell .vendedor-action-dialog .rut-check { align-self: start; margin-top: 1.75rem; }
.app-shell .vendedor-action-dialog .vendedor-modal-actions { margin-top: var(--esp-4); }
.app-shell .prospectos-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.app-shell .prospectos-toolbar button { width: max-content; margin: 0; }
.app-shell .prospectos-filtro { display: grid; justify-items: start; gap: var(--esp-1); }
.app-shell .prospectos-filtro .check { margin: 0; }
.app-shell .prospecto-acciones { min-width: 250px; }
.app-shell .prospecto-seguimiento { min-width: 230px; max-width: 340px; }
.app-shell .prospecto-seguimiento > div + div { margin-top: var(--esp-1); }
.app-shell .prospecto-acciones-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); }
.app-shell .prospecto-acciones-list button { width: max-content; margin: 0; }
.app-shell dialog.prospecto-dialog { width: min(760px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow: auto; }
.app-shell .prospecto-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); }
.app-shell .prospecto-field { display: grid; align-content: start; gap: var(--esp-1); min-width: 0; }
.app-shell .prospecto-field label { margin: 0; }
.app-shell .prospecto-field input, .app-shell .prospecto-field select { width: 100%; max-width: none; margin: 0; }
.app-shell .prospecto-field input[list] { min-width: 0; }
.app-shell .prospecto-field[hidden] { display: none; }
.app-shell .prospecto-dialog > .err { margin-top: var(--esp-2); }
.app-shell .reporte-sin-diferencias { margin-bottom: var(--esp-4); }
.app-shell .indicadores-desde { margin-bottom: var(--esp-3); }
.app-shell .indicadores-desde p { margin: 0; }
.app-shell .indicadores-desde p + p { margin-top: var(--esp-1); }
.app-shell .indicadores-dashboard { width: 100%; max-width: none; margin-top: var(--esp-4); }
.app-shell .indicadores-paneles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--esp-3); }
.app-shell .indicador-seccion { min-width: 0; padding: var(--esp-3); border: 1px solid var(--border); border-radius: var(--radio-lg); background: var(--surface-sunken); }
.app-shell .indicador-seccion h2 { margin: 0 0 var(--esp-2); font-size: var(--texto-md); }
.app-shell .indicador-seccion p { margin-top: var(--esp-2); margin-bottom: 0; }
.app-shell .indicador-seccion .indicador-dato { margin: 0; color: var(--color-stat); font-size: var(--texto-xl); font-weight: var(--peso-fuerte); line-height: var(--interlineado-ajustado); font-variant-numeric: tabular-nums; }
.app-shell .indicador-dato span { color: var(--muted); font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.app-shell .indicador-detalle { margin-top: var(--esp-3); }
.app-shell .indicador-detalle > p { margin-top: var(--esp-1); }
.app-shell .indicador-contenido > :first-child { margin-top: 0; }
.app-shell .indicador-contenido details { margin-top: var(--esp-2); }
.app-shell .indicador-contenido details > div { margin-top: var(--esp-1); }
.app-shell .ajustes-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: start; gap: var(--esp-4); }
.app-shell .ajustes-layout > .card { width: 100%; max-width: none; margin: 0; }
.app-shell .comisiones-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--esp-3) var(--esp-4); }
.app-shell .ajuste-campo { display: grid; align-content: start; gap: var(--esp-1); min-width: 0; }
.app-shell .ajuste-campo label { margin: 0; }
.app-shell .ajuste-campo input { width: 100%; max-width: none; margin: 0; }
.app-shell .ajuste-campo .ayuda { margin: var(--esp-1) 0 0; }
.app-shell .comisiones-config-grid .ajustes-seccion-titulo,
.app-shell .comisiones-config-grid .ajustes-aviso,
.app-shell .comisiones-config-grid .ajustes-ayuda { grid-column: 1 / -1; margin: 0; }
.app-shell .ajustes-seccion-titulo { margin: var(--esp-2) 0 0; }
.app-shell .ajustes-config-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-4); }
.app-shell .ajustes-config-meta .muted { flex-basis: 100%; }
.app-shell .ajustes-config-card > #cErr { margin-top: var(--esp-3); }
.app-shell .ajustes-config-card > #cBtn { width: max-content; margin-top: var(--esp-2); }
.app-shell .cuentas-empresa-card .row { align-items: flex-start; }
.app-shell .vendedor-acciones-inline { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
.app-shell .vendedor-accion { margin: 0; padding: 0; border: 0; }
.app-shell .vendedor-accion summary { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-3); border: 1px solid var(--border-fuerte); border-radius: var(--radio-md); background: var(--surface); color: var(--txt); font-size: var(--texto-xs); font-weight: var(--peso-semi); list-style: none; }
.app-shell .vendedor-accion summary::-webkit-details-marker { display: none; }
.app-shell .vendedor-accion summary::after { content: "+"; color: var(--muted); font-size: var(--texto-sm); }
.app-shell .vendedor-accion[open] summary::after { content: "−"; }
.app-shell .vendedor-accion summary:hover { background: var(--surface-sunken); border-color: var(--color-slate-400); }
.app-shell .vendedor-accion-contenido { display: grid; justify-items: start; gap: var(--esp-2); max-width: 300px; padding: var(--esp-2) 0; }
.app-shell .vendedor-accion-contenido label { margin: 0; }
.app-shell .vendedor-accion-campo { display: grid; gap: var(--esp-1); width: 100%; }
.app-shell .vendedor-accion-campo label { display: block; margin: 0; }
.app-shell .vendedor-accion-contenido input:not([type="checkbox"]) { width: 100%; max-width: 280px; margin: 0; }
.app-shell .vendedor-rut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-3); width: min(100%, 300px); }
.app-shell .vendedor-rut-grid .ayuda { margin: var(--esp-1) 0 0; }
.app-shell dialog.nuevo-vendedor-dialog { width: min(820px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow: auto; }
.app-shell .nuevo-vendedor-header { margin-bottom: var(--esp-4); }
.app-shell .nuevo-vendedor-header h3 { margin: 0 0 var(--esp-1); }
.app-shell .nuevo-vendedor-header p { margin: 0; color: var(--muted); font-size: var(--texto-sm); }
.app-shell .nuevo-vendedor-form { display: grid; gap: var(--esp-4); }
.app-shell .nuevo-vendedor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--esp-3) var(--esp-4); }
.app-shell .nuevo-vendedor-grid > div, .app-shell .rut-field { min-width: 0; }
.app-shell .nuevo-vendedor-grid label, .app-shell .rut-field label { margin-bottom: var(--esp-1); }
.app-shell .nuevo-vendedor-grid input, .app-shell .nuevo-vendedor-grid select,
.app-shell .rut-field input, .app-shell .rut-field select { width: 100%; max-width: none; margin: 0; }
.app-shell .nuevo-vendedor-grid .ayuda, .app-shell .rut-field .ayuda { margin: var(--esp-1) 0 0; }
.app-shell .nuevo-vendedor-rut { padding-top: var(--esp-4); border-top: 1px solid var(--border); }
.app-shell .nuevo-vendedor-rut h4 { margin: 0 0 var(--esp-1); font-size: var(--texto-md); }
.app-shell .nuevo-vendedor-rut > .ayuda { margin: 0 0 var(--esp-3); }
.app-shell .rut-fields-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--esp-3) var(--esp-4); }
.app-shell .rut-check { min-height: var(--control-alto); align-self: start; margin-top: 1.75rem; }
.app-shell .nuevo-vendedor-form .acciones { justify-content: flex-end; margin: 0; padding-top: var(--esp-3); border-top: 1px solid var(--border); }
.app-shell .nuevo-vendedor-form .acciones button { width: max-content; }
.app-shell .kam-users-list { max-width: none; }
.app-shell .kam-user-row { padding: var(--esp-4) 0; border-bottom: 1px solid var(--border); }
.app-shell .kam-user-row:first-of-type { padding-top: 0; }
.app-shell .kam-user-row:last-of-type { padding-bottom: 0; border-bottom: 0; }
.app-shell .kam-user-email { margin-bottom: var(--esp-3); font-weight: var(--peso-medio); }
.app-shell .kam-user-email span { color: var(--muted); font-weight: var(--peso-normal); }
.app-shell .kam-user-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--esp-3); }
.app-shell .kam-user-reason { flex: 1 1 22rem; min-width: min(100%, 18rem); max-width: 560px; }
.app-shell .kam-user-reason label { margin-bottom: var(--esp-1); }
.app-shell .kam-user-reason input { width: 100%; margin: 0; }
.app-shell .kam-user-controls button { flex: 0 0 auto; margin: 0 0 1px; }
.app-shell .kam-user-error { margin-top: var(--esp-2); }
.app-shell .wrap button:not(.sm) {
  width: max-content;
  min-width: 7.5rem;
  max-width: 100%;
  min-height: var(--control-alto);
  padding: var(--control-relleno);
  font-size: var(--texto-sm);
}
.app-shell .wrap .card button.primary-action { min-height: var(--control-alto); }
.app-shell .wrap .card > button { margin-top: var(--esp-2); }
.app-shell .wrap .card > input, .app-shell .wrap .card > select,
.app-shell .wrap .card > textarea, .app-shell .wrap .card details input,
.app-shell .wrap .card details select { max-width: 560px; }
.app-shell .cabecera-pagina.tenant-heading { align-items: flex-start; }
.app-shell .tenant-tags { margin-top: var(--esp-3); }
.app-shell a.volver {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 2.4rem;
  margin: 0 0 var(--esp-3); padding: 0 var(--esp-3); border: 1px solid var(--border);
  border-radius: var(--radio-lg); background: var(--surface); color: var(--txt);
  font-weight: var(--peso-semi); text-decoration: none; box-shadow: var(--shadow-sm);
}
.app-shell a.volver .icono { color: var(--muted); }
.app-shell a.volver:hover { border-color: var(--border-fuerte); background: var(--surface-sunken); }
.app-shell .plan-edit-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--esp-2); }
.app-shell .plan-edit-row select { width: min(100%, 300px); margin: 0; }
.app-shell .tenant-tags { gap: var(--esp-2); }
.app-shell .account-user-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
.app-shell .account-card .account-data-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--esp-2); }
.app-shell .account-card .account-data-row > *,
.app-shell .account-card .account-user-row > * { width: auto; max-width: 100%; padding-inline: 0; flex: 0 1 auto; }
.app-shell .account-card .account-user-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--esp-2); }
.app-shell .account-card .account-user-row > button { flex: 0 0 auto; width: max-content; padding-inline: var(--esp-4); white-space: nowrap; }
.app-shell .calidades { margin: var(--esp-5) 0 0; padding-top: var(--esp-4); border-top: 1px solid var(--border); }
.app-shell .calidades-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-3); }
.app-shell .calidades-opciones .check { align-items: flex-start; }
.app-shell .calidades-opciones .check > input { margin-top: 0.2rem; flex: 0 0 1rem; }
.app-shell .calidades-nota { display: block; margin: var(--esp-1) 0 0; }
.app-shell .calidades .aviso { margin: 0 0 var(--esp-2); }
@media (max-width: 560px) { .app-shell .calidades-opciones { grid-template-columns: 1fr; } }
.app-shell .legal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
.app-shell .legal-fields input { max-width: 100%; }
.app-shell .invoice-card .invoice-status { display: grid; justify-items: start; gap: var(--esp-1); margin-top: 0; }
.app-shell .invoice-card .factura-warning { margin-bottom: var(--esp-2); }
.app-shell .invoice-card h3 { margin-top: var(--esp-4); margin-bottom: var(--esp-2); }
.app-shell .fe-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); }
.app-shell .fe-field { min-width: 0; }
.app-shell .fe-field label {
  display: flex;
  align-items: flex-end;
  min-height: 2.75rem;
  margin-bottom: var(--esp-2);
  line-height: 1.35;
}
.app-shell .fe-field input, .app-shell .fe-field select { width: 100%; max-width: none; margin: 0; }
.app-shell .fe-check { align-self: end; min-height: var(--control-alto); margin: 0; }
.app-shell .fe-actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin: var(--esp-4) 0 var(--esp-2); }
.app-shell .fe-actions button { width: 12rem; }
.app-shell .billing-card .billing-tax-row,
.app-shell .billing-card .pagado-hasta-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--esp-2); }
.app-shell .billing-card .billing-tax-row > *,
.app-shell .billing-card .pagado-hasta-row > * { width: auto; max-width: none; padding-inline: 0; }
.app-shell .billing-card .billing-tax-row { padding-block: var(--esp-2); }
.app-shell .billing-card #cobCrear { margin-top: var(--esp-2); }
.avance-activacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); gap: var(--esp-1); margin-top: var(--esp-2); }
.avance-activacion progress { width: 100%; height: 0.375rem; appearance: none; border: 0; border-radius: var(--radio-pastilla); overflow: hidden; background: var(--surface-sunken); }
.avance-activacion progress::-webkit-progress-bar { background: var(--surface-sunken); }
.avance-activacion progress::-webkit-progress-value { background: var(--marca-ambar); border-radius: var(--radio-pastilla); }
.avance-activacion progress::-moz-progress-bar { background: var(--marca-ambar); border-radius: var(--radio-pastilla); }
.app-shell .seller-overview { display: grid; gap: var(--esp-2); margin: var(--esp-2) 0 var(--esp-4); }
.app-shell .activation-time-card #tiempoAbrir,
.app-shell .verification-card #verAbrir { margin-top: var(--esp-3); }
.app-shell .override-group + .override-group { margin-top: var(--esp-4); }
.app-shell .overrides-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); margin-top: var(--esp-3); }
.app-shell .override-item { display: grid; align-content: start; gap: var(--esp-2); min-width: 0; padding: var(--esp-3); border: 1px solid var(--border); border-radius: var(--radio-lg); background: var(--surface); }
.app-shell .override-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
.app-shell .override-item select { width: 100%; margin: 0; }
.app-shell .site-row { align-items: flex-start; }
.app-shell #crmFicha + #cadenaFicha,
.app-shell #cadenaFicha + #creditoFicha { margin-top: var(--esp-4); }
.app-shell .crm-action-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(180px, .7fr); gap: var(--esp-4); }
.app-shell .crm-accion #crmGuardarAccion { display: inline-flex; width: max-content; align-self: flex-start; }
.app-shell .note-editor { display: block; width: min(100%, 720px); min-height: 7rem; margin: var(--esp-2) 0 var(--esp-3); padding: var(--esp-3) var(--esp-4); resize: vertical; border: 1px solid var(--border-fuerte); border-radius: var(--radio-lg); background: var(--surface); color: var(--txt); font: inherit; line-height: 1.5; box-shadow: inset 0 1px 2px rgba(16,24,40,.04); }
.app-shell .note-editor:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 20%, transparent); }
.app-shell .crm-notas button { margin-top: var(--esp-1); }
.app-shell .crm-accion #crmAccionErr, .app-shell .crm-notas #crmNotaErr { margin-top: var(--esp-1); }
.app-shell .credit-actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-3) 0; }
.app-shell .alta-negocio { width: 100%; max-width: none; padding: var(--esp-5); }
.alta-intro { max-width: 880px; margin: calc(-1 * var(--esp-3)) 0 var(--esp-4); }
.alta-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--esp-3) var(--esp-5); }
.alta-corredor { width: min(100%, 560px); }
.alta-layout .alta-seccion { min-width: 0; margin: 0; padding: 0; }
.alta-layout .alta-seccion legend { grid-column: 1 / -1; margin-bottom: var(--esp-3); }
.alta-form-layout { display: grid; gap: var(--esp-6); }
.alta-form-layout .alta-seccion { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--esp-5); min-width: 0; margin: 0; padding: var(--esp-5) 0 0; border-top: 1px solid var(--border); }
.alta-form-layout .alta-seccion legend { float: none; width: 100%; grid-column: 1 / -1; margin-bottom: var(--esp-4); }
.alta-form-layout .alta-contratacion { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alta-form-layout .alta-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alta-campo { min-width: 0; }
.alta-campo > input, .alta-campo > select { margin-bottom: var(--esp-3); }
.alta-campo .ayuda { margin-top: calc(-1 * var(--esp-2)); }
.alta-form-layout #aBloqueDv, .alta-form-layout #aBloqueJuridica,
.alta-form-layout #aBloqueNatural, .alta-form-layout #aBloqueRestaurante,
.alta-form-layout #aBloqueMesas { display: contents; }
.alta-form-layout #aBloquePremium { grid-column: 1; }
.alta-form-layout #aBloqueBolsa { grid-column: 2 / -1; }
.alta-form-layout #aBolsaMayorista { grid-column: 1 / -1; }
.alta-form-layout #aRestaurante { margin: var(--esp-1) 0 var(--esp-3); }
.alta #aBloquePremium > .ayuda { margin-top: var(--esp-3); }
.alta #aResumen { width: 100%; max-width: 640px; margin: var(--esp-5) 0 var(--esp-4); }
.alta #aResumen > p { margin: var(--esp-4) 0 0; }
.alta #aResumen td.num { width: 1%; text-align: right; white-space: nowrap; }
.alta-operacion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 var(--esp-3); }
.alta-operacion-grid #aMesasBox { grid-column: 1 / -1; }
.alta-vendedor { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0 var(--esp-4); }
.alta-vendedor legend { grid-column: 1 / -1; }
.alta-vendedor #aDistriCaja { grid-column: 3; }
.alta-layout .alta-distribuidora { display: flex; align-items: center; align-self: start; gap: var(--esp-2); margin: var(--esp-2) 0 0; line-height: 1.4; }
.alta-layout .alta-vendedor .alta-distribuidora { align-self: end; min-height: var(--control-alto); margin: 0 0 var(--esp-3); }
.alta-layout .alta-distribuidora input[type=checkbox] { flex: 0 0 1rem; width: 1rem; height: 1rem; margin: 0; }
.alta-ticket { grid-column: 1 / -1; margin: 0; }
.alta-submit { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-2); }
.alta-submit .err { align-self: stretch; }
.alta-submit button { width: max-content; }

.login-brand { display: flex; align-items: center; justify-content: center; gap: var(--esp-2); margin: 0 auto var(--esp-5); white-space: nowrap; }
.login-brand img { width: 40px; height: 40px; margin: 0; border-radius: var(--radio-lg); }
.login-brand strong { color: var(--txt); font-size: 1.35rem; font-weight: var(--peso-fuerte); letter-spacing: -0.04em; }
.login-brand span { color: var(--txt); font-size: var(--texto-sm); font-weight: var(--peso-fuerte); letter-spacing: .06em; text-transform: uppercase; }
.login-box button {
  width: max-content;
  min-width: 7.5rem;
  max-width: 100%;
  min-height: var(--control-alto);
  padding: var(--control-relleno);
  font-size: var(--texto-sm);
  align-self: flex-start;
}
.login-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-top: var(--esp-3); color: var(--muted); font-size: var(--texto-sm); }
.table-pagination-controls { display: flex; align-items: center; gap: var(--esp-2); }
.app-shell .wrap .table-pagination button { width: max-content; min-width: 0; min-height: 2rem; padding: var(--esp-1) var(--esp-3); font-size: var(--texto-xs); }
.table-pagination button:disabled, .app-shell .wrap .filtros-crm button:disabled { opacity: .45; cursor: not-allowed; }
.login-box > .muted { display: none; }

@keyframes menu-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .app-shell .indicadores-paneles, .app-shell .ajustes-layout { grid-template-columns: 1fr; }
  .app-shell .kam-settings-grid { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); padding: var(--esp-2); }
  /* El menú es un cajón que entra desde la izquierda sobre un velo, como en el panel. */
  .sidebar { position: fixed; top: var(--esp-2); bottom: var(--esp-2); left: var(--esp-2); width: min(280px, calc(100vw - 3rem));
    height: auto; min-height: 0; align-self: stretch; z-index: var(--z-menu); transform: translateX(calc(-100% - var(--esp-4)));
    visibility: hidden; transition: transform var(--duracion-media) var(--curva-salida), visibility 0s linear var(--duracion-media); }
  .menu-abierto .sidebar { transform: none; visibility: visible; transition: transform var(--duracion-media) var(--curva-salida); }
  .velo-menu { position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: var(--overlay); }
  .menu-abierto .velo-menu { display: block; animation: fundido var(--duracion-media) ease; }
  .menu-movil { display: inline-flex; min-width: 0; padding: 0 var(--esp-2); }
  .app-shell .app-header .menu-movil { width: var(--control-alto); }
  .profile-dropdown { z-index: calc(var(--z-menu) + 1); }
  .app-header { min-height: 3rem; gap: var(--esp-2); }
  .app-shell .wrap { padding-top: var(--esp-2); }
  .alta-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alta-form-layout .alta-seccion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alta-form-layout #aBloquePremium, .alta-form-layout #aBloqueBolsa { grid-column: 1 / -1; }
  .alta-layout .alta-vendedor { grid-column: 1 / -1; }
  .alta-operacion-grid { grid-template-columns: 1fr; }
  .alta-operacion-grid #aMesasBox { grid-column: 1; }
  .app-shell .overrides-grid { grid-template-columns: 1fr; }
  .app-shell .fe-fields { grid-template-columns: 1fr; }
  .app-shell .fe-check { align-self: start; }
  .app-shell .rut-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Móvil: cada fila de tabla es una tarjeta con el título de la columna junto a su dato (etiquetarCeldas, core.js). */
@media (max-width: 640px) {
  .app-shell .tabla-marco { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .app-shell .tabla-marco table, .app-shell .tabla-marco tbody, .app-shell .tabla-marco tr, .app-shell .tabla-marco td { display: block; width: 100%; }
  .app-shell .tabla-marco thead { display: none; }
  .app-shell .tabla-marco tr { margin-bottom: var(--esp-3); padding: var(--esp-2) var(--esp-4); border: 1px solid var(--border);
    border-radius: var(--radio-lg); background: var(--card); box-shadow: var(--shadow-sm); }
  .app-shell .tabla-marco td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; gap: var(--esp-2);
    min-width: 0; max-width: none; padding: var(--esp-2) 0; border-bottom: 1px solid var(--border); text-align: left; white-space: normal; }
  .app-shell .tabla-marco td:last-child { border-bottom: 0; }
  /* Todo lo de la celda va en la columna del dato, uno bajo otro; las pastillas no se estiran. */
  .app-shell .tabla-marco td[data-label]:not(:first-child):not([data-label=""]) > * { grid-column: 2; }
  .app-shell .tabla-marco td > .pill, .app-shell .tabla-marco td > div > .pill { justify-self: start; }
  .app-shell .tabla-marco td::before { content: attr(data-label); color: var(--muted); font-size: var(--texto-xs); font-weight: var(--peso-semi);
    text-transform: uppercase; letter-spacing: .04em; padding-top: 0.15rem; }
  .app-shell .tabla-marco td:first-child, .app-shell .tabla-marco td[colspan], .app-shell .tabla-marco td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .app-shell .tabla-marco td:first-child::before, .app-shell .tabla-marco td[colspan]::before, .app-shell .tabla-marco td:not([data-label])::before { display: none; }
  .app-shell .tabla-marco tr.clicable:hover td { background: transparent; }
  .app-shell .vendedores-toolbar, .app-shell .vendedores-toolbar-acciones { align-items: stretch; }
  .app-shell .vendedores-toolbar-acciones { width: 100%; }
  .app-shell .vendedores-toolbar-acciones button { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .app-header { padding-inline: 0; }
  .app-context { display: none; }
  .header-actions { margin-left: auto; }
  .app-shell .wrap { padding-inline: 0; }
  .app-shell .filtro-tipo { grid-template-columns: 1fr; gap: var(--esp-1); }
  .app-shell .filtro-tipo select { max-width: 100%; }
  .app-shell .nuevo-vendedor-grid, .app-shell .rut-fields-grid { grid-template-columns: 1fr; }
  .app-shell .prospecto-form-grid { grid-template-columns: 1fr; }
  .app-shell .indicadores-paneles, .app-shell .ajustes-layout { grid-template-columns: 1fr; }
  .app-shell .comisiones-config-grid { grid-template-columns: 1fr; }
  .app-shell .comisiones-config-grid .ajustes-seccion-titulo,
  .app-shell .comisiones-config-grid .ajustes-aviso,
  .app-shell .comisiones-config-grid .ajustes-ayuda { grid-column: 1; }
  .app-shell .rut-fields-grid .rut-check { margin-top: 0; }
  .sidebar-brand img { width: 32px; height: 32px; }
  .brand-name { font-size: var(--texto-md); }
  .app-shell .alta-negocio { padding: var(--esp-4); }
  .alta-layout { grid-template-columns: 1fr; gap: var(--esp-4); }
  .alta-layout .alta-seccion { grid-template-columns: 1fr; }
  .alta-form-layout .alta-seccion { grid-template-columns: 1fr; }
  .alta-ticket, .alta-submit { grid-column: 1; }
  .alta-layout .alta-vendedor { grid-template-columns: 1fr; }
  .alta-vendedor legend, .alta-vendedor #aDistriCaja { grid-column: 1; }
  .alta-layout .alta-vendedor .alta-distribuidora { min-height: 0; margin: var(--esp-1) 0 var(--esp-3); }
  .app-shell .legal-fields, .app-shell .crm-action-fields { grid-template-columns: 1fr; gap: 0; }
}