/* ==========================================================================
   CLAQUETA - vistas
   El armazon de la app y lo propio de cada modulo.
   ========================================================================== */

/* =============================== ARMAZON ================================= */

.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  height: 100vh;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

/* ---- el rail: la columna de modulos, con perforaciones de pelicula ---- */

.rail {
  position: relative;
  background: var(--lienzo);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: var(--e3) 0;
  z-index: 30;
  transition: width var(--t-medio) var(--suave);
}

/* Las perforaciones: dos columnas de agujeritos, como el borde de un rollo.
   Es el detalle que le da identidad al costado sin gritar. */
.rail::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: -1px;
  width: 7px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 9px,
    var(--borde) 9px 10px,
    transparent 10px 16px,
    var(--borde) 16px 17px,
    transparent 17px 26px
  );
  opacity: .55;
  pointer-events: none;
}

/* Ojo con la altura: la tapa del logo se levanta al aplaudir y necesita aire
   arriba, si no se sale por el borde de la ventana. */
.rail-marca {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--e4) var(--e5);
}
.rail-marca .claqueta-logo { width: 32px; height: 32px; flex: none; }
.rail-marca .nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.03em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--t-rapido) var(--seco);
}

.rail-modulos {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 var(--e3);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.rail-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 44px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  transition: background var(--t-rapido) var(--seco), color var(--t-rapido) var(--seco);
}
.rail-item svg { width: 20px; height: 20px; flex: none; transition: transform var(--t-medio) var(--salto); }
.rail-item span { opacity: 0; transition: opacity var(--t-rapido) var(--seco); }
.rail-item:hover { background: var(--papel-hondo); color: var(--tinta); }
.rail-item:hover svg { transform: scale(1.12) rotate(-4deg); }

.rail-item[aria-current='page'] {
  background: var(--tono-suave, var(--papel-hondo));
  color: var(--tono, var(--tinta));
}
/* La marca del modulo activo: una barrita a la izquierda que se desliza */
.rail-item[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -13px; top: 50%;
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--tono, var(--cinta));
  transform: translateY(-50%);
  animation: marca-entra .3s var(--salto) both;
}
@keyframes marca-entra {
  from { height: 0; opacity: 0; }
  to { height: 22px; opacity: 1; }
}

.rail-item .globo {
  margin-left: auto;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--cinta);
  color: var(--sobre-cinta);
  font-size: 11px;
  font-weight: 700;
  display: grid; place-items: center;
  font-family: var(--mono);
  opacity: 0;
  transition: opacity var(--t-rapido) var(--seco);
}
/* cuando el rail esta cerrado, el globo se vuelve un puntito sobre el icono */
.rail-item .punto-aviso {
  position: absolute;
  top: 9px; left: 27px;
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--cinta);
  border: 2px solid var(--lienzo);
  animation: pop .3s var(--salto) both;
}

/* al pasar el mouse el rail se abre. sin clicks, sin config. */
/* Durante el recorrido el menú se queda abierto solo. Si no, Clap ilumina un
   ícono de 76px sin su nombre al lado, que es justo lo que estaba tratando
   de explicar. */
.rail:hover, .rail.fijo, html.tour-andando .rail { width: var(--rail-abierto); }
.app:has(.rail:hover), .app:has(.rail.fijo),
html.tour-andando .app { grid-template-columns: var(--rail-abierto) 1fr; }
.rail:hover .nombre, .rail.fijo .nombre,
.rail:hover .rail-item span, .rail.fijo .rail-item span,
.rail:hover .globo, .rail.fijo .globo,
html.tour-andando .rail .nombre,
html.tour-andando .rail .rail-item span,
html.tour-andando .rail .globo { opacity: 1; }
.rail:hover .punto-aviso, .rail.fijo .punto-aviso { opacity: 0; }

/* transicion del ancho de la grilla */
.app { transition: grid-template-columns var(--t-medio) var(--suave); }

.rail-pie { padding: var(--e3) var(--e3) 0; display: flex; flex-direction: column; gap: 3px; }

/* ------------------------------ el escenario ---------------------------- */

.escenario {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.barra {
  height: var(--barra);
  flex: none;
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e6);
  border-bottom: 1px solid var(--borde);
  background: color-mix(in srgb, var(--papel) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  position: relative;
  z-index: 20;
}
.barra .titulo { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.barra .miga { display: flex; align-items: center; gap: 7px; color: var(--tinta-3); font-size: 13px; }
.barra .miga svg { width: 13px; height: 13px; }

/* el buscador global, que abre la paleta */
.disparador-paleta {
  display: flex; align-items: center; gap: 9px;
  height: 34px;
  padding: 0 11px 0 10px;
  min-width: 220px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--lienzo);
  color: var(--tinta-3);
  font-size: 13.5px;
  transition: all var(--t-rapido) var(--suave);
}
.disparador-paleta svg { width: 15px; height: 15px; }
.disparador-paleta:hover { border-color: var(--borde-fuerte); color: var(--tinta-2); transform: translateY(-1px); box-shadow: var(--sombra-1); }
.disparador-paleta kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--papel-hondo);
  border: 1px solid var(--borde);
  color: var(--tinta-3);
}

.lienzo-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.pagina {
  padding: var(--e6) var(--e6) var(--e10);
  max-width: 1400px;
  margin: 0 auto;
}
.pagina.ancha { max-width: none; }

.cabecera-pagina {
  display: flex; align-items: flex-start; gap: var(--e4);
  margin-bottom: var(--e6);
  flex-wrap: wrap;
}
.cabecera-pagina .sub { color: var(--tinta-2); font-size: 14.5px; margin-top: 3px; }
.cabecera-pagina .acciones { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }

.barra-filtros {
  display: flex; align-items: center; gap: var(--e2);
  flex-wrap: wrap;
  margin-bottom: var(--e5);
}

/* ============================== LA MESA ================================== */

.mesa-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e4);
  align-items: start;
}
.mesa-grilla .ancho-2 { grid-column: span 2; }
@media (max-width: 900px) { .mesa-grilla .ancho-2 { grid-column: auto; } }

/* El saludo: la unica pieza con tipografia grande de la app */
.saludo {
  display: flex; align-items: center; gap: var(--e5);
  margin-bottom: var(--e6);
  flex-wrap: wrap;
}
.saludo .mascota { width: 74px; flex: none; }
.saludo h1 { font-weight: 800; letter-spacing: -.035em; }
.saludo h1 em { font-style: normal; color: var(--cinta); }
.saludo .frase { color: var(--tinta-2); font-size: 15px; margin-top: 2px; }

/* Los numeros de arriba: pocos, grandes, sin adornos */
.pulso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e6);
}
.dato {
  padding: var(--e4);
  border-radius: var(--r-md);
  background: var(--lienzo);
  border: 1px solid var(--borde);
  position: relative;
  overflow: hidden;
  transition: transform var(--t-medio) var(--suave), box-shadow var(--t-medio) var(--suave);
}
.dato:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.dato .n {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--tono, var(--tinta));
}
.dato .que { font-size: 12.5px; color: var(--tinta-2); font-weight: 550; margin-top: 2px; }
.dato .fondo-icono {
  position: absolute;
  right: -8px; bottom: -10px;
  width: 62px; height: 62px;
  color: var(--tono, var(--tinta));
  opacity: .07;
  transition: transform var(--t-lento) var(--salto), opacity var(--t-medio) var(--seco);
}
.dato:hover .fondo-icono { transform: scale(1.16) rotate(-8deg); opacity: .13; }

/* lista compacta que se usa en varios paneles de la mesa */
.lista-fina { display: flex; flex-direction: column; }
.lista-fina .renglon {
  display: flex; align-items: center; gap: 11px;
  padding: 10px var(--e4);
  border-bottom: 1px solid var(--borde-sutil);
  transition: background var(--t-rapido) var(--seco), padding-left var(--t-rapido) var(--suave);
  cursor: pointer;
  position: relative;
}
.lista-fina .renglon:last-child { border-bottom: 0; }
.lista-fina .renglon:hover { background: var(--lienzo-2); padding-left: calc(var(--e4) + 4px); }
.lista-fina .renglon::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--tono, var(--cinta));
  transform: scaleY(0);
  transition: transform var(--t-rapido) var(--salto);
}
.lista-fina .renglon:hover::before { transform: scaleY(1); }
.lista-fina .renglon .cuando { margin-left: auto; font-size: 12px; color: var(--tinta-3); font-family: var(--mono); flex: none; }

.panel-cabeza {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e4) var(--e4) var(--e3);
}
.panel-cabeza h3 { flex: 1; font-size: 15px; }
.panel-cabeza .ver-mas { font-size: 12.5px; color: var(--tinta-3); font-weight: 600; }
.panel-cabeza .ver-mas:hover { color: var(--cinta); }

/* ============================== KANBAN =================================== */

.tablero {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--e5);
  min-height: 60vh;
}
.columna-k {
  flex: 0 0 296px;
  background: var(--papel-hondo);
  border-radius: var(--r-md);
  padding: var(--e3);
  display: flex; flex-direction: column; gap: var(--e2);
  max-height: calc(100vh - 220px);
  border: 1px solid transparent;
  transition: border-color var(--t-rapido) var(--seco), background var(--t-rapido) var(--seco);
}
.columna-k.zona-suelta { outline: none; border-color: var(--cinta); background: var(--cinta-suave); }
.columna-k-cabeza {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px 6px;
  flex: none;
}
.columna-k-cabeza .punto { width: 8px; height: 8px; border-radius: 3px; background: var(--tono, var(--gris)); flex: none; }
.columna-k-cabeza h4 { flex: 1; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.columna-k-cabeza .n { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }
.columna-k-lista {
  display: flex; flex-direction: column; gap: var(--e2);
  overflow-y: auto;
  flex: 1;
  min-height: 40px;
  padding: 2px;
  margin: -2px;
}

.tarjeta-k {
  background: var(--lienzo);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  cursor: grab;
  box-shadow: var(--sombra-0);
  transition: transform var(--t-rapido) var(--suave), box-shadow var(--t-rapido) var(--suave), border-color var(--t-rapido) var(--seco);
  display: flex; flex-direction: column; gap: 8px;
}
.tarjeta-k:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.tarjeta-k:active { cursor: grabbing; }
.tarjeta-k .k-titulo { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.tarjeta-k .k-pie { display: flex; align-items: center; gap: 7px; }
.tarjeta-k .k-num { font-family: var(--mono); font-size: 11px; color: var(--tinta-4); }

/* ============================= CRONOGRAMA ================================ */

.calendario { background: var(--lienzo); border: 1px solid var(--borde); border-radius: var(--r-md); overflow: hidden; }
.cal-cabeza {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--borde);
  background: var(--lienzo-2);
}
.cal-cabeza div {
  padding: 9px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
}
.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dia {
  min-height: 108px;
  border-right: 1px solid var(--borde-sutil);
  border-bottom: 1px solid var(--borde-sutil);
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background var(--t-rapido) var(--seco);
  position: relative;
}
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia.otro-mes { background: var(--lienzo-2); }
.cal-dia.otro-mes .num { color: var(--tinta-4); }
.cal-dia.hoy { background: var(--cinta-suave); }
.cal-dia.zona-suelta { background: var(--cinta-suave); outline: 2px dashed var(--cinta); outline-offset: -3px; }
.cal-dia .num {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--tinta-3); padding: 1px 3px;
}
.cal-dia.hoy .num {
  background: var(--cinta); color: var(--sobre-cinta); border-radius: 6px;
  width: 22px; height: 20px; display: grid; place-items: center;
}
.cal-dia .agregar {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center;
  opacity: 0; color: var(--tinta-3);
  transition: opacity var(--t-rapido) var(--seco), background var(--t-rapido) var(--seco);
}
.cal-dia .agregar svg { width: 13px; height: 13px; }
.cal-dia:hover .agregar { opacity: 1; }
.cal-dia .agregar:hover { background: var(--lienzo); color: var(--cinta); }

/* ---------------------------- el mes por semanas ------------------------- */

/* El mes partido en tandas de siete: 1-7, 8-14, 15-21, 22-28 y lo que sobre.
   No son las semanas del calendario —esas se cruzan con el mes de al lado—:
   son los bloques con los que se habla cuando se organiza un mes de
   contenido. La última queda más corta, y tiene que verse más corta.

   Los cinco tonos salen de la paleta de la casa. Un calendario con colores
   inventados parece de otra aplicación. */
.cal-semanas {
  --semana-1: var(--cinta);
  --semana-2: var(--violeta);
  --semana-3: var(--verde);
  --semana-4: var(--azul);
  --semana-5: var(--ambar);
  display: flex; flex-direction: column; gap: var(--e4);
}
.semana-bloque {
  border: 1px solid var(--borde-sutil);
  border-left: 4px solid var(--tono);
  border-radius: var(--r-md);
  background: var(--papel);
  overflow: hidden;
}
/* La semana en la que estamos se despega del resto: es la que se viene a
   mirar, y sin esto hay que contar días para encontrarla. */
.semana-bloque.ahora {
  border-color: var(--tono);
  box-shadow: 0 0 0 1px var(--tono) inset, var(--sombra-baja, 0 2px 10px rgb(0 0 0 / .16));
}
.semana-cabeza {
  display: flex; align-items: center; gap: 9px;
  padding: 9px var(--e4);
  background: color-mix(in srgb, var(--tono) 9%, transparent);
  border-bottom: 1px solid var(--borde-sutil);
}
.semana-cabeza h4 { font-size: 14px; color: var(--tinta); }
.semana-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tono); flex: none;
}
.semana-rango { font-size: 12px; color: var(--tinta-3); }

/* Siete columnas fijas: así la semana corta deja el hueco a la derecha en vez
   de estirar sus días, y los días quedan alineados entre bloques. */
.semana-dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.semana-dias .cal-dia { min-height: 96px; border-bottom: 0; }
.semana-dias .cal-dia:last-child { border-right: 0; }
.semana-num { display: flex; align-items: baseline; gap: 5px; }
.semana-num .d {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-4);
}

@media (max-width: 860px) {
  /* En el teléfono, siete columnas son siete tiras ilegibles. */
  .semana-dias { grid-template-columns: repeat(2, 1fr); }
  .semana-dias .cal-dia { min-height: 78px; border-bottom: 1px solid var(--borde-sutil); }
}

.cal-item {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 550;
  background: var(--tono-suave, var(--papel-hondo));
  color: var(--tono, var(--tinta-2));
  cursor: grab;
  transition: transform var(--t-rapido) var(--suave), filter var(--t-rapido) var(--seco);
  border-left: 2px solid var(--tono, var(--borde-fuerte));
}
.cal-item:hover { transform: translateX(2px); filter: brightness(.97); }
.cal-item.hecho { opacity: .5; text-decoration: line-through; }
.cal-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tipos de evento */
.t-grabacion { --tono: var(--rosa); --tono-suave: var(--rosa-suave); }
.t-edicion { --tono: var(--cinta); --tono-suave: var(--cinta-suave); }
.t-publicacion { --tono: var(--azul); --tono-suave: var(--azul-suave); }
.t-reunion { --tono: var(--violeta); --tono-suave: var(--violeta-suave); }
.t-entrega { --tono: var(--verde); --tono-suave: var(--verde-suave); }
.t-hito { --tono: var(--ambar); --tono-suave: var(--ambar-suave); }

/* vista agenda: la lista para los que odian los calendarios */
.agenda-dia { display: flex; gap: var(--e4); padding: var(--e3) 0; border-bottom: 1px solid var(--borde-sutil); }
.agenda-dia .fecha { width: 62px; flex: none; text-align: right; }
.agenda-dia .fecha .d { font-family: var(--display); font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.agenda-dia .fecha .m { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.agenda-dia.es-hoy .fecha .d { color: var(--cinta); }
.agenda-dia .items { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* =============================== GUIONES ================================= */

.guion-editor {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--e5);
  align-items: start;
}
@media (max-width: 1100px) { .guion-editor { grid-template-columns: 1fr; } }

.bloques { display: flex; flex-direction: column; gap: var(--e3); }

.bloque {
  background: var(--lienzo);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  border-left: 3px solid var(--tono, var(--borde-fuerte));
  overflow: hidden;
  transition: box-shadow var(--t-medio) var(--suave), border-color var(--t-rapido) var(--seco), transform var(--t-rapido) var(--suave);
}
.bloque:hover { box-shadow: var(--sombra-1); }
.bloque:focus-within { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.bloque.arrastrando { opacity: .4; }

.bloque-cabeza {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 12px;
  background: var(--lienzo-2);
  border-bottom: 1px solid var(--borde-sutil);
}
.bloque-cabeza .agarre {
  cursor: grab; color: var(--tinta-4); display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 5px;
}
.bloque-cabeza .agarre:hover { color: var(--tinta-2); background: var(--papel-hondo); }
.bloque-cabeza .agarre svg { width: 14px; height: 14px; }
.bloque-cabeza .etiqueta {
  background: transparent; border: 0; font-weight: 650; font-size: 13.5px;
  flex: 1; min-width: 0; padding: 2px 4px; border-radius: 5px;
  letter-spacing: -.01em;
}
.bloque-cabeza .etiqueta:hover { background: var(--papel-hondo); }
.bloque-cabeza .etiqueta:focus { outline: none; background: var(--papel-hondo); }
.bloque-cabeza .seg {
  font-family: var(--mono); font-size: 11.5px; color: var(--tinta-3);
  background: var(--papel-hondo); border: 0; width: 52px; text-align: center;
  border-radius: 5px; padding: 3px 0;
}
.bloque-cabeza .seg:focus { outline: none; box-shadow: 0 0 0 2px var(--cinta-suave); }

.bloque-texto {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 13px 14px;
  font-size: 15.5px;
  line-height: 1.72;
  resize: none;
  min-height: 64px;
  font-family: var(--fuente);
}
.bloque-texto:focus { outline: none; }
.bloque-texto::placeholder { color: var(--tinta-4); }

.bloque-visual {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-top: 1px dashed var(--borde);
  background: var(--lienzo-2);
  font-size: 13px;
  color: var(--tinta-2);
}
.bloque-visual svg { width: 14px; height: 14px; color: var(--tinta-3); flex: none; }
.bloque-visual input { background: transparent; border: 0; flex: 1; font-size: 13px; font-style: italic; }
.bloque-visual input:focus { outline: none; }

/* Los bloques de la estructura de la casa: hook, problema, insight,
   solucion, prueba social y CTA. El color va del rojo al verde, que es el
   viaje que hace el que mira: del dolor a la decision. */
.b-gancho { --tono: var(--rosa); }
.b-problema { --tono: #c0392b; }
.b-insight { --tono: var(--ambar); }
.b-solucion { --tono: var(--verde); }
.b-prueba { --tono: var(--azul); }
.b-desarrollo { --tono: var(--violeta); }
.b-dialogo { --tono: var(--azul); }
.b-broll { --tono: var(--gris); }
.b-cta { --tono: var(--verde); }
.b-nota { --tono: var(--ambar); }

/* el boton que inserta un bloque entre dos: aparece en el hueco */
.insertar-bloque {
  height: 8px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--t-rapido) var(--seco), height var(--t-rapido) var(--suave);
}
.insertar-bloque:hover { opacity: 1; height: 30px; }
.insertar-bloque::before {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--cinta); opacity: .3;
}
.insertar-bloque button {
  position: relative;
  height: 24px; padding: 0 10px;
  border-radius: 99px;
  background: var(--cinta); color: var(--sobre-cinta);
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: var(--sombra-cinta);
}
.insertar-bloque button svg { width: 12px; height: 12px; }

/* panel derecho del guion */
.guion-lado { display: flex; flex-direction: column; gap: var(--e3); position: sticky; top: 0; }

.reloj-guion {
  padding: var(--e4);
  text-align: center;
  background: var(--tinta);
  color: var(--papel);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.reloj-guion .tiempo {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reloj-guion .detalle { font-size: 12px; opacity: .6; margin-top: 5px; }
.reloj-guion .barritas { display: flex; gap: 2px; margin-top: 12px; height: 20px; align-items: flex-end; justify-content: center; }
.reloj-guion .barritas i {
  width: 3px; border-radius: 2px; background: var(--cinta); display: block;
  animation: onda 1.3s var(--suave) infinite;
}
@keyframes onda { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* teleprompter */
.prompter {
  position: fixed; inset: 0; z-index: 130;
  background: #0a0908;
  color: #f6f1e9;
  display: flex; flex-direction: column;
  animation: entra-suave var(--t-medio) var(--seco) both;
}
.prompter-texto {
  flex: 1;
  overflow-y: auto;
  padding: 42vh 8vw;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: center;
  scroll-behavior: auto;
}
.prompter-texto p { margin-bottom: .7em; transition: opacity var(--t-medio) var(--seco); }
.prompter-barra {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e5);
  background: rgba(255, 255, 255, .05);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.prompter .linea-guia {
  position: fixed; left: 0; right: 0; top: 42vh; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cinta), transparent);
  opacity: .5; pointer-events: none;
}

/* ============================== CLIENTES ================================= */

.grilla-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--e4);
}

.ficha-cliente { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e3); }
.ficha-cliente .cabeza { display: flex; align-items: flex-start; gap: 11px; }
.ficha-cliente .nom { font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: -.02em; }
.ficha-cliente .emp { font-size: 12.5px; color: var(--tinta-3); }
.ficha-cliente .metricas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--borde-sutil);
  border-radius: var(--r-sm); overflow: hidden;
}
.ficha-cliente .metricas div { background: var(--lienzo); padding: 8px 4px; text-align: center; }
.ficha-cliente .metricas b { display: block; font-family: var(--mono); font-size: 16px; font-weight: 600; }
.ficha-cliente .metricas span { font-size: 10.5px; color: var(--tinta-3); letter-spacing: .02em; }

/* el interruptor del portal, la pieza estrella del CRM */
.interruptor-portal {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--borde-fuerte);
  background: var(--lienzo-2);
  transition: all var(--t-medio) var(--suave);
}
.interruptor-portal.encendido {
  border-style: solid;
  border-color: transparent;
  background: var(--verde-suave);
}
.interruptor-portal .estado { flex: 1; min-width: 0; }
.interruptor-portal .estado b { font-size: 13px; display: block; }
.interruptor-portal .estado span { font-size: 11.5px; color: var(--tinta-3); }
.interruptor-portal.encendido .estado b { color: var(--verde); }

/* la matriz de permisos: lo que el cliente ve y lo que no */
.rejilla-permisos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--e2);
}
.permiso {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--lienzo);
  cursor: pointer;
  transition: all var(--t-rapido) var(--suave);
}
.permiso:hover { border-color: var(--borde-fuerte); transform: translateY(-1px); box-shadow: var(--sombra-1); }
.permiso .txt { flex: 1; min-width: 0; }
.permiso .txt b { font-size: 13.5px; font-weight: 600; display: block; }
.permiso .txt span { font-size: 11.5px; color: var(--tinta-3); line-height: 1.35; display: block; }
.permiso.si { background: var(--verde-suave); border-color: transparent; }
.permiso.si .txt b { color: var(--verde); }

/* enlace del portal, listo para copiar */
.link-portal {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--mono);
  font-size: 12.5px;
}
.link-portal .url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.link-portal button { color: var(--papel); opacity: .7; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; }
.link-portal button:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.link-portal button svg { width: 15px; height: 15px; }

/* ================================ CHAT =================================== */

.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-hilo {
  flex: 1; overflow-y: auto;
  padding: var(--e4);
  display: flex; flex-direction: column; gap: 10px;
}
.burbuja {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  animation: entra-abajo .3s var(--salto) both;
  word-break: break-word;
}
.burbuja.mia {
  align-self: flex-end;
  background: var(--cinta);
  color: var(--sobre-cinta);
  border-bottom-right-radius: 5px;
}
.burbuja.suya {
  align-self: flex-start;
  background: var(--papel-hondo);
  border-bottom-left-radius: 5px;
}
.burbuja .quien { font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 2px; }
.burbuja .cuando { font-size: 10.5px; opacity: .55; margin-top: 3px; font-family: var(--mono); }
.chat-escribir {
  display: flex; gap: var(--e2); align-items: flex-end;
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--borde);
  background: var(--lienzo);
}
.chat-escribir textarea { min-height: 40px; max-height: 140px; }

/* =============================== PALETA ================================== */

.paleta-telon {
  position: fixed; inset: 0;
  background: rgba(28, 20, 12, .34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 110;
  display: flex; justify-content: center;
  padding-top: 14vh;
  animation: entra-suave .14s var(--seco) both;
}
.paleta {
  width: min(620px, calc(100% - 32px));
  height: fit-content;
  max-height: 62vh;
  background: var(--elevado);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: modal-entra .3s var(--salto) both;
}
.paleta-entrada {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--borde-sutil);
}
.paleta-entrada svg { width: 18px; height: 18px; color: var(--tinta-3); flex: none; }
.paleta-entrada input {
  flex: 1; border: 0; background: transparent; font-size: 17px;
  letter-spacing: -.015em;
}
.paleta-entrada input:focus { outline: none; }
.paleta-entrada input::placeholder { color: var(--tinta-4); }
.paleta-lista { overflow-y: auto; padding: 7px; }
.paleta-grupo { padding: 9px 11px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-4); }
.paleta-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background var(--t-rapido) var(--seco);
}
.paleta-item .ico {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; flex: none;
  background: var(--tono-suave, var(--papel-hondo));
  color: var(--tono, var(--tinta-2));
}
.paleta-item .ico svg { width: 16px; height: 16px; }
.paleta-item .qq { flex: 1; min-width: 0; }
.paleta-item .qq b { font-size: 14px; font-weight: 600; display: block; }
.paleta-item .qq span { font-size: 12px; color: var(--tinta-3); }
.paleta-item[data-sel='1'] { background: var(--papel-hondo); }
.paleta-item[data-sel='1'] .flecha { opacity: 1; }
.paleta-item .flecha { opacity: 0; color: var(--tinta-3); transition: opacity var(--t-rapido) var(--seco); }
.paleta-pie {
  display: flex; align-items: center; gap: var(--e4);
  padding: 9px 16px;
  border-top: 1px solid var(--borde-sutil);
  background: var(--lienzo-2);
  font-size: 11.5px;
  color: var(--tinta-3);
}
.paleta-pie kbd {
  font-family: var(--mono); font-size: 10px; padding: 1px 5px;
  border-radius: 4px; background: var(--papel-hondo); border: 1px solid var(--borde);
}

/* ============================== ENTRADA ================================== */
/* Login / registro / onboarding: pantalla completa, otro clima. */

.puerta {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  overflow: hidden;
}
@media (max-width: 900px) { .puerta { grid-template-columns: 1fr; } .puerta-arte { display: none; } }

.puerta-forma {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e8) clamp(24px, 6vw, 80px);
  overflow-y: auto;
  max-height: 100vh;
}
.puerta-forma .caja { width: 100%; max-width: 400px; margin: 0 auto; }
.puerta-forma .caja.ancha { max-width: 640px; }

/* El panel del costado es una superficie INVERTIDA: el fondo es la tinta y la
   escritura es el papel. Todo lo que va adentro tiene que leerse de esas dos
   variables y nunca de un blanco fijo, porque en modo oscuro se dan vuelta y
   el texto blanco quedaria sobre un fondo casi blanco. */
.puerta-arte {
  --superficie: var(--tinta);
  --sobre: var(--papel);
  /* Clap tambien se da vuelta acá, si no el cuerpo se le pierde en el fondo */
  --clap-cuerpo: var(--pizarra-inv);
  --clap-cara: var(--pizarra-cara-inv);
  --clap-tapa: var(--acento-arte);

  position: relative;
  background: var(--superficie);
  color: var(--sobre);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e8);
}
.puerta-arte::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px circle at 78% 22%, color-mix(in srgb, var(--acento-arte) 26%, transparent), transparent 55%),
    radial-gradient(520px circle at 18% 78%, color-mix(in srgb, var(--violeta) 20%, transparent), transparent 55%);
}
/* las perforaciones del rollo, en grande, cruzando el arte */
.puerta-arte::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 40px,
    color-mix(in srgb, var(--sobre) 8%, transparent) 40px 58px,
    transparent 58px 98px);
  mask-image: linear-gradient(90deg, #000 0 42px, transparent 42px calc(100% - 42px), #000 calc(100% - 42px));
  -webkit-mask-image: linear-gradient(90deg, #000 0 42px, transparent 42px calc(100% - 42px), #000 calc(100% - 42px));
}
.puerta-arte > * { position: relative; z-index: 1; }
.puerta-arte h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.035em; line-height: 1.1; }
.puerta-arte .acento { color: var(--acento-arte); }
.puerta-arte p {
  color: color-mix(in srgb, var(--sobre) 76%, transparent);
  font-size: 16px; margin-top: var(--e4); max-width: 42ch;
}
.puerta-arte .patas { color: color-mix(in srgb, var(--sobre) 62%, transparent); }
.puerta-arte .clap { width: min(260px, 58%); height: auto; margin-bottom: var(--e6); animation: sube-baja 5s var(--suave) infinite; }

.puerta-pasos { display: flex; gap: 6px; margin-bottom: var(--e6); }
.puerta-pasos i {
  height: 3px; flex: 1; border-radius: 99px; background: var(--borde);
  transition: background var(--t-medio) var(--suave);
}
.puerta-pasos i.activo { background: var(--cinta); }
.puerta-pasos i.hecho { background: var(--tinta-3); }

/* la mesa de mezcla: elegir modulos como si fueran faders */
.mezcladora {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--e3);
}
.modulo-carta {
  position: relative;
  padding: var(--e4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--borde);
  background: var(--lienzo);
  cursor: pointer;
  text-align: left;
  transition: all var(--t-medio) var(--suave);
  overflow: hidden;
}
.modulo-carta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.modulo-carta .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.modulo-carta .ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; flex: none;
  background: var(--tono-suave); color: var(--tono);
  transition: transform var(--t-medio) var(--salto);
}
.modulo-carta .ico svg { width: 18px; height: 18px; }
.modulo-carta:hover .ico { transform: rotate(-7deg) scale(1.07); }
.modulo-carta b { font-family: var(--display); font-size: 15px; letter-spacing: -.02em; }
.modulo-carta p { font-size: 12.5px; color: var(--tinta-2); line-height: 1.45; }
.modulo-carta[aria-pressed='true'] {
  border-color: var(--tono);
  background: var(--tono-suave);
}
.modulo-carta[aria-pressed='true']::after {
  content: '';
  position: absolute; top: 10px; right: 10px;
  width: 18px; height: 18px; border-radius: 99px;
  background: var(--tono);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  animation: pop .28s var(--salto) both;
}
.modulo-carta.fijo { opacity: .75; cursor: default; }
.modulo-carta.fijo:hover { transform: none; box-shadow: none; }

/* las cartas de perfil del arranque */
.perfiles { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.perfil-carta {
  padding: var(--e5) var(--e4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--borde);
  background: var(--lienzo);
  text-align: left;
  transition: all var(--t-medio) var(--suave);
}
.perfil-carta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.perfil-carta[aria-pressed='true'] { border-color: var(--cinta); background: var(--cinta-suave); box-shadow: var(--sombra-1); }
.perfil-carta .emoji { font-size: 26px; display: block; margin-bottom: 8px; }
.perfil-carta b { font-family: var(--display); font-size: 16px; display: block; letter-spacing: -.02em; }
.perfil-carta span { font-size: 12.5px; color: var(--tinta-2); line-height: 1.45; }

/* ================================ PORTAL ================================= */
/* El portal del cliente es la misma app pero mas calma: sin rail, mas aire. */

.portal-cuerpo { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.portal-barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e4);
  padding: 0 clamp(16px, 4vw, 40px);
  height: 64px;
  border-bottom: 1px solid var(--borde);
  background: color-mix(in srgb, var(--papel) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.portal-nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; }
.portal-nav button {
  height: 34px; padding: 0 13px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--tinta-2);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  transition: all var(--t-rapido) var(--seco);
  position: relative;
}
.portal-nav button svg { width: 15px; height: 15px; }
.portal-nav button:hover { background: var(--papel-hondo); color: var(--tinta); }
.portal-nav button[aria-current='page'] { color: var(--acento, var(--cinta)); background: color-mix(in srgb, var(--acento, var(--cinta)) 10%, transparent); }
.portal-nav button .globo {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--cinta); color: var(--sobre-cinta); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; font-family: var(--mono);
}

.portal-lienzo { flex: 1; padding: var(--e6) clamp(16px, 4vw, 40px) var(--e10); max-width: 1180px; margin: 0 auto; width: 100%; }

.portal-hola {
  display: flex; align-items: center; gap: var(--e5);
  padding: var(--e6);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento, var(--cinta)) 13%, var(--lienzo)), var(--lienzo));
  border: 1px solid var(--borde);
  margin-bottom: var(--e6);
  position: relative;
  overflow: hidden;
}
.portal-hola .mascota { width: 84px; flex: none; }
.portal-hola h1 { font-size: clamp(23px, 3vw, 32px); }
.portal-hola p { color: var(--tinta-2); margin-top: 4px; max-width: 56ch; }

/* la puerta del portal: pantalla de PIN */
.portal-puerta {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e5);
}
.portal-puerta .caja {
  width: min(400px, 100%);
  text-align: center;
  animation: entra-abajo .5s var(--salto) both;
}
.pin-casillas { display: flex; gap: 9px; justify-content: center; margin: var(--e5) 0; }
.pin-casillas input {
  width: 48px; height: 58px;
  text-align: center;
  font-family: var(--mono); font-size: 24px; font-weight: 600;
  border-radius: var(--r-md);
  border: 1.5px solid var(--borde);
  background: var(--lienzo);
  transition: all var(--t-rapido) var(--suave);
}
.pin-casillas input:focus {
  outline: none; border-color: var(--cinta);
  box-shadow: 0 0 0 4px var(--cinta-suave);
  transform: translateY(-2px);
}

/* ============================== RESPONSIVE =============================== */

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    width: 100% !important;
    height: 62px;
    flex-direction: row;
    align-items: center;
    padding: 0 var(--e2);
    border-right: 0;
    border-top: 1px solid var(--borde);
    z-index: 50;
  }
  .rail::after, .rail-marca, .rail-pie { display: none; }
  .rail-modulos {
    flex-direction: row;
    justify-content: space-around;
    padding: 0;
    width: 100%;
    overflow-x: auto;
  }
  .rail-item { flex-direction: column; gap: 2px; height: 54px; padding: 0 8px; min-width: 58px; justify-content: center; }
  .rail-item span { opacity: 1 !important; font-size: 10px; }
  .rail-item svg { width: 19px; height: 19px; }
  .rail-item[aria-current='page']::before { left: 50%; top: auto; bottom: -1px; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 3px 3px 0 0; }
  .rail-item .globo { display: none; }
  .escenario { padding-bottom: 62px; }
  .app:has(.rail:hover) { grid-template-columns: 1fr; }
  .pagina { padding: var(--e4) var(--e4) var(--e9); }
  .barra { padding: 0 var(--e4); gap: var(--e2); }
  .disparador-paleta { min-width: 0; }
  .disparador-paleta span, .disparador-paleta kbd { display: none; }
  .guion-editor { grid-template-columns: 1fr; }
  .guion-lado { position: static; }
  .cal-dia { min-height: 76px; }
  .panel-lateral { width: 100%; }
}

/* el chevron de "mes anterior" es el mismo icono, dado vuelta */
.girado { transform: rotate(180deg); }

/* la chinche que fija el rail: solo aparece cuando el rail esta abierto */
.rail:hover .rail-marca .btn-icono,
.rail.fijo .rail-marca .btn-icono { opacity: 1 !important; }

/* ========================== PREGUNTALE A CLAP ============================ */
/* Dos columnas: las charlas viejas a la izquierda, la de ahora a la derecha.
   En pantalla chica la columna de charlas se va: lo que importa es escribir. */

.clap-pantalla {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: var(--e5);
  height: calc(100dvh - 132px);
  min-height: 420px;
}
@media (max-width: 900px) {
  .clap-pantalla { grid-template-columns: 1fr; }
  .clap-panel { display: none; }
}

.clap-panel {
  border-right: 1px solid var(--borde-sutil);
  padding-right: var(--e4);
  overflow-y: auto;
}
.clap-nueva { width: 100%; justify-content: center; }

.clap-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  text-align: left;
  color: var(--tinta-2);
  transition: background .14s var(--suave), color .14s var(--suave);
}
.clap-item:hover { background: var(--lienzo-2); color: var(--tinta); }
.clap-item.activa { background: color-mix(in srgb, var(--cinta) 12%, transparent); color: var(--cinta); font-weight: 600; }
.clap-item > .crece {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La charla */
.clap-charla { display: flex; flex-direction: column; min-width: 0; }
.clap-cabeza {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borde-sutil);
}
.clap-cabeza h2 { font-size: 17px; margin: 0; }

.clap-hilo {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column;
  scroll-behavior: smooth;
}
.clap-cuerpo {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--e5);
  padding: var(--e5) 2px;
}

.clap-vacio {
  margin: auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  padding: var(--e7) var(--e4);
}
.clap-vacio h3 { margin: 0; font-size: 19px; }

/* Los mensajes. El mío va como burbuja a la derecha; el de Clap es texto
   suelto a lo ancho, porque suele ser largo y una burbuja lo aprieta. */
.clap-msg { display: flex; gap: 11px; max-width: 100%; }
.clap-msg.mio { justify-content: flex-end; }
.clap-msg.mio p {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
  background: var(--cinta);
  color: var(--sobre-cinta);
  font-size: 14.5px; line-height: 1.55;
  max-width: 78%;
  white-space: pre-wrap;
}
.clap-avatar { flex: none; margin-top: 2px; }
.clap-texto { font-size: 14.5px; line-height: 1.65; }
.clap-texto p { margin: 0 0 9px; }
.clap-texto p:last-child { margin-bottom: 0; }
.clap-texto h4 { margin: var(--e4) 0 6px; font-size: 14px; }
.clap-texto ul { margin: 0 0 9px; padding-left: 19px; }
.clap-texto li { margin-bottom: 4px; }
.clap-texto code {
  font-family: var(--mono); font-size: 12.5px;
  padding: 1px 5px; border-radius: 5px;
  background: var(--lienzo-2);
}
.clap-pie {
  display: flex; align-items: center; gap: 9px;
  margin-top: 7px;
  opacity: 0; transition: opacity .14s var(--suave);
}
.clap-msg:hover .clap-pie, .clap-pie:focus-within { opacity: 1; }

/* Los tres puntitos mientras piensa. */
.clap-pensando { display: flex; align-items: center; gap: 5px; padding: 9px 2px; }
.clap-pensando i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tinta-4);
  animation: clap-late 1.1s ease-in-out infinite;
}
.clap-pensando i:nth-child(2) { animation-delay: .16s; }
.clap-pensando i:nth-child(3) { animation-delay: .32s; }
@keyframes clap-late {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .clap-pensando i { animation: none; opacity: .6; }
}

/* Donde se escribe. */
.clap-redactor {
  position: sticky; bottom: 0;
  padding: var(--e4) 2px calc(var(--e4) + 2px);
  background: linear-gradient(to bottom, transparent, var(--lienzo) 22%);
}
.clap-fila-entrada {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 7px 7px 7px 13px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  background: var(--lienzo);
  transition: border-color .16s var(--suave), box-shadow .16s var(--suave);
}
.clap-fila-entrada:focus-within {
  border-color: var(--cinta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cinta) 15%, transparent);
}
.clap-entrada {
  flex: 1;
  border: 0; background: none; outline: none;
  resize: none;
  font: inherit; font-size: 14.5px; line-height: 1.5;
  color: var(--tinta);
  max-height: 180px;
  padding: 5px 0;
}
.clap-enviar {
  flex: none;
  background: var(--cinta);
  color: var(--sobre-cinta);
  border-radius: var(--r-sm);
}
.clap-enviar:hover { filter: brightness(1.06); }

/* El textarea es un elemento de formulario: dentro de un flex trae un ancho
   mínimo propio que empuja la fila y saca scroll horizontal. */
.clap-entrada { min-width: 0; }
.clap-hilo { overflow-x: hidden; }
/* El reset de la casa saca las viñetas; acá sí las queremos. */
.clap-texto ul { list-style: disc; }

/* ========================= CALENDARIO DE PRODUCCIÓN ====================== */
/* El mismo trabajo del tablero, pero ordenado por cuándo vence. */

.cal-grilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.cal-dia-nombre {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-4);
  padding: 0 4px 5px;
}
.cal-celda {
  min-height: 92px;
  padding: 6px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-sm);
  background: var(--lienzo);
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.cal-celda.vacia { border-style: dashed; opacity: .35; background: none; }
.cal-celda.pasado { background: var(--lienzo-2); }
.cal-celda.hoy {
  border-color: var(--cinta);
  box-shadow: inset 0 0 0 1px var(--cinta);
}
.cal-numero {
  font-size: 11.5px; font-weight: 600;
  color: var(--tinta-3);
  font-family: var(--mono);
}
.cal-celda.hoy .cal-numero { color: var(--cinta); }

/* Cada proyecto: una tirita con el color de su columna, para saber en qué
   estado está sin abrirlo. */
.cal-pieza {
  display: flex; align-items: center; gap: 5px;
  width: 100%;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 11.5px;
  text-align: left;
  color: var(--tinta-2);
  background: color-mix(in srgb, var(--tono) 11%, transparent);
  transition: background .14s var(--suave);
}
.cal-pieza:hover { background: color-mix(in srgb, var(--tono) 22%, transparent); color: var(--tinta); }
.cal-pieza i {
  flex: none;
  width: 3px; height: 12px;
  border-radius: 2px;
  background: var(--tono);
}
.cal-pieza .recorte {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-pieza.suelta {
  width: auto;
  padding: 5px 9px;
  border: 1px solid var(--borde-sutil);
  font-size: 12.5px;
}

@media (max-width: 720px) {
  .cal-celda { min-height: 62px; }
  .cal-pieza .recorte { display: none; }
}

/* ============================== INSTAGRAM ================================ */
/* Los números reales de la marca. La grilla imita el feed a propósito: se
   reconoce la pieza por la miniatura antes que por el título. */

.ig-foto {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--lienzo-2);
  border: 1px solid var(--borde-sutil);
  color: var(--tinta-4);
}

.ig-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--e4);
}

.ig-post {
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  background: var(--lienzo);
  overflow: hidden;
  transition: transform .16s var(--suave), box-shadow .16s var(--suave);
}
.ig-post:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }

.ig-tapa {
  position: relative;
  aspect-ratio: 9 / 12;
  background: var(--lienzo-2);
  overflow: hidden;
}
.ig-tapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-sinfoto {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--tinta-4);
}

/* El rótulo dice cómo le fue comparado con las otras piezas de SU formato. */
.ig-nivel {
  position: absolute; top: 7px; left: 7px;
  display: flex; align-items: center; gap: 3px;
  padding: 3px 7px;
  border-radius: 100px;
  font-size: 10.5px; font-weight: 600;
  color: var(--papel);
  background: var(--tono);
}
.ig-nivel b { font-family: var(--mono); font-weight: 700; }

.ig-abrir {
  position: absolute; top: 7px; right: 7px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--papel);
  background: rgba(20, 15, 10, .55);
  opacity: 0;
  transition: opacity .14s var(--suave);
}
.ig-post:hover .ig-abrir, .ig-abrir:focus-visible { opacity: 1; }

.ig-cuerpo { padding: 9px 10px 10px; }
.ig-numeros {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12px; font-weight: 600;
  color: var(--tinta-2);
  font-family: var(--mono);
}
.ig-numeros span { display: flex; align-items: center; gap: 4px; }
.ig-numeros svg { color: var(--tinta-4); }
.ig-texto {
  margin: 7px 0 0;
  font-size: 12px; line-height: 1.45;
  color: var(--tinta-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================= MÉTRICAS DEL MES ============================== */
/* Con la forma de la planilla que ya usa el equipo: una fila por métrica, con
   el mes anterior al lado. Antes las calculadas estaban abajo en una caja
   aparte y no se entendía de dónde salían ni contra qué compararlas. */

.metricas-tabla {
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  overflow: hidden;
}
.metricas-cabeza,
.metricas-fila {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--e3);
  align-items: center;
  padding: 7px var(--e4);
}
.metricas-cabeza {
  background: var(--lienzo-2);
  border-bottom: 1px solid var(--borde-sutil);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-4);
}
.metricas-fila + .metricas-fila { border-top: 1px solid var(--borde-sutil); }
.metricas-fila .entrada { padding: 5px 9px; font-family: var(--mono); font-size: 13px; }

.metricas-nombre {
  font-size: 13.5px; font-weight: 550;
  display: flex; align-items: center; gap: 7px;
}

/* Las que salen solas: en gris, sin campo, con el cartelito que lo dice. */
.metricas-fila.es-calculada { background: color-mix(in srgb, var(--cinta) 4%, transparent); }
.metricas-fila.es-calculada .metricas-nombre { color: var(--tinta-2); font-weight: 500; }
.metricas-marca {
  font-style: normal;
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--cinta);
  background: color-mix(in srgb, var(--cinta) 14%, transparent);
}
.metricas-calc {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  color: var(--cinta);
}
.metricas-calc.vacia { color: var(--tinta-4); font-weight: 400; }
.metricas-antes {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--tinta-4);
}

@media (max-width: 620px) {
  .metricas-cabeza, .metricas-fila { grid-template-columns: 1.4fr 1fr; }
  .metricas-cabeza > :last-child, .metricas-antes { display: none; }
}

/* ========================= MATRIZ DE ÁNGULOS ============================= */
/* Como la planilla: categoría, ángulo, relevancia, formatos. Todo se edita en
   la fila misma — abrir un modal para cambiar una relevancia sería absurdo. */

.matriz-tabla {
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--lienzo);
}
.matriz-cabeza,
.matriz-fila {
  display: grid;
  grid-template-columns: 112px minmax(0, 3fr) 100px minmax(0, 1fr) 34px;
  gap: var(--e3);
  align-items: center;
  padding: 6px var(--e4);
}
.matriz-cabeza {
  background: var(--lienzo-2);
  border-bottom: 1px solid var(--borde-sutil);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-4);
}
.matriz-fila + .matriz-fila { border-top: 1px solid var(--borde-sutil); }
.matriz-fila:hover { background: var(--lienzo-2); }

/* La categoría, con su puntito de color como en la planilla. */
.matriz-cat {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 11.5px; font-weight: 600;
  color: var(--tono);
  background: color-mix(in srgb, var(--tono) 13%, transparent);
  justify-self: start;
}
.matriz-cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--tono); flex: none; }

.matriz-rel {
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px; font-weight: 600;
  color: var(--tono);
  background: color-mix(in srgb, var(--tono) 13%, transparent);
  justify-self: start;
}

/* Los campos de texto se ven como texto hasta que los tocás. */
.matriz-campo {
  width: 100%;
  border-color: transparent;
  background: none;
  padding: 4px 7px;
  font-size: 13.5px;
}
.matriz-campo::placeholder { color: var(--tinta-4); opacity: .55; }
.matriz-campo:hover { border-color: var(--borde-sutil); }
.matriz-campo:focus { border-color: var(--cinta); background: var(--lienzo); }

/* Cuántos guiones salieron de ese ángulo: lo que dice qué ya machacaste. */
.matriz-usado {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 100px;
  font-size: 10px; font-weight: 600;
  color: var(--verde);
  background: color-mix(in srgb, var(--verde) 13%, transparent);
}

@media (max-width: 820px) {
  .matriz-cabeza, .matriz-fila { grid-template-columns: 100px minmax(0, 1fr) 90px 34px; }
  .matriz-cabeza > :nth-child(4), .matriz-fila > :nth-child(4) { display: none; }
}

/* ============================== COMPETENCIA ============================== */
/* Comparar sobre me-gusta, que es lo único que Instagram da de los dos lados.
   La barra es lo que se lee de un vistazo; el número está por si querés el
   dato exacto. */

.ig-paneles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e5);
}

.comp-tabla {
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  overflow: hidden;
}
.comp-fila {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 92px 92px;
  gap: var(--e3);
  align-items: center;
  padding: 8px var(--e4);
}
.comp-fila + .comp-fila { border-top: 1px solid var(--borde-sutil); }
/* La fila propia se marca: sin eso hay que leer los nombres para ubicarse. */
.comp-fila.mia { background: color-mix(in srgb, var(--cinta) 7%, transparent); }
.comp-fila.mia .comp-quien { color: var(--cinta); font-weight: 700; }

.comp-quien {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comp-num {
  font-family: var(--mono); font-size: 12px;
  text-align: right;
  color: var(--tinta-2);
}

.comp-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px 5px 5px;
  border: 1px solid var(--borde-sutil);
  border-radius: 100px;
  font-size: 12.5px;
}
.comp-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.comp-user { font-weight: 600; }

@media (max-width: 620px) {
  .comp-fila { grid-template-columns: 108px minmax(0, 1fr) 78px; }
  .comp-fila > :last-child { display: none; }
}

/* ==================== LO QUE CLAP OPINA DE UNA PIEZA ===================== */
/* Plegado por defecto: el veredicto en una línea alcanza para decidir si
   vale la pena abrirlo. */

.an-caja {
  margin-top: 8px;
  border-top: 1px solid var(--borde-sutil);
  padding-top: 8px;
}
.an-caja summary {
  cursor: pointer;
  list-style: none;
  /* La pildora del hook baja a su propio renglon: al lado del veredicto le
     comia media tarjeta y el texto quedaba en una columna de dos palabras. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: 12px; line-height: 1.45;
}
.an-caja summary::-webkit-details-marker { display: none; }
.an-veredicto {
  flex: 1 1 100%;
  min-width: 0;
  color: var(--tinta-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.an-caja[open] .an-veredicto { -webkit-line-clamp: unset; }
.an-caja summary:hover .an-veredicto { color: var(--tinta); }
.an-caja summary .pildora { flex: none; max-width: 100%; }

.an-cuerpo { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.an-rotulo {
  display: block;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-4);
  margin-bottom: 2px;
}
.an-texto { font-size: 12px; line-height: 1.5; color: var(--tinta-2); }

/* La venta atribuida a la pieza: verde, porque es la única línea de esta
   pantalla que habla de plata. */
.ig-venta {
  display: flex; align-items: center; gap: 5px;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 600;
  color: var(--verde);
  background: color-mix(in srgb, var(--verde) 12%, transparent);
}

.ig-atado {
  position: absolute; bottom: 7px; right: 7px;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  color: var(--papel);
  background: var(--verde);
}

/* =============================== LA RUTA ================================= */
/* La escalera de arriba es la misma que ve el cliente. Abajo, el checklist
   de verdad, que el cliente no ve. */

.ruta-cabeza { margin-bottom: var(--e5); }

.ruta-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
}
.ruta-paso {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  background: var(--lienzo);
  cursor: pointer;
  transition: border-color var(--t-rapido) var(--seco), transform var(--t-rapido) var(--salto);
}
.ruta-paso:hover { transform: translateY(-2px); }
.ruta-paso.hecha { border-top-color: var(--verde); }
.ruta-paso.activa { border-top-color: var(--cinta); background: var(--cinta-suave); }
/* Las que todavía no se habilitaron se ven, pero apagadas: esconderlas haría
   que el cliente no sepa qué le espera. */
.ruta-paso.dormida { opacity: .55; }

.ruta-bolita {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--papel-hondo); color: var(--tinta-3);
  font: 700 12px/1 var(--mono);
  font-style: normal;
}
.ruta-paso.hecha .ruta-bolita { background: var(--verde); color: #fff; }
.ruta-paso.activa .ruta-bolita { background: var(--cinta); color: var(--sobre-cinta); }
.ruta-nombre { font-weight: 650; font-size: 13.5px; }

.ruta-etapa-titulo {
  margin: var(--e5) 0 var(--e3);
  font: 700 12px/1 var(--display);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-3);
}
.ruta-etapa-titulo:first-of-type { margin-top: 0; }

/* --- los bloques --- */

.ruta-bloque {
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--lienzo);
  overflow: hidden;
}
.ruta-bloque summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px var(--e3);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.ruta-bloque summary::-webkit-details-marker { display: none; }
.ruta-bloque summary:hover { background: var(--lienzo-2); }
.ruta-bloque-nombre { font-weight: 650; font-size: 13.5px; }
.ruta-bloque-nota { padding: 0 var(--e3) 9px; }
.ruta-bloque .mono.ok { color: var(--verde); }

/* La barrita de progreso, pegada al borde de abajo del encabezado. */
.ruta-barra {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--borde-sutil);
}
.ruta-barra i {
  display: block; height: 100%;
  background: var(--verde);
  transition: width var(--t-medio) var(--suave);
}

.ruta-bloq { --tono: var(--rosa); }

/* --- las tareas --- */

.ruta-tareas { padding: 2px var(--e3) var(--e2); }
.ruta-fila {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 4px;
  border-top: 1px solid var(--borde-sutil);
}
.ruta-fila:first-child { border-top: 0; }
.ruta-fila.lista .ruta-texto { color: var(--tinta-4); text-decoration: line-through; }
.ruta-texto { font-size: 13px; line-height: 1.4; }
.ruta-nota { margin-top: 2px; }
.ruta-motivo {
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: var(--r-xs);
  background: var(--rosa-suave); color: var(--rosa);
}
.ruta-entregable {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; color: var(--cinta);
}

.ruta-check {
  flex: none;
  display: grid; place-items: center;
  width: 19px; height: 19px; margin-top: 1px;
  border: 1.6px solid var(--borde-fuerte);
  border-radius: 5px;
  background: transparent; color: transparent;
  cursor: pointer;
  transition: all var(--t-rapido) var(--seco);
}
.ruta-check:hover { border-color: var(--cinta); }
.ruta-check.hecho { background: var(--verde); border-color: var(--verde); color: #fff; }
.ruta-check.curso {
  border-color: var(--ambar);
  background: linear-gradient(135deg, var(--ambar) 50%, transparent 50%);
}
.ruta-check.trabado { background: var(--rosa); border-color: var(--rosa); color: #fff; }

/* --- el tablero de trabados, en La Mesa --- */

.trabados-fila {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 2px;
  border-top: 1px solid var(--borde-sutil);
}
.trabados-fila:first-child { border-top: 0; }
.trabados-dias {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font: 700 11px/1.5 var(--mono);
  background: var(--rosa-suave); color: var(--rosa);
}
/* Tres semanas trabado en lo mismo no es un problema de producción. */
.trabados-dias.grave { background: var(--rosa); color: #fff; }

.ruta-estado { font-size: 12px; font-weight: 650; color: var(--tinta-3); }
.ruta-paso.hecha .ruta-estado { color: var(--verde); }
.ruta-paso.activa .ruta-estado { color: var(--cinta); }

/* En el portal las etapas se leen, no se editan. */
.ruta-paso.quieto { cursor: default; }
.ruta-paso.quieto:hover { transform: none; }
.ruta-check:disabled { cursor: default; opacity: .8; }
.ruta-check:disabled:hover { border-color: var(--borde-fuerte); }

/* ------------------- el calendario con su panel al lado ------------------ */
/* Los guiones sin fecha viven a la derecha y se arrastran al día. Es la
   diferencia entre agendar en un gesto o en cuatro pantallas. */

.cron-con-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px;
  gap: var(--e4);
  align-items: start;
}

.suelto {
  position: sticky; top: var(--e4);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 190px);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--lienzo);
  overflow: hidden;
}
.suelto-cabeza {
  display: flex; align-items: baseline; gap: 7px;
  padding: 11px var(--e3) 5px;
}
.suelto-cabeza h4 { font: 700 13px/1 var(--display); }
.suelto-lista { flex: 1; overflow-y: auto; padding: 0 var(--e2) var(--e3); }
.suelto-titulo {
  padding: 9px 6px 5px;
  font: 700 10.5px/1 var(--display);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-4);
}

.suelta {
  padding: 7px 9px;
  margin-bottom: 4px;
  border: 1px solid var(--borde-sutil);
  border-left: 3px solid var(--tono, var(--tinta-4));
  border-radius: var(--r-xs);
  background: var(--lienzo-2);
  cursor: grab;
  transition: border-color var(--t-rapido) var(--seco), transform var(--t-rapido) var(--seco);
}
.suelta:hover { border-color: var(--borde-fuerte); transform: translateX(2px); }
.suelta:active { cursor: grabbing; }
.suelta.t-hito { --tono: var(--ambar); }
.suelta.t-entrega { --tono: var(--verde); }

/* En pantalla angosta el panel va arriba, en una tira horizontal: al costado
   no entra, y abajo del calendario nadie lo encuentra. */
@media (max-width: 1080px) {
  .cron-con-panel { grid-template-columns: 1fr; }
  .suelto { position: static; max-height: none; order: -1; }
  .suelto-lista { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--e2); }
  .suelto-titulo { display: none; }
  .suelta { flex: none; width: 190px; margin-bottom: 0; }
}

/* ---------------------- LA PÁGINA DE UN BLOQUE -------------------------- */
/* Un bloque con veinte tareas, su tabla de referencia y sus entregables se
   abre solo, no adentro de un acordeón. */

.ruta-volver { margin-bottom: var(--e4); }

.ruta-bloque-fila { cursor: pointer; transition: border-color var(--t-rapido) var(--seco); }
.ruta-bloque-fila:hover { border-color: var(--borde-fuerte); }
.ruta-bloque-fila .summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px var(--e3);
  position: relative;
}

.bl-cabeza {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borde-sutil);
}
.bl-titulo { font: 800 21px/1.2 var(--display); letter-spacing: -.02em; margin: 2px 0 4px; }
.bl-ficha {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: 12px; color: var(--tinta-4);
  text-align: right;
}
.bl-ficha b { color: var(--tinta-2); font-size: 12.5px; }

.bl-progreso { margin: var(--e4) 0 var(--e5); }
.bl-barra {
  display: block; height: 5px;
  border-radius: 99px;
  background: var(--borde-sutil);
  overflow: hidden;
}
.bl-barra i { display: block; height: 100%; background: var(--cinta); transition: width var(--t-medio) var(--suave); }

/* La puerta: si falta un requisito, esto se frena acá. Por eso tiene el
   borde al costado y no es una tarjeta más. */
.bl-gate {
  margin-bottom: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--lienzo);
  border: 1px solid var(--borde-sutil);
  border-left: 3px solid var(--cinta);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.bl-gate h4 { font: 700 11px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--cinta); }

.bl-aviso {
  margin-bottom: var(--e5);
  padding: 11px var(--e4);
  background: var(--cinta-suave);
  border-left: 3px solid var(--cinta);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px; line-height: 1.6;
  color: var(--tinta-2);
}

.bl-grupo { margin-bottom: var(--e3); }
.bl-grupo-titulo {
  margin: var(--e4) 0 2px;
  font: 700 11px/1 var(--display);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-4);
}
.bl-grupo .ruta-tareas { padding: 0; }

.ruta-cant { --tono: var(--ambar); }

.bl-ref {
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--lienzo-2);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-sm);
}
.bl-ref-lbl {
  font: 700 10.5px/1 var(--display);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-4);
  margin-bottom: 9px;
}
.bl-ref table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bl-ref th {
  text-align: left; font-weight: 650; color: var(--cinta);
  padding: 3px 10px 6px 0; border-bottom: 1px solid var(--borde-sutil);
}
.bl-ref td { color: var(--tinta-2); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--borde-sutil); vertical-align: top; }
.bl-ref tr:last-child td { border-bottom: 0; }
.bl-ref pre {
  margin: 0; font: 400 11.5px/1.7 var(--mono);
  color: var(--tinta-2); white-space: pre-wrap;
}

.bl-caja {
  margin-top: var(--e4);
  padding: var(--e4);
  background: var(--lienzo);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
}
.bl-caja h4 { font: 700 11px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }

.bl-entregable {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--borde-sutil);
}
.bl-entregable:first-child { border-top: 0; }
.bl-entregable .punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--borde-fuerte); flex: none;
}
.bl-entregable .mini { color: var(--tinta-4); }
.bl-entregable.ok .punto { background: var(--verde); }
.bl-entregable.ok .mini { color: var(--verde); }

.bl-errores { margin: 0; padding-left: 18px; }
.bl-errores li { font-size: 12.5px; line-height: 1.7; color: var(--tinta-2); }

@media (max-width: 620px) {
  .bl-cabeza { flex-direction: column; gap: var(--e3); }
  .bl-ficha { align-items: flex-start; text-align: left; flex-direction: row; gap: 9px; flex-wrap: wrap; }
}

/* Un archivo con notas se ve sin buscarlo.

   La barrita de la izquierda ya está siempre —normalmente aparece al pasar el
   mouse—; acá queda fija y en el color de la cinta. Es lo mismo que hace el
   globo de los mensajes sin leer: un cambio chico pero permanente, para que
   el ojo lo encuentre recorriendo la lista sin tener que abrir nada. */
.lista-fina .renglon.con-notas::before { transform: scaleY(1); }
.lista-fina .renglon.con-notas { background: color-mix(in srgb, var(--cinta) 5%, transparent); }
.lista-fina .renglon.con-notas:hover { background: color-mix(in srgb, var(--cinta) 10%, transparent); }

/* ------------------------- el scorecard de angulos ---------------------- */
/* Una tabla de verdad y no una lista: los angulos se comparan entre si, y
   comparar seis numeros en renglones sueltos obliga a ir y volver con la
   vista. Las columnas las arma la vista segun lo que haya para mostrar, por
   eso el grid sale de una variable. */
.score-scroll { overflow-x: auto; padding: 0 var(--e4); }
.score-tabla {
  /* El ancho minimo lo pone la vista, que es la que sabe que columnas hay. */
  border: 1px solid var(--borde-sutil);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--lienzo);
}
.score-cabeza,
.score-fila {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--e3);
  align-items: center;
  padding: 7px var(--e4);
}
.score-cabeza {
  background: var(--lienzo-2);
  border-bottom: 1px solid var(--borde-sutil);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-4);
}
.score-fila + .score-fila { border-top: 1px solid var(--borde-sutil); }
.score-fila:hover { background: var(--lienzo-2); }
.score-n {
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 600;
  text-align: right;
  color: var(--tinta);
}
/* Un cero no es un dato: se corre para atras para que no compita con los
   numeros que si dicen algo. */
.score-n.cero { color: var(--tinta-4); font-weight: 400; }

/* --------------------------------- el flujo ----------------------------- */
/* El diagrama de nodos de la solapa Contenido: del angulo al cash.

   La geometria la calcula flujo.js y llega en estilos en linea; aca solo esta
   como se ve cada caja. Las dos cosas coinciden en un solo lugar (MEDIDAS),
   asi que si cambia una altura de aca, cambia alla. */
.flujo-scroll { overflow-x: auto; padding: var(--e2) var(--e4) var(--e4); }
.flujo { position: relative; }
.flujo-cables { position: absolute; inset: 0; overflow: visible; pointer-events: none; }

.flujo-cable {
  fill: none;
  stroke: color-mix(in srgb, var(--tono) 55%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  animation: flujo-corre 1.4s linear infinite;
}
/* La animacion es la que dice "esto sigue pasando". Para quien pidio menos
   movimiento el cable queda quieto, que sigue leyendose igual de bien. */
@keyframes flujo-corre { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) {
  .flujo-cable { animation: none; }
}
.flujo-enchufe {
  fill: var(--lienzo);
  stroke: color-mix(in srgb, var(--tono) 70%, transparent);
  stroke-width: 1.5;
}

.flujo-nodo {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--tono) 34%, var(--borde-sutil));
  border-radius: var(--r-sm);
  background: var(--lienzo);
  padding: 0 11px;
  overflow: hidden;
}
/* Una linea de color arriba, como los paneles: el nodo tiene que leerse como
   parte de la casa y no como un widget pegado de otra pagina. */
.flujo-nodo::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--tono);
  opacity: .8;
}

.flujo-cabeza { display: flex; align-items: center; gap: 6px; height: 34px; }
.flujo-punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tono); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 18%, transparent);
}
.flujo-titulo {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--tinta);
  flex: 1; min-width: 0;
}
/* La etiqueta cede el lugar antes que el titulo. Al reves —que es lo que
   pasaba— un tag de cuatro palabras dejaba el titulo en "La ...", y el titulo
   es lo unico que no se puede adivinar. */
.flujo-tag {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tono);
  flex: 0 1 auto; min-width: 0; max-width: 46%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.flujo-grande {
  height: 30px; display: flex; align-items: center;
  font-family: var(--mono);
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  color: var(--tono);
}
/* Un cero en naranja grande se lee como un error. Es un cero. */
.flujo-grande.es-cero { color: var(--tinta-4); }

.flujo-fila {
  height: 17px;
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px;
}
.flujo-k { color: var(--tinta-3); flex: 1; min-width: 0; }
.flujo-v { font-family: var(--mono); font-weight: 600; color: var(--tinta-2); flex: none; }
.flujo-v.es-ok { color: var(--verde); }
.flujo-v.es-warn { color: var(--ambar); }
.flujo-v.es-crit { color: var(--rosa); }

/* ------------------------------ Clap con voz ---------------------------- */
/* La consola: Clap grande, su estado, y el boton de hablarle. Aparece arriba
   del hilo cuando se prende la voz, y el hilo sigue abajo igual que siempre:
   lo que se dijo hablando queda escrito, no se pierde. */
.clap-consola {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--borde-sutil);
  background: var(--lienzo-2);
}
.clap-consola-cara { flex: none; line-height: 0; position: relative; }

/* El halo. Es lo unico que se mira de reojo desde el otro lado del
   escritorio, asi que cambia de color con el estado y no solo de tamaño. */
.clap-consola-cara::before {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: var(--tono-voz, transparent);
  opacity: .16;
  transition: background var(--t-medio) var(--suave), transform var(--t-medio) var(--suave);
}
.clap-consola-cara.escucha { --tono-voz: var(--cinta); cursor: default; }
.clap-consola-cara.piensa { --tono-voz: var(--violeta); }
.clap-consola-cara.habla { --tono-voz: var(--verde); cursor: pointer; }
@keyframes clap-halo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.clap-consola-cara.escucha::before,
.clap-consola-cara.habla::before { animation: clap-halo 1.5s var(--suave) infinite; }
@media (prefers-reduced-motion: reduce) {
  .clap-consola-cara::before { animation: none; }
}

/* Lo que se va entendiendo mientras hablas. Alto fijo: si creciera con el
   dictado, la pantalla entera saltaria a cada palabra. */
.clap-dictado {
  min-height: 17px;
  max-height: 34px;
  overflow: hidden;
  margin-top: 2px;
}

.clap-mic {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--lienzo);
  color: var(--tinta-2);
  display: grid; place-items: center;
  cursor: pointer;
  /* El dedo apoyado tiene que grabar, no seleccionar texto ni hacer zoom. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  transition: transform var(--t-rapido) var(--salto), background var(--t-rapido) var(--suave);
}
.clap-mic:hover { border-color: var(--borde-fuerte); }
.clap-mic:active { transform: scale(.93); }
.clap-mic.activo {
  background: var(--cinta);
  border-color: var(--cinta);
  color: var(--sobre-cinta);
  box-shadow: var(--sombra-cinta);
}
.clap-mic:disabled { opacity: .45; cursor: default; }