/* Plataforma de Scala Systems: panel de cada negocio y pantalla de ventas.
   Identidad: crema de fondo, papel para lo que se lee, grafito para texto y botones,
   coral solo como acento (la regla corta de extremos redondos del símbolo). */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fuentes/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --crema: #f6f0e7;
  --papel: #fffdf9;
  --grafito: #1d2227;
  --coral: #eb513d;
  --verde: #1c7c54;
  --ambar: #8f5600;
  --rojo: #b3261e;
  --tenue: rgb(29 34 39 / 68%);
  --linea: rgb(29 34 39 / 12%);
  --linea-fuerte: rgb(29 34 39 / 26%);
  --radio: 12px;
  --lateral: 268px;
  --margen: clamp(16px, 3.2vw, 44px);
  --pestanas: 62px;
  --abajo: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* El atributo hidden manda aunque la clase del elemento fije otro display. */
[hidden] { display: none !important; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--grafito);
  font: 15px/1.5 "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol { margin: 0; }
h1 { font-size: 1.65rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
h2 { font-size: 1.02rem; font-weight: 600; }
h3 { font-size: 0.92rem; font-weight: 600; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tenue { color: var(--tenue); font-size: 0.9rem; }
.vacio { color: var(--tenue); font-size: 0.93rem; }

/* --- Controles --- */
input, select, textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
}

textarea { resize: vertical; }
input[readonly] { background: var(--crema); color: var(--tenue); }
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--grafito); }

:is(input, select, textarea, button, a, summary):focus-visible {
  outline: 2px solid var(--grafito);
  outline-offset: 2px;
}

label { display: flex; flex-direction: column; gap: 5px; font-size: 0.88rem; font-weight: 600; }
label :is(input, select, textarea) { font-weight: 400; }
label.casilla { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 0.93rem; font-weight: 400; }
label.casilla input { flex: none; margin: 2px 0 0; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  min-height: 42px;
  padding: 9px 20px;
  border: 1px solid var(--grafito);
  border-radius: 999px;
  background: var(--grafito);
  color: var(--crema);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.boton:hover { background: #2c343b; }
.boton:disabled { opacity: 0.55; cursor: progress; }
.boton.claro { border-color: var(--linea-fuerte); background: transparent; color: var(--grafito); }
.boton.claro:hover { border-color: var(--grafito); background: var(--papel); }
.boton.menor { min-height: 34px; padding: 5px 14px; font-size: 0.88rem; }

.enlace { color: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fila { display: flex; gap: 8px; }
.fila > label { flex: 1; }
.fila.ajusta { flex-wrap: wrap; }
.fila.ajusta > :is(input, select) { flex: 1 1 200px; }
.pila { display: flex; flex-direction: column; gap: 10px; }

.estado { display: inline-flex; align-items: center; gap: 7px; color: var(--tenue); font-size: 0.86rem; font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado:empty { display: none; }
.estado[data-tono="bien"] { color: var(--verde); }
.estado[data-tono="espera"] { color: var(--ambar); }
.estado[data-tono="mal"] { color: var(--rojo); }

.etiqueta { padding: 1px 9px; border-radius: 99px; background: rgb(29 34 39 / 7%); font-size: 0.76rem; font-weight: 600; }
.etiqueta[data-tono="bien"] { background: rgb(28 124 84 / 12%); color: var(--verde); }
.etiqueta[data-tono="espera"] { background: rgb(143 86 0 / 12%); color: var(--ambar); }
.etiqueta[data-tono="mal"] { background: rgb(179 38 30 / 10%); color: var(--rojo); }

details > summary { font-size: 0.9rem; font-weight: 600; cursor: pointer; }
details > div { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
details > form { margin-top: 12px; }

/* --- Pantalla de entrada --- */
.acceso { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.acceso form { display: flex; flex-direction: column; gap: 16px; width: min(100%, 380px); padding: 28px; border: 1px solid var(--linea); border-radius: 18px; background: var(--papel); }
.acceso .logo { align-self: flex-start; margin-bottom: 8px; }
.acceso .logo img { height: 40px; }
.acceso h1 { font-size: 1.35rem; }
.acceso select { width: 100%; }

/* --- Estructura: menú a un lado y, a su derecha, una sola cosa a la vez --- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100dvh; }

.lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100dvh;
  padding: 26px 16px 20px;
  border-right: 1px solid var(--linea);
}

.logo { display: block; padding: 0 10px; }
.logo img { display: block; height: 34px; width: auto; }
.logo .simbolo { display: none; }

.cambio { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.cambio-fila { display: flex; gap: 6px; }
/* El perfil del negocio: su logo (o su inicial) delante de su nombre. Con él van unos
   detalles en el color de su web, que el panel pone en --cliente; sin web son los de Scala. */
.perfil { display: flex; align-items: center; gap: 10px; min-width: 0; }
.perfil > :not(.avatar) { flex: 1; min-width: 0; }
.avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: var(--cliente, var(--grafito)); color: var(--sobre-cliente, var(--crema)); font-weight: 700; line-height: 1; }
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.avatar img[data-logo="true"] { padding: 4px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); border-radius: inherit; }
.cambio select { flex: 1; min-width: 0; padding: 8px 10px; background: var(--papel); font-weight: 600; text-overflow: ellipsis; }
.cambio-nombre { padding: 0 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-movil { display: none; }
.rotulo { padding: 0 10px; color: var(--tenue); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.icono { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.boton-icono {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.boton-icono:hover { border-color: var(--grafito); background: var(--papel); }

.menu { display: flex; flex-direction: column; gap: 2px; }

.menu a, .lateral-pie :is(a, button) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--tenue);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu a:hover, .lateral-pie :is(a, button):hover { background: rgb(29 34 39 / 5%); color: var(--grafito); }
.menu a[aria-current="page"] { background: var(--papel); color: var(--grafito); font-weight: 600; box-shadow: 0 0 0 1px var(--linea); }
/* El motivo de la marca: la regla corta de color con los extremos redondos. */
.menu a[aria-current="page"]::before { content: ""; position: absolute; left: -9px; top: 50%; width: 4px; height: 20px; border-radius: 99px; background: var(--cliente, var(--coral)); translate: 0 -50%; }
.menu .cuenta { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 0.74rem; font-weight: 700; line-height: 20px; text-align: center; }
.menu .cuenta:empty { display: none; }

.lateral-pie { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea); }

main { min-width: 0; }

.vista { display: flex; flex-direction: column; max-width: 860px; padding: 36px var(--margen) 56px; }
.vista-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 22px; }
.vista-cabecera .tenue { flex-basis: 100%; }

.seccion { display: flex; flex-direction: column; gap: 12px; padding: 22px 0; border-top: 1px solid var(--linea); }
.seccion-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Lo que dice la ficha de Google de un negocio, dentro de sus ajustes de reseñas. */
.ficha-google, #gficha-campos { display: flex; flex-direction: column; gap: 12px; }
/* La vía oficial de WhatsApp de un negocio, dentro de su sección de WhatsApp. */
.oficial { display: flex; flex-direction: column; gap: 10px; }
.oficial ul { margin: 0; padding-left: 18px; }

/* --- Inicio --- */
.resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.resumen a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 18px 16px 18px 0; color: inherit; text-decoration: none; }
.resumen li + li a { padding-left: 16px; border-left: 1px solid var(--linea); }
.resumen strong { font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.resumen span { color: var(--tenue); font-size: 0.88rem; }
.resumen a:hover span { color: var(--grafito); text-decoration: underline; text-underline-offset: 3px; }
.resumen [data-aviso="true"] strong { color: var(--coral); }

.pasos { display: flex; flex-direction: column; font-size: 0.95rem; }
.pasos li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.pasos li:last-child { border-bottom: 0; }
.pasos li::before { content: ""; width: 18px; height: 18px; border: 1.5px solid var(--linea-fuerte); border-radius: 50%; }
.pasos li[data-hecho="true"]::before { border-color: var(--verde); background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9.5 2.5 2.5L13 6.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pasos li[data-hecho="true"] { color: var(--tenue); }
.pasos small { color: var(--tenue); font-size: 0.82rem; }

.qr { align-self: flex-start; width: min(100%, 240px); height: auto; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }

.avisos { display: flex; flex-direction: column; }
.avisos li { padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 0.92rem; overflow-wrap: anywhere; }
/* Cada aviso en tres líneas como mucho: el texto entero ya está en el WhatsApp del dueño. */
.avisos .aviso-texto { display: -webkit-box; overflow: hidden; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.avisos li:last-child { border-bottom: 0; }

/* --- Lista a un lado y detalle al otro (clientes, llamadas de venta) --- */
.vista.doble { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); max-width: none; height: 100dvh; padding: 0; }
.panel-lista { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 36px 20px 16px var(--margen); border-right: 1px solid var(--linea); overflow-y: auto; }
.panel-lista .vista-cabecera { margin-bottom: 0; }
.panel-detalle { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 28px var(--margen) 18px 28px; background: var(--papel); overflow-y: auto; }
.volver { display: none; align-self: flex-start; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros input { flex: 1 1 160px; }
.filtros select { flex: 0 1 auto; width: auto; max-width: 100%; }

.contactos { display: flex; flex: 1; flex-direction: column; margin: 0 -10px; }

.contacto {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid var(--linea);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.contacto:hover { background: rgb(29 34 39 / 4%); }
.contacto[aria-current="true"] { border-radius: 10px; border-bottom-color: transparent; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); }
.contacto[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 24px; border-radius: 99px; background: var(--cliente, var(--coral)); translate: -50% -50%; }
.contacto-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacto-hora { color: var(--tenue); font-size: 0.8rem; }
.contacto-texto { grid-column: 1 / -1; color: var(--tenue); font-size: 0.89rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacto-etiquetas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.ficha { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.ficha .fila { align-items: flex-start; }
.ficha-nombre { font-size: 1.1rem; font-weight: 600; }
.ficha select { flex: none; width: auto; }

.mensajes { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 120px; overflow-y: auto; }
.mensaje { max-width: min(84%, 540px); padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--crema); overflow-wrap: anywhere; white-space: pre-line; }
.mensaje[data-direccion="saliente"] { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--grafito); color: var(--crema); }
.mensaje[data-estado="simulado"] { background: rgb(29 34 39 / 62%); }
.mensaje[data-estado="error"] { background: var(--rojo); }
.mensaje[data-motivo="llamada_perdida"][data-direccion="entrante"] { background: rgb(235 81 61 / 12%); font-weight: 600; }
.mensaje-pie { display: block; margin-top: 4px; font-size: 0.75rem; opacity: 0.74; }

.redactar { display: flex; align-items: flex-end; gap: 8px; }

/* --- Citas y reseñas --- */
.citas, .resenas-google { display: flex; flex-direction: column; }
.citas li, .resenas-google li { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.citas li:last-child, .resenas-google li:last-child { border-bottom: 0; }
.citas li[data-estado]:not([data-estado="confirmada"]), .resenas-google li[data-estado="respondida"] { color: var(--tenue); }
.resenas-google .estrellas { color: #a36a00; letter-spacing: 1px; }
.resenas-google textarea { min-height: 4.6em; }
.resenas-google small, .citas small { color: var(--tenue); }

.cita-acciones, .acciones-rapidas { display: flex; flex-wrap: wrap; gap: 6px; }
.cita-acciones button, .acciones-rapidas button, .pestanas button {
  min-height: 34px;
  padding: 5px 13px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.87rem;
  font-weight: 500;
  cursor: pointer;
}
.cita-acciones button:hover, .acciones-rapidas button:hover, .pestanas button:hover { border-color: var(--grafito); background: var(--papel); }
.acciones-rapidas button[data-tono="bien"] { border-color: var(--verde); color: var(--verde); font-weight: 600; }
.acciones-rapidas button[data-tono="mal"] { color: var(--rojo); }
.pestanas { display: flex; gap: 6px; }
.pestanas button[aria-pressed="true"] { border-color: var(--grafito); background: var(--grafito); color: var(--crema); }

/* --- Ajustes: una lista de apartados que se abren de uno en uno --- */
.grupos { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.grupos + .grupos { border-top: 0; }
.grupo { border-bottom: 1px solid var(--linea); }
.grupo > summary { display: grid; grid-template-columns: 1fr 20px; align-items: center; gap: 2px 12px; padding: 16px 0; font-size: 1rem; list-style: none; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary small { grid-column: 1; color: var(--tenue); font-size: 0.88rem; font-weight: 400; }
.grupo > summary::after { content: ""; grid-area: 1 / 2 / span 2; width: 9px; height: 9px; border-right: 1.7px solid var(--tenue); border-bottom: 1.7px solid var(--tenue); rotate: 45deg; translate: 0 -3px; transition: rotate 0.15s ease, translate 0.15s ease; }
.grupo[open] > summary::after { rotate: -135deg; translate: 0 2px; }
.grupo > div, .grupo > form { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 4px 0 24px; }
.grupo select { width: 100%; }
/* Clientes: cada uno, una línea con su estado y lo que toca; lo urgente, resaltado. */
.cliente > summary > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cliente > summary small[data-urgente="true"] { color: var(--grafito); font-weight: 600; }
.cliente .bloque:first-of-type { border-top: 0; padding-top: 0; }
.cliente .casilla span { line-height: 1.45; }
#cifras-clientes { margin-block: 14px 6px; }
.foto-de-reserva { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.foto-de-reserva img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.foto-de-reserva label { flex: 1 1 220px; }
.qr { width: min(180px, 60vw); height: auto; aspect-ratio: 1; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.tasas { margin-top: 16px; color: var(--tenue); font-size: 0.93rem; }
.tasas strong { color: var(--grafito); }
.barra-guardar { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 0; background: var(--crema); }
.semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pendientes { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; list-style: disc; color: var(--tenue); font-size: 0.9rem; }
.pendientes:empty { display: none; }
.pendientes .mal { color: var(--rojo); font-weight: 600; }
.codigos { display: flex; flex-wrap: wrap; gap: 8px; }
.codigos li { padding: 6px 12px; border-radius: 8px; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); font: 600 0.98rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.prueba { display: flex; flex-direction: column; gap: 8px; }

/* --- Automatizaciones: la lista a un lado y, al otro, la elegida por dentro --- */
.cifras.compactas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifras.compactas div { padding: 10px 12px; }
.cifras.compactas strong { font-size: 1.35rem; }
.auto-ambito > div { gap: 2px; padding: 0 0 14px; }
.auto-fila { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 -10px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.auto-fila:hover { background: var(--papel); }
.auto-fila[aria-current="true"] { background: var(--papel); box-shadow: inset 3px 0 0 var(--coral); }
.auto-luz { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); }
.auto-fila[data-activa="false"] .auto-luz { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tenue); }
.auto-fila[data-activa="false"] .auto-nombre strong { color: var(--tenue); }
.auto-nombre { display: flex; flex-direction: column; min-width: 0; }
.auto-nombre strong { font-size: 0.95rem; font-weight: 600; }
.auto-nombre small { color: var(--tenue); font-size: 0.82rem; }
.auto-fila .cuenta { min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--grafito); color: var(--crema); font-size: 0.76rem; font-weight: 600; line-height: 22px; text-align: center; }
.auto-portada, .auto-ficha, .auto-contenido { display: flex; flex-direction: column; gap: 14px; }
.auto-ficha { max-width: 720px; }
.auto-ficha .seccion-cabecera { align-items: flex-start; }
.auto-donde { margin-bottom: 2px; color: var(--tenue); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.auto-ficha h2 { font-size: 1.3rem; }
.auto-ficha .pestanas a { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px; border: 1px solid var(--linea-fuerte); border-radius: 999px; color: inherit; font-size: 0.87rem; font-weight: 500; text-decoration: none; }
.auto-ficha .pestanas a[aria-pressed="true"] { border-color: var(--grafito); background: var(--grafito); color: var(--crema); }
.auto-tiempos time { min-width: 9.5em; }
.auto-reglas { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; list-style: disc; color: var(--tenue); font-size: 0.92rem; }
/* El interruptor de una automatización. */
.interruptor { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px 4px 4px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: transparent; color: var(--tenue); font: inherit; font-size: 0.87rem; font-weight: 600; cursor: pointer; }
.interruptor-bola { position: relative; width: 38px; height: 24px; border-radius: 999px; background: var(--linea-fuerte); transition: background 0.15s ease; }
.interruptor-bola::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--papel); transition: translate 0.15s ease; }
.interruptor[aria-checked="true"] { color: var(--verde); }
.interruptor[aria-checked="true"] .interruptor-bola { background: var(--verde); }
.interruptor[aria-checked="true"] .interruptor-bola::after { translate: 14px 0; }
/* El flujo: los pasos, de arriba abajo, unidos por una línea. Cada bloque dice qué es. */
.flujo { --eje: 21px; display: flex; flex-direction: column; gap: 18px; }
.nodo { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--crema); }
.flujo:not(.suelto) > .nodo + .nodo::before { content: ""; position: absolute; left: var(--eje); top: -19px; height: 18px; border-left: 2px solid var(--linea-fuerte); }
.nodo > header { display: flex; align-items: center; gap: 10px; }
.nodo > header > .icono { flex: none; width: 18px; height: 18px; }
.nodo-titulo { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nodo-titulo small { color: var(--tenue); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.nodo-titulo strong { font-weight: 600; }
.nodo-aqui { flex: none; padding: 2px 10px; border-radius: 99px; background: var(--grafito); color: var(--crema); font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nodo-si { color: var(--ambar); font-size: 0.88rem; font-weight: 500; }
.nodo-nota { font-size: 0.88rem; }
.nodo-texto { display: flex; flex-direction: column; gap: 8px; }
.nodo .globo { max-width: min(100%, 560px); margin: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); white-space: pre-line; overflow-wrap: anywhere; font-size: 0.94rem; }
.nodo textarea { width: 100%; min-height: 8em; }
.nodo > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--tenue); font-size: 0.84rem; }
.nodo > footer button.enlace { padding: 0; border: 0; background: none; font-family: inherit; font-size: inherit; }
.nodo[data-tipo="disparador"] { border-color: var(--coral); background: var(--papel); box-shadow: inset 4px 0 0 var(--coral); }
.nodo[data-tipo="aviso"] { box-shadow: inset 4px 0 0 var(--ambar); }
.nodo[data-tipo="mensaje"] { box-shadow: inset 4px 0 0 var(--grafito); }
.nodo[data-tipo="cambio"] { box-shadow: inset 4px 0 0 var(--verde); }
.nodo[data-tipo="hito"] { border-style: dashed; background: transparent; }
.nodo[data-vacio="true"] { opacity: 0.7; }
.nodo[data-tipo="espera"], .nodo[data-tipo="fin"] { flex-direction: row; align-items: center; align-self: flex-start; gap: 8px; margin-left: 6px; padding: 5px 14px 5px 8px; border-radius: 99px; background: transparent; color: var(--tenue); font-size: 0.88rem; font-weight: 600; }
.nodo[data-tipo="espera"] .icono { flex: none; width: 16px; height: 16px; }
.nodo[data-tipo="espera"] small { display: block; font-weight: 400; }
.nodo[data-tipo="fin"] { padding-left: 14px; }
/* Las personas de una automatización: una ficha corta por cada una, con su camino. */
.auto-persona { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.auto-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.auto-persona[data-pausada="true"] .auto-paso { color: var(--tenue); }
.auto-ultimo { font-size: 0.88rem; overflow-wrap: anywhere; }
.auto-resto > summary { color: var(--tenue); font-size: 0.88rem; font-weight: 400; cursor: pointer; }
.auto-resto[open] > summary { margin-bottom: 8px; }
.auto-persona .acciones-rapidas { align-items: center; }
.camino { display: flex; flex-wrap: wrap; gap: 5px; }
.camino li { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); }
.camino li[data-estado="hecho"] { background: var(--verde); box-shadow: none; }
.camino li[data-estado="pendiente"] { box-shadow: inset 0 0 0 2.5px var(--grafito); }
.camino li[data-estado="saltado"] { background: var(--linea-fuerte); box-shadow: none; }
.menu .corto { display: none; }

/* --- Ventas --- */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.cifras div { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cifras strong { font-size: 1.8rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifras span { color: var(--tenue); font-size: 0.86rem; }
.aviso-cuello { margin-top: 20px; padding: 12px 14px; border-left: 4px solid var(--ambar); border-radius: 2px 10px 10px 2px; background: rgb(143 86 0 / 8%); font-size: 0.92rem; }

.tramo { display: flex; flex-direction: column; }
.tramo h3 { display: flex; justify-content: space-between; gap: 8px; padding: 14px 0 6px; color: var(--tenue); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
.prospectos { display: flex; flex-direction: column; margin: 0 -10px; }
.prospecto { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 11px 10px; border: 0; border-bottom: 1px solid var(--linea); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.prospecto:hover { background: rgb(29 34 39 / 4%); }
.prospecto[aria-current="true"] { border-radius: 10px; border-bottom-color: transparent; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); }
.prospecto[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 24px; border-radius: 99px; background: var(--coral); translate: -50% -50%; }
.prospecto small { color: var(--tenue); font-size: 0.86rem; }
.prospecto .senas { color: var(--grafito); font-weight: 600; }

.embudo { display: flex; flex-direction: column; }
.embudo > button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--linea); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.embudo > button:hover span { text-decoration: underline; text-underline-offset: 3px; }
.embudo > button[aria-pressed="true"] { border-bottom-color: transparent; font-weight: 600; }
.embudo > button[data-vacia="true"] { color: var(--tenue); }
.embudo > button strong { min-width: 28px; padding: 0 8px; border-radius: 99px; background: rgb(29 34 39 / 7%); font-size: 0.84rem; font-variant-numeric: tabular-nums; text-align: center; }
.embudo > button[aria-pressed="true"] strong { background: var(--grafito); color: var(--crema); }
.embudo > button small { color: var(--tenue); font-weight: 400; }
.embudo > :is(p, .prospectos) { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); }

.ficha-ventas { display: flex; flex-direction: column; gap: 4px; }
.ficha-ventas h2 { font-size: 1.3rem; }
.ficha-acciones { margin: 10px 0 16px; }
.ficha-ventas :is(#ficha-senas, #ficha-reunion) { color: var(--grafito); font-weight: 600; }
.ficha-ventas :is(#ficha-senas, #ficha-reunion) a { margin-left: 10px; font-weight: 600; }
.revision { padding: 16px; border-radius: var(--radio); background: var(--papel); box-shadow: 0 0 0 1px var(--linea); }
.revision[data-ocupada="true"] { opacity: 0.6; }
input[type="file"] { padding: 8px; background: var(--papel); }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.bloque { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; border-top: 1px solid var(--linea); }
.historial { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.historial li { display: flex; gap: 10px; }
.historial time { flex: none; color: var(--tenue); font-variant-numeric: tabular-nums; }
/* Mensajes de Ventas: cada situación con sus pasos, como una conversación que se lee de
   arriba abajo; el momento va encima de cada mensaje. */
.ensayo { display: flex; flex-direction: column; gap: 16px; }
.ensayo li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ensayo .cuando { color: var(--tenue); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.ensayo .globo { max-width: min(100%, 560px); padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); white-space: pre-line; overflow-wrap: anywhere; }
.ensayo .globo[data-vacio="true"] { color: var(--tenue); background: none; box-shadow: none; padding: 0; }
.ensayo textarea { width: min(100%, 560px); min-height: 6.5em; }
.ensayo button.enlace { padding: 0; border: 0; background: none; font-family: inherit; font-size: 0.86rem; }
.globos { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; font-size: 0.92rem; }
.globos li { max-width: 88%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--crema); white-space: pre-line; overflow-wrap: anywhere; }
.globos li[data-direccion="saliente"] { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--grafito); color: var(--crema); }
.globos li.vacio { max-width: none; padding: 0; background: none; }
.enlace-largo { overflow-wrap: anywhere; }

/* --- Aviso breve tras cada acción --- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: 14px;
  background: var(--grafito);
  color: var(--crema);
  box-shadow: 0 8px 30px rgb(29 34 39 / 25%);
  translate: -50% 0;
}

.aviso[data-tono="mal"] { background: var(--rojo); }

/* --- Móvil: barra arriba con el negocio y pestañas abajo, como una aplicación --- */
@media (max-width: 899px) {
  /* Con menos de 16 px, el iPhone amplía la página al tocar un campo. */
  input, select, textarea { font-size: 16px; }

  .app { display: block; }

  .lateral {
    z-index: 4;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
    background: var(--crema);
  }

  .logo { padding: 0; }
  .logo .completo { display: none; }
  .logo .simbolo { display: block; height: 30px; }
  .rotulo { display: none; }
  .solo-movil { display: block; }
  .cambio { flex: 1; min-width: 0; padding: 0; }
  .cambio-nombre { padding: 0; font-size: 1.02rem; }
  .avatar { width: 32px; height: 32px; border-radius: 8px; font-size: 0.9rem; }

  .lateral-pie { flex-direction: row; gap: 4px; margin: 0; padding: 0; border: 0; }
  .lateral-pie :is(a, button) { padding: 9px; }
  .lateral-pie .texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    flex-direction: row;
    gap: 0;
    min-height: calc(var(--pestanas) + var(--abajo));
    padding: 6px 6px calc(6px + var(--abajo));
    border-top: 1px solid var(--linea);
    background: var(--papel);
  }

  .menu a { flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 2px 4px; font-size: 0.7rem; font-weight: 600; line-height: 1.2; }
  /* En las pestañas del móvil no cabe un nombre largo: va su versión corta. */
  .menu .largo { display: none; }
  .menu .corto { display: inline; }
  .auto-tiempos li { flex-direction: column; gap: 0; }
  .auto-tiempos time { min-width: 0; }
  body[data-detalle="abierto"] a.volver { display: flex; }
  .menu a:hover { background: none; }
  .menu a[aria-current="page"] { background: none; box-shadow: none; }
  .menu a[aria-current="page"]::before { left: 50%; top: 0; width: 22px; height: 3px; translate: -50% 0; }
  .menu .cuenta { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; margin: 0; padding: 0 5px; font-size: 0.68rem; line-height: 18px; }

  main { padding-bottom: calc(var(--pestanas) + var(--abajo)); }
  .vista { padding: 22px 16px 32px; }
  h1 { font-size: 1.45rem; }
  /* En el móvil el aviso sale arriba: abajo taparía las pestañas o la caja de escribir. */
  .aviso { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; width: max-content; }
  .barra-guardar { bottom: calc(var(--pestanas) + var(--abajo)); }
  .barra-guardar .boton { flex: 1; }

  .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumen li:nth-child(odd) a { padding-left: 0; border-left: 0; }
  .resumen li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* La lista ocupa la pantalla; al elegir a alguien, su ficha la sustituye entera. */
  .vista.doble { display: block; height: auto; }
  .panel-lista { padding: 22px 16px 24px; border-right: 0; overflow: visible; }
  .panel-detalle { display: none; }
  .volver { display: inline-flex; }

  body[data-detalle="abierto"] .panel-lista,
  body[data-detalle="abierto"] .menu { display: none; }
  /* Con la ficha abierta la pantalla no se desplaza: lo hace la ficha por dentro, y la
     caja de escribir se queda siempre a la vista. */
  body[data-detalle="abierto"] .app { display: flex; flex-direction: column; height: 100dvh; }
  body[data-detalle="abierto"] main { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-bottom: 0; }
  body[data-detalle="abierto"] .vista.doble { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  body[data-detalle="abierto"] .panel-detalle { display: flex; flex: 1; padding: 10px 16px calc(12px + var(--abajo)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}