/* 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; }

/* 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); }

.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; }

/**
 * 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; }

.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; }

.piezas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.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) ── */
.creaciones { display: flex; flex-direction: column; gap: 14px; }
.creacion {
  background: #fff; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.creacion-img { display: block; background: #e6eef1; line-height: 0; }
.creacion-img img { width: 100%; height: auto; display: block; }
.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; }

@media (min-width: 720px) {
  .creacion { flex-direction: row; }
  .creacion-img { flex: 0 0 300px; }
  .creacion-img img { height: 100%; object-fit: cover; }
  .creacion-datos { flex: 1; }
}

#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; }

.dias { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 700px) { .dias { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }

.dia {
  border: 1px solid var(--linea); border-radius: 11px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--papel);
}
.dia.aprobada { border-color: #bcdcca; }
.dia.cambios { border-color: #e8c9a8; }
.dia-cab { display: flex; gap: 9px; align-items: center; padding: 11px 12px; flex-wrap: wrap; }
.dia-num {
  width: 25px; height: 25px; border-radius: 50%; background: var(--tinta); color: var(--crudo);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none;
}
.dia-cab b { display: block; font-size: 14px; }
.dia-cab .silencio { font-size: 11.5px; }
.dia-cab .estado { margin-left: auto; }
.dia-img { display: block; line-height: 0; background: #e6eef1; }
.dia-img img { width: 100%; height: auto; display: block; }
.dia-cuerpo { padding: 11px 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.dia-cuerpo h4 { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: 17px; }
.dia-cuerpo p { margin: 0; font-size: 13.5px; }
.dia-pie { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px; }
.dia-pie .boton.chico { padding: 7px 11px; font-size: 12.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; }

.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; }
/* 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; }
/* 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; }