/* Estilo base. Mobile-first: se diseña para el teléfono y crece al PC.
   Los colores vienen de /css/marca.css (generado desde lib/app-marca.js). */

* { box-sizing: border-box; }

/* La barra de scroll SIEMPRE reserva su espacio. Sin esto, una página corta no
   la tiene y una larga sí, y el ancho útil cambia ~8 px entre página y página:
   era el "pasito a la derecha" que daba el compás de carga al navegar. */
html { scrollbar-gutter: stable; }

/* Lo escondido queda escondido: sin esto, cualquier .boton o .tarjeta con el
   atributo "hidden" se sigue viendo, porque su display le gana al del navegador. */
[hidden] { display: none !important; }

/**
 * El fondo de la página es el del CLIENTE, y arriba se le pinta encima el
 * lienzo blanco de la casa (.pintura), que se disuelve hacia abajo. Ese es el
 * traspaso: de la mitad para abajo, la casa es suya.
 * Para el admin —y para el cliente que todavía no sube su logo— `--cli-fondo`
 * vale blanco, así que no se nota ninguna costura.
 */
body {
  margin: 0; position: relative;
  background: var(--cli-fondo);
  color: var(--tinta);
  font-family: var(--f-cuerpo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5rem; }
h1 { font-size: clamp(30px, 7vw, 44px); }
h2 { font-size: clamp(20px, 4.2vw, 25px); }
h3 { font-size: 18px; }
p { margin: 0 0 .75rem; }
a { color: var(--petroleo); }

/**
 * ── LA PINTURA ─────────────────────────────────────────────────────────────
 *
 * El fondo es blanco y el color va PINTADO detrás, en lavados suaves que se
 * cruzan. El contraste sale de la pintura, no de un fondo oscuro: la tinta
 * sobre el lavado más fuerte mide 12 a 1 (medido con lib/color.js).
 *
 * Y lo que hace que esto sea de cada cliente: los lavados de la derecha y de
 * abajo usan `--cli-acento`, que sale de SU logo. A la izquierda queda nuestro
 * turquesa. Por eso el techo se funde con su casa en vez de cortarse con una
 * línea — y para un cliente nuevo se repinta solo, sin tocar nada.
 */
/* El lienzo va DETRÁS de todo, pegado arriba. Así no hubo que tocar las quince
   pantallas: lo pone `montarBarra()` en comun.js y todas quedan pintadas. */
.pintura {
  position: absolute; top: 0; left: 0; right: 0; height: 440px;
  overflow: hidden; background: var(--crudo); z-index: 0; pointer-events: none;
}
.barra, .pagina, .login-caja { position: relative; z-index: 1; }
.pintura > .lavado {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.lavado.nuestro-1 { top: -150px; left: -130px; width: 400px; height: 350px;
  background: radial-gradient(circle, rgba(0,194,209,.62) 0%, rgba(0,194,209,.16) 52%, rgba(0,194,209,0) 74%); }
.lavado.nuestro-2 { top: -40px; left: 60px; width: 300px; height: 280px;
  background: radial-gradient(circle, rgba(3,102,114,.30) 0%, rgba(3,102,114,.06) 56%, rgba(3,102,114,0) 76%); }
.lavado.suyo-1 { top: 30px; right: -150px; width: 360px; height: 330px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cli-acento) 48%, transparent) 0%,
              color-mix(in srgb, var(--cli-acento) 12%, transparent) 54%, transparent 76%); }
.lavado.suyo-2 { top: 240px; right: -60px; width: 330px; height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cli-acento) 40%, transparent) 0%,
              color-mix(in srgb, var(--cli-acento) 9%, transparent) 56%, transparent 76%); }
.lavado.suyo-3 { top: 300px; left: -80px; width: 320px; height: 280px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cli-acento) 30%, transparent) 0%,
              color-mix(in srgb, var(--cli-acento) 7%, transparent) 58%, transparent 78%); }
/* La transición hacia lo del cliente: el techo se DISUELVE en su fondo. */
.pintura > .fundido {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%,
              color-mix(in srgb, var(--cli-fondo) 55%, transparent) 55%, var(--cli-fondo) 100%);
}

/* ── Barra de arriba ── */
.barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 16px 0; background: transparent; color: var(--tinta);
}
.barra .marca {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--f-titulo); font-weight: 700; font-size: 17px;
  letter-spacing: .17em; text-transform: uppercase;
}
/* El delta: el logo. Lleva el degradado adentro — parte en nuestro turquesa y
   termina en el color del cliente. Es el mismo gesto que la mezcla del fondo. */
.barra .marca::before {
  content: ''; width: 38px; height: 38px; flex: none;
  background: linear-gradient(135deg, var(--acento) 0%, var(--petroleo) 55%, var(--cli-acento-texto) 100%);
  -webkit-mask: var(--delta) center / contain no-repeat;
  mask: var(--delta) center / contain no-repeat;
}
.barra .marca em {
  font-style: normal;
  background: linear-gradient(100deg, var(--acento-fuerte) 0%, var(--petroleo) 60%, var(--cli-acento-texto) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.barra .quien { margin-left: auto; font-size: 12.5px; color: var(--silencio); text-align: right; line-height: 1.3; }
.barra .quien b { display: block; color: var(--tinta); font-weight: 600; }
.barra button {
  background: rgba(255,255,255,.65); border: 1px solid var(--linea); color: var(--silencio);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.barra button:hover { border-color: var(--acento); color: var(--petroleo); }
.barra .admin-atajo {
  background: rgba(255,255,255,.76); border: 1px solid var(--linea); color: var(--petroleo);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.barra .admin-atajo:hover { border-color: var(--acento); background: var(--papel); }
.barra .admin-atajo.espejo { background: #fff; color: #4a3d78; border-color: #cfc5ee; }
.cuenta-cliente {
  background: #fffaf0; border: 1px solid #ead6ae; color: #6b4a12;
}

.pagina { max-width: 940px; margin: 0 auto; padding: 20px 16px 60px; }

/* ── Tarjetas ── */
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: 18px;
  padding: 20px; margin-bottom: 12px;
}
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* ── Formularios ── */
label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: 12px 13px; font: inherit;
  border: 1.5px solid #cfdde1; border-radius: 9px; background: #fff; color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.campo { margin-bottom: 14px; }
.dictado-controles { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dictado-atajo { min-height:36px; padding:8px 13px; box-shadow:none; }
.dictado-atajo:hover { border-color:var(--acento); background:var(--papel); }
.dictado-atajo.oyendo { background:#d92b4b; border-color:#d92b4b; color:#fff; animation:dictado-latido 1.3s ease-in-out infinite; }
.dictado-atajo.transcribiendo { background:var(--papel); border-color:var(--acento); color:var(--petroleo); }
.dictado-modelo { color:var(--petroleo); font-size:12px; line-height:1.25; }
.dictado-nota { flex-basis:100%; }
@keyframes dictado-latido { 70% { box-shadow:0 0 0 9px rgba(217,43,75,0); } }
@media (prefers-reduced-motion: reduce) { .dictado-atajo.oyendo { animation:none; } }

/**
 * Los botones son PÍLDORA y llevan su propio halo pintado detrás: el mismo
 * gesto del fondo, en chico. El halo es una sombra difusa del color del botón,
 * no un borde — por eso se ve pintado y no dibujado.
 *
 * La letra va OSCURA sobre el turquesa: blanco sobre #00c2d1 mide 2.2 a 1 y no
 * se lee. Oscura mide 8.0. Medido, no estimado.
 */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--acento); color: #04171c;
  border: 0; border-radius: 999px; padding: 14px 24px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  box-shadow: 0 0 22px color-mix(in srgb, var(--acento) 42%, transparent);
  transition: box-shadow .2s ease, background .2s ease;
}
.boton:hover { background: var(--acento-fuerte); color: #04171c;
  box-shadow: 0 0 30px color-mix(in srgb, var(--acento) 55%, transparent); }
.boton:disabled { opacity: .55; cursor: default; box-shadow: none; }
.boton.ancho { width: 100%; text-align: center; }

/**
 * El botón del CLIENTE: el mismo, con SU color. Lo usan las pantallas de la
 * mitad de abajo, donde manda él.
 */
.boton.suyo { background: var(--cli-acento); color: var(--cli-sobre-acento);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cli-acento) 38%, transparent); }
.boton.suyo:hover { background: var(--cli-acento); color: var(--cli-sobre-acento);
  box-shadow: 0 0 30px color-mix(in srgb, var(--cli-acento) 52%, transparent); }

/* ── Avisos ── */
.aviso { border-radius: 9px; padding: 11px 14px; margin-bottom: 14px; font-size: 14.5px; }
.aviso.error { background: #fbeae8; border: 1px solid #e8c4bf; color: var(--error); }
.aviso.ok    { background: #e8f4ed; border: 1px solid #bcdcca; color: var(--ok); }

.silencio { color: var(--silencio); font-size: 14px; }
.vacio { text-align: center; padding: 36px 20px; color: var(--silencio); }

/* ── Login ── */
/* La primera pantalla del sistema: la pintura sin cliente todavía, solo la
   casa. Es lo único que se ve antes de entrar, así que aquí el turquesa manda. */
.login-caja {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px;
  background:
    radial-gradient(560px 460px at 12% -8%, rgba(0,194,209,.36) 0%, rgba(0,194,209,0) 68%),
    radial-gradient(520px 440px at 96% 22%, rgba(224,138,0,.24) 0%, rgba(224,138,0,0) 70%),
    radial-gradient(500px 420px at 30% 96%, rgba(3,102,114,.20) 0%, rgba(3,102,114,0) 72%),
    var(--crudo);
}
.login-caja form {
  width: 100%; max-width: 390px; background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linea); border-radius: 22px; padding: 30px 26px 26px;
  box-shadow: 0 20px 50px -30px rgba(11,27,38,.45);
}
.login-caja .titulo { text-align: center; margin-bottom: 4px; }
.login-caja .titulo em {
  font-style: normal;
  background: linear-gradient(100deg, var(--acento-fuerte) 0%, var(--petroleo) 70%, var(--ambar) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-caja .bajada { text-align: center; color: var(--silencio); font-size: 14px; margin-bottom: 22px; }

/* ── Wizard de entrada (F2) ── */
.pagina.angosta { max-width: 640px; }
/* La semana se lee de lunes a viernes, en una fila. Con el ancho de siempre
   los cinco días se partían en 3+2 y dejaban de leerse como una semana. */
.pagina.ancha { max-width: 1440px; }

.pasos {
  display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px;
  counter-reset: paso; font-size: 12.5px;
}
.pasos li {
  flex: 1; text-align: center; color: var(--silencio); padding-top: 20px; position: relative;
  border-top: 3px solid var(--linea);
}
.pasos li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 23px; height: 23px; border-radius: 50%; background: var(--linea); color: var(--silencio);
  font-weight: 700; line-height: 23px;
}
.pasos li.activo { color: var(--tinta); font-weight: 700; border-top-color: var(--acento); }
.pasos li.activo::before { background: var(--acento); color: #fff; }
.pasos li.hecho { border-top-color: var(--acento); }
.pasos li.hecho::before { content: '✓'; background: var(--acento); color: #fff; }

.obligatorio {
  float: right; font-weight: 600; font-size: 11px; color: var(--alerta);
  text-transform: uppercase; letter-spacing: .05em;
}
input.falta, textarea.falta { border-color: var(--error); background: #fdf2f2; }

.botonera { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.boton.fantasma { background: transparent; border: 1.5px solid #cfdde1; color: var(--silencio); }
.boton.fantasma:hover { background: var(--papel); color: var(--tinta); }

textarea { resize: vertical; min-height: 70px; font-family: inherit; }

/* El momento "esta es tu marca" */
.ok-linea { font-weight: 600; margin: 14px 0 10px; }
.muestras { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.muestra {
  position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; font-weight: 400;
}
.muestra input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.muestra .chip { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.muestra b { font-weight: 600; }
.muestra code { color: var(--silencio); font-size: 11.5px; }

.ejemplo { border-radius: 12px; padding: 20px; margin: 14px 0 8px; border: 1px solid rgba(0,0,0,.08); }
.ejemplo-cab { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; margin-bottom: 14px; }
.ejemplo-logo { height: 34px; width: auto; max-width: 110px; object-fit: contain; }
.ejemplo h3 { font-size: 25px; margin: 0 0 6px; }
.ejemplo p { font-size: 14px; margin: 0 0 14px; }
.ejemplo-btn { display: inline-block; border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: 14px; }
.medido { color: var(--ok); }
.medido-mal { color: var(--error); font-weight: 600; }

.datos { list-style: none; padding: 0; }
.datos li { margin-bottom: 6px; }
.datos code { background: var(--papel); border-radius: 5px; padding: 2px 7px; font-size: 14px; }

/* Tarjetas de cliente con su propio color */
.tarjeta.cliente { border-left: 5px solid var(--acento); }
.tira { display: flex; gap: 4px; margin-top: 10px; }
.tira i { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); }
.etiqueta { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 9px; display: inline-block; }
.etiqueta.pendiente { background: #fdf0e3; color: var(--alerta); }
/* "Ya te invitó en Meta": la señal que Carlos buscaba en la lista de clientes. */
.etiqueta.lista { background: #e6f6ec; color: #1c7a44; }
.cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cabecera h1 { margin: 0; }
.cabecera .boton { margin-left: auto; }

.dato { margin-bottom: 14px; }
.dato b { display: block; font-size: 14px; margin-bottom: 2px; }
.dato p { margin: 0; color: #31454e; }

/* ── Biblioteca (F3) ── */
.soltar {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed #cfdde1; border-radius: 14px; padding: 26px 18px; margin-bottom: 16px;
  background: var(--papel);
}
.soltar:hover, .soltar.encima { border-color: var(--acento); background: #eaf7f9; }
.soltar b { display: block; font-size: 17px; margin-bottom: 5px; color: var(--acento-fuerte); }
.soltar span { font-size: 13.5px; }

.biblioteca-filtros { display:grid; grid-template-columns:minmax(240px,1fr) repeat(3,minmax(140px,auto)); gap:9px; align-items:center; margin:18px 0 8px; padding:12px; background:rgba(255,255,255,.82); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.biblioteca-filtros input,.biblioteca-filtros select { min-width:0; padding:9px 10px; }
.biblioteca-filtros #resultado-biblioteca { grid-column:1/-1; }

.piezas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
/* La biblioteca ordenada: la carpeta que trajo el cliente manda, y adentro van
   las gavetas que puso el sistema al mirar cada foto. */
.biblioteca-ordenada .carpeta { margin: 18px 0 0; }
/* La carpeta se pliega: apretar el título la cierra. Con muchas carpetas
   abiertas se pierde el orden que acabamos de ganar. */
.biblioteca-ordenada .carpeta-cab {
  font-size: 18px; font-family: var(--f-titulo); margin: 0; cursor: pointer;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linea); padding: 8px 4px;
  list-style: none;
}
.biblioteca-ordenada .carpeta-cab::-webkit-details-marker { display: none; }
.biblioteca-ordenada .carpeta-cab::before {
  content: '▸'; color: var(--acento); font-size: 14px; transition: transform .15s;
}
.biblioteca-ordenada .carpeta[open] > .carpeta-cab::before { transform: rotate(90deg); }
.biblioteca-ordenada .carpeta-cab:hover { background: var(--papel); }
.biblioteca-ordenada .carpeta-cab .silencio { font-size: 12.5px; font-weight: 400; }
.biblioteca-ordenada .carpeta-cab .cuando { margin-left: auto; }
/* Lo que vio el sistema va rotulado: que se sepa que lo escribió la máquina y
   que se puede corregir. Sin el rótulo parece que lo escribió el cliente. */
/* LO ANALIZADO VA MARCADO. Carlos, 26-08: "que se den cuenta de que hay un
   análisis detrás, que hay alguien pensando". Por eso el bloque lleva el fondo
   turquesa de la casa y el delta chico: esto lo miró Ponle Rumbo, no el cliente. */
.pieza .visto {
  display: block; margin: 4px 0 6px; padding: 5px 7px 4px;
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
  border-radius: 9px;
}
.pieza .visto-quien {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acento-fuerte); font-weight: 700;
}
/* El delta de la marca, chiquitito y apuntando arriba. Es el mismo símbolo de
   la barra: se recorta con la máscara y se pinta con el acento. */
.pieza .visto-quien::before {
  content: ''; width: 10px; height: 10px; flex: none;
  background: var(--acento-fuerte);
  -webkit-mask: var(--delta) center / contain no-repeat;
  mask: var(--delta) center / contain no-repeat;
}
/* Va en dos líneas y no en una: el texto cortado a la mitad ("mujer con
   bandolera neg…") no sirve ni para leerlo ni para corregirlo. */
.pieza .descripcion {
  width: 100%; border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 12.5px; line-height: 1.35; color: var(--silencio);
  border-radius: 7px; padding: 3px 5px; resize: vertical; min-height: 2.9em;
  display: block; box-sizing: border-box;
}
/* ── EL RUMBO QUE SE MECE ─────────────────────────────────────────────────
 *
 * EL indicador de carga de la casa, en singular: donde algo demore, va este y
 * no otro. Es el compás de la portada en miniatura — la rosa con sus marcas se
 * mece como el instrumento de un avión corrigiendo rumbo, el delta queda firme
 * al norte y la línea de fe ámbar arriba, quieta, como en el panel real.
 *
 * Con los colores del instrumento (Carlos, 26-08: "los mismos colores que los
 * números"): rosa petróleo, delta con el degradado de la marca, fe ámbar.
 * Va en cualquier parte que demore: <span class="rumbo-carga"></span>
 * ────────────────────────────────────────────────────────────────────────── */
.rumbo-carga {
  position: relative; display: inline-block; vertical-align: -6px;
  width: 24px; height: 24px; flex: none;
  /* La rosa de los vientos: 4 marcas largas (N-S-E-O) y 12 cortas entremedio. */
  --rosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M50 3v16M50 81v16M3 50h16M81 50h16'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='5' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M73.5 9.3l-5 8.7M26.5 90.7l5-8.7M90.7 73.5l-8.7-5M9.3 26.5l8.7 5M90.7 26.5l-8.7 5M9.3 73.5l8.7-5M73.5 90.7l-5-8.7M26.5 9.3l5 8.7'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23000' stroke-width='3' opacity='.35'/%3E%3C/svg%3E");
  /* La línea de fe: la marquita ámbar fija de arriba. No se mece con la rosa. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23e08a00'/%3E%3C/svg%3E") top center / 24% auto no-repeat;
}
/* La ROSA se mece: izquierda, derecha. Un compás no da vueltas — busca. */
.rumbo-carga::before {
  content: ''; position: absolute; inset: 0;
  background: var(--petroleo, #036672);
  -webkit-mask: var(--rosa) center / contain no-repeat;
  mask: var(--rosa) center / contain no-repeat;
  animation: rumbo-mecer 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* El delta firme al centro, con el degradado de la marca: es el norte. */
.rumbo-carga::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: linear-gradient(135deg, var(--acento, #00c2d1) 0%, var(--petroleo, #036672) 55%, var(--ambar, #e08a00) 100%);
  -webkit-mask: var(--delta) center / contain no-repeat;
  mask: var(--delta) center / contain no-repeat;
}
@keyframes rumbo-mecer {
  0%   { transform: rotate(-32deg); }
  50%  { transform: rotate(32deg); }
  100% { transform: rotate(-32deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rumbo-carga::before { animation-duration: 6s; }
}
/* Grande, para cuando la espera es de la pantalla entera y no de un botón. */
.rumbo-carga.grande { width: 58px; height: 58px; }
.rumbo-carga.grande::after { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

/* ── LA CORTINA: el compás al entrar a CADA página ────────────────────────
 *
 * La monta comun.js apenas carga y la baja cuando la página está lista; al
 * apretar un link interno vuelve a subir. Así el cambio de página siempre se
 * ve como "pum, el compás", y nunca como una pantalla blanca a medio armar. */
.carga-pagina {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel, #f4f8f9);
  opacity: 1; transition: opacity .3s ease;
}
.carga-pagina.chao { opacity: 0; pointer-events: none; }
/* El compás de la cortina: la rosa con sus letras se MECE en un div propio
   (eso corre en la tarjeta gráfica y no se pega), el delta y la fe quedan
   quietos encima. */
.compas-carga { position: relative; width: 116px; height: 116px; }
.compas-carga .cc-gira {
  position: absolute; inset: 0; will-change: transform;
  animation: cc-mecer 3s ease-in-out infinite;
}
.compas-carga .cc-gira svg, .compas-carga .cc-fijo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.compas-carga .cc-fijo { pointer-events: none; }
@keyframes cc-mecer {
  0%   { transform: rotate(-30deg); }
  50%  { transform: rotate(30deg); }
  100% { transform: rotate(-30deg); }
}
@media (prefers-reduced-motion: reduce) { .compas-carga .cc-gira { animation: none; } }

/* EL COMPÁS CHICO: el mismo de la cortina, en miniatura y DANDO VUELTAS.
   El de la cortina se mece (va y viene); éste gira entero, que es lo que se
   lee como "está trabajando" y es lo que pidió Carlos el 26-08. */
.compas-mini { position: relative; display: inline-block; flex: none; vertical-align: -.22em; }
.compas-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.compas-mini .cm-gira { animation: cm-girar 2.6s linear infinite; transform-origin: 50% 50%; }
.compas-mini .cm-fijo { pointer-events: none; }
@keyframes cm-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .compas-mini .cm-gira { animation-duration: 9s; } }

.trabajando {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--acento-fuerte); font-size: 13px;
}

/* ── EL BOTÓN DEL BICHO: reportar un problema desde cualquier pantalla. ── */
/* Un cuadradito en la esquina: discreto pero que SE VEA — con 34 px y medio
   transparente, Carlos no lo encontró ni sabiendo que estaba. */
#bicho-boton {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--acento) 45%, transparent);
  background: var(--crudo); font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 16px rgba(11, 27, 38, .22);
  transition: transform .15s ease;
}
#bicho-boton:hover { transform: scale(1.1); }
#bicho-boton.oculto { opacity: 0; pointer-events: none; }
dialog.bicho-caja {
  border: none; border-radius: 16px; padding: 20px 22px; width: min(480px, 92vw);
  background: var(--crudo); color: var(--tinta);
  box-shadow: 0 24px 60px rgba(11, 27, 38, .25);
}
dialog.bicho-caja::backdrop { background: rgba(11, 27, 38, .5); }
dialog.bicho-caja h3 { margin: 0 0 4px; font-family: var(--f-titulo); }
dialog.bicho-caja textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin: 8px 0 10px;
  resize: vertical;
}
dialog.bicho-caja textarea:focus { outline: none; border-color: var(--acento); }
.bicho-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bicho-foto { position: relative; }
.bicho-foto img {
  width: 84px; height: 64px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--linea); display: block;
}
.bicho-foto button {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: var(--tinta); color: var(--crudo);
  font-size: 10px; line-height: 1; cursor: pointer;
}

/* La línea de "esto está cargando", centrada y sin gritar. */
.cargando-linea {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--acento-fuerte); font-size: 13.5px; padding: 10px 0;
}

/* El título de cada tipo: Fotos por un lado, Videos por otro. */
.biblioteca-ordenada .tipo-cab {
  font-size: 22px; margin: 30px 0 0; display: flex; align-items: baseline; gap: 9px;
}
.biblioteca-ordenada .tipo-cab .silencio { font-size: 13px; font-weight: 400; }
.biblioteca-ordenada .tipo-cab + .chico { margin: 2px 0 0; }
/* El video se reproduce en su propio recuadro, sin salir de la biblioteca. */
.pieza .lienzo video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }

/* El visor: la foto en grande, para decidir si sirve. */
dialog.visor {
  border: none; border-radius: 16px; padding: 0; max-width: 92vw; max-height: 92vh;
  background: var(--crudo); color: var(--tinta); overflow: hidden;
}
dialog.visor::backdrop { background: rgba(11, 27, 38, .72); }
dialog.visor img { display: block; max-width: 92vw; max-height: 78vh; object-fit: contain; }
dialog.visor .visor-pie { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--silencio); }
.visor-reel-editor { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.visor-reel-editor h4 { margin: 0 0 4px; font-size: 17px; }
.visor-reel-campos { display: grid; gap: 8px; }
.visor-reel-campos textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.visor-reel-editor audio { width: 100%; height: 32px; margin-bottom: 8px; }
dialog.visor .visor-cerrar {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  border: none; border-radius: 999px; width: 32px; height: 32px; cursor: pointer;
  background: rgba(255, 255, 255, .88); color: var(--tinta); font-size: 15px; line-height: 1;
}

/* Las etiquetas en UNA línea: son para buscar, no para leerlas todas. */
.pieza .etiquetas {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pieza .descripcion:hover { border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
.pieza .descripcion:focus { border-color: var(--acento); background: var(--crudo); color: var(--tinta); outline: none; }
.biblioteca-ordenada .gaveta {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--silencio); margin: 16px 0 8px; display: flex; align-items: baseline; gap: 8px;
}
.pieza {
  margin: 0; background: #fff; border: 1px solid var(--linea); border-radius: 11px; overflow: hidden;
  display: flex; flex-direction: column;
}
.pieza.apagada { opacity: .5; }
.pieza .lienzo {
  position: relative; aspect-ratio: 1; background: #e6eef1;
  display: grid; place-items: center; overflow: hidden;
}
.pieza .lienzo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pieza .sinfoto { font-size: 34px; }
.marca-video {
  position: absolute; left: 7px; bottom: 7px; background: rgba(0,0,0,.68); color: #fff;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 5px; padding: 2px 7px;
}
.pieza figcaption { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 5px; }
.pieza .nombre {
  border: 1px solid transparent; background: transparent; padding: 2px 4px;
  font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 5px; width: 100%;
}
.pieza .nombre:hover { border-color: var(--linea); }
.pieza figcaption .silencio { font-size: 11.5px; }
.pieza .acciones { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pieza .usar { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; margin: 0; cursor: pointer; }
.pieza .usar input { accent-color: var(--acento); }
.enlace-borrar {
  margin-left: auto; background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--silencio); font: inherit; font-size: 12px; text-decoration: underline;
}
.enlace-borrar:hover { color: var(--error); }

/* ── Buzón de ideas (F4) ── */
#nueva textarea { margin-bottom: 10px; }
.adjunta { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.adjunta label { margin: 0; font-weight: 400; }
.adjunta select { width: auto; min-width: 160px; flex: 1; padding: 8px 10px; }

.filtros { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0 12px; }
.filtro {
  background: #fff; border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer; color: var(--silencio);
}
.filtro span { color: var(--silencio); font-weight: 700; margin-left: 3px; }
.filtro:hover { border-color: var(--acento); }
.filtro.activo { background: var(--tinta); border-color: var(--tinta); color: var(--crudo); }
.filtro.activo span { color: var(--acento); }

.idea {
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.idea-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.idea-cab .silencio { font-size: 12.5px; }
.estado {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 10px;
}
.estado.nueva      { background: #eef2f6; color: #35566e; }
.estado.batidora   { background: #fdf0e3; color: #8a5200; }
.estado.propuesta  { background: #e9f0fa; color: #2f5d8a; }
.estado.aprobada   { background: #e8f4ed; color: #1a6b43; }
.estado.descartada { background: #eef3f4; color: var(--silencio); }

.idea-cuerpo { display: flex; gap: 12px; align-items: flex-start; }
.idea-cuerpo p { margin: 0; flex: 1; }
.idea-foto { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; flex: none; }
.idea-pie { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.boton.chico { padding: 8px 14px; font-size: 13.5px; border-radius: 8px; }
.enlace-conversa {
  margin-left: auto; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 13px; color: var(--altura); text-decoration: underline; padding: 4px;
}

.conversa { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--papel); }
.globo { border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; max-width: 88%; }
.globo.cliente { background: var(--papel); }
.globo.admin { background: #e4f6f8; margin-left: auto; }
.globo b { font-size: 12.5px; display: block; margin-bottom: 2px; }
.globo p { margin: 0 0 3px; font-size: 14.5px; }
.globo .silencio { font-size: 11.5px; }
.responder { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.responder textarea { flex: 1; min-height: 48px; }

/* ── Piezas salidas de la batidora (F5) ── */
/*
 * LOS DISEÑOS VAN EN FILA, HACIA LA DERECHA (Carlos, 25-08).
 *
 * Apilados uno debajo de otro se veía UNO por pantalla: para saber qué había
 * armado había que bajar y bajar. En fila se ven tres de una y la imagen ocupa
 * la tarjeta entera, que es lo que se viene a mirar.
 */
.carrusel { position: relative; margin: 0 -4px; }
.creaciones {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 330px);
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: 4px;
  padding: 4px 4px 12px;
}
/*
 * TODAS LAS TARJETAS DEL MISMO PORTE (Carlos, 25-08: "se ve mal, no se pueden
 * ver bien"). Antes cada una crecía con su texto: una quedaba el doble de alta
 * que la de al lado y la fila parecía rota. Ahora la imagen ocupa un alto fijo,
 * el texto se corta y los botones quedan siempre a la misma altura.
 */
.creacion { scroll-snap-align: start; display: flex; flex-direction: column; height: 100%; }
.creacion-img {
  height: 340px; flex: 0 0 340px;
  display: flex; align-items: center; justify-content: center;
  background: #eef3f4;
}
/* `contain`, no `cover`: una historia 9:16 y un post 4:5 se ven ENTEROS,
   sin que se les corte la mitad del producto. */
.creacion-img img { width: 100%; height: 100%; object-fit: contain; }
.creacion-datos { flex: 1; min-height: 0; }
.creacion-datos h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pie-texto {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* Bajo qué concepto está hecho el diseño: para qué sirve, no cómo se ve. */
.concepto {
  font-size: 12.5px; color: var(--altura); font-style: italic;
  border-left: 2px solid var(--linea); padding-left: 9px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.creacion-pie { margin-top: auto; }

/* El lienzo para editar la pieza, en una ventana encima. */
.editor-pieza { border: none; border-radius: 16px; padding: 20px; max-width: 560px; width: 94vw; }
.editor-pieza::backdrop { background: rgba(11, 42, 54, .55); }
.editor-pieza h2 { margin: 0 0 4px; }
.editor-pieza .botonera { margin-top: 12px; }
/* Las flechas aparecen solo si hay para dónde correrse (lo decide el JS). */
.carrusel .flecha {
  position: absolute; top: 40%; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  border: 1px solid var(--linea); background: rgba(255,255,255,.94);
  box-shadow: 0 2px 10px rgba(11,42,54,.16);
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--tinta);
}
.carrusel .flecha:hover { background: #fff; }
.carrusel .flecha.izq { left: -6px; }
.carrusel .flecha.der { right: -6px; }
.creacion {
  background: #fff; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
/* (el alto fijo y el 'contain' de la imagen están más arriba, en el carrusel) */
.creacion-datos { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.creacion-datos h3 { margin: 0; }
.creacion-datos p { margin: 0; }
.pie-texto { font-size: 14.5px; color: #31454e; }
.tags { font-size: 13px; color: var(--altura); }
.silencio.chico { font-size: 12px; }
.porque { font-style: italic; }
.creacion-pie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; }
.creacion-pie .enlace-borrar { margin-left: auto; }

/* En el carrusel la tarjeta es SIEMPRE vertical: la imagen arriba y grande. */
.creacion-datos { padding: 13px 14px 15px; }

/* El "volver a conectar" de una cuenta que YA está: discreto, pero existe. */
.un-clic.otra-vez { margin: 10px 0 2px; }
.un-clic.otra-vez p { margin: 5px 0 0; max-width: 46em; }

.pensarlo { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 14px; font-size: 14px; color: var(--altura); cursor: pointer; }
.pensarlo input { margin-top: 2px; }
#taller details { margin: 6px 0 14px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 13px; }
#taller details summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
#taller details[open] summary { margin-bottom: 12px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ── La semana (F6) ── */
.titulo-bloque {
  font-family: var(--f-titulo); font-size: 15px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--silencio); margin: 22px 0 10px; font-weight: 400;
}
.semana { background: #fff; border: 1px solid var(--linea); border-radius: 13px; padding: 17px 18px 18px; }
.semana-cab { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.semana-cab h2 { margin: 3px 0 4px; }
.semana-cab .silencio { font-size: 12.5px; }
.semana-cab > .estado { margin-left: auto; }
.semana-pie { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }

/* DE QUÉ SE ARMÓ LA SEMANA. Va plegado: es trazabilidad, no algo que haya que
   leer cada vez. Carlos, 26-08: "démosle trazabilidad". */
.fuentes {
  border: 1px solid var(--linea); border-radius: 14px; padding: 11px 14px;
  margin: 12px 0 0; background: rgba(255, 255, 255, .55);
}
.fuentes > summary {
  cursor: pointer; display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline;
  font-size: 13.5px;
}
.fuentes[open] > summary { margin-bottom: 10px; }
.fuentes-cajas { display: flex; flex-wrap: wrap; gap: 12px; }
.fuente {
  flex: 1 1 260px; min-width: 240px; border: 1px solid var(--linea);
  border-radius: 12px; padding: 11px; display: flex; flex-direction: column; gap: 4px;
}
.fuente-rot { margin: 0; font-size: 10.5px; letter-spacing: .08em; color: var(--silencio); font-weight: 700; }
.fuente-dato { margin: 0; font-size: 13px; }
.fuente p { margin: 0; }
.fuente a { align-self: flex-start; margin-top: 4px; }
.fuentes-lista { margin: 10px 0 6px; padding-left: 18px; font-size: 12.5px; color: var(--silencio); }
.fuentes-lista li { margin: 2px 0; }

/* EL EDITOR VISUAL: la barra, la paleta y la transparencia.
   Carlos, 26-08: "me da un par de colores, pero me debiese dar acá la paleta
   de colores para que pueda ponerla". */
.lienzo-barra { flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.lienzo-barra .boton.chico { padding: 6px 10px; font-size: 12px; }
/* La mesa de trabajo: el lienzo a la izquierda y las propiedades a la derecha.
   Carlos, 26-08: "que sea fácil y cómodo, espectacular". */
/* Cada lámina de la presentación, con sus campos agrupados: editar a ciegas
   una lista de cajas de texto no se entiende. */
.lamina-campos {
  border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.lamina-campos legend {
  font-size: 11px; letter-spacing: .06em; font-weight: 700; color: var(--acento-fuerte);
  padding: 0 6px; text-transform: uppercase;
}
.lamina-campos textarea { margin-top: 5px; }

/* EL MENÚ DE DISEÑOS. Carlos, 26-08: "un submenú acá arriba de diseños".
   Uno puesto a la vez; el que está elegido se ve, no hay que adivinarlo. */
.disenos { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .disenos { grid-template-columns: repeat(4, 1fr); } }
.diseno {
  border: 1px solid var(--linea); border-radius: 11px; padding: 10px 12px;
  background: var(--papel); cursor: pointer; text-align: left; font: inherit;
  display: flex; flex-direction: column; gap: 3px; transition: border-color .12s ease;
}
.diseno:hover { border-color: var(--acento-fuerte); }
.diseno.puesto { border-color: var(--acento-fuerte); background: rgba(0, 194, 209, .08); box-shadow: inset 0 0 0 1px var(--acento-fuerte); }
.diseno b { font-size: 13.5px; }

/* TU PRESENTACIÓN: las dos formas y lo que ya armó. */
.formas { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 700px) { .formas { grid-template-columns: repeat(2, 1fr); } }
.forma {
  border: 1px solid var(--linea); border-radius: 13px; padding: 15px;
  display: flex; flex-direction: column; gap: 7px; background: var(--papel);
}
.forma .boton { align-self: flex-start; margin-top: 4px; }
.presentaciones { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.presenta {
  border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--papel);
}
.presenta { flex-direction: column; align-items: stretch; }
.presenta-cab { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.presenta-cab > div:first-child { flex: 1 1 220px; }
.presenta p { margin: 2px 0 0; }
/* Las láminas en fila: se miran de un vistazo y se abren grandes con un clic. */
.laminas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lamina {
  position: relative; padding: 0; border: 1px solid var(--linea); border-radius: 9px;
  overflow: hidden; cursor: pointer; background: #fff; line-height: 0;
  width: 148px; transition: transform .12s ease, box-shadow .12s ease;
}
.lamina:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(8, 20, 26, .2); }
.lamina img { width: 100%; height: auto; display: block; }
.lamina-n {
  position: absolute; top: 4px; left: 4px; background: rgba(0, 0, 0, .55); color: #fff;
  border-radius: 6px; padding: 0 7px; font-size: 10.5px; line-height: 1.7;
}
/* La marquita de "esta la tocaste tú": esa lámina ya no se redibuja sola. */
.lamina-mano {
  position: absolute; top: 4px; right: 4px; background: var(--acento); color: #04171c;
  border-radius: 6px; padding: 0 6px; font-size: 10.5px; line-height: 1.7;
}
.lamina-caja { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lamina-editar { font-size: 11px; }

/* EL LIENZO A LA IZQUIERDA Y LAS PROPIEDADES A LA DERECHA — en grilla, no en
   flex con wrap: con wrap el panel se caia debajo del lienzo apenas faltaban
   unos pixeles, y quedaba todo desparramado a lo largo. */
.lz-mesa { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (min-width: 760px) { .lz-mesa { grid-template-columns: auto 250px; } }
.lz-izq { min-width: 0; }
.lz-der {
  border: 1px solid var(--linea); border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 7px; background: rgba(255, 255, 255, .55);
}
.lz-titulo {
  margin: 2px 0 0; font-size: 10px; letter-spacing: .07em; font-weight: 700;
  color: var(--silencio); text-transform: uppercase;
}
.lz-campo { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--silencio); }
.lz-campo select, .lz-campo input[type="range"] { width: 100%; }
.lz-campo select { font: inherit; font-size: 12.5px; padding: 4px 5px; border-radius: 7px; border: 1px solid var(--linea); }
.lz-campo input[type="range"] { margin: 0; }
/* Los botones del panel, pegados: separados no se leen como un grupo. */
.lz-fila { display: flex; flex-wrap: wrap; gap: 3px; }
.lz-fila .boton.chico { padding: 4px 8px; font-size: 11.5px; }
.lz-ayuda { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--silencio); }
/* Las tres ideas que devuelve la IA: se aprietan y reemplazan el texto. */
.lz-idea {
  display: block; width: 100%; text-align: left; margin-top: 5px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 9px; padding: 7px 9px;
  background: var(--papel); font: inherit; font-size: 12.5px; line-height: 1.35;
}
.lz-idea:hover { border-color: var(--acento-fuerte); background: #fff; }
/* Borrar no se pinta como el resto: es lo único que no se deshace de un clic. */
.boton.peligro-suave { color: #a8451f; border-color: #e6c3b6; }
.boton.peligro-suave:hover { background: #fbeae4; border-color: #c4552f; }

.lz-colores { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.lz-tintes { display: flex; flex-wrap: wrap; gap: 5px; }
.lz-tintes button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--linea);
  cursor: pointer; padding: 0; flex: none;
}
.lz-tintes button:hover { transform: scale(1.12); }
.lz-transparencia { display: flex; align-items: center; gap: 8px; }
.lz-transparencia input { flex: 1; min-width: 120px; }

/* De dónde salió el tema de la semana: la lectura del momento, lo que él pidió
   y su marca. Va bajo el título, chiquito, para leerlo de pasada. */
.base-semana {
  margin: 6px 0 0; font-size: 12px; color: var(--acento-fuerte);
  background: rgba(0, 194, 209, .09); border-radius: 999px;
  padding: 4px 12px; display: inline-block; line-height: 1.45;
}

/* ── EL CALENDARIO DE LA SEMANA ──────────────────────────────────────────
   Carlos, 26-08: "quiero que sea un calendario de la semana… que aparezca todo
   el día lunes, todo el día martes… el fin de semana también se publica".
   Siete columnas en pantalla ancha; en el teléfono se apilan, que es como se
   lee un calendario en un celular. */
.calendario {
  display: grid; gap: 8px; margin-top: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .calendario { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .calendario { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .calendario { grid-template-columns: repeat(7, 1fr); gap: 6px; } }

.casilla {
  border: 1px solid var(--linea); border-radius: 10px; background: var(--papel);
  padding: 9px 9px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
/* El fin de semana se ve distinto: es más liviano y conviene notarlo de un ojo. */
.casilla.finde { background: rgba(236, 243, 245, .55); }
/* Un día que ya pasó se ve, pero apagado: no hay nada que hacerle. */
.casilla.paso { opacity: .55; background: rgba(236, 243, 245, .35); }
.casilla.paso:hover { opacity: .85; }
.casilla.aprobada { border-color: #bcdcca; }
.casilla.cambios { border-color: #e8c9a8; }

.casilla-cab { display: flex; align-items: baseline; gap: 6px; }
.casilla-dia { font-weight: 700; font-size: 12.5px; letter-spacing: .06em; }
.casilla-fecha { font-size: 11.5px; color: var(--silencio); }
/* Un punto de color en vez de la etiqueta escrita: en una columna angosta el
   "LISTA PARA MIRAR" se comía media casilla. El nombre sale al pasar el mouse. */
.casilla-punto {
  margin-left: auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--linea); flex: none;
}
.casilla-punto.lista { background: var(--acento); }
.casilla-punto.aprobada { background: #4f9e73; }
.casilla-punto.cambios { background: #d08a3c; }

/* La temática del día, justo bajo la fecha: es lo que pidió Carlos para que la
   semana se lea sin abrir nada. */
.casilla-tema { margin: 0; font-family: var(--f-titulo); font-size: 15px; line-height: 1.2; }
.casilla-consejo { margin: 0; font-size: 10.5px; color: var(--silencio); line-height: 1.35; }

.casilla-piezas { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 1px; }
.casilla-titulo { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.casilla-idea {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}

.casilla-pie { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.casilla-pie .boton.chico { padding: 6px 9px; font-size: 12px; width: 100%; }
/* Lo de todos los días en iconos: en siete columnas no cabe escrito. */
.casilla-iconos { display: flex; flex-wrap: wrap; gap: 4px; }
.icono-dia {
  width: 27px; height: 27px; border-radius: 7px; border: 1px solid var(--linea);
  background: transparent; color: var(--tinta); cursor: pointer; font-size: 13px;
  display: grid; place-items: center; text-decoration: none; padding: 0; flex: none;
}
.icono-dia:hover { background: var(--acento); border-color: var(--acento-fuerte); }

/* UNA MINIATURA DE LA SEMANA. Todas del mismo alto: es lo que hace que la
   fila se vea pareja aunque mezcle una publicación cuadrada con reels
   verticales.

   ⚠️ VA CON `button` A PROPÓSITO (Carlos, 26-08: "en biblioteca quedó muy
   oscuro el fondo"). Esta miniatura y la tarjeta de la biblioteca usaban las
   dos la clase `.pieza`, y como esta viene después en el archivo, le pintaba
   el fondo negro a la biblioteca entera: el nombre y el "usar en diseños"
   quedaban gris sobre gris. La miniatura es un `<button>` y la tarjeta de la
   biblioteca es un `<figure>`: con eso cada una se queda con lo suyo. */
button.pieza {
  position: relative; flex: none; padding: 0; border: 1px solid var(--linea);
  border-radius: 8px; overflow: hidden; background: #0c1417; cursor: pointer; display: block;
  transition: transform .12s ease, box-shadow .12s ease;
}
button.pieza:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(8, 20, 26, .22); }
button.pieza img, button.pieza video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* El rótulo de color dice QUÉ es sin tener que abrirla. */
.pieza-rot {
  position: absolute; top: 4px; left: 4px; color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5;
}
.pieza-cuenta {
  position: absolute; bottom: 4px; right: 4px; background: rgba(0, 0, 0, .62); color: #fff;
  border-radius: 6px; padding: 1px 6px; font-size: 9.5px;
}
.pieza-play {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  font-size: 20px; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); pointer-events: none;
}
/* Los hashtags son parte de la publicación, no un adorno: se ven antes de aprobar. */
.hashtags-dia { color: var(--petroleo); font-size: 12.5px; word-break: break-word; }

/* ── LOS LOGOS Y LOS LINEAMIENTOS (Mi marca) ────────────────────────────── */
.logos-grilla {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.logo-ficha { margin: 0; border: 1px solid var(--linea); border-radius: 11px; overflow: hidden; background: var(--crudo); }
.logo-ficha.es-principal { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(0,194,209,.16); }
/* El damero se ve DEBAJO del logo: es lo que muestra que el fondo se fue de
   verdad. Y si el logo es claro, el lienzo va oscuro o no se vería nada. */
.logo-lienzo {
  height: 118px; display: grid; place-items: center; padding: 10px;
  background-image:
    linear-gradient(45deg, #e9eff1 25%, transparent 25%, transparent 75%, #e9eff1 75%),
    linear-gradient(45deg, #e9eff1 25%, transparent 25%, transparent 75%, #e9eff1 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; background-color: #fff;
}
.logo-lienzo.oscuro { background-color: #24323a; }
.logo-lienzo img { max-width: 100%; max-height: 98px; object-fit: contain; }
.logo-ficha figcaption { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.logo-ficha .acciones { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }

.lineamientos { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lineamientos li {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; background: var(--papel);
}
.lineamientos .li-texto { flex: 1; min-width: 200px; font-size: 14px; }
.etiqueta-tipo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--petroleo); background: rgba(0,194,209,.12);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.li-nuevo { margin-top: 16px; border-top: 1px solid var(--linea); padding-top: 14px; }

/* ── EL ANÁLISIS DE LOS NÚMEROS ─────────────────────────────────────────────
   Una caja por red, separadas de verdad: Instagram y Facebook no se comparan. */
.analisis-red {
  border: 1px solid var(--cli-linea, var(--linea)); border-radius: 12px;
  padding: 14px 16px; margin-top: 14px; background: var(--papel);
}
.analisis-red h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.analisis-titular { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; }
.analisis-red ul { margin: 4px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.analisis-red li { font-size: 14px; }
.analisis-red .lista-ok li::marker { content: '✓ '; color: var(--ok); }
.analisis-red .lista-flojo li::marker { content: '· '; color: var(--alerta); }
.analisis-red .lista-hacer li::marker { content: '→ '; color: var(--petroleo); }
.lista-mejores { list-style: none; padding-left: 0 !important; }
.lista-mejores li { border-top: 1px solid var(--linea); padding-top: 7px; }
.lista-mejores a { margin-left: 6px; white-space: nowrap; }
.cab-analisis { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cab-analisis h2 { margin: 0; flex: 1; }

/* ── EL EDITOR DE LA PIEZA ──────────────────────────────────────────────────
   La pieza a la izquierda y los campos a la derecha: se cambia una palabra y
   se mira, sin perder de vista lo que se está editando. En el teléfono se
   apilan, con la pieza arriba. */
/* ── LOS CUADROS DE LA CASA ──────────────────────────────────────────────
   Carlos, 26-08: "esa cosa fea; está bien que aparezca, pero dentro del
   sistema, no así". Reemplazan a confirm/alert/prompt del navegador. */
.cuadro {
  border: none; border-radius: 16px; padding: 0; width: min(430px, 92vw);
  background: var(--crudo); color: var(--tinta);
  box-shadow: 0 24px 70px rgba(3, 27, 38, .3);
}
.cuadro::backdrop { background: rgba(3, 27, 38, .55); }
.cuadro-caja { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.cuadro-titulo { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: 20px; line-height: 1.25; }
.cuadro-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--silencio); }
.cuadro-pie { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.cuadro-pie .boton { flex: 1 1 auto; }
/* Lo que no se puede deshacer se ve distinto ANTES de apretarlo. */
.boton.peligro { background: #c4552f; border-color: #c4552f; color: #fff; }
.boton.peligro:hover { background: #a8451f; border-color: #a8451f; }
@media (max-width: 420px) { .cuadro-pie { flex-direction: column-reverse; } }

.editor {
  border: none; border-radius: 16px; padding: 0; width: min(1060px, 94vw);
  max-height: 92vh; overflow: auto; background: var(--crudo); color: var(--tinta);
  box-shadow: 0 24px 70px rgba(3, 27, 38, .28);
}
.editor::backdrop { background: rgba(3, 27, 38, .5); }
.editor-cab {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--crudo); z-index: 2;
}
.editor-cab h3 { margin: 0; font-size: 17px; flex: 1; }
.editor-cab .silencio { font-weight: 400; font-size: 13px; }
.editor-cuerpo { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 18px 20px 22px; }
@media (min-width: 860px) { .editor-cuerpo { grid-template-columns: 330px 1fr; } }
.editor-vista img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--linea);
}
.editor-vista p { margin: 8px 0 0; }
.editor-campos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.editor-campos .campo { margin: 0; }
.editor-ia {
  border: 1px dashed var(--linea); border-radius: 11px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; background: var(--papel);
}
.editor-ia-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.editor-ia-fila input { flex: 1; min-width: 180px; }
.editor-pie { margin-top: 4px; }
/* Dentro de una casilla del calendario todo va más apretado: los chips del
   plan y el desplegable de agregar tienen que caber en una columna angosta. */
.casilla .dia-plan { margin: 2px 0 0; font-size: 10px; gap: 3px; }
.casilla .dia-plan .estado { padding: 1px 6px; font-size: 9.5px; }
.casilla .enlace-ayuda { font-size: 10.5px; }
.casilla details summary { font-size: 10.5px; }

/* ── Cotizaciones (F9) ── */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.doc {
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 8px;
}
.doc-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.doc-cab b { font-variant-numeric: tabular-nums; }
.doc h3 { margin: 2px 0 0; font-size: 18px; }
.doc-total {
  font-family: var(--f-dato); font-size: 22px; color: var(--tinta);
  margin: 4px 0 0; font-variant-numeric: tabular-nums;
}
.doc-pie { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.doc-pie .enlace-borrar { margin-left: auto; }

.linea { display: grid; grid-template-columns: 1fr 72px 100px 32px; gap: 7px; margin-bottom: 7px; align-items: center; }
.linea input { padding: 9px 10px; font-size: 14px; }
.linea .l-cantidad, .linea .l-precio { text-align: right; font-variant-numeric: tabular-nums; }
.linea .quitar {
  background: none; border: 1px solid var(--linea); border-radius: 7px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--silencio); height: 38px;
}
.linea .quitar:hover { border-color: var(--error); color: var(--error); }
@media (max-width: 520px) {
  .linea { grid-template-columns: 1fr 1fr 32px; }
  .linea .l-detalle { grid-column: 1 / -1; }
}

/* ── La entrada del cliente y sus conexiones (F10) ── */
.avance { margin: 18px 0 14px; }
.avance-barra { height: 9px; background: #e2ecef; border-radius: 999px; overflow: hidden; }
.avance-barra i { display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width .4s ease; }
.avance p { margin: 7px 0 0; font-size: 13.5px; color: var(--silencio); }

.conexion { background: #fff; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 11px; overflow: hidden; }
.conexion.conectada { border-color: #bcdcca; }
.conexion.pedimos_ayuda { border-color: #cbd9ea; }
.conexion.con_problema { border-color: #e8c9a8; }

.conexion-cab {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: none; border: 0; padding: 15px 16px; cursor: pointer; font: inherit;
}
.conexion-cab:hover { background: var(--papel); }
.conexion-icono { font-size: 24px; flex: none; line-height: 1; }
.conexion-que { flex: 1; min-width: 0; }
.conexion-que b { display: block; font-size: 16px; }
.conexion-que .silencio { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; }
.conexion-cab .estado { flex: none; }

/* La flecha que dice "esto se abre". Sin ella la tarjeta parece un cartel y
   el botón de volver a conectar queda enterrado: nadie lo encuentra. */
.conexion-flecha {
  flex: none; font-size: 20px; line-height: 1; color: var(--silencio);
  transition: transform .18s ease; transform: translateY(-3px);
}
.conexion-cab[aria-expanded="true"] .conexion-flecha { transform: rotate(180deg) translateY(-3px); }

.conexion-guia { padding: 0 16px 16px; border-top: 1px solid var(--linea); }
.para-que { margin: 13px 0; font-size: 14px; }
.pasos-guia { margin: 14px 0; padding-left: 0; list-style: none; counter-reset: g; }
.pasos-guia li {
  counter-increment: g; position: relative; padding: 0 0 13px 34px; font-size: 14.5px; line-height: 1.5;
}
.pasos-guia li::before {
  content: counter(g); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--acento); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.nota-paso { display: block; margin-top: 4px; font-size: 13px; color: var(--silencio); font-style: italic; }
.enlace-ayuda {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--altura); text-decoration: underline; padding: 6px 2px;
}

/* El diagnóstico de su página */
.diag { margin-top: 22px; }
.diag-resumen { font-size: 16px; }
.diag h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--silencio);
  font-family: var(--f-cuerpo); font-weight: 700; margin: 18px 0 9px; }
.diag-lista { list-style: none; padding: 0; margin: 0; }
.diag-lista li { padding: 10px 0 10px 15px; border-left: 4px solid var(--linea); margin-bottom: 9px; }
.diag-lista li.alto { border-left-color: var(--error); }
.diag-lista li.medio { border-left-color: var(--alerta); }
.diag-lista li.bajo { border-left-color: #cfdde1; }
.diag-lista.bien li { border-left-color: var(--ok); padding-top: 6px; padding-bottom: 6px; margin-bottom: 4px; }
.diag-lista b { display: block; font-size: 14.5px; }
.diag-lista span { display: block; font-size: 14px; color: #31454e; }
.diag-lista em { display: block; margin-top: 4px; font-size: 13.5px; color: var(--acento-fuerte); font-style: normal; }

/* La entrada guiada */
.entrada-paso { background: #fff; border: 1px solid var(--linea); border-radius: 13px; padding: 18px; margin-bottom: 12px; }
.entrada-paso.hecho { border-color: #bcdcca; background: #fbfdfb; }
.entrada-paso .cab { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.entrada-paso .num {
  width: 27px; height: 27px; border-radius: 50%; background: var(--acento); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none;
}
.entrada-paso.hecho .num { background: var(--ok); }
.entrada-paso h2 { margin: 0; font-size: 20px; }
.entrada-paso .listo { margin-left: auto; color: var(--ok); font-size: 13.5px; font-weight: 600; }

.tarjeta.destacada { border: 2px solid var(--acento); background: #fffaf3; }
.tarjeta.destacada h2 { color: var(--acento-fuerte); }

.para-copiar { margin: 13px 0; padding: 11px 13px; background: #f7f2e9; border-radius: 9px; }
.para-copiar > span { display: block; font-size: 13px; margin-bottom: 6px; }
.para-copiar > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.para-copiar code {
  font-family: ui-monospace, Consolas, monospace; font-size: 14px; font-weight: 600;
  background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: 6px 10px;
  word-break: break-all; color: var(--tinta);
}

/* ── El token: la parte que hacemos NOSOTROS (solo la ve el admin) ── */
.etiqueta-opcional {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--silencio); background: var(--linea); border-radius: 999px;
  padding: 2px 8px; margin-left: 6px; vertical-align: 2px;
}
.conexion.opcional { border-style: dashed; }

.caja-token {
  margin-top: 18px; padding: 15px; border-radius: 11px;
  background: #f4f1fb; border: 1px dashed #b9aede;
}
.caja-token h3 { margin: 0 0 6px; font-size: 15.5px; }
.solo-nosotros {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: #6b5aa8; border-radius: 999px; padding: 3px 9px; margin-left: 6px;
  vertical-align: 2px; white-space: nowrap;
}
.caja-token .pasos-guia.chica li { font-size: 13.5px; padding-bottom: 10px; padding-left: 28px; }
.caja-token .pasos-guia.chica li::before { width: 20px; height: 20px; font-size: 11px; background: #6b5aa8; }
.caja-token textarea {
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; word-break: break-all;
}
.ok-linea.chico { font-size: 13px; margin: 8px 0; }

.informe { margin-top: 14px; padding: 13px 15px; border-radius: 10px; background: #fff; border-left: 4px solid var(--ok); }
.informe.ojo { border-left-color: var(--alerta); }
.informe-resumen { margin: 0 0 9px; font-size: 14.5px; font-weight: 600; }
.informe-datos { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.informe-datos li { padding: 3px 0; color: #31454e; }
.informe-datos li.malo { color: var(--error); font-weight: 600; }
.informe-paginas { margin-top: 11px; border-top: 1px solid var(--linea); padding-top: 10px; }
.informe-pagina {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 7px 0; font-size: 14px;
}
.informe-pagina .malo { color: var(--error); }

/* ── "Estás viendo como el cliente" ── */
.cinta-espejo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #6b5aa8; color: #fff; padding: 9px 16px; font-size: 13.5px;
}
.cinta-espejo b { color: #fff; }
.cinta-ojo { font-size: 16px; line-height: 1; flex: none; }
.cinta-texto { flex: 1; min-width: 140px; }
.cinta-espejo button {
  flex: none; background: #fff; color: #4a3d78; border: 0; border-radius: 8px;
  padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cinta-espejo button:hover { background: #ece7fa; }
.cinta-espejo button:disabled { opacity: .6; cursor: default; }
.cinta-espejo .cinta-gasto { display:inline-flex; align-items:center; gap:7px; background:#4d3d84; color:#fff; border:1px solid rgba(255,255,255,.4); }
.cinta-espejo .cinta-gasto:hover { background:#3f3171; }
.cinta-espejo .cinta-gasto span { font-size:11px; font-weight:600; }
.cinta-espejo .cinta-gasto b { font-size:13px; }
/* Con la cinta arriba, la barra deja de ser pegajosa: si no, se pisan las dos
   y el botón de volver queda tapado justo cuando hace falta. */
.cinta-espejo ~ .barra { position: static; }

/* El ayudante: la conversación que guía paso a paso */
.ayudante {
  margin-top: 16px; padding: 14px; border-radius: 11px;
  background: #eef4f1; border: 1px solid #c9ddd3;
}
.ayudante h3 { margin: 0 0 4px; font-size: 15.5px; }
/* Sin scroll propio: una caja que se desplaza sola adentro de una página que
   también se desplaza es un enredo en el teléfono. Crece y ya. */
.charla { margin: 12px 0; }
.burbuja { margin-bottom: 9px; display: flex; flex-direction: column; }
.burbuja p { margin: 0; padding: 10px 13px; border-radius: 13px; font-size: 14.5px; line-height: 1.45; max-width: 88%; }
.burbuja.usuario { align-items: flex-end; }
.burbuja.usuario p { background: var(--acento); color: #2b1d12; border-bottom-right-radius: 4px; }
.burbuja.ayudante p { background: #fff; border: 1px solid #d3e3db; border-bottom-left-radius: 4px; }
.burbuja .con-foto { font-size: 12px; color: #5c7a6c; margin-bottom: 3px; }
.charla-escribir textarea { width: 100%; min-height: 56px; }
.ayudante .botonera { margin-top: 8px; }
.ayudante label.boton { cursor: pointer; }
/* Los estilos del VISOR (la foto con el puntito) los inyecta public/js/conexiones.js,
   para no enredarse con el rebrand que otra sesión está haciendo en este archivo. */

/* El camino rápido: el cliente saca su propio permiso */
.rapido {
  margin-top: 16px; border: 1.5px solid var(--linea); border-radius: 11px;
  padding: 0 14px; background: var(--papel);
}
.rapido[open] { padding-bottom: 16px; }
.rapido > summary {
  cursor: pointer; padding: 13px 0; font-weight: 700; font-size: 15px;
  list-style: none;
}
.rapido > summary::-webkit-details-marker { display: none; }
.rapido > summary::after { content: ' ▾'; color: var(--silencio); }
.rapido[open] > summary::after { content: ' ▴'; }
.rapido > summary:hover { color: var(--acento-fuerte); }
.rapido textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.aviso.ojo { background: #fdf4e5; border: 1px solid #e8d6b4; color: #7a5a20; }

.boton.espejo { background: #6b5aa8; color: #fff; }
.boton.espejo:hover { background: #574890; color: #fff; }
.cabecera .boton.espejo { margin-left: auto; }

/* ── La frontera con la casa del cliente ─────────────────────────────────────
 * No es una línea: es un rótulo con su logo. La línea la hace el fundido de la
 * pintura, que ya viene de arriba. Debajo de esto todo va con SUS colores.
 */
.lo-tuyo {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 16px; font-family: var(--f-dato);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cli-acento-texto);
}
.lo-tuyo img, .lo-tuyo .marca-chip {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  object-fit: contain; background: #fff; border: 1px solid var(--cli-linea);
}
.lo-tuyo .tira { margin: 0 0 0 auto; }
.lo-tuyo .tira i { width: 15px; height: 15px; border-radius: 4px; }

/* Las tarjetas de la mitad de abajo llevan su color en el borde y sus títulos. */
.tarjeta.suya { border-color: var(--cli-linea); }
.tarjeta.suya.destacada { border-left: 4px solid var(--cli-acento); }
.tarjeta.suya h2, .tarjeta.suya h3 { color: var(--cli-tinta); }
.rotulo {
  font-family: var(--f-dato); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cli-acento-texto); display: block; margin-bottom: 3px;
}
.contador-suyo {
  margin-left: auto; font-family: var(--f-dato); font-size: 9px; letter-spacing: .12em;
  background: var(--cli-acento); color: var(--cli-sobre-acento);
  border-radius: 999px; padding: 4px 9px;
}

/* En el teléfono la marca completa + el nombre + dos botones no caben en una
   línea: el "Salir" se salía 35 px. Se achica la marca y se aprietan los
   botones, que es mejor que dejar la barra en dos pisos. */
@media (max-width: 440px) {
  .barra { gap: 9px; padding: 14px 14px 0; flex-wrap: nowrap; }
  /* En el teléfono queda solo el delta: la marca ES el símbolo. Con el nombre
     escrito, "Salir" se caía a una segunda línea y la barra quedaba en dos
     pisos por 20 píxeles. */
  .barra .marca { font-size: 0; gap: 0; }
  .barra .marca::before { width: 30px; height: 30px; }
  .barra .quien { font-size: 11px; min-width: 0; }
  .barra .quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra button { padding: 6px 10px; font-size: 12px; flex: none; }
}

/* ── El techo de la portada: saludo grande y UNA acción ── */
.techo { padding: 22px 0 30px; }
.techo .rotulo.nuestro { color: var(--silencio); margin-bottom: 8px; }
.techo h1 { margin: 0 0 10px; }
.techo h1 .punto { color: var(--cli-acento-texto); }
.techo .bajada { color: var(--silencio); font-size: 15.5px; margin-bottom: 22px; max-width: 34ch; }

.suya-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.suya-cab h2 { margin: 0; }

/* ── Sus números de Facebook e Instagram, en la portada ── */
.numeros { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.rotulo-num {
  margin: 0 0 6px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cli-acento, var(--altura)); font-weight: 700;
}
.cifras { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.cifra b {
  display: block; font-size: 25px; line-height: 1.1;
  color: var(--cli-tinta, var(--tinta)); font-variant-numeric: tabular-nums;
}
.cifra span { font-size: 12.5px; color: var(--altura); }
/* Mientras no sube su logo, lo suyo se ve esperando. No apagado del todo:
   apagado se lee como "roto", y esto no está roto — está esperándola. */
.tarjeta.suya.apagada { opacity: .62; }

/* ── Los accesos del cliente (alta y ficha). Prefijo ac-: .datos y .chip ya existen ── */
.ac-caja { background: #f7f2e9; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.ac-linea { display: flex; gap: 10px; align-items: baseline; margin: 5px 0; flex-wrap: wrap; }
.ac-linea b { min-width: 62px; font-size: 13px; }
.ac-linea code { word-break: break-all; }
.ac-persona { padding: 11px 0; border-top: 1px solid rgba(0,0,0,.07); }
.ac-persona:first-of-type { border-top: 0; }
.ac-persona p { margin: 0 0 8px; }
.ac-salida:empty { display: none; }

/* Borrar un cliente: la puerta existe pero no invita a apretarla. */
.borrar-zona summary { color: #a33; cursor: pointer; font-weight: 600; }
.boton.peligro { background: #b3372f; color: #fff; }
.boton.peligro:hover { background: #942d26; }

/* ── Las tarjetas de cliente: entrar, y las tres acciones de la lista ── */
.cli-ir { display: block; text-decoration: none; color: inherit; }
.cli-acciones { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(0,0,0,.07); }
/* Las acciones son controles NUESTROS, no de la marca del cliente: si heredan
   su --acento, un cliente de color oscuro deja los botones ilegibles. */
.cli-acciones .boton, .cli-panel .boton { --acento: #00c2d1; }
.cli-panel .boton.peligro { --acento: #b3372f; }
.cli-acciones .borrar { color: #b3372f; border-color: rgba(179,55,47,.35); }
.cli-panel { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(0,0,0,.07); }
.cli-persona { padding: 9px 0; }
.cli-persona + .cli-persona { border-top: 1px solid rgba(0,0,0,.07); }
.cli-persona p { margin: 0 0 7px; }


/* ── EL BANNER DE SU CASA ─────────────────────────────────────────────────
 *
 * Carlos, 26-08: "está fome; cada cuenta se debiese ir impregnando". El techo
 * de la portada deja de ser un saludo sobre blanco y pasa a ser una foto SUYA
 * con su logo y un destello de su color.
 *
 * Las capas, de atrás para adelante:
 *   1 · .ban-foto     su foto (miniatura borrosa primero, la grande después)
 *   2 · .ban-velo     un velo PAREJO de su tinta. La opacidad no se eligió a
 *                     ojo: la calcula server/vestido.js subiéndola hasta que
 *                     el blanco encima lea 6:1 contra el peor fondo posible
 *                     (una foto totalmente blanca). Parejo a propósito: un
 *                     degradado dejaría un lado sin esa garantía.
 *   3 · .ban-tinte    solo OSCURECE más donde va el texto. Nunca aclara, así
 *                     que la medición del velo se sigue cumpliendo.
 *   4 · .ban-destello el brillo de su color, arriba a la derecha, lejos del
 *                     texto. Va en "screen" para que ilumine y no manche.
 */
.techo.banner {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px; padding: 26px 24px 30px; margin: 6px 0 20px;
  min-height: 292px; display: flex; flex-direction: column; justify-content: flex-end;
}
.techo.banner.con-foto {
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.55);
}
.ban-foto {
  position: absolute; inset: -14px; z-index: -4;
  background-size: cover; background-position: center;
  filter: blur(9px) saturate(.92);            /* mientras se ve la miniatura */
  transition: filter .45s ease;
}
.ban-foto.nitida { filter: saturate(.88) contrast(1.05); }
.ban-foto.foco-izquierda { background-position: 22% center; }
.ban-foto.foco-derecha   { background-position: 78% center; }
.ban-velo { position: absolute; inset: 0; z-index: -3;
  background: var(--ban-velo); opacity: var(--ban-velo-op, .7); }
.ban-tinte { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(102deg, color-mix(in srgb, var(--ban-velo) 62%, transparent) 0%,
                    color-mix(in srgb, var(--ban-velo) 18%, transparent) 48%, transparent 74%),
    linear-gradient(0deg, color-mix(in srgb, var(--ban-velo) 48%, transparent) 0%, transparent 46%);
}
.ban-destello {
  position: absolute; z-index: -1; right: -110px; top: -150px;
  width: 430px; height: 430px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--ban-destello) 70%, transparent) 0%,
    color-mix(in srgb, var(--ban-destello) 16%, transparent) 52%, transparent 74%);
  mix-blend-mode: screen;
}
/* Sin foto no hay nada que iluminar: el destello se pinta al derecho, suave,
   sobre el lienzo claro. En "screen" sobre blanco no se vería nada. */
.techo.banner:not(.con-foto) .ban-destello { mix-blend-mode: normal; opacity: .55; }

.ban-cuerpo { position: relative; }
.ban-firma { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
/* El logo va SIEMPRE sobre blanco: un logo oscuro sobre el velo oscuro
   desaparece, y no hay forma de saber de antemano cómo es el que suba. */
.ban-firma .ban-logo {
  width: 54px; height: 54px; flex: none; border-radius: 13px;
  object-fit: contain; background: #fff; padding: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.32);
}

/**
 * EL BOTÓN DEL BANNER ES DE SU MARCA, no de la nuestra (Carlos, 26-08: "tiene
 * que ser con los colores de la marca"). Relleno con su destello, y la letra
 * encima viene MEDIDA del servidor: oscura o blanca según lo que se lea.
 */
.techo.banner .boton {
  background: var(--ban-destello); color: var(--ban-destello-sobre, #fff);
  box-shadow: 0 0 26px color-mix(in srgb, var(--ban-destello) 55%, transparent);
}
.techo.banner .boton:hover {
  background: var(--ban-destello); color: var(--ban-destello-sobre, #fff);
  box-shadow: 0 0 36px color-mix(in srgb, var(--ban-destello) 70%, transparent);
}

/**
 * EL LOGO SUELTO — sin cajita (Carlos, 26-08: "se ve como un sticker, feo").
 * Es el PNG transparente de la galería, directo sobre el velo, con una sombra
 * difusa para despegarlo de la foto. Si el único transparente es oscuro, la
 * clase .silueta lo vuelve blanco (brightness 0 + invert): sobre el velo
 * oscuro se lee siempre.
 */
.ban-logo-libre {
  height: 46px; max-width: min(46vw, 300px); object-fit: contain; object-position: left center;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.5));
}
.ban-logo-libre.silueta { filter: brightness(0) invert(1) drop-shadow(0 3px 12px rgba(0,0,0,.5)); }

/**
 * LA MARCA DE AGUA: el mismo logo, enorme, jugando en la punta de abajo del
 * banner — medio salido del borde, inclinado apenas, casi transparente. En
 * "screen" ilumina en vez de manchar: se compenetra con la foto.
 */
.ban-agua {
  position: absolute; right: -4%; bottom: -14%; z-index: 0; pointer-events: none;
  width: 48%; max-width: 430px; opacity: .16; transform: rotate(-7deg);
  mix-blend-mode: screen;
}
.ban-agua.silueta { filter: brightness(0) invert(1); }
.ban-firma .rotulo { margin: 0; }
.ban-lema {
  margin: 0 0 10px; font-family: var(--f-titulo); font-size: 16.5px; font-weight: 600;
  color: var(--ban-destello-texto); letter-spacing: -.01em;
}
.techo.banner .bajada { margin-bottom: 20px; }

/* Con foto, el texto se da vuelta: todo claro sobre el velo. */
.techo.banner.con-foto h1 { color: #fff; }
.techo.banner.con-foto h1 .punto { color: var(--ban-destello-texto); }
.techo.banner.con-foto .rotulo.nuestro { color: rgba(255,255,255,.82); }
.techo.banner.con-foto .bajada { color: rgba(255,255,255,.88); }

/* Un par de fotos suyas en la tarjeta de su marca: las mismas miniaturas que
   ya están guardadas, así que no pesa nada. */
.tira-fotos { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tira-fotos img {
  width: 78px; height: 58px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--cli-linea);
}

@media (max-width: 560px) {
  .techo.banner { min-height: 250px; padding: 20px 18px 24px; border-radius: 20px; }
  .ban-firma .ban-logo { width: 42px; height: 42px; }
  .ban-logo-libre { height: 36px; max-width: 62vw; }
  .ban-agua { width: 72%; right: -10%; bottom: -8%; opacity: .13; }
  .ban-destello { right: -140px; top: -170px; }
  .tira-fotos img { width: 62px; height: 48px; }
}


/* ── LA CINTA DE CADA PANTALLA ────────────────────────────────────────────
 *
 * Carlos, 26-08: "perfectamente puede estar personalizado cuando traiga a tu
 * semana… y todo el sitio tiene que funcionar así". Cada pantalla suya lleva
 * arriba una foto SUYA distinta, con su logo y una frase suya. La elige el
 * modelo (server/vestido.js) y la monta comun.js sola, en las quince: no hay
 * que tocar una pantalla para que se vista.
 *
 * El velo de la cinta viene MEDIDO igual que el del banner, contra la luz de
 * esa foto justo en el rincón donde cae la frase.
 */
.cinta-suya {
  position: relative; isolation: isolate; overflow: hidden;
  height: 92px; border-radius: 18px; margin: 4px 0 16px;
  display: flex; align-items: center;
  box-shadow: 0 12px 26px -20px rgba(0,0,0,.5);
}
.cs-foto {
  position: absolute; inset: -10px; z-index: -3;
  background-size: cover; background-position: center;
  filter: blur(8px) saturate(.9); transition: filter .45s ease;
}
.cs-foto.nitida { filter: saturate(.88) contrast(1.04); }
.cs-velo { position: absolute; inset: 0; z-index: -2;
  background: var(--cs-velo); opacity: var(--cs-velo-op, .6); }
/* Solo OSCURECE del lado de la frase: la medición del velo se sigue cumpliendo. */
.cinta-suya::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(96deg, color-mix(in srgb, var(--cs-velo) 55%, transparent) 0%,
              color-mix(in srgb, var(--cs-velo) 14%, transparent) 46%, transparent 72%);
}
.cs-cuerpo { display: flex; align-items: center; gap: 12px; padding: 0 20px; }
/* El logo va SIEMPRE sobre blanco: uno oscuro sobre el velo desaparece. */
.cs-logo {
  width: 38px; height: 38px; flex: none; border-radius: 10px; object-fit: contain;
  background: #fff; padding: 5px; box-shadow: 0 3px 12px rgba(0,0,0,.26);
}
/* Con logo transparente, nada de cajita: suelto sobre el velo, como en el banner. */
.cs-logo.libre {
  width: auto; height: 30px; max-width: 40vw; border-radius: 0;
  background: none; padding: 0; box-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.cs-logo.libre.silueta { filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.cs-lema {
  margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: 16px;
  letter-spacing: -.01em; color: var(--cs-destello, #fff);
}

@media (max-width: 560px) {
  .cinta-suya { height: 76px; border-radius: 15px; }
  .cs-cuerpo { padding: 0 14px; gap: 10px; }
  .cs-logo { width: 32px; height: 32px; }
  .cs-lema { font-size: 14px; }
}

/* ── LOS DESTELLOS DE SUS COLORES, A LOS COSTADOS ─────────────────────────
 *
 * Carlos, 26-08: "un poquito de destello de tu color a los lados, ¿se puede
 * más o no?". Sí: tres manchas más, cada una con un color VIVO distinto de su
 * paleta (los elige el servidor, que descarta los grises porque un destello
 * gris es una mancha). Arriba a la izquierda se queda nuestro turquesa.
 *
 * Con aura, el lienzo crece: si midiera 440 px como antes, las manchas de
 * abajo quedarían cortadas justo donde empiezan sus tarjetas.
 */
.pintura.con-aura { height: 780px; }
.pintura > .lavado.aura {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--aura) 62%, transparent) 0%,
    color-mix(in srgb, var(--aura) 16%, transparent) 52%, transparent 76%);
}
/* Ninguna baja del lienzo: lo que asomara por el borde de abajo quedaba
   cortado en seco por el overflow, un cuadrado. El fundido (300px) las apaga. */
.lavado.aura-1 { top: 330px; right: -170px; width: 420px; height: 380px; }
.lavado.aura-2 { top: 400px; left: -180px; width: 400px; height: 360px; }
.lavado.aura-3 { top: 150px; right: 90px; width: 340px; height: 310px; opacity: .85; }
/* El fundido baja con el lienzo, para que el traspaso siga siendo un degradado
   y no un corte a mitad de las tarjetas. */
.pintura.con-aura > .fundido { height: 300px; }

@media (max-width: 560px) {
  .pintura.con-aura { height: 640px; }
  .lavado.aura-1 { top: 240px; right: -230px; }
  .lavado.aura-2 { top: 270px; left: -240px; }
  .lavado.aura-3 { display: none; }
}

/* ── TUS ESTILOS: el catálogo de diseños con la marca del cliente ──
 * Una galería, no una lista: se mira la composición, no se lee un nombre.
 * Carlos, 26-08: "quiero esto, quiero profesionalismo, adaptado a la marca".
 */
.es-titulo { margin: 30px 0 4px; font-size: 19px; }
.es-titulo:first-child { margin-top: 6px; }
.es-grid {
  display: grid; gap: 16px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.es-card {
  margin: 0; background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
.es-thumb {
  position: relative; background: #eef3f4; display: flex; align-items: center; justify-content: center;
}
.es-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-45 { aspect-ratio: 4 / 5; }
.es-916 { aspect-ratio: 9 / 16; }
.es-vacio { font-size: 12.5px; color: var(--altura); padding: 10px; text-align: center; }
.es-vieja {
  position: absolute; left: 8px; bottom: 8px; font-size: 11px;
  background: rgba(11,42,54,.78); color: #fff; padding: 3px 8px; border-radius: 20px;
}
.es-card figcaption { padding: 11px 12px 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.es-card figcaption b { font-size: 14px; }
.es-card figcaption span { font-size: 12.5px; color: var(--altura); line-height: 1.35; }
.es-card .boton.chico { margin: 8px 12px 12px; }

/* Los reels son un DIBUJO, no un render: el motor todavía no los hace así. */
.es-reel { background: linear-gradient(160deg, #1a2b33, #0b1b26); overflow: hidden; }
.es-reel .es-reel-logo {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  height: 16px; width: auto; max-width: 60%; object-fit: contain; filter: brightness(0) invert(1); opacity: .9;
}
.es-reel .es-reel-logo.letra { font-size: 10px; color: #fff; opacity: .75; height: auto; }
.es-reel-txt {
  position: absolute; left: 10px; right: 10px; bottom: 30px; color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.es-reel-barra { position: absolute; left: 10px; bottom: 62px; width: 34px; height: 4px; background: var(--rc); border-radius: 3px; }
.es-reel-marco { position: absolute; inset: 6px; border: 3px solid var(--rc); border-radius: 8px; }
.es-modo-centro .es-reel-txt { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; font-size: 14px; }
.es-modo-gigante .es-reel-txt { font-size: 19px; text-transform: uppercase; line-height: 1.05; letter-spacing: -.01em; }
.es-modo-subtitulo .es-reel-txt {
  bottom: 40px; text-align: center; background: rgba(0,0,0,.6); padding: 5px 7px; border-radius: 6px; font-size: 11.5px;
}
.es-reel-puntos { position: absolute; left: 10px; bottom: 12px; display: flex; gap: 4px; }
.es-reel-puntos i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.es-reel-puntos i.on { background: var(--rc); }

/* De dónde salen los colores y la letra. */
.es-marca { display: grid; gap: 18px; margin-top: 12px; grid-template-columns: minmax(240px, 1fr) 2fr; }
@media (max-width: 720px) { .es-marca { grid-template-columns: 1fr; } }
.es-colores { display: flex; flex-direction: column; gap: 10px; }
.es-color { display: flex; gap: 10px; align-items: flex-start; }
.es-color > div { display: flex; flex-direction: column; }
.es-color b { font-size: 13.5px; text-transform: capitalize; }
.es-color span { font-size: 12.5px; color: var(--altura); }
.es-color code { font-size: 11.5px; color: var(--altura); }
.es-punto { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--linea); flex: 0 0 auto; }
.es-notas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.es-prueba { margin-top: 12px; }
.es-prueba img { width: 100%; border-radius: 10px; display: block; }
/* Qué reel se puede usar hoy y cuál no: prometer de más se paga después. */
.es-anda { color: #1a7f5a; font-weight: 600; font-size: 11.5px !important; }
.es-falta { color: var(--altura); font-style: italic; font-size: 11.5px !important; }

/* ── LO QUE LE ESCRIBEN: comentarios de Facebook e Instagram ──
 * Pensada para el caso de verdad: alguien pregunta el precio y hay que
 * contestarle desde el teléfono, rápido. Por eso las respuestas guardadas
 * están a la vista y mandar es un botón aparte.
 */
.cmt { margin-bottom: 12px; }
.cmt.contestado { opacity: .72; }
.cmt-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.cmt-red {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 20px; color: #fff; background: #333;
}
.cmt-red.instagram { background: #c1358a; }
.cmt-red.facebook { background: #1877f2; }
.cmt-listo { font-size: 11.5px; color: #1a7f5a; font-weight: 600; margin-left: auto; }
.cmt-texto { margin: 0 0 6px; font-size: 15.5px; }
.cmt-sobre { margin: 0 0 10px; }
.cmt-responder { border-top: 1px solid var(--papel); padding-top: 10px; }
.cmt-listas { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.pastilla {
  border: 1px solid var(--linea); background: #fff; border-radius: 20px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--tinta);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pastilla:hover { background: var(--papel); }
.cmt-envio { display: flex; gap: 8px; align-items: flex-end; }
.cmt-envio textarea { flex: 1; min-height: 44px; }
#guardadas { margin-top: 26px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; }
#guardadas summary { cursor: pointer; font-weight: 600; }
#guardadas[open] summary { margin-bottom: 10px; }
#editor-respuestas textarea { width: 100%; }


/* ── PLANIFICAR MI SEMANA: la estrategia, en tres pasos ───────────────────
 * Carlos, 26-08: "ordenado, fácil de entender, para una persona normal, no
 * para un estratega". Por eso los pasos van numerados y grandes: quien no sabe
 * de esto necesita ver el orden, no adivinarlo.
 */
.pl-paso {
  background: #fff; border: 1px solid var(--cli-linea, var(--linea));
  border-radius: 18px; padding: 20px; margin-bottom: 14px;
}
.pl-num {
  margin: 0 0 4px; font-family: var(--f-dato); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cli-acento-texto, var(--altura));
}
.pl-paso h2 { margin: 0 0 6px; }
.pl-momento {
  margin: 4px 0 14px; font-family: var(--f-titulo); font-size: 17px; font-weight: 600;
  color: var(--cli-tinta, var(--tinta));
}

/* Cada corriente es una tarjeta que se MARCA: la casilla sola no invita. */
.pl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pl-corriente {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  border: 1.5px solid var(--linea); border-radius: 14px; padding: 14px 14px 14px 40px;
  cursor: pointer; font-weight: 400; margin: 0; transition: border-color .15s ease, background .15s ease;
}
.pl-corriente:hover { border-color: var(--cli-acento, var(--acento)); }
.pl-corriente.marcada {
  border-color: var(--cli-acento, var(--acento));
  background: color-mix(in srgb, var(--cli-acento, var(--acento)) 7%, #ffffff);
}
.pl-corriente input { position: absolute; left: 14px; top: 16px; width: 17px; height: 17px; cursor: pointer; }
.pl-corriente b { font-size: 15.5px; line-height: 1.25; }
.pl-fuerza {
  align-self: flex-start; font-family: var(--f-dato); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--altura);
  border: 1px solid var(--linea); border-radius: 999px; padding: 3px 8px;
}
.pl-fuerza.alta {
  background: var(--cli-acento, var(--acento)); color: var(--cli-sobre-acento, #04171c);
  border-color: transparent;
}
.pl-porque { font-size: 13.5px; color: var(--altura); line-height: 1.4; }
.pl-como { font-size: 13.5px; line-height: 1.4; }
.pl-como i { color: var(--cli-acento-texto, var(--altura)); font-style: normal; font-weight: 600; }

.pl-sub { margin: 20px 0 6px; font-size: 15px; }
.pl-fechas, .pl-rubro { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 5px; }
.pl-apuntar {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--cli-acento, var(--acento)) 10%, #ffffff);
  border-left: 4px solid var(--cli-acento, var(--acento));
}
.pl-apuntar p:last-child { margin: 0; font-size: 15px; }


/* Elegir la semana: se ve CUÁL está elegida sin tener que adivinarlo
   (Carlos, 26-08: "acá no sé cuál se selecciona"). */
.pl-semanas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pl-semana {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: #fff; border: 1.5px solid var(--linea); border-radius: 12px;
  padding: 10px 15px 10px 12px; font: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pl-semana:hover { border-color: var(--cli-acento, var(--acento)); }
.pl-semana.elegida {
  border-color: var(--cli-acento, var(--acento));
  background: color-mix(in srgb, var(--cli-acento, var(--acento)) 9%, #ffffff);
}
.pl-semana b { display: block; font-size: 14.5px; }
.pl-semana i { font-style: normal; font-size: 12px; color: var(--altura); }
.pl-check {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--linea); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: transparent;
}
.pl-semana.elegida .pl-check {
  background: var(--cli-acento, var(--acento)); border-color: transparent;
  color: var(--cli-sobre-acento, #04171c);
}

/* El cuadro donde él escribe su propia estrategia. */
#pl-mia { margin-top: 8px; }


/* ── DE QUIÉN ES CADA TARJETA ─────────────────────────────────────────────
 * Carlos, 26-08: "las tarjetas que salen arriba, tarjeta ofrecida por Ponle
 * Rumbo… y la mía, como tarjeta mía". Es marketing y es honestidad a la vez:
 * el que mira sabe de dónde salió cada cosa sin tener que preguntarlo.
 */
.pl-sello {
  align-self: flex-start; font-family: var(--f-dato); font-size: 8.5px;
  letter-spacing: .13em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px;
}
.pl-sello.casa {
  background: linear-gradient(100deg, var(--acento) 0%, var(--petroleo) 100%);
  color: #fff;
}
.pl-sello.mio {
  background: var(--cli-acento, var(--acento)); color: var(--cli-sobre-acento, #04171c);
}

/* Las suyas se marcan igual que las otras (Carlos, 26-08: "yo la puedo
   marcar, para que se ocupe"), pero van en ámbar para que a un metro se vea
   cuáles puso él y cuáles trajo la casa. */
.pl-corriente.mia { border-color: color-mix(in srgb, var(--ambar) 45%, #ffffff); }
.pl-corriente.mia:hover { border-color: var(--ambar); }
.pl-corriente.mia.marcada {
  border-color: var(--ambar);
  background: color-mix(in srgb, var(--ambar) 9%, #ffffff);
}
.pl-fuerza.mia { border-color: color-mix(in srgb, var(--ambar) 45%, #ffffff); color: #8a6a10; }
.pl-sacar {
  align-self: flex-start; margin-top: 4px;
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: #a33; text-decoration: underline; cursor: pointer;
}
.pl-sacar:hover { color: #7d2420; }
.pl-sacar:disabled { opacity: .5; cursor: default; }


/* ── EL PULSO DEL CLIENTE ─────────────────────────────────────────────────
 *
 * Carlos, 26-08: "¿cuánto ha avanzado el cliente? ¿ha estado presente?… ah
 * mira, va bien este cliente, va mal". La pregunta que se contesta de un
 * vistazo es UNA: ¿a cuál llamo hoy? Por eso hay una luz de tres colores y
 * nada más — un tablero con quince números no se mira, se salta.
 *
 * Los colores NO son los del cliente: son señales de estado y tienen que
 * significar lo mismo en las trece tarjetas. Si heredaran --cli-acento, el
 * verde de uno sería el rojo de otro.
 */
.pulso-linea {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 9px 0 2px; font-size: 13.5px;
}
.pulso-luz {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
.verde .pulso-luz, .pulso-linea.verde .pulso-luz { background: #1a7f5a; }
.ambar .pulso-luz, .pulso-linea.ambar .pulso-luz { background: #e08a00; }
.rojo  .pulso-luz, .pulso-linea.rojo  .pulso-luz { background: #b3372f; }
.pulso-linea.verde b { color: #146346; }
.pulso-linea.ambar b { color: #8a5600; }
.pulso-linea.rojo  b { color: #8f2b24; }
.pulso-cuando { color: var(--altura); font-size: 12.5px; }
.pulso-porque { margin: 0 0 6px; }

/* Los cinco pasos del arranque, como cinco rayitas. Se lee sin leer. */
.pulso-barra { display: flex; gap: 4px; margin-bottom: 4px; }
.pulso-barra i {
  height: 5px; flex: 1; border-radius: 3px; background: rgba(0,0,0,.10);
}
.pulso-barra i.ok { background: #1a7f5a; }

/* El bloque grande, en la ficha del cliente. */
.pulso-ficha { border-left: 5px solid rgba(0,0,0,.12); }
.pulso-ficha.verde { border-left-color: #1a7f5a; }
.pulso-ficha.ambar { border-left-color: #e08a00; }
.pulso-ficha.rojo  { border-left-color: #b3372f; }
.pulso-cab { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px; }
.pulso-cab .pulso-luz { margin-top: 9px; width: 14px; height: 14px; }
.pulso-cab h2 { margin: 0 0 2px; }
.pulso-cab p { margin: 0; }
.pulso-ficha .rotulo { margin: 18px 0 7px; color: var(--altura); }
.pulso-ficha .rotulo:first-of-type { margin-top: 6px; }

.pulso-pasos, .pulso-gente {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.pulso-pasos li { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; }
.pulso-pasos li span { font-weight: 700; }
.pulso-pasos li.ok span { color: #1a7f5a; }
.pulso-pasos li.falta { color: var(--altura); }
.pulso-pasos li.falta span { color: #b3372f; }
.pulso-pasos li i { font-style: normal; font-size: 12.5px; color: var(--altura); }
.pulso-gente li { font-size: 14px; color: var(--altura); }
.pulso-gente li b { color: var(--tinta); }

/* La raya que separa "así lo ve el cliente" de "solo para ti", en la ficha del
   admin. Sin ella las dos mitades se leen como una sola pantalla revuelta. */
.asi-lo-ve {
  display: flex; align-items: center; gap: 12px;
  margin: 30px 0 14px; color: var(--silencio);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.asi-lo-ve::before, .asi-lo-ve::after {
  content: ''; flex: 1; height: 1px; background: var(--linea);
}

/* ── El cuadro del bicho: dictar y meter imágenes ────────────────────────── */
.bicho-escribir { position: relative; }
.bicho-escribir textarea { padding-right: 46px; }
.bicho-micro {
  position: absolute; right: 9px; top: 9px;   /* arriba: abajo choca con la manito de estirar */
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linea); background: var(--papel); font-size: 15px;
  display: grid; place-items: center; line-height: 1; padding: 0;
}
.bicho-micro:hover { border-color: var(--acento); }
/* Prendido: se nota de lejos, porque el micrófono abierto no puede ser sutil. */
.bicho-micro.oyendo {
  background: #d92b4b; border-color: #d92b4b; color: #fff;
  animation: bicho-latido 1.3s ease-in-out infinite;
}
@keyframes bicho-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 43, 75, .55); }
  70%      { box-shadow: 0 0 0 9px rgba(217, 43, 75, 0); }
}
@media (prefers-reduced-motion: reduce) { .bicho-micro.oyendo { animation: none; } }

.bicho-agarre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0; padding: 9px 11px;
  border: 1px dashed var(--linea); border-radius: 12px;
}
.bicho-agarre.encima { border-color: var(--acento); background: var(--papel); }

/* ── Tu impulso: los tres pasos ──────────────────────────────────────────── */
.campana-estado {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.85fr); gap:18px;
  margin:18px 0; padding:15px 17px; border:1px solid var(--linea); border-left:4px solid var(--alerta);
  border-radius:10px; background:var(--papel);
}
.campana-estado.lista { border-left-color:var(--ok); }
.campana-estado b { font-size:16px; }.campana-estado p { margin:5px 0 0; color:var(--silencio); line-height:1.45; }
.campana-estado ul { margin:0; padding-left:18px; color:var(--silencio); font-size:13px; display:grid; gap:5px; }
@media (max-width:640px) { .campana-estado { grid-template-columns:1fr; gap:10px; } }

/* Control financiero de IA: costo real por cliente, no una promesa de creditos. */
.ia-resumen { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.ia-resumen article { padding:16px; border-top:3px solid var(--acento); background:var(--papel); }
.ia-resumen span,.ia-resumen small,.ia-clientes span,.ia-recientes span { display:block; color:var(--silencio); font-size:13px; }
.ia-resumen b { display:block; margin:7px 0 2px; font:700 25px var(--f-titulo); color:var(--tinta); }
.ia-proveedor { margin-bottom:18px; }.ia-proveedor h2 { margin-top:0; }.ia-proveedor p { margin:4px 0 8px; }
.ia-dolar { display:flex; align-items:end; flex-wrap:wrap; gap:10px; }.ia-dolar label { display:grid; gap:5px; font-weight:700; }.ia-dolar input { width:140px; }
.ia-clientes,.ia-recientes { display:grid; gap:8px; }.ia-clientes article { display:grid; grid-template-columns:minmax(180px,1fr) auto 150px auto; align-items:end; gap:12px; padding:13px 0; border-bottom:1px solid var(--linea); }.ia-clientes label { display:grid; gap:5px; font-size:13px; }.ia-clientes .ia-pausa { display:flex; align-items:center; gap:6px; padding-bottom:9px; white-space:nowrap; }.ia-clientes [data-tope] { width:100%; }
.ia-recientes article { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linea); }.ia-recientes article > div:last-child { text-align:right; }
@media (max-width:720px) { .ia-resumen { grid-template-columns:1fr; }.ia-clientes article { grid-template-columns:1fr 1fr; align-items:start; }.ia-clientes article > div { grid-column:1/-1; }.ia-clientes .ia-pausa { padding:0; }.ia-recientes article { display:grid; grid-template-columns:1fr; }.ia-recientes article > div:last-child { text-align:left; } }
.objetivos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.objetivo {
  text-align: left; padding: 14px 15px; border: 1.5px solid var(--linea); border-radius: 14px;
  background: var(--papel); cursor: pointer; font: inherit; display: grid; gap: 4px;
}
.objetivo:hover { border-color: var(--cli-acento, var(--acento)); }
.objetivo.puesto { border-color: var(--cli-acento, var(--acento)); border-width: 2.5px; }
.objetivo b { font-size: 15.5px; }
.objetivo .silencio { font-size: 13px; }

.pubs { display: grid; gap: 9px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.pub {
  text-align: left; padding: 11px 13px; border: 1.5px solid var(--linea); border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit; display: grid; gap: 3px;
}
.pub:hover { border-color: var(--cli-acento, var(--acento)); }
.pub.puesta { border-color: var(--cli-acento, var(--acento)); border-width: 2.5px; }
.pub-red { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--silencio); }
.pub-texto { font-size: 14.5px; line-height: 1.45; }

.fila-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* La frase que dice cuánto va a costar. Va antes del botón y a propósito:
   nadie debería apretar sin haber leído el número. */
.cuenta-clara {
  margin: 14px 0; padding: 13px 15px; border-radius: 12px;
  background: var(--papel); border-left: 3px solid var(--cli-acento, var(--acento));
  font-size: 15px; line-height: 1.55;
}
.impulso-fila {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--linea);
}
.impulso-fila p { margin: 3px 0 0; }

/* ── ELEGIR LA FOTO DE UNA PIEZA ───────────────────────────────────────────
 *
 * María José, 27-08: *"NO PUEDO AGREGAR FOTO, SOLO BORRAR"*. La foto de la
 * publicación se toca, y se abre su biblioteca. La afordancia va ENCIMA de la
 * foto —no en un botón perdido— porque lo primero que uno hace cuando algo no
 * le gusta es apretarlo.
 */
.vista-foto {
  position: relative; display: block; width: 100%; border: 0; padding: 0;
  background: none; cursor: pointer; border-radius: 10px;
}
.vista-foto img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--linea); }
.vista-foto .tapa {
  position: absolute; inset: 0; border-radius: 10px; display: flex;
  align-items: flex-end; justify-content: center; padding-bottom: 14px;
  opacity: 0; transition: opacity .15s;
  background: linear-gradient(to top, rgba(11, 27, 38, .7), rgba(11, 27, 38, 0) 45%);
}
.vista-foto:hover .tapa, .vista-foto:focus-visible .tapa { opacity: 1; }
.vista-foto .tapa span {
  background: var(--crudo); color: var(--tinta); border-radius: 999px;
  padding: 7px 15px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(3, 27, 38, .3);
}
/* En el teléfono no hay "pasar el mouse": la pista se queda puesta. */
@media (hover: none) { .vista-foto .tapa { opacity: 1; } }

/* Los dos botones de la foto: mismo porte, y ninguno le compite al de guardar.
   Un solo botón lleno por pantalla — el de «Guardar y volver a dibujar». */
.pie-vista { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pie-vista .boton { flex: 1 1 auto; justify-content: center; text-align: center; }
.pie-vista .boton.foto {
  background: var(--papel); border: 1.5px solid var(--acento); color: var(--tinta); box-shadow: none;
}
.pie-vista .boton.foto:hover { background: var(--acento); color: var(--tinta); }

.selector-foto { width: min(1080px, 96vw); }
.selector-foto .editor-cab { position: sticky; top: 0; background: var(--crudo); z-index: 3; }
.sel-barra {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--linea); background: var(--crudo);
}
.sel-barra input[type=search] { flex: 1; min-width: 190px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1.5px solid var(--linea); background: var(--crudo); color: var(--silencio);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.chip:hover { background: var(--papel); color: var(--tinta); }
.chip[aria-pressed=true] { background: var(--tinta); border-color: var(--tinta); color: var(--crudo); }

.sel-cuerpo { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .sel-cuerpo { grid-template-columns: 250px 1fr; } }
.sel-carpetas { border-bottom: 1px solid var(--linea); padding: 12px 12px 16px; }
@media (min-width: 820px) { .sel-carpetas { border-bottom: 0; border-right: 1px solid var(--linea); } }
.sel-carpetas h4, .sel-fotos h4 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--silencio); font-family: var(--f-cuerpo);
}
.sel-carpetas button {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  border: 0; background: none; padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--tinta); line-height: 1.25;
}
.sel-carpetas button:hover { background: var(--papel); }
.sel-carpetas button[aria-pressed=true] { background: var(--papel); font-weight: 700; box-shadow: inset 3px 0 0 var(--acento); }
.sel-carpetas .cuenta { color: var(--silencio); font-size: 12px; font-weight: 400; }

/* En el teléfono la lista de carpetas se come la pantalla entera y las fotos
   quedan debajo del pliegue. Ahí se convierte en una tira que se corre al lado. */
@media (max-width: 819px) {
  .sel-carpetas { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; }
  .sel-carpetas h4 { display: none; }
  .sel-carpetas button {
    width: auto; flex: 0 0 auto; white-space: nowrap; border: 1.5px solid var(--linea);
    border-radius: 999px; padding: 6px 13px; font-size: 13px;
  }
  .sel-carpetas button[aria-pressed=true] { box-shadow: none; background: var(--tinta); color: var(--crudo); }
  .sel-carpetas button[aria-pressed=true] .cuenta { color: var(--crudo); opacity: .7; }
}

.sel-fotos { padding: 14px 16px 20px; min-height: 300px; }
.sugeridas { margin-bottom: 16px; }
.sugeridas h4 b { color: var(--altura); letter-spacing: 0; text-transform: none; font-size: 13px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.foto-elegible {
  position: relative; border: 2px solid transparent; border-radius: 10px; padding: 0;
  background: var(--papel); cursor: pointer; overflow: hidden; aspect-ratio: 1; display: block;
}
.foto-elegible img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-elegible:hover { border-color: #bcd3d9; }
.foto-elegible[aria-pressed=true] { border-color: var(--acento-fuerte); box-shadow: 0 0 0 3px rgba(0, 194, 209, .25); }
.foto-elegible .senal {
  position: absolute; top: 6px; left: 6px; background: rgba(11, 27, 38, .82); color: #fff;
  font-size: 10.5px; border-radius: 999px; padding: 3px 8px;
}
/* Cuánto dura un video, abajo a la izquierda. */
.foto-elegible .dura {
  position: absolute; bottom: 6px; left: 6px; background: rgba(11, 27, 38, .82); color: #fff;
  font-size: 10.5px; border-radius: 999px; padding: 3px 8px;
}
.aviso.pista {
  background: var(--papel); border: 1px solid var(--linea); color: var(--petroleo);
  border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px;
}

.foto-elegible .que-es {
  position: absolute; inset: auto 0 0 0; color: #fff; font-size: 11px; line-height: 1.25;
  padding: 18px 7px 7px; text-align: left; opacity: 0; transition: opacity .15s;
  background: linear-gradient(to top, rgba(11, 27, 38, .9), rgba(11, 27, 38, 0));
}
.foto-elegible:hover .que-es, .foto-elegible[aria-pressed=true] .que-es { opacity: 1; }

/* El pie se queda pegado abajo: con 300 fotos, el botón nunca se pierde. */
.sel-pie {
  position: sticky; bottom: 0; background: var(--crudo); border-top: 1px solid var(--linea);
  padding: 12px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; z-index: 3;
}
.sel-pie .silencio { flex: 1 1 160px; }

/* ── TUS LETRAS ────────────────────────────────────────────────────────────
 *
 * Carlos, 28-08: *"que en tu marca aparezca el tipo de letra"*. Cada opción se
 * escribe CON ELLA MISMA: nadie elige una tipografía leyendo su nombre.
 */
.letra-prueba {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 12px;
  padding: 20px; margin: 14px 0 20px; display: flex; flex-direction: column; gap: 8px;
}
.lp-titulo { font-size: clamp(26px, 5vw, 38px); line-height: 1.1; color: var(--tinta); }
.lp-cuerpo { font-size: 15px; line-height: 1.5; color: var(--silencio); }
.letra-grupo {
  margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--silencio); font-family: var(--f-cuerpo); font-weight: 700;
}
.letras-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.letra-op {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  border: 1.5px solid var(--linea); background: var(--crudo); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; font-family: var(--f-cuerpo); color: var(--tinta);
}
.letra-op:hover { border-color: #bcd3d9; background: var(--papel); }
.letra-op[aria-pressed=true] { border-color: var(--acento-fuerte); box-shadow: 0 0 0 3px rgba(0, 194, 209, .2); }
.letra-ej { font-size: 26px; line-height: 1.1; }
.letra-nombre { font-size: 13px; font-weight: 700; }
.letra-dice { font-size: 11.5px; color: var(--silencio); line-height: 1.3; }
.letra-op.chica { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; }
.letra-op.chica .letra-ej { font-size: 20px; }

/* ── EL PC TAMBIÉN MERECE SU PANTALLA ──────────────────────────────────────
 *
 * Carlos, 28-08: *"que sea responsivo a celular pero para web también se vea
 * súper bien… se aproveche mejor la pantalla"*. El portal nació mobile-first y
 * en un monitor quedaba una columna flaca al medio con dos tercios de blanco.
 *
 * En pantallas anchas las tarjetas se reparten en DOS columnas de diario
 * (CSS columns): cada tarjeta cae donde hay espacio, sin tocar el orden del
 * HTML ni una línea de JavaScript. En el teléfono no cambia nada.
 */
.pagina.doble { max-width: 940px; }
@media (min-width: 1180px) {
  .pagina.doble { max-width: 1280px; }
  .pagina.doble #cuerpo, .pagina.doble #ficha { columns: 2; column-gap: 16px; }
  .pagina.doble #cuerpo > *, .pagina.doble #ficha > * {
    break-inside: avoid; margin-bottom: 16px;
  }
  /* Lo que es cabecera —la portada con el saludo, la cinta "lo tuyo", un
     aviso— va A LO ANCHO: partir el techo en dos columnas deja un hueco
     gigante al lado y parece un error, no un diseño. */
  .pagina.doble #cuerpo > .aviso, .pagina.doble #ficha > .aviso,
  .pagina.doble #cuerpo > .techo, .pagina.doble #cuerpo > .lo-tuyo {
    column-span: all;
  }
  .pagina.doble #cuerpo > .techo { margin-bottom: 4px; }
}

/* ── LA PANTALLA DE LA MARCA, MÁS APRETADA ─────────────────────────────────
 *
 * Carlos, 28-08: *"optimiza esto porque está muy abierto… que sea muy
 * entendible para una persona que no tiene mucha experiencia"*. La regla acá:
 * se ve UNA cosa —la que está usando— y el resto aparece solo si la pide.
 */
.web-cab { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.web-cab h2 { margin: 0 0 2px; }
.web-dir { font-size: 15px; word-break: break-all; }
.muestras.chicas { gap: 6px; }
.muestras.chicas .muestra { padding: 0; border: 0; background: none; }
.muestras.chicas .chip { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--linea); }

.fuente-fila {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.fuente-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fuente-quien b { font-size: 19px; line-height: 1.2; }
.fuente-abierta { padding: 4px 0 14px; }
.letras-rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 10px 0 4px; }
.marca-cab { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.marca-cab .web-dir { font-size: 15px; white-space: nowrap; }
.tarjeta.compacta { padding: 14px 16px; }

/* El número amarra la fila con el ejemplo de arriba: "1" es el titular que se
   ve en la muestra, "1" es la fila que lo cambia. Sin eso hay que adivinar. */
.fuente-num {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--acento); color: #04171c; font-size: 11.5px; font-weight: 700;
  font-family: var(--f-cuerpo); flex: 0 0 auto;
}
.fuente-rotulo { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--silencio); }
.fuente-quien .silencio.chico { max-width: 52ch; line-height: 1.35; margin-top: 2px; }
.fuente-fila.abierta { background: var(--papel); border-radius: 10px; padding: 12px; }
.fuente-ayuda {
  font-size: 12.5px; color: var(--petroleo); background: #f2f9fb; border: 1px solid #cfe6ec;
  border-radius: 10px; padding: 8px 11px; margin: 0 0 12px;
}
.lp-marca { display: flex; gap: 7px; align-items: center; font-size: 11.5px; color: var(--silencio); }
.letra-prueba .lp-marca + span { margin-top: -2px; }

/* ── LAS FOTOS DE TODA LA SEMANA ───────────────────────────────────────────
 *
 * Carlos, 28-08: *"aprietas el número cuatro y se abre una pantalla grande"*.
 * Los huecos a la izquierda, la biblioteca a la derecha: con 19 historias, un
 * cuadro por foto sería inusable.
 */
.plan-numero {
  display: block; border: 0; background: none; padding: 0 0 2px; cursor: pointer;
  font-family: inherit; color: var(--tinta); text-align: left;
}
.plan-numero b { font-size: 19px; }
.plan-numero span { font-size: 12px; color: var(--silencio); }
.plan-numero:hover b { color: var(--altura); text-decoration: underline; }
.plan-elegir {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--acento); background: var(--papel); color: var(--tinta);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.plan-elegir:hover { background: var(--acento); }

.fotos-semana { width: min(1240px, 97vw); max-height: 94vh; }
.fotos-semana .editor-cab { position: sticky; top: 0; background: var(--crudo); z-index: 4; }
.fs-mesa { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fs-mesa { grid-template-columns: 320px 1fr; } }
.fs-izq { border-bottom: 1px solid var(--linea); padding: 14px 16px 18px; min-width: 0; }
@media (min-width: 900px) {
  .fs-izq { border-bottom: 0; border-right: 1px solid var(--linea); max-height: 70vh; overflow: auto; }
}
/* `min-width: 0` o la columna crece con su contenido y la grilla se sale por
   la derecha: es la trampa clásica de CSS grid. */
.fs-der { padding: 14px 16px 18px; min-width: 0; }
.fs-avance { font-size: 13px; color: var(--silencio); margin-bottom: 10px; }
.fs-dia {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--silencio); font-weight: 700; margin: 12px 0 6px;
}
.fs-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.fs-hueco {
  position: relative; aspect-ratio: 1; border: 2px dashed #c9d9dd; border-radius: 10px;
  background: var(--papel); cursor: pointer; padding: 0; overflow: hidden;
  display: grid; place-items: center; color: var(--silencio); font-size: 11px; font-family: inherit;
}
.fs-hueco img { width: 100%; height: 100%; object-fit: cover; }
.fs-hueco:hover { border-color: #8fbcc6; }
.fs-hueco.puesto { border-style: solid; border-color: var(--linea); }
.fs-hueco.activo { border-style: solid; border-color: var(--acento-fuerte); box-shadow: 0 0 0 3px rgba(0, 194, 209, .28); }
.fs-hueco .quitar {
  position: absolute; top: 4px; right: 4px; background: rgba(11, 27, 38, .8); color: #fff;
  border-radius: 50%; width: 18px; height: 18px; font-size: 11px;
  display: grid; place-items: center;
}
.fs-hueco .vid, .fs-foto .vid {
  position: absolute; bottom: 4px; left: 4px; background: rgba(11, 27, 38, .8);
  color: #fff; font-size: 10px; border-radius: 999px; padding: 2px 7px;
}
.fs-carro { border: 1px solid var(--linea); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.fs-carro p { font-size: 12.5px; color: var(--silencio); margin: 0 0 8px; }

.fs-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fs-barra input[type=search] { flex: 1; min-width: 180px; }
.fs-carpetas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
.fs-carpetas button {
  flex: 0 0 auto; white-space: nowrap; border: 1.5px solid var(--linea); background: var(--crudo);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; color: var(--tinta);
}
.fs-carpetas button[aria-pressed=true] { background: var(--tinta); color: var(--crudo); border-color: var(--tinta); }
.fotos-semana .rejilla { max-height: 56vh; overflow: auto; }
.fs-foto {
  position: relative; border: 2px solid transparent; border-radius: 10px; padding: 0;
  background: var(--papel); cursor: pointer; overflow: hidden; aspect-ratio: 1; display: block;
}
.fs-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-foto:hover { border-color: #bcd3d9; }
.fs-foto .que-es {
  position: absolute; inset: auto 0 0 0; color: #fff; font-size: 10.5px; line-height: 1.2;
  padding: 16px 6px 6px; text-align: left; opacity: 0; transition: opacity .15s;
  background: linear-gradient(to top, rgba(11, 27, 38, .92), rgba(11, 27, 38, 0));
}
.fs-foto:hover .que-es { opacity: 1; }
.fs-pie {
  position: sticky; bottom: 0; background: var(--crudo); border-top: 1px solid var(--linea);
  padding: 12px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; z-index: 4;
}
.fs-pie .silencio { flex: 1 1 180px; }

/* ── EL «VOLVER» QUE BAJA CONTIGO ──────────────────────────────────────────
 *
 * Carlos, 28-08: *"acá no me puedo devolver la navegación"*. El enlace estaba
 * arriba de todo y con media rueda de scroll desaparecía. Ahora es una píldora
 * pegajosa: se queda a la vista mientras uno baja, en todas las pantallas.
 */
.volver-fijo {
  position: sticky; top: 10px; z-index: 40; margin: 0 0 6px;
  /* que la píldora no tape lo de al lado: el párrafo mide solo su contenido */
  width: fit-content;
}
.volver-fijo #volver {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--crudo); border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px 15px; font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--tinta); box-shadow: 0 4px 14px rgba(3, 27, 38, .10);
}
.volver-fijo #volver:hover { background: var(--papel); box-shadow: 0 6px 18px rgba(3, 27, 38, .16); }

/* La hora a la que sale cada pieza. Carlos, 28-08: *"que aparezca bajito de la
   imagen: esto se va a publicar a las…"*. Va sobre la miniatura, abajo, para no
   sumar una línea en una columna que ya es angosta. */
.pieza-hora {
  position: absolute; bottom: 4px; right: 4px; background: rgba(11, 27, 38, .82);
  color: #fff; font-size: 10.5px; border-radius: 999px; padding: 2px 7px;
  font-family: var(--f-dato); letter-spacing: -.02em;
}
.pieza.prioritaria { outline:2px solid var(--ambar); outline-offset:2px; }
.pieza .priorizar { color:var(--petroleo); }
.foto-motivo { margin:8px 0; padding:8px 10px; border-left:3px solid var(--acento); background:rgba(255,255,255,.82); color:var(--silencio); font-size:12.5px; }
@media (max-width:760px) {
  .biblioteca-filtros { grid-template-columns:1fr 1fr; }
  .biblioteca-filtros input,
  .biblioteca-filtros #categoria-biblioteca { grid-column:1/-1; }
  .pieza .acciones { flex-wrap:wrap; }
  .pieza .acciones .enlace-borrar { width:100%; margin-left:0; text-align:right; }
}

/* Los días que le rinden a ESE negocio, según sus propias publicaciones.
   Carlos, 28-08: *"incluso los días más conveniente para publicar"*. */
.consejo-dias {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 8px 12px; margin: 0 0 12px; font-size: 13.5px; color: var(--tinta);
}
.consejo-dias .silencio { display: block; margin-top: 2px; }
.dia-rinde { position: relative; }
.dia-rinde::after {
  content: ''; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--altura);
}

/* Norte no es una ventana de chat: es una brujula que despierta sobre el portal. */
#norte-boton { position:fixed; right:17px; bottom:76px; z-index:901; width:68px; height:68px; border:0; border-radius:50%; background:var(--petroleo); color:#fff; cursor:pointer; box-shadow:0 12px 30px rgba(3,27,38,.3); transition:transform .2s,opacity .18s; }
#norte-boton::before,#norte-boton::after { content:''; position:absolute; border-radius:50%; }
#norte-boton::before { inset:8px; border:1px solid rgba(255,255,255,.55); animation:norte-respira 3s ease-in-out infinite; }
#norte-boton::after { width:17px; height:23px; left:26px; top:17px; border-radius:0; background:var(--ambar); clip-path:polygon(50% 0,100% 100%,50% 72%,0 100%); }
#norte-boton span { position:absolute; left:0; right:0; bottom:9px; font:700 11px var(--f-dato); letter-spacing:0; }
#norte-boton:hover { transform:translateY(-4px) scale(1.04); } #norte-boton.oculto { opacity:0; pointer-events:none; }
.norte-panel { position:fixed; z-index:950; inset:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; background:rgba(244,248,249,.92); backdrop-filter:blur(12px); transition:opacity .25s,visibility .25s; }
.norte-panel.abierto { opacity:1; visibility:visible; pointer-events:auto; }
.norte-cerrar { position:absolute; z-index:4; right:28px; top:24px; width:46px; height:46px; border:1px solid var(--linea); border-radius:50%; background:#fff; color:var(--petroleo); font-size:28px; cursor:pointer; box-shadow:0 8px 22px rgba(3,27,38,.12); }
.norte-escena { position:relative; width:min(760px,calc(100vw - 48px)); height:100%; margin:0 auto; display:grid; grid-template-rows:190px auto minmax(110px,1fr) auto auto auto; align-content:center; padding:28px 0 18px; }
.norte-brujula { position:relative; align-self:center; justify-self:center; width:128px; height:128px; border-radius:50%; background:#fff; border:1px solid var(--linea); box-shadow:0 18px 50px rgba(3,102,114,.2); }
.norte-brujula .anillo { position:absolute; border-radius:50%; border:1px solid; }
.norte-brujula .anillo.a { inset:11px; border-color:var(--acento); border-style:dashed; animation:norte-gira 18s linear infinite; }
.norte-brujula .anillo.b { inset:24px; border-color:var(--cli-acento); opacity:.75; animation:norte-gira 13s linear infinite reverse; }
.norte-brujula .marca-cliente { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--cli-acento); right:4px; top:59px; box-shadow:0 0 0 6px color-mix(in srgb,var(--cli-acento) 18%,transparent); }
.norte-brujula .aguja { position:absolute; inset:31px 43px; background:var(--petroleo); clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%); transform-origin:50% 70%; transition:transform .45s; }
.norte-brujula .aguja::after { content:''; position:absolute; inset:50% 0 0; background:var(--ambar); clip-path:polygon(50% 0,100% 100%,0 100%); }
.norte-brujula > b { position:absolute; top:-20px; left:0; right:0; text-align:center; color:var(--ambar); font:700 13px var(--f-dato); }
.norte-panel.pensando .norte-brujula .aguja { animation:norte-busca 1.4s ease-in-out infinite; }.norte-panel.pensando .norte-brujula { box-shadow:0 18px 55px rgba(0,194,209,.34); }
.norte-identidad { text-align:center; display:grid; gap:2px; margin-top:-4px; }.norte-identidad b { color:var(--tinta); font:700 38px var(--f-titulo); }.norte-identidad span { color:var(--silencio); font-size:14px; }.norte-identidad small { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:10px; color:var(--silencio); }.norte-identidad small i { font-style:normal; font-size:11px; }.norte-identidad small i::before { content:'✓'; color:var(--ok); font-weight:700; margin-right:4px; }
.norte-mensajes { min-height:0; overflow:auto; padding:18px 9%; display:flex; flex-direction:column; justify-content:center; gap:13px; scrollbar-width:thin; }
.norte-mensaje { display:grid; max-width:78%; gap:5px; }.norte-mensaje p { margin:0; padding:13px 16px; line-height:1.48; border:1px solid var(--linea); background:#fff; box-shadow:0 8px 24px rgba(3,27,38,.07); white-space:pre-wrap; }
.norte-mensaje.usuario { align-self:flex-end; }.norte-mensaje.usuario p { border-right:4px solid var(--cli-acento); }.norte-mensaje.norte { align-self:flex-start; }.norte-mensaje.norte p { border-left:4px solid var(--acento); }
.norte-evaluar { display:flex; gap:6px; padding-left:8px; pointer-events:auto; }.norte-evaluar button { border:0; background:rgba(255,255,255,.9); color:var(--silencio); padding:4px 8px; font-size:11px; cursor:pointer; }.norte-evaluar button[aria-pressed="true"] { color:var(--petroleo); font-weight:700; box-shadow:inset 0 -2px var(--acento); }
.norte-bienvenida { text-align:center; display:grid; gap:22px; }.norte-bienvenida b { max-width:620px; margin:auto; color:var(--tinta); font:700 26px/1.25 var(--f-titulo); }.norte-bienvenida div { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }.norte-bienvenida button { border:1px solid #bcd3d9; background:rgba(255,255,255,.88); padding:9px 13px; border-radius:999px; color:var(--petroleo); cursor:pointer; }.norte-bienvenida button:hover { border-color:var(--cli-acento); }
.norte-accion { padding:0 9%; }.norte-accion > div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 14px; border-left:4px solid var(--ambar); background:#fff; box-shadow:0 8px 24px rgba(3,27,38,.08); }
.norte-escribir { position:relative; display:grid; grid-template-columns:1fr 52px; gap:10px; margin:10px 9% 0; }.norte-escribir > div { grid-column:1; grid-row:1; display:flex; min-height:64px; border:1.5px solid #afcbd0; background:#fff; box-shadow:0 12px 32px rgba(3,27,38,.1); }.norte-escribir textarea { flex:1; border:0; resize:none; padding:13px 15px; background:transparent; }.norte-micro { width:44px; border:0; background:transparent; color:var(--petroleo); cursor:pointer; }.norte-enviar { grid-column:2; grid-row:1; width:52px; border:0; background:var(--petroleo); color:#fff; font-size:27px; cursor:pointer; box-shadow:0 10px 24px rgba(3,102,114,.23); }.norte-escribir .silencio { grid-column:1/-1; grid-row:2; text-align:center; color:var(--petroleo); min-height:18px; }
.norte-panel footer { display:flex; justify-content:center; gap:24px; padding:9px 18px 0; font-size:13px; }.norte-panel footer a,.norte-panel footer button { border:0; background:transparent; color:var(--petroleo); cursor:pointer; text-decoration:none; }.norte-panel footer a::before { content:'◉ '; color:var(--cli-acento); }
@keyframes norte-gira { to { transform:rotate(360deg); } } @keyframes norte-busca { 0%,100%{transform:rotate(-28deg)} 50%{transform:rotate(34deg)} } @keyframes norte-respira { 50%{transform:scale(.9);opacity:.7} }

/* Modo flotante: el portal nunca desaparece; la charla nace alrededor de Norte. */
#norte-boton { animation:norte-flota 4.2s ease-in-out infinite; }
#norte-boton.arrastrando { animation:none; cursor:grabbing; }
#norte-boton::before,#norte-boton::after { display:none; } #norte-boton .compas-mini { position:absolute; inset:4px; width:60px!important; height:60px!important; background:#fff; border-radius:50%; }
#norte-boton,.norte-brujula { animation:none; }
#norte-boton .compas-mini .cm-gira,.norte-brujula .compas-mini .cm-gira { animation:none; transform:rotate(var(--norte-giro,0deg)); transform-origin:50% 50%; transition:transform .12s linear; }
.norte-panel { background:transparent; backdrop-filter:none; overflow:visible; pointer-events:none; }
.norte-panel.abierto { pointer-events:none; }
.norte-cerrar { position:fixed; right:24px; bottom:520px; top:auto; pointer-events:auto; width:38px; height:38px; font-size:22px; }
.norte-escena { position:fixed; right:92px; bottom:24px; width:min(560px,calc(100vw - 120px)); height:min(620px,calc(100vh - 48px)); margin:0; padding:0; display:grid; grid-template-rows:auto auto minmax(90px,1fr) auto auto; align-content:end; pointer-events:none; transform:translateY(22px) scale(.96); transform-origin:100% 100%; transition:transform .25s ease; }
.norte-panel.abierto .norte-escena { transform:translateY(0) scale(1); }
.norte-brujula { position:absolute; z-index:4; right:-78px; bottom:10px; width:72px; height:72px; pointer-events:auto; cursor:crosshair; box-shadow:0 12px 32px rgba(3,27,38,.28); animation:none; }
.norte-brujula .compas-mini { position:absolute; inset:2px; width:68px!important; height:68px!important; background:#fff; border-radius:50%; }
.norte-brujula .anillo.a { inset:6px; }.norte-brujula .anillo.b { inset:13px; }.norte-brujula .aguja { inset:17px 24px; }.norte-brujula .marca-cliente { width:8px; height:8px; right:1px; top:31px; }.norte-brujula > b { top:-17px; font-size:11px; }
.norte-identidad { justify-self:end; width:max-content; max-width:100%; margin:0 0 8px; padding:10px 16px; text-align:right; background:rgba(255,255,255,.96); border-right:4px solid var(--petroleo); box-shadow:0 10px 30px rgba(3,27,38,.12); pointer-events:auto; }
.norte-identidad b { font-size:25px; }.norte-identidad span { font-size:12px; }.norte-identidad small { justify-content:flex-end; margin-top:5px; gap:10px; }
.norte-mensajes { justify-content:end; padding:6px 0; pointer-events:none; }
.norte-mensajes p,.norte-bienvenida { pointer-events:auto; }
.norte-bienvenida { justify-self:end; width:min(520px,100%); padding:20px 22px; text-align:left; background:rgba(255,255,255,.97); border-left:4px solid var(--acento); box-shadow:0 16px 42px rgba(3,27,38,.14); }
.norte-bienvenida::after { content:''; position:absolute; right:-12px; bottom:105px; border:12px solid transparent; border-left-color:#fff; border-right:0; }
.norte-bienvenida b { margin:0; padding:0; font-size:23px; }.norte-bienvenida div { justify-content:flex-start; }
.norte-accion { padding:4px 0; pointer-events:auto; }
.norte-escribir { margin:8px 0 0; pointer-events:auto; }
.norte-panel footer { justify-content:flex-end; padding:8px 4px 0; pointer-events:auto; text-shadow:0 1px #fff; }
.norte-panel.lado-izq .norte-escena { left:92px; right:auto; transform-origin:0 100%; }.norte-panel.lado-izq .norte-brujula { left:-78px; right:auto; }.norte-panel.lado-izq .norte-identidad { justify-self:start; text-align:left; border-right:0; border-left:4px solid var(--petroleo); }.norte-panel.lado-izq .norte-identidad small,.norte-panel.lado-izq footer { justify-content:flex-start; }.norte-panel.lado-izq .norte-cerrar { left:24px; right:auto; }.norte-panel.lado-izq .norte-bienvenida::after { left:-12px; right:auto; border-left:0; border-right:12px solid #fff; }
@keyframes norte-flota { 0%,100%{translate:0 0} 50%{translate:0 -7px} }
.norte-config { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px; }.norte-config section { min-width:0; }.norte-config label { display:grid; gap:5px; margin:0 0 12px; font-weight:600; }.norte-config input,.norte-config textarea { width:100%; }.norte-config .botonera { grid-column:1 / -1; }.norte-toggles { display:grid; gap:10px; }.norte-toggles label { display:block; }
.norte-registro { margin-top:36px; }.norte-registro .cabecera { align-items:end; }.norte-registro select { min-width:210px; }.norte-registro-resumen { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }.norte-registro-resumen span { padding:9px 12px; border-left:3px solid var(--acento); background:#fff; }.norte-registro-lista { display:grid; gap:10px; }.norte-registro-lista article { padding:14px 16px; border:1px solid var(--linea); border-left:4px solid var(--ok); background:#fff; }.norte-registro-lista article.no_entendio { border-left-color:var(--error); }.norte-registro-lista header { display:flex; justify-content:space-between; gap:16px; color:var(--silencio); font-size:12px; }.norte-registro-lista p { margin:9px 0; }.norte-registro-lista blockquote { margin:8px 0; padding:8px 10px; background:var(--fondo); color:var(--tinta); }
.norte-registro-lista small { display:block; margin-top:10px; color:var(--silencio); font-weight:700; }.norte-eventos { margin-top:18px; }.norte-eventos summary { cursor:pointer; color:var(--petroleo); font-weight:700; }.norte-eventos > div { display:grid; gap:6px; margin-top:10px; }.norte-eventos > div > div { display:grid; grid-template-columns:140px 1fr; gap:6px 14px; padding:10px 12px; border-bottom:1px solid var(--linea); background:#fff; }.norte-eventos span { color:var(--silencio); font-size:12px; }.norte-eventos p { grid-column:1/-1; margin:0; }
.tabla-simple > div { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--linea); }.tabla-simple span { color:var(--gris); font-size:13px; }
.cerebro-layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; min-height:640px; border-top:1px solid var(--linea); }.cerebro-grafo { min-width:0; overflow:hidden; }.cerebro-grafo svg { width:100%; height:640px; }.cerebro-orbita { fill:none; stroke:var(--linea); stroke-dasharray:4 9; }.cerebro-enlace { stroke:#afc4c6; stroke-width:2; }.cerebro-nodo { cursor:pointer; }.cerebro-nodo circle { stroke:#fff; stroke-width:4; transition:stroke-width .15s, transform .15s; }.cerebro-nodo:hover circle,.cerebro-nodo.activo circle { stroke-width:8; }.cerebro-nodo text { font-size:13px; fill:var(--tinta); font-weight:600; }.cerebro-detalle { border-left:1px solid var(--linea); padding:24px; }.cerebro-charla { display:grid; gap:3px; padding:10px 0; border-bottom:1px solid var(--linea); }.cerebro-charla span { font-size:12px; color:var(--gris); }
@media (max-width: 760px) { .norte-panel { inset:0; width:100%; }.norte-cerrar { right:14px; top:12px; width:40px; height:40px; }.norte-escena { width:100%; grid-template-rows:150px auto minmax(150px,1fr) auto auto auto; padding:20px 0 10px; }.norte-brujula { width:104px; height:104px; }.norte-brujula .aguja { inset:25px 35px; }.norte-brujula .anillo.b { inset:20px; }.norte-brujula .marca-cliente { top:47px; }.norte-identidad b { font-size:31px; }.norte-mensajes { padding:14px 18px; }.norte-bienvenida b { font-size:22px; padding:0 12px; }.norte-escribir { margin:8px 16px 0; }.norte-accion { padding:0 16px; }.norte-panel footer { gap:16px; }.norte-config { grid-template-columns:1fr; }.norte-config .botonera { grid-column:auto; }.cerebro-layout { grid-template-columns:1fr; }.cerebro-grafo svg { height:440px; }.cerebro-detalle { border-left:0; border-top:1px solid var(--linea); }.tabla-simple > div { grid-template-columns:1fr; gap:6px; } }

@media (max-width: 760px) {
  /* En móvil Norte queda como una pestaña de borde: acompaña sin cubrir las decisiones. */
  #norte-boton { right:-6px; bottom:14px; width:50px; height:50px; opacity:.9; }
  #norte-boton .compas-mini { inset:3px; width:44px!important; height:44px!important; }
  #norte-boton:hover,#norte-boton:focus-visible { opacity:1; }
  .norte-escena,.norte-panel.lado-izq .norte-escena { left:0; right:0; bottom:8px; width:100%; height:calc(100vh - 16px); padding:58px 12px 4px; grid-template-rows:auto minmax(120px,1fr) auto auto auto; }
  .norte-brujula,.norte-panel.lado-izq .norte-brujula { left:auto; right:-1px; bottom:12px; width:58px; height:58px; }
  .norte-cerrar,.norte-panel.lado-izq .norte-cerrar { position:fixed; left:auto; right:13px; top:10px; bottom:auto; }
  .norte-identidad,.norte-panel.lado-izq .norte-identidad { justify-self:end; width:calc(100% - 48px); text-align:right; border-left:0; border-right:4px solid var(--petroleo); padding:9px 12px; }
  .norte-identidad b { font-size:25px; }.norte-identidad small,.norte-panel.lado-izq .norte-identidad small { justify-content:flex-end; gap:7px; }.norte-identidad small i { font-size:9.5px; }
  .norte-mensajes { padding:8px 0; }.norte-bienvenida { width:100%; padding:16px; }.norte-bienvenida b { font-size:20px; padding:0; }.norte-bienvenida::after { display:none; }
  .norte-escribir { margin:7px 78px 0 0; grid-template-columns:minmax(0,1fr) 46px; }.norte-enviar { width:46px; }.norte-panel footer,.norte-panel.lado-izq footer { justify-content:flex-start; margin-right:76px; padding-left:2px; gap:12px; font-size:11.5px; }
}