/* app.css — LA PLATAFORMA RT MAgiQUE (app.rtmagique.com): entrar, el menú y cada módulo.
   ─────────────────────────────────────────────────────────────────────────────
   El estilo es el que Rogelio vio y aceptó en la propuesta (6-oct-2026): blanco, sobrio, al estilo de apple.com, con el
   azul del logo de RT y un violeta de acento. Una sola letra (Inter, servida desde aquí), todo redondo, mucho aire.
   Ningún color ni tamaño se escribe suelto en una regla: todo sale de las variables de :root (una-sola-fuente.md;
   pruebas/casos/estilos_rt.js truena si aparece un color fuera de :root y mide el contraste de cada par que se usa).

   Contraste (WCAG AA: 4.5 a 1 la letra normal, 3 a 1 la grande), medido por la prueba contra el fondo REAL donde va.
   Las cifras de cada par están en pruebas/casos/estilos_rt.js, que lee ESTA hoja (no una copia).
   ───────────────────────────────────────────────────────────────────────────── */

/* ⚠️ D36 · VA PRIMERO Y NO SE BORRA: cualquier regla de display le gana al atributo hidden. */
[hidden] { display: none !important; }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('/tipografias/inter-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/tipografias/inter-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/tipografias/inter-700-latin.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --letra: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* la base */
  --fondo:      #f5f6fa;    /* detrás de todo (la propuesta: #f6f7fb) */
  --papel:      #ffffff;    /* tarjetas, el menú, los diálogos */
  --perla:      #f5f5f7;    /* lo que se agrupa dentro de una tarjeta */
  --perla-2:    #e8e8ed;    /* bordes de campos, el segmentado */
  --texto:      #1d1d1f;
  --texto-2:    #616166;    /* lo secundario: pasa 4.5 también sobre --fondo y --perla */
  --linea:      rgba(0, 0, 0, .08);
  --linea-2:    rgba(0, 0, 0, .14);
  --blanco:     #ffffff;

  /* RT: el azul del logo (medido en logo-rt.png: #283a8f), su índigo y el violeta de acento */
  --rt-azul:     #283a8f;
  --rt-indigo:   #2e3192;
  --rt-hondo:    #1b1f6b;
  --rt-violeta:  #6d3fd4;   /* el final del degradado de los botones: blanco encima pasa 4.5 */
  --rt-luz:      #8e5cf7;   /* solo de adorno (luces, barras): nunca letra */
  --rt-tinte:    #eef0ff;   /* lo elegido en el menú; --rt-indigo encima */
  --rt-tinte-2:  #e2e5ff;

  /* estados: TINTA escribe, TINTE es el fondo */
  --verde-tinta:   #1f7a36;  --verde-tinte:   #e8f8ee;  --verde-vivo:   #34c759;
  --naranja-tinta: #a33d00;  --naranja-tinte: #fff1e0;  --naranja-vivo: #ff9500;
  --rosa-tinta:    #b8102b;  --rosa-tinte:    #fff0f3;  --rosa-vivo:    #ff375f;
  --azul-tinta:    #0058c7;  --azul-tinte:    #eaf3ff;
  --morado-tinta:  #6f3fd6;  --morado-tinte:  #f3ecff;

  /* WhatsApp: el fondo del chat y las burbujas (letra --texto encima de todas) */
  --chat-fondo:    #efeae2;
  --burbuja-ella:  #ffffff;
  --burbuja-bot:   #d9fdd3;
  --burbuja-equipo:#dfe5ff;
  --hora-burbuja:  #5b5b60;  /* la hora dentro de cada burbuja: pasa 4.5 sobre las tres */

  /* degradados, sombras y velos */
  --degradado-marca: linear-gradient(150deg, var(--rt-hondo) 0%, var(--rt-indigo) 45%, var(--rt-violeta) 100%);
  --degradado-boton: linear-gradient(92deg, var(--rt-indigo), var(--rt-violeta));
  --luz-marca: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
  --vidrio-chip: rgba(255, 255, 255, .16);
  --sombra-tarjeta: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px rgba(20, 24, 60, .05);
  --sombra-flota: 0 40px 90px -36px rgba(30, 40, 90, .45), 0 0 0 1px rgba(0, 0, 0, .06);
  --velo: rgba(10, 12, 30, .38);
  --anillo: rgba(109, 63, 212, .18);
  --oscurecer: rgba(0, 0, 0, .045);
  --sombra-burbuja: 0 1px .5px rgba(0, 0, 0, .13);

  /* la letra: 15 px el cuerpo y nada menor de 13 px */
  --t-chico: .8125rem;      /* 13 px */
  --t-normal: .9375rem;     /* 15 px */
  --t-medio: 1.0625rem;     /* 17 px */
  --t-grande: 1.5rem;       /* 24 px */
  --t-cifra: 1.75rem;       /* 28 px */
  --t-titulo: 2.25rem;      /* 36 px */

  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23616166' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --radio: 16px; --radio-chico: 10px; --radio-campo: 12px;
  --curva: cubic-bezier(.4, 0, .6, 1);
  --ancho-lado: 236px;
}

/* D114, D104: nada se arrastra de lado y la palabra sin dónde partirse se parte */
html { overflow-x: clip; font-size: 16px; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--letra); font-size: var(--t-normal);
  line-height: 1.45; -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip; overflow-wrap: anywhere;
}
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul-tinta); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.grande { width: 44px; height: 44px; stroke-width: 1.4; }
.tenue { color: var(--texto-2); }
.bloque { display: block; }
.chico { font-size: var(--t-chico); }
.oculto-vista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.error { color: var(--rosa-tinta); font-size: var(--t-chico); min-height: 1.2em; }
.error:empty { min-height: 0; }
.error-caja { background: var(--rosa-tinte); color: var(--rosa-tinta); border-radius: var(--radio-chico); padding: 12px 14px; }
.ayuda { color: var(--texto-2); font-size: var(--t-chico); }
.ayuda:empty { display: none; }
::selection { background: var(--rt-tinte-2); color: var(--texto); }

/* ── controles ── */
.boton, .boton-suave, .boton-redondo, .icono-boton, .enlace { border: none; background: none; }
.boton {
  background: var(--degradado-boton); color: var(--blanco); font-weight: 600; border-radius: var(--radio-campo);
  padding: 11px 18px; min-height: 44px; transition: filter .2s var(--curva);
}
.boton:hover { filter: brightness(1.08); }
.boton:disabled, .boton-suave:disabled, .boton-redondo:disabled { opacity: .55; cursor: default; filter: none; }
.boton-suave {
  background: var(--rt-tinte); color: var(--rt-indigo); font-weight: 600; border-radius: var(--radio-campo);
  padding: 9px 14px; min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.boton-suave:hover { background: var(--rt-tinte-2); }
.boton-suave.peligro { background: var(--rosa-tinte); color: var(--rosa-tinta); }
.boton-redondo {
  background: var(--degradado-boton); color: var(--blanco); width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
}
.icono-boton {
  width: 40px; height: 40px; border-radius: var(--radio-chico); display: grid; place-items: center; color: var(--texto-2); flex: none;
}
.icono-boton:hover { background: var(--oscurecer); color: var(--texto); }
.enlace { color: var(--azul-tinta); font-weight: 600; padding: 6px 4px; text-decoration: none; font-size: var(--t-chico); }
.enlace:hover { text-decoration: underline; }
input, select, textarea {
  border: 1.5px solid var(--perla-2); border-radius: var(--radio-campo); background: var(--papel); padding: 11px 13px;
  min-height: 44px; width: 100%; min-width: 0; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rt-violeta); box-shadow: 0 0 0 4px var(--anillo); }
/* Safari dibuja el select a su modo (más bajito, sin redondear): fuera su apariencia, flechita propia (medido en WebKit) */
select { -webkit-appearance: none; appearance: none; background-image: var(--flecha); background-repeat: no-repeat;
  background-position: right 12px center; background-size: 12px 8px; padding-right: 34px; }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--rt-indigo); }
textarea { resize: none; line-height: 1.4; }
.campo { display: grid; gap: 6px; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.campo input, .campo select { font-weight: 400; color: var(--texto); font-size: var(--t-normal); }
.pastilla {
  font-size: var(--t-chico); font-weight: 600; border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  background: var(--perla); color: var(--texto-2);
}
.pastilla.verde { background: var(--verde-tinte); color: var(--verde-tinta); }
.pastilla.naranja { background: var(--naranja-tinte); color: var(--naranja-tinta); }
.pastilla.rosa { background: var(--rosa-tinte); color: var(--rosa-tinta); }
.pastilla.azul { background: var(--azul-tinte); color: var(--azul-tinta); }
.pastilla.morado { background: var(--morado-tinte); color: var(--morado-tinta); }
.av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: var(--blanco); font-weight: 700; font-size: var(--t-chico); background: var(--degradado-boton);
}
.av.grande { width: 60px; height: 60px; font-size: var(--t-medio); }
.av.ella { background: var(--perla-2); color: var(--texto); }

/* ── entrar ── */
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; grid-template-columns: minmax(0, 1fr); }
.entrar-caja {
  display: grid; grid-template-columns: 1.05fr 1fr; width: min(940px, 100%); background: var(--papel);
  border-radius: 24px; overflow: hidden; box-shadow: var(--sombra-flota);
}
.entrar-caja.sola { grid-template-columns: minmax(0, 1fr); width: min(460px, 100%); }
.entrar-marca {
  background: var(--degradado-marca); color: var(--blanco); padding: 44px 40px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 28px; position: relative; overflow: hidden; min-width: 0;
}
.entrar-marca::after {
  content: ''; position: absolute; right: -90px; bottom: -90px; width: 300px; height: 300px; border-radius: 50%;
  background: var(--luz-marca); pointer-events: none;
}
.logo-pastilla { height: 40px; width: auto; align-self: flex-start; }
.entrar-marca .logo-pastilla { height: 46px; background: var(--papel); border-radius: 12px; padding: 5px 7px; }
.logo-chico { height: 32px; width: auto; display: block; align-self: flex-start; }   /* en una columna flex, sin align-self se estiraba a lo ancho (medido 8-oct: 372×32 de un 383×101) */
.entrar-marca h1 { font-size: var(--t-titulo); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.entrar-marca p { margin-top: 12px; font-size: var(--t-medio); max-width: 24em; }
.entrar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.entrar-chips li { font-size: var(--t-chico); font-weight: 600; background: var(--vidrio-chip); border-radius: 999px; padding: 6px 12px; }
.entrar-forma { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.entrar-forma h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; }
.entrar-forma .sub { color: var(--texto-2); margin-top: -8px; margin-bottom: 8px; }
.entrar-forma .boton { margin-top: 4px; }
.entrar-forma .nota { font-size: var(--t-chico); color: var(--texto-2); }
.entrar-forma .logo-chico { margin-bottom: 8px; }
.entrar-forma .enlace { align-self: center; }
.entrar-forma-sin-caja { display: flex; flex-direction: column; gap: 14px; }
.entrar-forma h2 + .sub { margin-top: -6px; }
.aviso-ok { background: var(--verde-tinte); color: var(--verde-tinta); border-radius: var(--radio-campo); padding: 12px 14px; font-weight: 600; font-size: var(--t-chico); }

/* ── la plataforma: el menú a la izquierda y el cuerpo, cada uno con su desplazamiento ── */
/* La página se desplaza como página (así se mide completa y en el celular se esconde la barra del navegador). Solo
   Conversaciones fija su alto (body.vista-fija): ahí la lista y el hilo se desplazan cada uno por su lado. */
.app { display: grid; grid-template-columns: var(--ancho-lado) minmax(0, 1fr); min-height: 100dvh; align-items: start; }
.lado {
  background: var(--papel); border-right: 1px solid var(--linea); padding: 18px 12px; display: flex; flex-direction: column;
  gap: 4px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; z-index: 20;
}
.lado-arriba { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 18px; }
.yo-cel { display: none; border: none; background: none; padding: 0; }
.menu { display: flex; flex-direction: column; gap: 3px; }
.menu button {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: var(--radio-chico); border: none;
  background: none; font-weight: 600; color: var(--texto); text-align: left; min-height: 42px; white-space: nowrap;
}
.menu button .ico { color: var(--texto-2); }
.menu button:hover { background: var(--oscurecer); }
.menu button[aria-current="page"] { background: var(--rt-tinte); color: var(--rt-indigo); }
.menu button[aria-current="page"] .ico { color: var(--rt-indigo); }
.menu .contador {
  margin-left: auto; font-size: var(--t-chico); font-weight: 700; background: var(--rosa-tinta); color: var(--blanco);
  border-radius: 999px; padding: 0 8px; min-width: 22px; text-align: center;
}
.menu .separa { height: 1px; background: var(--linea); margin: 10px 6px; }
.yo {
  margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: var(--fondo);
}
.yo-datos { min-width: 0; flex: 1; }
.yo-datos b, .yo-datos small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo-datos b { font-size: var(--t-chico); }
.yo-datos small { font-size: var(--t-chico); color: var(--texto-2); }
.yo .icono-boton { width: 34px; height: 34px; }

.cuerpo { min-width: 0; position: relative; }
body.vista-fija .app { height: 100dvh; }
body.vista-fija .cuerpo { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.vista-fija .vista-llena { flex: 1; min-height: 0; height: auto; }
.vista { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 18px; max-width: 1280px; }
.vista-llena { padding: 0; max-width: none; height: 100%; }
.franja { background: var(--azul-tinte); color: var(--azul-tinta); padding: 10px 16px; font-size: var(--t-chico); font-weight: 600; }
.cargando { padding: 28px 32px; color: var(--texto-2); }
#errVista { margin: 0 32px; }
.t-vista { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.t-seccion { font-size: var(--t-medio); font-weight: 700; margin-top: 6px; }
.t-tarjeta { font-size: var(--t-normal); font-weight: 700; margin-bottom: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.t-tarjeta small { font-weight: 500; color: var(--texto-2); font-size: var(--t-chico); }
.cab-vista { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cab-vista > div { min-width: 0; flex: 1 1 320px; }
.cab-vista p { margin-top: 4px; }

/* inicio */
.saludo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.saludo h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.saludo p { margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi { background: var(--papel); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra-tarjeta); min-width: 0; }
.kpi span { display: block; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.kpi strong { display: block; font-size: var(--t-cifra); font-weight: 700; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi em { display: block; font-style: normal; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.kpi em.verde { color: var(--verde-tinta); }
.kpi em.naranja { color: var(--naranja-tinta); }
.kpi.boton-kpi { border: none; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.kpi.boton-kpi:hover { box-shadow: var(--sombra-flota); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.tarjeta { background: var(--papel); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra-tarjeta); min-width: 0; }
.grafica { min-height: 150px; }
.grafica.alta { min-height: 220px; }
.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafica .barra { fill: var(--rt-indigo); }
.grafica .barra.ultima { fill: var(--rt-violeta); }
.grafica .eje { fill: var(--texto-2); font-size: var(--t-chico); font-family: var(--letra); }
.grafica .cifra { fill: var(--texto); font-size: var(--t-chico); font-weight: 600; font-family: var(--letra); }
.grafica .linea-base { stroke: var(--perla-2); stroke-width: 1; }
.vivo { display: grid; gap: 4px; }
.vivo li button {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: none; background: none;
  padding: 8px; border-radius: var(--radio-chico); font-size: var(--t-chico); line-height: 1.35;
}
.vivo li button:hover:not(:disabled) { background: var(--oscurecer); }
.vivo li button:disabled { cursor: default; color: inherit; }
.vivo b { display: block; font-size: var(--t-chico); }
.vivo .texto-uno { color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vivo .hora { margin-left: auto; color: var(--texto-2); white-space: nowrap; }
.vivo .av { width: 30px; height: 30px; }
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.acceso {
  display: flex; gap: 12px; align-items: center; background: var(--papel); border: none; border-radius: var(--radio);
  padding: 16px; box-shadow: var(--sombra-tarjeta); text-align: left; min-width: 0;
}
.acceso:hover { box-shadow: var(--sombra-flota); }
.acceso .ico { width: 22px; height: 22px; color: var(--rt-indigo); }
.acceso .punto { width: 42px; height: 42px; border-radius: 12px; background: var(--rt-tinte); display: grid; place-items: center; flex: none; }
.acceso b { display: block; }
.acceso small { color: var(--texto-2); font-size: var(--t-chico); }

/* conversaciones: lista · hilo · ficha */
.conv { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; height: 100%; min-height: 0; background: var(--papel); }
.conv-lista { border-right: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; background: var(--papel); }
.conv-filtros { padding: 20px 14px 10px; display: grid; gap: 8px; border-bottom: 1px solid var(--linea); }
.fila-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fila-filtros select { flex: 1 1 140px; width: auto; }
.interruptor { display: flex; align-items: center; gap: 8px; font-size: var(--t-chico); color: var(--texto-2); }
.lista-chats { overflow-y: auto; min-height: 0; flex: 1; padding: 6px; }
.ch {
  display: flex; gap: 10px; align-items: center; padding: 10px 9px; border-radius: 12px; width: 100%; border: none;
  background: none; text-align: left; min-width: 0;
}
.ch:hover { background: var(--oscurecer); }
.ch[aria-current="true"] { background: var(--rt-tinte); }
.ch-texto { min-width: 0; flex: 1; }
.ch-arriba { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ch-arriba b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-normal); }
.ch-arriba small { color: var(--texto-2); font-size: var(--t-chico); white-space: nowrap; }
.ch-abajo { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.ch-abajo p { font-size: var(--t-chico); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ch .marca-humano { font-size: var(--t-chico); font-weight: 700; color: var(--naranja-tinta); background: var(--naranja-tinte); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.ch .marca-espera { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-vivo); flex: none; }
.vacio { padding: 24px 16px; color: var(--texto-2); text-align: center; }
.vacio.error-caja { margin: 12px; color: var(--rosa-tinta); }

.hilo { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--chat-fondo); }
.hilo-vacio { margin: auto; text-align: center; color: var(--texto-2); padding: 24px; display: grid; gap: 8px; justify-items: center; max-width: 420px; }
.hilo-vacio p:first-of-type { color: var(--texto); font-weight: 600; }
.hilo-lleno { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.hilo-tope { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.hilo-quien { min-width: 0; flex: 1 1 0; }
.hilo-tope .pastilla { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hilo-quien b, .hilo-quien small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hilo-quien small { color: var(--texto-2); font-size: var(--t-chico); }
.mensajes { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dia { align-self: center; background: var(--papel); color: var(--texto-2); font-size: var(--t-chico); font-weight: 600; border-radius: 8px; padding: 3px 10px; margin: 8px 0; }
.burbuja { max-width: min(78%, 560px); padding: 7px 10px 5px; border-radius: 10px; background: var(--burbuja-ella); box-shadow: var(--sombra-burbuja); white-space: pre-wrap; align-self: flex-start; }
.burbuja.sale { align-self: flex-end; background: var(--burbuja-bot); }
.burbuja.equipo { background: var(--burbuja-equipo); }
.burbuja .quien-dice { display: block; font-size: var(--t-chico); font-weight: 700; color: var(--rt-indigo); margin-bottom: 2px; }
.burbuja.sale:not(.equipo) .quien-dice { color: var(--verde-tinta); }
.burbuja .pie { display: block; text-align: right; font-size: var(--t-chico); color: var(--hora-burbuja); margin-top: 2px; }
.burbuja .pie.mal { color: var(--rosa-tinta); font-weight: 600; }
.burbuja .sin-texto { color: var(--texto-2); font-style: italic; }
.compositor { background: var(--papel); border-top: 1px solid var(--linea); padding: 10px 14px 12px; display: grid; gap: 8px; }
.barra-atencion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.barra-atencion span { flex: 1 1 200px; }
.escribir { display: flex; gap: 10px; align-items: flex-end; }
.escribir textarea { min-height: 46px; max-height: 40dvh; overflow-y: auto; border-radius: 22px; padding: 12px 16px; }
.aviso-ventana { background: var(--naranja-tinte); color: var(--naranja-tinta); border-radius: var(--radio-chico); padding: 9px 12px; font-size: var(--t-chico); font-weight: 600; }

.ficha { border-left: 1px solid var(--linea); padding: 20px 16px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; background: var(--papel); }
.ficha-quien { text-align: center; display: grid; justify-items: center; gap: 4px; }
.ficha-quien small { color: var(--texto-2); font-size: var(--t-chico); }
.ficha-datos { display: grid; gap: 16px; }
.ficha-datos h3 { font-size: var(--t-chico); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); font-weight: 700; margin-bottom: 6px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiquetas span { font-size: var(--t-chico); font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--morado-tinte); color: var(--morado-tinta); }
.datos { display: grid; gap: 6px; font-size: var(--t-chico); }
.datos div { display: flex; justify-content: space-between; gap: 10px; }
.datos dt, .datos span { color: var(--texto-2); }
.datos b { text-align: right; }

/* tablas */
.tabla-caja { overflow-x: auto; min-width: 0; }
.tabla-caja.tarjeta { padding: 6px 4px; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { font-size: var(--t-chico); font-weight: 700; color: var(--texto-2); white-space: nowrap; }
.tabla tr:last-child td { border-bottom: none; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td .acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tabla td select { min-height: 36px; padding: 6px 10px; width: auto; }
.tabla tr.pausado td { color: var(--texto-2); }
.persona { display: grid; gap: 1px; margin-right: 6px; }
.persona small { font-size: var(--t-chico); }
td .persona + .pastilla, td .pastilla + .pastilla { margin-top: 4px; display: inline-block; }
.tabla.permisos td:not(:first-child), .tabla.permisos th:not(:first-child) { text-align: center; }
.si { color: var(--verde-tinta); font-weight: 700; }
.no { color: var(--texto-2); }
.buscador { max-width: 460px; }
.mas { margin: 10px auto; display: flex; }

/* barras horizontales (temas, categorías): el largo es un <meter>, nunca un width en línea (DISENO §3) */
.barras-h { display: grid; gap: 10px; }
.barras-h li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--t-chico); }
.barras-h li span:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras-h b { font-variant-numeric: tabular-nums; }
meter { width: 100%; height: 10px; border-radius: 999px; border: none; background: var(--perla); -webkit-appearance: none; appearance: none; }
meter::-webkit-meter-bar { background: var(--perla); border: none; border-radius: 999px; height: 10px; }
meter::-webkit-meter-optimum-value { background: var(--rt-indigo); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--rt-indigo); border-radius: 999px; }

/* Club RT */
.lista-club { display: grid; gap: 10px; }
.item-club { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; padding: 14px; border-radius: 14px; background: var(--perla); }
.item-club.hecho { background: var(--papel); border: 1px solid var(--linea); }
.item-club-datos { display: grid; gap: 4px; min-width: 0; }
.item-club-datos small { font-size: var(--t-chico); }
.item-club-datos .pastilla { justify-self: start; white-space: normal; max-width: 100%; }   /* el aviso largo del Secretario medía 443 en un cel de 390 (8-oct) */
.item-club-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; grid-column: 1 / -1; }
.item-club-acciones label { display: grid; gap: 4px; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.item-club-acciones input { width: 150px; min-height: 40px; padding: 8px 10px; }
.item-club-acciones input[type=number] { width: 90px; }
.motivo { color: var(--naranja-tinta); font-weight: 600; font-size: var(--t-chico); }
.foto-ticket { width: 100%; max-width: 320px; height: auto; border-radius: 12px; background: var(--papel); grid-column: 1 / -1; }
.tickets-socia { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tickets-socia:empty { display: none; }
.ticket-mini { display: grid; gap: 4px; }
.reglas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.regla { display: flex; gap: 8px; align-items: flex-end; }
.regla label { display: grid; gap: 6px; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); flex: 1; min-width: 0; }
.regla input { min-height: 40px; }

/* Secretario Virtual (515 5000): filtros por área, la lista de áreas y las casillas de áreas de un usuario */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
  border: 1.5px solid var(--perla-2); background: var(--papel); color: var(--texto-2); font-weight: 600; font-size: var(--t-chico);
  border-radius: 999px; padding: 7px 14px; min-height: 36px;
}
.filtro:hover { border-color: var(--linea-2); color: var(--texto); }
.filtro[aria-pressed="true"] { background: var(--rt-tinte); border-color: var(--rt-tinte-2); color: var(--rt-indigo); }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.areas li { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 14px; background: var(--perla); min-width: 0; }
.areas li small { font-size: var(--t-chico); }
.areas li .pastilla { justify-self: start; white-space: normal; }
.kpis.compactos { margin-bottom: 14px; }
#centroSecretario > .boton-suave { margin-top: 12px; }
.casillas { display: grid; gap: 8px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio-campo); background: var(--perla); cursor: pointer; }
.casilla input { margin-top: 2px; flex: none; }
.casilla span { display: grid; gap: 2px; font-weight: 600; color: var(--texto); font-size: var(--t-normal); min-width: 0; }
.casilla small { font-weight: 400; font-size: var(--t-chico); }
.areas-campo { border: none; padding: 0; margin: 0; min-width: 0; }
.areas-campo legend { padding: 0; margin-bottom: 6px; }
.areas-boton { white-space: normal; text-align: left; max-width: 200px; }
/* con la columna de áreas, la tabla de usuarios no cabía entre 641 y ~740 px (medido 8-oct: 706 en una caja de 651):
   los botones de cada fila pueden partirse en dos renglones */
#usuarios .acciones-fila .boton-suave { white-space: normal; text-align: center; }
/* el nombre de un área no se parte a media palabra ("Administració|n": el body corta en cualquier parte, medido 8-oct) */
.celda-area { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* marcos (la Torre y el Panel RT Vendedores, que ya existen: frame-src con su origen exacto, D145) */
.marco-caja { padding: 10px; }
.marco iframe { display: block; width: 100%; height: 78dvh; border: none; border-radius: 12px; background: var(--papel); }
.marco.alto iframe { height: calc(100dvh - 190px); min-height: 520px; }

/* diálogos */
dialog { border: none; border-radius: 20px; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--papel); color: var(--texto); box-shadow: var(--sombra-flota); }
dialog::backdrop { background: var(--velo); }
.dialogo { padding: 24px; display: grid; gap: 14px; }
.dialogo h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.acciones.partidas { justify-content: space-between; }
.clave-temporal {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.375rem; font-weight: 700; letter-spacing: .04em;
  background: var(--perla); border-radius: var(--radio-campo); padding: 14px; text-align: center; user-select: all;
}

/* avisos flotantes */
.toasts { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; gap: 8px; z-index: 300; width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--texto); color: var(--papel); padding: 12px 16px; border-radius: 14px; font-size: var(--t-chico); box-shadow: var(--sombra-flota); }
.toast.clicable { cursor: pointer; }

.solo-cel, .solo-angosto { display: none; }

/* ── tamaños. La regla del tamaño va DESPUÉS de la base que cambia (D135). ── */

/* sin espacio para la ficha: se abre en un diálogo */
@media (max-width: 1180px) {
  .conv { grid-template-columns: 300px minmax(0, 1fr); }
  .ficha { display: none; }
  .solo-angosto { display: grid; }
}
@media (max-width: 1000px) {
  .dos-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1240px) {
  .dos-col.centro-col { grid-template-columns: minmax(0, 1fr); }
}

/* celular y tableta parada: el menú arriba, en una tira que se desliza */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
  .lado { border-right: none; border-bottom: 1px solid var(--linea); padding: 8px 0 0; overflow: visible; gap: 0; height: auto; }
  body.vista-fija .cuerpo { height: auto; min-height: 0; }
  .lado-arriba { padding: 2px 16px 6px; }
  .yo-cel { display: block; }
  .yo { display: none; }
  .menu { flex-direction: row; overflow-x: auto; gap: 4px; padding: 0 12px 8px; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu button { padding: 8px 12px; min-height: 38px; flex: none; }
  .menu .separa { display: none; }
  .vista { padding: 20px 16px 40px; }
  .vista-llena { padding: 0; }                     /* D135: va después de la de arriba, si no esta le gana */
  .cargando { padding: 20px 16px; }
  #errVista { margin: 0 16px; }
  .entrar-caja { grid-template-columns: minmax(0, 1fr); }
  .entrar-marca { padding: 28px 24px; gap: 16px; }
  .entrar-marca h1 { font-size: 1.625rem; }
  .entrar-chips { display: none; }
  .entrar-forma { padding: 28px 24px 32px; }
  .conv { grid-template-columns: minmax(0, 1fr); }
  .conv .hilo { display: none; }
  .conv.con-hilo .hilo { display: flex; }
  .conv.con-hilo .conv-lista { display: none; }
  .solo-cel { display: grid; }
  .hilo-tope { padding: 8px 10px; }
  .mensajes { padding: 12px 10px; }
  .burbuja { max-width: 88%; }
  .marco.alto iframe { height: 70dvh; min-height: 420px; }
  .t-vista { font-size: 1.5rem; }
  .saludo h1 { font-size: 1.625rem; }
}

/* celular: las tablas se vuelven tarjetas y cada dato dice qué es (D39) */
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi strong { font-size: var(--t-grande); }
  .tabla.tarjetas thead { display: none; }
  .tabla.tarjetas, .tabla.tarjetas tbody, .tabla.tarjetas tr, .tabla.tarjetas td { display: block; width: 100%; }
  .tabla.tarjetas tr { border-bottom: 1px solid var(--linea); padding: 10px 4px; }
  .tabla.tarjetas tr:last-child { border-bottom: none; }
  .tabla.tarjetas td { border: none; padding: 3px 10px; display: flex; gap: 10px; align-items: baseline; text-align: left; }
  .tabla.tarjetas td[data-etiqueta]::before {
    content: attr(data-etiqueta); flex: 0 0 104px; color: var(--texto-2); font-size: var(--t-chico); font-weight: 600;
  }
  .tabla.tarjetas td:empty { display: none; }
  .tabla.tarjetas td.num { text-align: left; }
  .tabla td .acciones-fila { justify-content: flex-start; }
  .barras-h li { grid-template-columns: minmax(0, 1fr) auto; }
  .barras-h li meter { grid-column: 1 / -1; grid-row: 2; }
  .acciones.partidas { justify-content: flex-end; }
  /* en el celular el estado del asistente ya lo dice la barra de abajo: la pastilla no le quita el lugar al nombre */
  .hilo-tope .pastilla { display: none; }
}

/* celular acostado (bajito): el chat necesita el alto. El logo se achica y la explicación de la barra se va (el estado ya
   lo dice la pastilla de arriba). Va DESPUÉS de las del celular (D135). */
@media (max-width: 860px) and (max-height: 500px) {
  .lado-arriba { padding: 0 16px 2px; }
  .lado-arriba .logo-chico { height: 22px; }
  .yo-cel .av { width: 28px; height: 28px; }
  .menu button { min-height: 34px; padding: 6px 10px; }
  .barra-atencion > span { display: none; }
  .compositor { padding: 6px 12px 8px; gap: 6px; }
}

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