/* =============================================================================
   pantallas.css — modulos propios de la bandeja
   =============================================================================
   Sigue el mismo contrato que app.css: cero hex, cero token inventado.
   ============================================================================= */

/* -------------------------------------------------- 1. bandeja: la lista --- */
.bandeja { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bandeja__lista { overflow-y: auto; flex: 1; }

.conversacion {
  line-height: 1.4;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'punto quien   cuando'
    'punto ultimo  ultimo'
    'punto meta    meta';
  gap: 0.2rem 1.2rem;
  width: 100%;
  text-align: left;
  padding: 1.4rem 1.6rem;
  border: 0;
  border-bottom: 0.1rem solid var(--theme-divider);
  background: var(--theme-bg-elevated);
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.conversacion:hover { background: var(--theme-sidenav-hover); }
.conversacion__punto {
  grid-area: punto;
  align-self: start;
  margin-top: 0.6rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--app-primary);
  flex: none;
}
.conversacion[data-leida='true'] .conversacion__punto { background: transparent; }
.conversacion__quien {
  grid-area: quien;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  flex-wrap: wrap;
}
.conversacion__nombre {
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
  font-size: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversacion[data-leida='false'] .conversacion__nombre { font-weight: var(--font-semibold); }
.conversacion__cuando {
  grid-area: cuando;
  font-family: var(--monospace-font);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
  white-space: nowrap;
  align-self: start;
}
.conversacion__ultimo {
  grid-area: ultimo;
  color: var(--theme-text-secondary);
  font-size: 0.9em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.conversacion[data-leida='false'] .conversacion__ultimo { color: var(--theme-text); }
.conversacion__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.conversacion[data-estado='cerrada'] { opacity: 0.7; }
.conversacion[aria-current='true'] {
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
}

/* aviso de ventana: la conversacion avisa ANTES de abrirla */
.ventana {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  padding: 0.2rem 0.8rem;
  border-radius: 2rem;
  white-space: nowrap;
}
.ventana .material-symbols-outlined { font-size: 1.2em; }
.ventana--abierta { background: var(--result-success-bg); color: var(--result-success-text); }
.ventana--por-vencer { background: var(--result-timeout-bg); color: var(--result-timeout-text); }
.ventana--cerrada { background: var(--result-failure-bg); color: var(--result-failure-text); }
.ventana--no-aplica {
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  border: 0.1rem solid var(--theme-border);
}

/* ------------------------------------------------------- 2. hilo: el thread */
.hilo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.hilo__encabezado {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
  flex-wrap: wrap;
}
.hilo__quien { margin-right: auto; min-width: 0; }
.hilo__quien h1 { font-size: 1.2em; }
.hilo__quien p {
  color: var(--theme-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.hilo__mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  background: var(--theme-bg);
}
.dia {
  align-self: center;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  background: var(--theme-bg-surface);
  border: 0.1rem solid var(--theme-border);
  border-radius: 2rem;
  padding: 0.2rem 1.2rem;
}

.mensaje { display: grid; gap: 0.6rem; max-width: min(100%, 62rem); }
.mensaje--saliente { justify-self: end; }
.mensaje__origen {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--theme-text-secondary);
}
.mensaje--saliente .mensaje__origen { justify-content: flex-end; }
.mensaje__globo {
  padding: 1.2rem 1.4rem;
  border-radius: 0.5rem;
  border: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
  font-size: 0.9em;
}
.mensaje--saliente .mensaje__globo {
  background: var(--app-primary-container);
  border-color: var(--app-primary-light);
  color: var(--app-primary-dark);
}
[data-theme='dark'] .mensaje--saliente .mensaje__globo {
  background: var(--theme-sidenav-subitem-bg);
  border-color: var(--theme-sidenav-subitem-hover);
  color: var(--theme-text);
}
.mensaje__pie {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  color: var(--theme-text-secondary);
}
.mensaje--saliente .mensaje__pie { justify-content: flex-end; }
.mensaje__pie .material-symbols-outlined { font-size: 1.2em; }
.mensaje__pie[data-estado='fallo'] { color: var(--app-error); }
.mensaje__pie[data-estado='leido'] { color: var(--app-primary); }

.mensaje--plantilla .mensaje__globo {
  border-left: 0.4rem solid var(--app-tertiary);
}
.mensaje__sello-plantilla {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  color: var(--app-tertiary-dark);
  margin-bottom: 0.6rem;
}
[data-theme='dark'] .mensaje__sello-plantilla { color: var(--app-tertiary-light); }

.reintento {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.2rem;
  border-radius: 0.5rem;
  background: var(--result-failure-bg);
  color: var(--result-failure-text);
}
.reintento button { min-height: 4rem; }

/* ----------------------------------------- 3. el redactor y su imposibilidad */
/* El corazon del producto: la capacidad del canal se resuelve ANTES de que la
   persona escriba. Un cuadro de texto que acepta lo que va a rebotar es el peor
   resultado posible, asi que cuando no se puede el campo NO existe: en su lugar
   va el motivo y la salida, con el camino ya armado. */
.redactor {
  border-top: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
  padding: 1.2rem 1.6rem;
  display: grid;
  gap: 1.2rem;
}
.redactor__caja {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.6rem 0.6rem 1.2rem;
  background: var(--theme-bg-surface);
}
.redactor__caja:focus-within { border-color: var(--app-primary); }
.redactor__caja textarea {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
  font-size: 0.9em;
  resize: none;
  min-height: 4.8rem;
  max-height: 16rem;
  padding: 1rem 0;
  min-width: 0;
}
.redactor__caja textarea:focus { outline: none; }
.redactor__pie {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  color: var(--theme-text-secondary);
}
.redactor__pie .canal { margin-right: auto; }

.imposible {
  display: grid;
  gap: 1.2rem;
  padding: 1.6rem;
  border: 0.1rem solid var(--theme-border);
  border-left: 0.4rem solid var(--app-warning);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
}
.imposible--bloqueo { border-left-color: var(--app-error); }
.imposible--ajeno { border-left-color: var(--app-neutral-outline); }
.imposible__titulo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--primary-font);
  font-weight: var(--font-semibold);
  font-size: 1em;
}
.imposible__por-que { font-size: 0.9em; color: var(--theme-text-secondary); }
.imposible__salida {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.imposible__salida > button, .imposible__salida > a { flex: none; }

.plantillas { display: grid; gap: 0.8rem; }
.plantilla {
  display: grid;
  gap: 0.4rem;
  text-align: left;
  width: 100%;
  padding: 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-elevated);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}
.plantilla:hover { border-color: var(--app-primary); }
.plantilla[aria-pressed='true'] {
  border-color: var(--app-primary);
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
}
.plantilla__nombre {
  font-family: var(--monospace-font);
  font-size: 0.8em;
  letter-spacing: 0.1em;
}
.plantilla__cuerpo { font-size: 0.9em; }
.plantilla__variable {
  font-family: var(--monospace-font);
  background: var(--app-tertiary-container);
  color: var(--app-tertiary-dark);
  border-radius: 0.4rem;
  padding: 0 0.4rem;
}

/* ----------------------------------------------------------- 4. el contacto */
.identidades { display: grid; gap: 0.8rem; }
.identidad {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
}
.identidad__valor {
  font-family: var(--monospace-font);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.identidad__nota {
  grid-column: 1 / -1;
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}
.misma-persona {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-radius: 0.5rem;
  background: var(--app-secondary-container);
  color: var(--app-secondary-dark);
  font-size: 0.9em;
  margin-bottom: 1.2rem;
}
[data-theme='dark'] .misma-persona {
  background: var(--theme-bg-surface);
  color: var(--app-secondary-light);
  border: 0.1rem solid var(--app-secondary-dark);
}
.consentimientos { display: grid; gap: 0.8rem; }
.consentimiento {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  border-bottom: 0.1rem solid var(--theme-divider);
}
.consentimiento:last-child { border-bottom: 0; }
.consentimiento .mat-mdc-chip { margin-left: auto; }
.notas { display: grid; gap: 1.2rem; }
.nota {
  display: grid;
  gap: 0.4rem;
  padding: 1.2rem;
  border-left: 0.4rem solid var(--app-tertiary);
  background: var(--theme-bg-surface);
  border-radius: 0 0.5rem 0.5rem 0;
}
.nota__meta {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  color: var(--theme-text-secondary);
}

/* --------------------------------------------------- 5. la linea de tiempo -- */
.tiempo { display: grid; gap: 0; padding-left: 0.4rem; }
.suceso {
  line-height: 1.5;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.2rem;
  padding-bottom: 2.4rem;
  position: relative;
}
.suceso::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3.2rem;
  bottom: 0;
  width: 0.2rem;
  background: var(--theme-divider);
}
.suceso:last-child { padding-bottom: 0; }
.suceso:last-child::before { display: none; }
.suceso__marca {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--theme-bg-surface);
  border: 0.1rem solid var(--theme-border);
  color: var(--theme-text-secondary);
  z-index: 1;
}
.suceso--mensaje .suceso__marca { border-color: var(--app-primary); color: var(--app-primary); }
.suceso--nota .suceso__marca { border-color: var(--app-tertiary); color: var(--app-tertiary); }
.suceso--estado .suceso__marca { border-color: var(--app-secondary); color: var(--app-secondary); }
.suceso--automatizacion .suceso__marca { border-style: dashed; }
.suceso__cuerpo { display: grid; gap: 0.6rem; min-width: 0; }
.suceso__titulo {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.suceso__titulo h3 { font-size: 0.9em; }
.suceso__cuando {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  color: var(--theme-text-secondary);
}
.suceso__detalle { font-size: 0.9em; color: var(--theme-text-secondary); }
.suceso__cita {
  padding: 1rem 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-elevated);
  font-size: 0.9em;
}

/* ----------------------------------------------------------- 6. vacio real -- */
/* Primer dia del cliente: una bandeja esperando su primer contacto. NO es un
   error, asi que no lleva ni icono de alerta ni color de estado. */
.vacio {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.6rem;
  text-align: center;
  padding: 4.8rem 2.4rem;
  flex: 1;
  min-height: 32rem;
}
.vacio__dibujo {
  width: 100%;
  max-width: 32rem;
  color: var(--app-primary);
  opacity: 0.9;
}
.vacio h2 { font-size: 1.5em; }
.vacio p { max-width: 46rem; color: var(--theme-text-secondary); text-wrap: pretty; }
.vacio__acciones { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.vacio__canales {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.8rem;
}

/* ------------------------------------------- 7. maestro-detalle responsive -- */
/* Debajo de 960 (isSmallOrBelow) la bandeja y el hilo son dos pantallas.
   A partir de 1280 (isLarge) conviven, y la ficha entra como tercer panel. */
.maestro-detalle {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  flex: 1;
}
.maestro-detalle > * { min-width: 0; min-height: 0; }
.maestro-detalle__lista { display: flex; flex-direction: column; min-height: 0; }
.maestro-detalle__detalle {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 0.1rem solid var(--theme-border);
}
@media (max-width: 1279.98px) {
  .maestro-detalle__detalle { display: none; }
  .maestro-detalle[data-panel='detalle'] .maestro-detalle__lista { display: none; }
  .maestro-detalle[data-panel='detalle'] .maestro-detalle__detalle {
    display: flex;
    border-left: 0;
  }
}
@media (min-width: 1280px) {
  .maestro-detalle { grid-template-columns: minmax(36rem, 38%) 1fr; }
  .volver-a-lista { display: none; }
}
@media (min-width: 1920px) {
  .maestro-detalle { grid-template-columns: minmax(38rem, 26%) 1fr minmax(34rem, 24%); }
}
.ficha-lateral { display: none; border-left: 0.1rem solid var(--theme-border); overflow-y: auto; }
@media (min-width: 1920px) { .ficha-lateral { display: block; } }

/* ------------------------------------------------------ 8. el unico gesto -- */
/* Un solo movimiento en toda la app, y es el que confirma que el mensaje salio:
   el globo entra desde abajo y el tilde de estado avanza solo. Nada mas se
   mueve: en una bandeja, el movimiento gratuito es ruido sobre trabajo. */
@keyframes sale {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: none; }
}
.mensaje--recien { animation: sale 0.2s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------ 9. la juntura ------ */
/* La tira que cruza la conversación con la oportunidad. Vive entre el
   encabezado del hilo y los mensajes: arriba de lo que se lee, porque cambia
   qué significa lo que se lee, y debajo de quién es, porque no lo reemplaza.

   Regla de peso: con UNA oportunidad es una línea, nunca una tarjeta. Una
   tarjeta acá compite con el mensaje, y el mensaje es a lo que la persona vino. */
.vinculo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1rem 1.6rem;
  border-bottom: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-surface);
}
.vinculo--sin { justify-content: space-between; }
.vinculo--varias { display: grid; gap: 0.8rem; }

.vinculo__titulo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
  color: var(--app-primary);
  text-decoration: none;
  margin-right: auto;
}
.vinculo__titulo:hover { text-decoration: underline; }
.vinculo__titulo .material-symbols-outlined { font-size: 1.2em; }

.vinculo__linea {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--monospace-font);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}
.vinculo__sep { opacity: 0.5; }

/* Un valor que sale del contrato y el contrato no existe: se muestra el LUGAR,
   nunca un valor prestado del CRM de otro producto. */
.dato-pendiente {
  border-bottom: 0.2rem dotted var(--app-neutral-outline);
  color: var(--theme-text-disabled);
  cursor: help;
}

.vinculo__propuesta,
.vinculo__aviso {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--theme-text-secondary);
  font-size: 0.9em;
  margin-right: auto;
}
.vinculo__propuesta .material-symbols-outlined { color: var(--app-tertiary); }
.vinculo__aviso .material-symbols-outlined { color: var(--app-secondary); }
.vinculo__opciones { padding: 0; border-bottom: 0; background: transparent; }

.redactor__destino {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--monospace-font);
  font-size: 0.9em;
  color: var(--app-primary);
}
.redactor__destino .material-symbols-outlined { font-size: 1.2em; }

/* ----------------------------------------------- 10. el pipeline vacío ----- */
/* El equivalente del primer día de la bandeja: un pipeline sin ninguna
   oportunidad todavía. No es un error, y por eso no lleva ícono de alerta. */
.pipeline__vacio { display: grid; gap: 1.6rem; }

/* ------------------------------------------- 11. el CRM: forma copiada ----- */
/* La forma sale del CRM que ya existe; los nombres, no. Cada bloque tiene su
   propia cabecera con su propia acción, y su propio vacío. */
.lienzo--dos-paneles { grid-template-columns: var(--grid-container-width); }

.panel__cabecera {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 0.1rem solid var(--theme-divider);
}
.panel__cabecera h2 { margin-right: auto; }
.panel__conteo {
  font-family: var(--monospace-font);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}

/* El alta es la ÚLTIMA fila de la lista, no un formulario en la cabecera.
   Así la lista se lee primero y el «agregar» aparece donde uno ya terminó de
   mirar — que es cuando se decide agregar algo. Un formulario arriba compite
   con el contenido y apretuja justo donde tiene que haber calma. */
.agregar-fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  padding: 0.6rem 1.2rem;
  border: 0.2rem dashed var(--theme-border);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease-in-out;
}
.agregar-fila:focus-within { border-color: var(--app-primary); border-style: solid; }
.agregar-fila__mas { color: var(--app-neutral-outline); flex: none; }
.agregar-fila__campo {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 4rem;
  border: 0;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
  font-size: 0.9em;
}
.agregar-fila__campo:focus { outline: none; }
.agregar-fila__tipo { flex: 0 1 16rem; }

/* --- embudos: la lista maestra -------------------------------------------- */
.embudos__lista { display: grid; gap: 0.4rem; }
.embudo { display: flex; align-items: center; gap: 0.4rem; }
.embudo__elegir {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1.2rem;
  align-items: center;
  text-align: left;
  min-height: 4.8rem;
  padding: 0.8rem 1.2rem;
  border: 0.1rem solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.embudo__elegir:hover { background: var(--theme-sidenav-hover); }
.embudo--actual .embudo__elegir {
  background: var(--app-primary-container);
  border-color: var(--app-primary);
  color: var(--app-primary-dark);
}
.embudo__nombre { font-family: var(--primary-font); font-weight: var(--font-medium); }
.embudo__conteo {
  font-family: var(--monospace-font);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}
/* predeterminado e inactivo son dos distintivos independientes, no un estado */
.embudo__distintivos { grid-column: 1 / -1; display: flex; gap: 0.6rem; flex-wrap: wrap; }

.embudo__menu { position: relative; flex: none; }
.menu-contextual {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  display: grid;
  /* nunca más ancho que la ventana: 22rem son 352px y un móvil son 360 */
  min-width: min(22rem, calc(100vw - 4.8rem));
  padding: 0.4rem;
  background: var(--theme-bg-elevated);
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.6rem 2.4rem rgb(0 0 0 / 0.2);
}
.menu-contextual[hidden] { display: none; }
.menu-contextual__item {
  text-align: left;
  min-height: 4rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font-size: 0.9em;
  text-decoration: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.menu-contextual__item:hover { background: var(--theme-sidenav-hover); }

/* --- embudos: las etapas -------------------------------------------------- */
.etapas { display: grid; gap: 0.4rem; counter-reset: etapa; }
.etapa {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 4.8rem;
  padding: 0 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
}
.etapa__orden {
  font-family: var(--monospace-font);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}
.etapa__nombre { margin-right: auto; }
/* los terminales se marcan distinto: no son una etapa más */
.etapa--cierre { border-style: dashed; border-width: 0.2rem; }
.etapa--cierre-positivo { border-color: var(--app-success); }
.etapa--cierre-negativo { border-color: var(--app-neutral-outline); }

/* --- la lista de oportunidades -------------------------------------------- */
.filtros-franja {
  display: flex;
  align-items: flex-end;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1.2rem 1.6rem;
  border-bottom: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
  flex: none;
}
.filtro-campo { display: grid; gap: 0.4rem; flex: 1 1 16rem; }
/* En la franja de filtros el campo se estira para repartir el ancho. En una
   barra de título NO: ahí es un control más al lado del título.

   Y el rótulo NO va apilado encima: en una franja de filtros ayuda, pero en una
   barra de título suma su propia altura (0.7em por el line-height 1.875 del
   body = 21px) y empuja la barra de 64 a 89px. El nombre del control va en su
   `aria-label`, que es donde importa. */
.barra .filtro-campo { flex: 0 1 22rem; }
.barra__control { flex: 0 1 24rem; }
.barra__control[hidden] { display: none; }
.filtro-campo > span:first-child {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}
.filtro-campo select { border: 0; background: transparent; color: inherit; font: inherit; flex: 1; }
.filtro-campo select:focus { outline: none; }
.filtro-campo select:disabled { color: var(--theme-text-disabled); cursor: not-allowed; }

.lista-op { display: grid; }
.fila-op {
  display: grid;
  grid-template-columns: var(--grid-footer-width);
  gap: 0.4rem 1.2rem;
  align-items: center;
  padding: 1.2rem;
  border-bottom: 0.1rem solid var(--theme-divider);
  color: inherit;
  text-decoration: none;
}
.fila-op:hover { background: var(--theme-sidenav-hover); }
.fila-op--cabecera {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}
.fila-op__titulo { font-family: var(--primary-font); font-weight: var(--font-medium); }
.fila-op__etapa,
.fila-op__monto,
.fila-op__quien { font-size: 0.9em; color: var(--theme-text-secondary); }

/* --- el tablero ----------------------------------------------------------- */
.tablero {
  display: grid;
  grid-template-columns: var(--grid-footer-width);
  gap: 1.2rem;
  align-items: start;
}
.columna {
  display: grid;
  gap: 0.8rem;
  padding: 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  min-height: 16rem;
  align-content: start;
}
.columna--cierre { border-style: dashed; border-width: 0.2rem; }
.columna--cierre-positivo { border-color: var(--app-success); }
.columna--cierre-negativo { border-color: var(--app-neutral-outline); }
.columna--destino { background: var(--app-primary-container); }
.columna__cabecera { display: flex; align-items: center; gap: 0.8rem; }
.columna__cabecera h2 { font-size: 1em; margin-right: auto; }
.columna__conteo {
  font-family: var(--monospace-font);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}
.columna__cuerpo { display: grid; gap: 0.8rem; }
/* la columna vacía sigue estando: una etapa sin nada es información */
.columna__vacia {
  font-size: 0.9em;
  color: var(--theme-text-disabled);
  padding: 1.2rem 0;
}

.tarjeta-op {
  display: grid;
  gap: 0.6rem;
  padding: 1.2rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-elevated);
  cursor: grab;
}
.tarjeta-op--movida { opacity: 0.5; }
.tarjeta-op__cabecera { display: flex; align-items: flex-start; gap: 0.8rem; }
.tarjeta-op__titulo {
  flex: 1;
  font-family: var(--primary-font);
  font-weight: var(--font-medium);
  font-size: 0.9em;
  color: inherit;
  text-decoration: none;
}
.tarjeta-op__titulo:hover { text-decoration: underline; }
.tarjeta-op__linea,
.tarjeta-op__origen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--monospace-font);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}
.tarjeta-op__origen .material-symbols-outlined { font-size: 1.2em; }
.tablero__sin-etapa:empty { display: none; }
.tablero__sin-etapa { margin-top: 1.6rem; }

/* --- la ficha de la oportunidad ------------------------------------------- */
.ficha { display: grid; grid-template-columns: var(--grid-footer-width); gap: 1.2rem; }
.par { display: grid; gap: 0.2rem; }
.par dt {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}
.par dd { margin: 0; font-size: 0.9em; }
.ficha__origen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.6rem 0;
  font-size: 0.9em;
  color: var(--theme-text-secondary);
}

/* ------------------------------- 12. superficies fuera de la app ---------- */
/* La landing y el acceso NO llevan el sidenav: quien las ve todavía no entró.
   Mismo contrato de scroll que el resto — el documento no se desplaza, se
   desplaza la región. */
.marca-shell {
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.marca-lienzo { overflow-y: auto; overscroll-behavior: contain; }
.marca-seccion {
  padding: 6.4rem 2.4rem;
  border-bottom: 0.1rem solid var(--theme-divider);
}
.marca-seccion > * { max-width: 92rem; margin-inline: auto; }
.marca-seccion--hero { padding: 9.6rem 2.4rem; }
.marca-seccion--cierre { border-bottom: 0; background: var(--theme-bg-surface); }

.hero__sobre {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--app-primary);
  margin-bottom: 1.6rem;
}
.hero h1 {
  font-size: 1.5em;
  line-height: 1.2;
  max-width: 24ch;
  text-wrap: balance;
}
.hero__bajada {
  margin: 2.4rem 0 3.2rem;
  max-width: 56ch;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}
.hero__acciones { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.hero__canales { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 4.8rem; }

.marca-titulo { margin-bottom: 3.2rem; }
.marca-titulo h2 { font-size: 1.2em; }
.marca-titulo p { color: var(--theme-text-secondary); margin-top: 0.8rem; max-width: 64ch; }

.puntos { display: grid; grid-template-columns: var(--grid-container-width); gap: 2.4rem; }
.punto { display: grid; gap: 0.8rem; align-content: start; }
.punto__numero {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.2em;
  color: var(--app-primary);
}
.punto h3 { font-size: 1em; }
.punto p { color: var(--theme-text-secondary); font-size: 0.9em; }

/* la tesis: el único bloque con peso visual de toda la landing */
.tesis {
  padding: 4rem;
  border-left: 0.4rem solid var(--app-primary);
  background: var(--theme-bg-surface);
}
.tesis p { font-size: 1.2em; line-height: 1.4; max-width: 44ch; text-wrap: pretty; }
.tesis cite {
  display: block;
  margin-top: 1.6rem;
  font-style: normal;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}

/* --- acceso ---------------------------------------------------------------*/
.acceso { display: grid; place-items: center; padding: 2.4rem; min-height: 100%; }
.acceso__caja { width: min(100%, 42rem); display: grid; gap: 2.4rem; }
.acceso__marca { display: grid; gap: 0.2rem; justify-items: center; text-align: center; }
.acceso__marca strong { font-family: var(--primary-font); font-size: 1.5em; }
.acceso__marca small {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}
.campo { display: grid; gap: 0.6rem; }
.campo > span:first-child {
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}
.acceso__licencia {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.2rem;
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
  border: 0.1rem solid var(--theme-border);
  font-size: 0.8em;
  color: var(--theme-text-secondary);
}

/* --- ayuda: cómo se usa ---------------------------------------------------*/
.pasos { display: grid; gap: 1.2rem; counter-reset: paso; }
.paso {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.2rem;
  padding: 1.6rem;
  border: 0.1rem solid var(--theme-border);
  border-radius: 0.5rem;
  background: var(--theme-bg-surface);
}
.paso__numero {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
  font-family: var(--monospace-font);
  font-size: 0.9em;
}
.paso__cuerpo { display: grid; gap: 0.6rem; }
.paso__cuerpo h3 { font-size: 1em; }
.paso__cuerpo p { font-size: 0.9em; color: var(--theme-text-secondary); }
.paso__ir { justify-self: start; margin-top: 0.4rem; }

/* --- perfil ---------------------------------------------------------------*/
.perfil__cabecera { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.perfil__avatar {
  display: grid;
  place-items: center;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: var(--app-primary-container);
  color: var(--app-primary-dark);
  font-family: var(--primary-font);
  font-size: 1.5em;
}
.perfil__quien { display: grid; gap: 0.2rem; }
.perfil__quien strong { font-family: var(--primary-font); font-size: 1.2em; }
.perfil__quien span { font-size: 0.9em; color: var(--theme-text-secondary); }

/* La foto y las iniciales ocupan la MISMA caja y se turnan: si el avatar
   midiera distinto que la imagen, la fila saltaría al elegir un archivo. */
.perfil__foto {
  position: relative;
  width: 6.4rem;
  height: 6.4rem;
  flex: none;
}
.perfil__foto .perfil__avatar { width: 100%; height: 100%; }
.perfil__imagen {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.perfil__imagen[hidden], .perfil__avatar[hidden] { display: none; }

/* 3.2rem —la altura de chip de la escala— porque un botón de 4rem sobre un
   avatar de 6.4rem le tapa la cara. El área táctil vuelve a 4.4rem por el
   pseudo-elemento, como hace Material con sus propios chips. */
.perfil__cambiar.mat-mdc-icon-button {
  position: absolute;
  right: -0.4rem;
  bottom: -0.4rem;
  width: 3.2rem;
  height: 3.2rem;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--app-primary);
  color: var(--app-on-primary);
  border: 0.2rem solid var(--theme-bg-surface);
}
.perfil__cambiar.mat-mdc-icon-button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.4rem;
  height: 4.4rem;
  transform: translate(-50%, -50%);
}
.perfil__cambiar .material-symbols-outlined { font-size: 1em; }

.perfil__aviso {
  margin: 1.2rem 0 0;
  padding: 0.8rem 1.2rem;
  border-radius: 0.4rem;
  background: var(--result-timeout-bg);
  color: var(--result-timeout-text);
  font-size: 0.9em;
  line-height: 1.4;
}
.perfil__aviso[hidden] { display: none; }
.perfil__acciones-foto { margin: 1.2rem 0 0; }
.perfil__acciones-foto[hidden] { display: none; }

.perfil__form { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
.perfil__form[hidden] { display: none; }
.perfil__form-acciones { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.campo__ayuda { font-size: 0.8em; color: var(--theme-text-secondary); line-height: 1.4; }
.perfil__error {
  margin: 0;
  color: var(--app-error);
  font-size: 0.9em;
  line-height: 1.4;
}
.perfil__error[hidden] { display: none; }
.acceso__error {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem;
  border-radius: 0.5rem;
  background: var(--result-failure-bg);
  color: var(--result-failure-text);
  font-size: 0.9em;
}
/* el JS lo oculta con el atributo: sin esta regla, el display de arriba gana */
.acceso__error[hidden] { display: none; }

/* --- la franja de filtros se pliega en pantallas chicas ------------------- */
/* Cuatro campos abiertos son 28rem en un móvil: casi la mitad del alto para
   elegir un filtro, antes de ver una sola fila de contenido. Plegada ocupa una,
   y el resumen dice cuántos hay puestos — así plegarla no esconde nada. */
.filtros-plegables {
  border-bottom: 0.1rem solid var(--theme-border);
  background: var(--theme-bg-elevated);
  flex: none;
}
.filtros-plegables__titulo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4rem;
  padding: 0 1.6rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--monospace-font);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}
.filtros-plegables__titulo::-webkit-details-marker { display: none; }
.filtros-plegables__titulo:hover { background: var(--theme-sidenav-hover); }
.filtros-plegables__activos { color: var(--app-primary); }
.filtros-plegables__flecha { margin-left: auto; transition: transform 0.2s ease-in-out; }
.filtros-plegables[open] .filtros-plegables__flecha { transform: rotate(180deg); }
.filtros-plegables .filtros-franja { border-bottom: 0; }