@font-face { font-family: 'Inter'; src: url('/fuentes/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fuentes/playfair.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fuentes/playfair-italica.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* Dos temas que se eligen en Ajustes. Neutros sobrios y un solo acento verde pino. */
:root {
  color-scheme: dark;
  --fondo: #0f1110; --panel: #161917; --elevado: #212523; --texto: #f1f3f0; --suave: #9aa19c; --linea: #2b2f2c;
  --acento: #55b89f; --acento-texto: #8fd0bf; --sobre-acento: #0d1a17; --acento-suave: #1b2b27;
  --activo: #f1f3f0; --sobre-activo: #121513;
  --tinta: #0b0d0c; --sobre-tinta: #f1f3f0; --suave-tinta: #9aa19c;
  --riel-fondo: #0b0d0c; --riel-texto: #9aa19c; --riel-marca: #f1f3f0;
  --entrante: #212523; --saliente: #1f5c50; --sobre-saliente: #eef6f3; --pie-saliente: #a9c9c0; --auto: #1d2a26;
  --error: #f2b8b5; --nota: #1b2b27; --leido: #8fd3ff; --silueta: #212523; --bien: #4cc484;
  --nav-alto: calc(62px + env(safe-area-inset-bottom));
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
:root[data-tema="claro"] {
  color-scheme: light;
  --fondo: #f1f2ef; --panel: #ffffff; --elevado: #f4f5f2; --texto: #151917; --suave: #616864; --linea: #e0e3de;
  --acento: #1f6b5c; --acento-texto: #1f6b5c; --sobre-acento: #ffffff; --acento-suave: #e2efea;
  --activo: #151917; --sobre-activo: #ffffff;
  --riel-fondo: #ffffff; --riel-texto: #616864; --riel-marca: #151917;
  --entrante: #ffffff; --saliente: #1f6b5c; --sobre-saliente: #ffffff; --pie-saliente: #c5e0d8; --auto: #e2efea;
  --error: #b3261e; --nota: #e2efea; --leido: #bfe6ff; --silueta: #e6e8e4; --bien: #1c8a4d;
}

html { touch-action: manipulation; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--fondo); color: var(--texto); font: 15px/1.4 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea, select { background: var(--elevado); border: 1px solid var(--linea); border-radius: 10px; padding: 11px 12px; width: 100%; min-width: 0; outline: 0; }
input:focus, textarea:focus, select:focus { border-color: var(--acento); }
input::placeholder, textarea::placeholder { color: var(--suave); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; }

.logo { font-family: var(--serif); font-size: 27px; line-height: 1; letter-spacing: -.01em; color: var(--texto); white-space: nowrap; }
.logo em { font-style: italic; color: var(--acento-texto); }
.logo-grande { font-size: clamp(44px, 9vw, 72px); }

.primario { background: var(--acento); color: var(--sobre-acento); border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.primario.chico { padding: 9px 14px; font-size: 14px; }
.primario:disabled { opacity: .5; cursor: default; }
.secundario { display: inline-block; background: none; color: var(--texto); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; font-weight: 550; cursor: pointer; }
.secundario:hover { border-color: var(--acento); }
.secundario.chico { padding: 7px 12px; font-size: 13px; }
.peligro { background: none; color: var(--error); border: 1px solid currentColor; border-radius: 10px; padding: 10px 14px; font-weight: 550; cursor: pointer; }
.enlace { background: none; border: 0; color: var(--suave); cursor: pointer; padding: 6px 4px; }
.enlace:hover { color: var(--texto); }
.enlace:disabled, .herramienta:disabled { opacity: .45; cursor: default; }
.boton-acento { background: var(--acento); color: var(--sobre-acento); border: 0; font-weight: 650; text-decoration: none; text-align: center; }
.error { color: var(--error); margin: 0; font-size: 14px; }
.error:empty { display: none; }
.vacio { color: var(--suave); text-align: center; padding: 40px 24px; margin: 0; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rotulo { color: var(--suave); font-size: 12px; font-weight: 550; }

/* Íconos de línea: la máscara toma el color del texto */
.ico-chats::before, .ico-tablero::before, .ico-ajustes::before, .ico-adjuntar::before, .ico-rapidas::before, .ico-programar::before, .volver::before, .enviar::before, .filtros-boton::before, .buscar-ico {
  content: ''; display: block; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico-chats { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.6 7.4L3 21l1.6-5.4A8.5 8.5 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.ico-tablero { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='4' width='5' height='16' rx='1.2'/%3E%3Crect x='9.5' y='4' width='5' height='11' rx='1.2'/%3E%3Crect x='16' y='4' width='5' height='7' rx='1.2'/%3E%3C/svg%3E"); }
.ico-ajustes { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2.2'/%3E%3Ccircle cx='8' cy='17' r='2.2'/%3E%3C/svg%3E"); }
.ico-adjuntar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8.2 8.2a5 5 0 0 1-7-7l8.6-8.6a3.3 3.3 0 0 1 4.7 4.7l-8.6 8.6a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8'/%3E%3C/svg%3E"); }
.ico-rapidas { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E"); }
.ico-programar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E"); }
.volver { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.enviar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5M5.5 11.5L12 5l6.5 6.5'/%3E%3C/svg%3E"); }
.filtros-boton { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M7.5 12h9M10.5 17h3'/%3E%3C/svg%3E"); }

/* Entrada */
.entrada { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr); }
.entrada-marca { background: var(--tinta); color: var(--sobre-tinta); padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.entrada-marca .logo { color: var(--sobre-tinta); }
.entrada-marca .logo em { color: #8fd0bf; }
.entrada-marca p { margin: 0; color: var(--suave-tinta); font-size: 18px; line-height: 1.5; }
.tarjeta { align-self: center; justify-self: center; width: 100%; max-width: 380px; padding: 32px 24px; display: grid; gap: 16px; }
.tarjeta h1 { margin: 0; font: 400 30px/1.1 var(--serif); }
.tarjeta label { display: grid; gap: 6px; font-size: 14px; color: var(--suave); }
.tarjeta .primario { margin-top: 4px; padding: 14px; }

/* Armazón */
.app { height: var(--alto-visible, 100dvh); display: grid; grid-template-columns: 78px 390px minmax(0, 1fr); }
.app.con-detalles { grid-template-columns: 78px 390px minmax(0, 1fr) 340px; }
.lista, .hilo, .detalles { min-height: 0; display: flex; flex-direction: column; min-width: 0; }

/* Riel: a la izquierda en escritorio, abajo en teléfono */
.riel { background: var(--riel-fondo); color: var(--riel-texto); display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 8px; z-index: 6; border-right: 1px solid var(--linea); }
.riel-marca { font: italic 400 30px/1 var(--serif); color: var(--riel-marca); text-align: center; padding: 4px 0 16px; }
.riel-boton { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; border-radius: 12px; padding: 10px 2px 8px; color: inherit; font-size: 11px; font-weight: 550; cursor: pointer; }
.riel-boton::before { width: 24px; height: 24px; }
.riel-boton:hover { color: var(--texto); }
.riel-boton.activo { background: var(--activo); color: var(--sobre-activo); }
.riel-boton b { position: absolute; top: 3px; right: 10px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: #e4572e; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }

/* Lista */
.lista { background: var(--panel); border-right: 1px solid var(--linea); overflow-y: auto; }
.cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(16px + env(safe-area-inset-top)) 16px 12px; }
.marca { display: grid; gap: 3px; min-width: 0; }
.marca small { color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canales-estado { display: flex; gap: 6px; flex: none; }
.chip-canal { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--elevado); }
.chip-canal .canal-linea { width: 17px; height: 17px; vertical-align: 0; }
.chip-canal.apagado { opacity: .45; filter: grayscale(1); }
.chip-canal.encendido::after { content: ''; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bien); border: 2px solid var(--panel); }

.aviso { padding: 16px; margin: 0 16px 12px; border: 1px solid var(--acento); border-radius: 14px; text-align: center; }
.aviso p { margin: 0 0 12px; }
.aviso img { display: block; margin: 0 auto 12px; background: #fff; border-radius: 8px; }
.aviso-fino { padding: 14px 16px; margin: 0 16px 12px; border-radius: 14px; background: var(--acento-suave); }
.aviso-fino p { margin: 0 0 10px; font-size: 14px; font-weight: 500; }

.controles { padding: 0 16px 10px; display: grid; gap: 12px; }
.buscar { padding-left: 38px; background: var(--elevado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918978' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 11px center / 19px no-repeat; }
.buscar::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Marcador: lo que importa, en grande y sin nada que deslizar */
.marcador { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.opcion.dato { display: grid; align-content: start; gap: 3px; text-align: left; background: var(--elevado); border: 0; border-radius: 12px; padding: 10px 10px 9px; cursor: pointer; color: var(--suave); min-height: 76px; }
.opcion.dato b { font: 650 24px/1 'Inter', sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--texto); }
.opcion.dato span { font-size: 11.5px; line-height: 1.2; font-weight: 550; }
.opcion.dato.activa { background: var(--activo); color: var(--sobre-activo); }
.opcion.dato.activa b { color: var(--sobre-activo); }

.resumen { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
#resumen-texto { font-size: 13px; color: var(--suave); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtros-boton { display: inline-flex; align-items: center; gap: 6px; flex: none; background: none; border: 0; color: var(--texto); font-size: 13px; font-weight: 600; padding: 5px 0 5px 8px; cursor: pointer; }
.filtros-boton::before { width: 16px; height: 16px; }
.filtros-boton b { background: var(--acento); color: var(--sobre-acento); border-radius: 9px; min-width: 18px; padding: 0 5px; line-height: 18px; font-size: 11px; text-align: center; }
.filtros-mas { display: grid; gap: 12px; padding: 12px; background: var(--elevado); border-radius: 14px; }
.grupo-filtro { display: grid; gap: 6px; }
.filtros-mas select { background-color: var(--panel); }
.filtros-mas .enlace { justify-self: start; font-size: 13px; text-decoration: underline; padding: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { background: var(--panel); border: 1px solid var(--linea); border-radius: 8px; color: var(--texto); padding: 6px 10px; cursor: pointer; font-size: 13px; font-weight: 500; }
.opcion b { font-weight: 600; font-size: 12px; margin-left: 5px; color: var(--suave); }
.opcion.activa { background: var(--texto); border-color: var(--texto); color: var(--panel); }
.opcion.activa b { color: inherit; }

/* Filas */
#conversaciones { list-style: none; margin: 0; padding: 0 8px 12px; }
.fila-chat { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 1px 12px; width: 100%; align-items: center; text-align: left; background: none; border: 0; border-radius: 14px; padding: 11px 8px; cursor: pointer; }
.fila-chat:hover { background: var(--elevado); }
.fila-chat.activa { background: var(--acento-suave); }
.avatar { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 400 20px/1 var(--serif); color: #fff; background: #5d5648; }
.fila-chat .avatar { grid-row: 1 / span 3; width: 52px; height: 52px; font-size: 24px; align-self: start; }
.tono-0 { background: #b5482f; } .tono-1 { background: #0f7a6c; } .tono-2 { background: #3d4fa8; } .tono-3 { background: #8a3a78; }
.tono-4 { background: #7a5c3e; } .tono-5 { background: #2f7d3b; } .tono-6 { background: #1f6d9c; } .tono-7 { background: #9a3550; }
.canal { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); padding: 3px; display: block; }
.canal-linea { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.canal svg, .canal-linea svg { width: 100%; height: 100%; display: block; }
.canal-whatsapp svg { fill: #25a95b; }
.canal-instagram svg { fill: #d62976; }
.canal-messenger svg { fill: #1b86ff; }
.canal-facebook svg { fill: #1877f2; }
.c-nombre { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-hora { color: var(--suave); font-size: 12px; text-align: right; }
.c-texto { color: var(--suave); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-sinleer { background: var(--acento); color: var(--sobre-acento); min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px; text-align: center; font-size: 12px; font-weight: 700; line-height: 22px; justify-self: end; }
.fila-chat.con-nuevos .c-nombre { font-weight: 700; }
.fila-chat.con-nuevos .c-texto { color: var(--texto); font-weight: 500; }
.fila-chat.con-nuevos .c-hora { color: var(--acento-texto); font-weight: 600; }
.c-meta { grid-column: 2 / 4; color: var(--suave); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 3px; }
.c-meta:empty { display: none; }
.c-meta .pendiente { display: inline-flex; align-items: center; gap: 5px; color: var(--acento-texto); font-weight: 600; }
.c-meta .pendiente::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiqueta { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 650; background: var(--color-etapa, #7a7264); color: #fff; }
.etapa-0 { --color-etapa: #7a7264; } .etapa-1 { --color-etapa: #2f6f9f; } .etapa-2 { --color-etapa: #1f8a4e; } .etapa-3 { --color-etapa: #b23a35; }
.etapa-4 { --color-etapa: #3d4fa8; } .etapa-5 { --color-etapa: #8a3a78; } .etapa-6 { --color-etapa: #0f7a6c; } .etapa-7 { --color-etapa: #1f6d9c; }

/* Chat */
.hilo { background: var(--fondo); position: relative; }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--panel); border-bottom: 1px solid var(--linea); min-height: 64px; position: sticky; top: 0; z-index: 2; }
.barra-acciones { display: flex; gap: 8px; align-items: center; flex: none; }
.barra-hilo { justify-content: flex-start; }
.barra-hilo .barra-acciones { margin-left: auto; }
.hilo-titulo { min-width: 0; }
.hilo-titulo strong { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilo-titulo small { display: block; color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volver { display: none; flex: none; padding: 6px 2px; color: var(--texto); }
.volver::before { width: 24px; height: 24px; }
.estrella { background: none; border: 0; font-size: 22px; line-height: 1; padding: 4px; color: var(--suave); cursor: pointer; }
.estrella[aria-pressed="true"] { color: var(--acento); }
.franja { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 16px 10px; background: var(--panel); border-bottom: 1px solid var(--linea); }
.franja label { display: grid; gap: 3px; font-size: 11px; font-weight: 550; color: var(--suave); }
.franja select { padding: 7px 10px; color: var(--texto); font-size: 14px; border-radius: 8px; }
.sin-seleccion { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.sin-seleccion p { margin: 0; color: var(--suave); }
.mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.mensajes:empty { display: none; }
.dia { align-self: center; margin: 10px 0 6px; padding: 3px 10px; border-radius: 8px; background: var(--elevado); color: var(--suave); font-size: 11.5px; font-weight: 600; }
.m { max-width: min(78%, 560px); padding: 9px 13px 7px; border-radius: 16px 16px 16px 5px; background: var(--entrante); white-space: pre-wrap; overflow-wrap: anywhere; align-self: flex-start; }
.m.saliente { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--saliente); color: var(--sobre-saliente); }
.m.no-salio { background: var(--elevado); color: var(--texto); box-shadow: inset 0 0 0 1px var(--error); }
.m.saliente.no-salio small { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px; color: var(--error); text-align: left; }
.m.no-salio .enlace { padding: 0; font-size: 12px; font-weight: 650; text-decoration: underline; color: var(--texto); }
.palomitas.pendiente { display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 6.5V12l3.5 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.con-teclado, .con-teclado body { overflow: hidden; }
/* Con el teclado abierto no hace falta el margen de la barra del iPhone. */
.caja-redactar:focus-within { padding-bottom: 0; }
html:has(#texto:focus), html:has(#texto:focus) body { background: var(--panel); }
.m.oculto { opacity: .6; }
.m-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linea); color: var(--suave); font-size: 12px; }
.m-acciones .enlace { padding: 0; min-height: 24px; font-size: 13px; font-weight: 600; color: var(--acento-texto); }
.marca-comentario { padding: 1px 7px; border-radius: 5px; background: var(--acento-suave); color: var(--acento-texto); font-size: 11px; font-weight: 650; }
.publicacion { display: grid; gap: 1px; padding: 9px 16px; background: var(--panel); border-bottom: 1px solid var(--linea); color: var(--texto); text-decoration: none; font-size: 14px; font-weight: 600; }
.publicacion[href] span { color: var(--acento-texto); text-decoration: underline; }
.publicacion small { color: var(--suave); font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publicacion[hidden], .herramienta[hidden] { display: none; }
.m.automatico { background: var(--auto); color: var(--texto); }
.m small { display: block; color: var(--suave); font-size: 11px; margin-top: 3px; text-align: right; }
.m.saliente small, .m.saliente em { color: var(--pie-saliente); }
.m.automatico small { color: var(--suave); }
.m em { color: var(--suave); display: block; }
.m img, .m video { display: block; max-width: 100%; width: 280px; min-height: 160px; background: var(--fondo); object-fit: contain; margin-bottom: 4px; border-radius: 10px; }
.m img.sticker { width: 120px; min-height: 120px; background: none; }
.m audio { display: block; width: 260px; max-width: 100%; margin-bottom: 4px; }
.m .descarga { display: block; padding: 8px 0; color: inherit; font-weight: 600; }
.palomitas { letter-spacing: -0.12em; margin-left: 2px; }
.palomitas.leido { color: var(--leido); font-weight: 700; }

.caja-redactar { background: var(--panel); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); }
.ventana { margin: 0; padding: 10px 16px; background: var(--nota); font-size: 14px; }
.herramientas { display: flex; gap: 6px; padding: 8px 12px 0; }
.herramienta { display: inline-flex; align-items: center; gap: 6px; background: var(--elevado); border: 0; border-radius: 8px; color: var(--texto); padding: 7px 10px; font-size: 13px; font-weight: 550; cursor: pointer; }
.herramienta::before { width: 16px; height: 16px; }
.redactar { display: flex; gap: 8px; padding: 8px 12px 10px; align-items: flex-end; }
.redactar textarea { resize: none; max-height: 140px; border-radius: 22px; padding: 11px 16px; }
.enviar { width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.enviar::before { width: 22px; height: 22px; }
#redactar .error { padding: 0 16px 10px; }

/* Carga */
.silueta { display: flex; flex-direction: column; gap: 8px; }
.silueta i { display: block; height: 44px; width: 62%; border-radius: 14px; background: var(--silueta); animation: late 1.4s ease-in-out infinite; }
.silueta i:nth-child(even) { align-self: flex-end; width: 44%; }
.silueta p { color: var(--suave); font-size: 14px; margin: 4px 0 0; }
@keyframes late { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .silueta i { animation: none; } }

/* Detalles y ajustes: bloques con título, no renglones grises */
.detalles { background: var(--fondo); border-left: 1px solid var(--linea); overflow-y: auto; }
.seccion { background: var(--panel); border-radius: 16px; margin: 12px; padding: 16px; display: grid; gap: 10px; }
.seccion h3 { margin: 0; font: 400 20px/1.2 var(--serif); }
.seccion h3.chico { font: 600 13px/1.3 'Inter', sans-serif; color: var(--suave); margin-top: 8px; }
.seccion p { margin: 0; }
.seccion label { display: grid; gap: 5px; font-size: 13px; color: var(--suave); }
.seccion label.casilla { display: flex; gap: 10px; align-items: flex-start; color: var(--texto); font-size: 14px; }
.casilla input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--acento); }
.renglon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--linea); }
.renglon:first-of-type { border-top: 0; }
.renglon small { color: var(--suave); font-size: 12px; grid-column: 1; }
.renglon .cuerpo { white-space: pre-wrap; overflow-wrap: anywhere; grid-column: 1; font-weight: 500; }
.renglon .enlace { grid-column: 2; grid-row: 1 / span 2; align-self: start; font-size: 13px; }
.renglon .fallo { color: var(--error); }
.conectado { display: flex; align-items: center; gap: 8px; font-weight: 550; }
.conectado::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--suave); flex: none; }
.conectado.si::before { background: var(--bien); }
.campo-fecha { display: grid; grid-template-columns: minmax(0, 1fr) 78px 78px; gap: 6px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ayuda { color: var(--suave); font-size: 13px; margin: 0; }

/* Pantallas */
.pantalla { position: fixed; inset: 0 0 0 78px; z-index: 5; background: var(--fondo); overflow-y: auto; }
.barra-pantalla { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; }
.barra-pantalla h2 { margin: 0; text-align: center; font: 400 24px/1.1 var(--serif); }
.barra-pantalla > :last-child { justify-self: end; }
.volver-texto { justify-self: start; }
.ajustes-cuerpo { max-width: 680px; margin: 0 auto; padding-bottom: 16px; }
.columnas { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; align-items: flex-start; }
.columna { flex: 1 1 260px; min-width: 0; background: var(--panel); border-radius: 16px; overflow: hidden; border-top: 4px solid var(--color-etapa, var(--acento)); }
.columna h3 { margin: 0; padding: 14px; font: 400 19px/1.2 var(--serif); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.columna h3 span { font: 650 20px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--color-etapa, var(--suave)); }
.tarjeta-chat { padding: 12px 14px; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.tarjeta-chat button { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 1px 10px; min-width: 0; }
.tarjeta-chat .avatar { width: 40px; height: 40px; font-size: 18px; grid-row: 1 / span 3; }
.tarjeta-chat .canal { width: 18px; height: 18px; padding: 2px; }
.tarjeta-chat select { font-size: 13px; padding: 7px 10px; color: var(--suave); border-radius: 8px; }
.columna .vacio { padding: 8px 14px 18px; font-size: 13px; text-align: left; }

/* Hojas */
.hoja { border: 0; border-radius: 18px; background: var(--panel); color: var(--texto); padding: 0; width: min(480px, calc(100vw - 24px)); max-height: 85dvh; }
.hoja::backdrop { background: rgb(0 0 0 / .55); }
.hoja-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--linea); }
.hoja-barra strong { font: 400 21px/1.2 var(--serif); }
.hoja-cuerpo { padding: 14px 16px 18px; display: grid; gap: 10px; }
.hoja-cuerpo label { display: grid; gap: 5px; font-size: 13px; color: var(--suave); }
.opcion-rapida { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--elevado); border: 0; border-radius: 12px; padding: 12px; cursor: pointer; }
.opcion-rapida small { color: var(--suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 1100px) {
  .app, .app.con-detalles { grid-template-columns: 78px 340px minmax(0, 1fr); }
  .detalles { position: fixed; inset: 0 0 0 78px; z-index: 4; border-left: 0; padding-top: env(safe-area-inset-top); }
}
@media (max-width: 760px) {
  .entrada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .entrada-marca { padding: calc(44px + env(safe-area-inset-top)) 24px 36px; gap: 12px; }
  .entrada-marca p { font-size: 15px; }
  .tarjeta { align-self: start; max-width: none; }
  .app, .app.con-detalles { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--nav-alto); }
  .riel { order: 2; flex-direction: row; justify-content: space-around; gap: 4px; padding: 6px 12px env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--linea); }
  .riel-marca { display: none; }
  .riel-boton { flex: 1; max-width: 110px; padding: 5px 2px 3px; gap: 2px; border-radius: 10px; }
  .riel-boton b { right: calc(50% - 26px); top: 1px; }
  .hilo { display: none; }
  .app.en-hilo { grid-template-rows: minmax(0, 1fr); }
  .app.en-hilo .riel, .app.en-hilo .lista { display: none; }
  .app.en-hilo .hilo { display: flex; }
  .lista { border-right: 0; }
  .volver { display: block; }
  .m { max-width: 86%; }
  .hilo:has(#texto:focus) .franja { display: none; }
  /* Deslizar para regresar: el chat sigue al dedo y deja ver la lista debajo. */
  .app.regresando { grid-template-rows: minmax(0, 1fr) var(--nav-alto); }
  .app.en-hilo.regresando .riel { display: flex; }
  .app.en-hilo.regresando .lista { display: flex; }
  .app.regresando .hilo { position: fixed; inset: 0; z-index: 8; }
  .arrastrando, .soltando { box-shadow: -8px 0 24px rgba(0, 0, 0, .35); will-change: transform; }
  .soltando { transition: transform 180ms ease-out; }
  html:has(.arrastrando) { overflow: hidden; overscroll-behavior: none; }
  input, textarea, select, .franja select, .tarjeta-chat select { font-size: 16px; }
  .pantalla { inset: 0 0 var(--nav-alto) 0; }
  .detalles { inset: 0; z-index: 7; }
  .hoja { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .herramienta { flex: 1; justify-content: center; padding: 8px 4px; }
}
a.primario { display: block; text-align: center; text-decoration: none; }
.temas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.temas .opcion { padding: 12px; font-size: 14px; font-weight: 600; }