/* ==========================================================================
   Componentes base — reutilizables por todos los módulos de la suite.
   Siguen el lenguaje de MUFAH-BRAND-KIT/10-WEB/MUFAH-COMPONENTES.css:
   tarjeta blanca con radio-l y sombra, botón de radio-m en Archivo 800,
   badge de radio-s en DM Mono. Adaptados a la densidad de un panel.

     .tarjeta         contenedor de bloque
     .tarjeta-enc     encabezado de tarjeta
     .kpi             fila de indicador con variación
     .tabla           tabla de datos, con fila de detalle opcional
     .estado          etiqueta de estado
     .boton           botón de acción
     .chip            etiqueta compacta
     .aviso           aviso flotante
     .medidor-riesgo  probabilidad con su nivel        (desde la fase 2)
     .linea-tiempo    hitos con estado de avance       (desde la fase 2)
     .telefono        conversación de WhatsApp         (desde la fase 3)
   ========================================================================== */

/* ── Tarjeta ──────────────────────────────────────────────────────────── */

.tarjeta {
  background: var(--superficie-alta);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tarjeta__cuerpo {
  padding: var(--pad-tarjeta);
  flex: 1;
  min-height: 0;
}

.tarjeta__cuerpo--plano { padding: 0; }

.tarjeta__pie {
  padding: var(--esp-2) var(--pad-tarjeta);
  border-top: var(--borde);
  color: var(--texto-tenue);
}

.tarjeta--oscura {
  background: var(--mufah-navy);
  color: var(--texto-invertido);
}

/* ── Encabezado de tarjeta ────────────────────────────────────────────── */

.tarjeta-enc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--pad-tarjeta);
  border-bottom: var(--borde);
}

.tarjeta-enc__titulo {
  font-family: var(--tipo-titulos);
  font-size: var(--txt-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-titulo);
  color: var(--texto-fuerte);
}

.tarjeta-enc__meta {
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.tarjeta-enc__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

/* ── Fila de KPI ──────────────────────────────────────────────────────── */

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4);
  background: var(--superficie-alta);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-card);
  min-width: 0;
}

.kpi__etiqueta {
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.kpi__valor {
  font-family: var(--tipo-titulos);
  font-size: var(--txt-cifra);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-cifra);
  line-height: 1;
  color: var(--texto-fuerte);
  font-variant-numeric: tabular-nums;
}

.kpi__pie {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-top: var(--esp-1);
}

.kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--tipo-datos);
  font-size: var(--txt-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-medio);
  white-space: nowrap;
}

.kpi__delta--bien { color: var(--fn-exito); }
.kpi__delta--mal  { color: var(--fn-error); }

.kpi__flecha { font-size: 0.7em; line-height: 1; }

.kpi__nota {
  font-family: var(--tipo-datos);
  font-size: var(--txt-xs);
  color: var(--texto-tenue);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rejilla de KPIs: se usa igual en todos los módulos. */
.rejilla-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-rejilla);
}

/* ── Tabla ────────────────────────────────────────────────────────────── */

.tabla-marco { overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-sm);
}

.tabla th {
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  font-weight: var(--peso-normal);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  text-align: left;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--borde);
  white-space: nowrap;
}

.tabla td {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--linea-tenue);
  color: var(--texto-medio);
  vertical-align: baseline;
}

.tabla tbody tr:last-child td { border-bottom: 0; }

.tabla tbody tr:hover td { background: var(--superficie-sutil); }

.tabla__num,
.tabla th.tabla__num {
  text-align: right;
  font-family: var(--tipo-datos);
  font-variant-numeric: tabular-nums;
}

.tabla__principal { color: var(--texto-fuerte); font-weight: var(--peso-medio); }

/* Fila de detalle: cuelga de la fila anterior y comparte su fondo al pasar el
   cursor, para que se lean como una sola unidad. */
.tabla tbody tr.tabla__detalle td {
  padding-top: 0;
  padding-bottom: var(--esp-3);
  border-bottom: var(--borde);
  color: var(--texto-medio);
  font-size: var(--txt-sm);
  line-height: var(--lh-suelto);
}

.tabla tbody tr.tabla__fila td { border-bottom: 0; }

.tabla tbody tr.tabla__fila:hover td,
.tabla tbody tr.tabla__fila:hover + .tabla__detalle td { background: var(--superficie-sutil); }

.tabla tbody tr.tabla__fila.es-activa td,
.tabla tbody tr.tabla__fila.es-activa + .tabla__detalle td { background: var(--acento-suave); }

.tabla tbody tr.tabla__detalle:last-child td { border-bottom: 0; }

/* ── Medidor de riesgo ────────────────────────────────────────────────────
   Probabilidad y nivel en una sola etiqueta. Los niveles usan los colores
   funcionales del kit, no una escala propia. */

.medidor-riesgo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio-s);
  background: var(--gris-100);
  white-space: nowrap;
}

.medidor-riesgo__cifra {
  font-family: var(--tipo-datos);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  color: var(--texto-fuerte);
}

.medidor-riesgo__nivel {
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.medidor-riesgo--alto  { background: var(--error-suave); }
.medidor-riesgo--alto  .medidor-riesgo__cifra,
.medidor-riesgo--alto  .medidor-riesgo__nivel { color: var(--fn-error); }

.medidor-riesgo--medio { background: var(--advertencia-suave); }
.medidor-riesgo--medio .medidor-riesgo__cifra,
.medidor-riesgo--medio .medidor-riesgo__nivel { color: var(--fn-advertencia); }

.medidor-riesgo--bajo  { background: var(--exito-suave); }
.medidor-riesgo--bajo  .medidor-riesgo__cifra,
.medidor-riesgo--bajo  .medidor-riesgo__nivel { color: var(--fn-exito); }

/* Mientras el modelo evalúa, el medidor ocupa su lugar sin dar un número. */
.medidor-riesgo--evaluando .medidor-riesgo__cifra { color: var(--texto-tenue); }

/* ── Línea de tiempo ──────────────────────────────────────────────────────
   Hitos con tres estados: hecho, en curso y pendiente. */

.linea-tiempo {
  display: flex;
  flex-direction: column;
  position: relative;
}

.hito {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--esp-3);
  padding-bottom: var(--esp-4);
  position: relative;
}

.hito:last-child { padding-bottom: 0; }

/* El riel que une los hitos, cortado en el último. */
.hito:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 2px;
  width: 2px;
  background: var(--linea);
}

.hito--hecho:not(:last-child)::before { background: var(--acento-borde); }

.hito__marca {
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: var(--radio-completo);
  border: 2px solid var(--linea-fuerte);
  background: var(--superficie-alta);
  flex: none;
  z-index: var(--z-base);
}

.hito--hecho .hito__marca {
  border-color: var(--acento);
  background: var(--acento);
}

.hito--en-curso .hito__marca {
  border-color: var(--acento);
  background: var(--superficie-alta);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.hito__titulo {
  display: block;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-fuerte);
  line-height: 1.3;
}

.hito--pendiente .hito__titulo { color: var(--texto-tenue); }

.hito__cuando {
  display: block;
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 2px;
}

.hito--en-curso .hito__cuando { color: var(--acento); }

.hito__desc {
  display: block;
  font-size: var(--txt-xs);
  color: var(--texto-medio);
  line-height: var(--lh-normal);
  margin-top: var(--esp-1);
}

.hito--pendiente .hito__desc { color: var(--texto-tenue); }

/* ── Etiqueta de estado ───────────────────────────────────────────────── */

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--texto-medio);
  white-space: nowrap;
}

.estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radio-completo);
  background: currentColor;
  flex: none;
}

.estado--alta    { color: var(--fn-error); }
.estado--media   { color: var(--fn-advertencia); }
.estado--baja    { color: var(--fn-exito); }
.estado--activo  { color: var(--acento); }
.estado--neutro  { color: var(--texto-tenue); }

/* ── Botón de acción ──────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radio-m);
  background: var(--mufah-azul);
  color: var(--texto-invertido);
  font-family: var(--tipo-titulos);
  font-size: var(--txt-base);
  font-weight: var(--peso-fuerte);
  line-height: 1.4;
  text-align: center;
  transition: background var(--dur-ui) var(--curva-ui),
              transform var(--dur-micro) var(--curva-ui),
              color var(--dur-ui) var(--curva-ui);
}

.boton:hover { background: var(--azul-700); }

.boton:active { transform: translateY(1px); }

.boton:disabled,
.boton[aria-disabled="true"] {
  background: var(--gris-100);
  color: var(--gris-300);
  cursor: not-allowed;
  transform: none;
}

/* Secundario del kit: contorno interior de 2 px, sin borde real. */
.boton--sec {
  background: transparent;
  color: var(--mufah-navy);
  box-shadow: inset 0 0 0 2px var(--mufah-navy);
}

.boton--sec:hover { background: var(--mufah-navy); color: var(--texto-invertido); }

.boton--fantasma {
  background: transparent;
  color: var(--acento);
  padding-left: var(--esp-2);
  padding-right: var(--esp-2);
}

.boton--fantasma:hover { background: var(--acento-suave); color: var(--azul-700); }

.boton--icono {
  padding: 0;
  width: 38px;
  height: 38px;
  flex: none;
}

/* Compacto, para acciones dentro de una fila de tabla. */
.boton--chico {
  padding: 6px 12px;
  font-size: var(--txt-sm);
  border-radius: var(--radio-s);
}

/* ── Chip ─────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radio-s);
  background: var(--gris-100);
  font-family: var(--tipo-datos);
  font-size: var(--txt-xs);
  letter-spacing: 0.06em;
  color: var(--texto-medio);
  white-space: nowrap;
}

.chip--acento { background: var(--azul-100); color: var(--azul-700); }
.chip--navy   { background: var(--mufah-azul); color: var(--texto-invertido); }
.chip--exito  { background: var(--exito-suave); color: var(--fn-exito); }
.chip--alerta { background: var(--advertencia-suave); color: var(--fn-advertencia); }

/* Chip pulsable, usado por las preguntas sugeridas. */
.chip--boton {
  cursor: pointer;
  font-family: var(--tipo-titulos);
  font-size: var(--txt-sm);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  padding: var(--esp-2) var(--esp-3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  color: var(--texto-medio);
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  transition: box-shadow var(--dur-ui) var(--curva-ui),
              color var(--dur-ui) var(--curva-ui),
              background var(--dur-ui) var(--curva-ui);
}

.chip--boton:hover:not(:disabled) {
  background: var(--acento-suave);
  box-shadow: inset 0 0 0 1px var(--acento-borde);
  color: var(--azul-700);
}

.chip--boton:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Aviso flotante ───────────────────────────────────────────────────── */

.avisos {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: var(--z-aviso);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  align-items: flex-end;
  pointer-events: none;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  max-width: 340px;
  padding: var(--esp-3) var(--esp-4);
  background: var(--mufah-navy);
  color: var(--texto-invertido);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-flotante);
  font-size: var(--txt-sm);
  line-height: var(--lh-normal);
  pointer-events: auto;
  animation: aviso-entra var(--dur-entrada) var(--curva-entrada) both;
}

.aviso--saliendo { animation: aviso-sale var(--dur-ui) var(--curva-ui) both; }

.aviso__marca {
  width: 3px;
  align-self: stretch;
  border-radius: var(--radio-completo);
  background: var(--mufah-azul);
  flex: none;
}

.aviso__texto { min-width: 0; }

.aviso__titulo {
  display: block;
  font-weight: var(--peso-medio);
  margin-bottom: 2px;
}

.aviso__detalle {
  display: block;
  color: var(--mufah-celeste);
  font-size: var(--txt-xs);
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes aviso-sale {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso--saliendo { animation-duration: 1ms; }
}

/* ── Insignia de módulo ───────────────────────────────────────────────────
   Avisa en la barra lateral que un módulo tiene algo nuevo. */

.modulo-enlace__insignia {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-completo);
  background: var(--mufah-azul);
  color: var(--texto-invertido);
  font-family: var(--tipo-datos);
  font-size: var(--txt-meta);
  font-variant-numeric: tabular-nums;
  flex: none;
  animation: insignia-entra var(--dur-entrada) var(--curva-entrada) both;
}

.modulo-enlace.es-activo .modulo-enlace__insignia {
  background: var(--texto-invertido);
  color: var(--mufah-azul);
}

@keyframes insignia-entra {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modulo-enlace__insignia { animation: none; }
}

/* ── Teléfono ─────────────────────────────────────────────────────────────
   Simulación de la conversación de WhatsApp. Este es el único componente que
   usa los colores --wa-*: fuera de aquí, todo sigue siendo MUFAH. */

.telefono {
  display: flex;
  flex-direction: column;
  background: var(--wa-fondo);
  border-radius: var(--radio-l);
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

.telefono__cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  background: var(--wa-cabecera);
  color: var(--wa-cabecera-texto);
  flex: none;
}

.telefono__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radio-completo);
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.telefono__avatar svg { width: 20px; height: 12px; color: var(--wa-cabecera-texto); }

.telefono__quien { min-width: 0; }

.telefono__nombre {
  display: block;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  line-height: 1.3;
}

.telefono__estado {
  display: block;
  font-size: var(--txt-xs);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
}

.telefono__hilo {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 240px;
}

/* ── Burbujas ─────────────────────────────────────────────────────────── */

.burbuja {
  max-width: 78%;
  padding: 6px 9px 4px;
  border-radius: 8px;
  background: var(--wa-burbuja-ajena);
  color: var(--wa-texto);
  font-size: var(--txt-sm);
  line-height: 1.45;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  align-self: flex-start;
  word-break: break-word;
}

/* Lo que escribe el cliente: a la derecha, en verde, como en su teléfono. */
.burbuja--propia {
  background: var(--wa-burbuja-propia);
  align-self: flex-end;
}

.burbuja__texto { display: block; }

.burbuja__texto p + p { margin-top: var(--esp-2); }

.burbuja__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--wa-meta);
  line-height: 1;
}

.burbuja__visto { width: 15px; height: 11px; color: var(--wa-visto); }

/* Aviso del sistema, centrado como los de WhatsApp. */
.burbuja--sistema {
  align-self: center;
  max-width: 88%;
  text-align: center;
  background: var(--wa-sistema);
  color: var(--wa-sistema-texto);
  font-size: var(--txt-xs);
  padding: var(--esp-2) var(--esp-3);
  box-shadow: none;
}

/* ── Escribiendo… ─────────────────────────────────────────────────────── */

.escribiendo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--wa-burbuja-ajena);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.escribiendo span {
  width: 7px;
  height: 7px;
  border-radius: var(--radio-completo);
  background: var(--wa-meta);
  opacity: 0.4;
  animation: escribiendo 1.2s var(--curva-ui) infinite;
}

.escribiendo span:nth-child(2) { animation-delay: 0.18s; }
.escribiendo span:nth-child(3) { animation-delay: 0.36s; }

@keyframes escribiendo {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30%           { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .escribiendo span { animation: none; opacity: 0.55; }
}

/* ── Compositor ───────────────────────────────────────────────────────────
   Sugerencias y campo de escritura. Nacieron en el módulo 01 y desde la fase 3
   los comparten los dos módulos conversacionales, sin cambiar su aspecto. */

.compositor {
  border-top: var(--borde);
  padding: var(--esp-3) var(--pad-tarjeta);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  flex: none;
}

.sugeridas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2);
}

.forma {
  display: flex;
  align-items: flex-end;
  gap: var(--esp-2);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-m);
  background: var(--superficie-alta);
  padding: var(--esp-1);
  transition: border-color var(--dur-ui) var(--curva-ui),
              box-shadow var(--dur-ui) var(--curva-ui);
}

.forma:focus-within {
  border-color: var(--mufah-azul);
  box-shadow: 0 0 0 3px var(--azul-100);
}

.forma__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  resize: none;
  padding: var(--esp-2);
  font-size: var(--txt-base);
  line-height: var(--lh-normal);
  color: var(--texto-fuerte);
  max-height: 120px;
  font-family: var(--tipo-titulos);
}

.forma__campo:focus { outline: none; }

.forma__campo::placeholder { color: var(--gris-300); }

.forma__enviar {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-s);
  background: var(--mufah-azul);
  color: var(--texto-invertido);
  border: 0;
  transition: background var(--dur-ui) var(--curva-ui);
}

.forma__enviar:hover:not(:disabled) { background: var(--azul-700); }

.forma__enviar:disabled {
  background: var(--gris-100);
  color: var(--gris-300);
  cursor: not-allowed;
}

.forma__enviar svg { width: 16px; height: 16px; }