/* Piezas comunes del chat, el panel y las cuentas: un solo juego de botones, campos, avisos, sellos, burbujas y
   rombo de señal, para que la burbuja del sitio, el panel y "Mi cuenta" se vean como un mismo producto.
   Va después de paginas.css y antes de chat.css / panel-*.css / cuenta.css. Colores y letras: tokens.css. */
:root {
  --ui-t: 0.9375rem;        /* texto normal de estas piezas */
  --ui-t-mini: 0.75rem;     /* autor de un mensaje, contadores */
  --ui-toque: 2.5rem;       /* alto mínimo de lo que se toca */
  --ui-pad: 1.25rem;        /* aire por dentro de los marcos */
  --ui-burbuja: 18px;
  --ui-linea: rgba(255, 255, 255, 0.24);
  --ui-sombra: 0 28px 70px rgba(0, 0, 0, 0.6);
}

@media (max-width: 760px), (pointer: coarse) {
  :root { --ui-toque: 2.75rem; } /* 44 px para el dedo */
}

@media (max-width: 760px) {
  :root { --ui-pad: 0.9rem; }
}

/* Base: se pone en la raíz de cada pieza (.chat, cada sección del panel, acceso) */
.ui { font-size: var(--ui-t); line-height: 1.45; }
.ui [hidden] { display: none !important; }
.ui p { max-width: none; color: inherit; }
.ui button { cursor: pointer; }
.ui button:disabled { opacity: 0.45; cursor: default; }
.ui :focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.ui-desliza { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gris) transparent; }

/* Sección del panel: título grande a la izquierda, frase de estado a la derecha */
.ui-seccion { margin-top: 5rem; scroll-margin-top: 3.5rem; } /* el título queda justo bajo la cabecera fija */
.ui-seccion__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1.5rem;
  margin-bottom: 1.25rem; }
.ui .ui-seccion__resumen { color: var(--arena-2); font-weight: 500; }
.ui .ui-seccion__bajada { max-width: 44rem; margin: -0.5rem 0 1.25rem; color: var(--arena-2); }

.ui-marco { border: 1px solid var(--raya-oscura); border-radius: var(--radio-m); background: var(--carbon); overflow: hidden; }

/* Fila "qué es | qué puedo hacer" (Avisos y Mi cuenta) */
.ui-fila { padding: 1.1rem var(--ui-pad); border-bottom: 1px solid var(--raya-oscura); }
.ui-fila:last-child { border-bottom: 0; }
.ui .ui-fila h3 { margin: 0; font: 600 1.0625rem/1.25 var(--letra-texto); letter-spacing: 0; color: var(--hueso); }
.ui .ui-fila__nota { margin-top: 0.2rem; color: var(--gris); font-size: var(--t-chico); }

/* Botones en pastilla */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: var(--ui-toque);
  padding: 0.4rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 var(--ui-t)/1.1 var(--letra-texto);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ui-btn--naranja { background: var(--naranja); color: var(--tinta); }
.ui-btn--naranja:not(:disabled):hover { background: var(--naranja-claro); }
.ui-btn--arena { background: var(--arena); color: var(--tinta); }
.ui-btn--arena:not(:disabled):hover { background: var(--papel); }
.ui-btn--linea { background: none; border-color: var(--ui-linea); color: var(--hueso); }
.ui-btn--linea:not(:disabled):hover { border-color: var(--hueso); }
.ui-btn--peligro { background: none; border-color: var(--naranja); color: var(--naranja-claro); }
.ui-btn--peligro:not(:disabled):hover { border-color: var(--naranja-claro); }
.ui-btn--texto { padding-inline: 0.25rem; background: none; color: var(--arena-2); text-decoration: underline; }
.ui-btn--texto:hover { color: var(--hueso); }
.ui-btn--ancho { width: 100%; }

/* Campos: la caja del chat, la respuesta del panel y los campos de cuenta y acceso */
.ui-caja,
.ui .campo input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--ui-toque);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--raya-oscura);
  border-radius: var(--radio-s);
  background: var(--carbon-2);
  color: var(--hueso);
  font: inherit;
  font-size: 1rem; /* 16 px: el celular no hace zoom al escribir */
  line-height: 1.4;
}

.ui .ui-caja:focus,
.ui .campo input:focus { border-color: var(--naranja); outline: 0; box-shadow: 0 0 0 1px var(--naranja); }
.ui-caja::placeholder { color: var(--gris); }
.ui .campo label { color: var(--arena-2); }

/* Texto de estado (guardando, listo, error) y aviso de algo que falló: filo naranja */
.ui .ui-estado { color: var(--arena-2); font-size: var(--t-chico); line-height: 1.35; }
.ui .ui-estado--error { color: var(--naranja-claro); font-weight: 600; }

.ui .ui-aviso {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radio-s);
  box-shadow: inset 0 0 0 1.5px var(--naranja);
  color: var(--hueso);
  font-weight: 500;
}

.ui-aviso a,
.ui-enlace { color: var(--naranja-claro); font-weight: 600; text-decoration: underline; }

/* Sello: estado de una conversación o de un correo */
.ui-sello { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--carbon-2); color: var(--hueso);
  font-size: var(--t-chico); font-weight: 600; white-space: nowrap; }
.ui-sello[data-estado="esperando_soporte"] { background: var(--naranja); color: var(--tinta); }
.ui-sello[data-estado="con_soporte"],
.ui-sello[data-estado="si"] { background: var(--arena); color: var(--tinta); }
.ui-sello[data-estado="no"] { background: none; box-shadow: inset 0 0 0 1.5px var(--naranja); color: var(--naranja-claro); }

/* Rombo de "atención en la vía": solo el filo = nada pendiente; naranja lleno = hay algo que atender */
.ui-rombo { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--gris); transform: rotate(45deg); }
.ui-rombo b { transform: rotate(-45deg); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.ui-rombo--lleno { background: var(--naranja); box-shadow: none; color: var(--tinta); }
.ui-rombo--filo { box-shadow: inset 0 0 0 1.5px var(--naranja); }

/* Marca "IA" y rayas de carril (cargando / escribiendo) */
.ui-ia { display: inline-block; padding: 0 0.3rem; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--naranja-claro);
  color: var(--naranja-claro); font: 600 0.6875rem/1.35 var(--letra-app); letter-spacing: 0.04em; }
.ui-rayas { display: flex; gap: 4px; }
.ui-rayas i { width: 9px; height: 3px; border-radius: 2px; background: var(--naranja-claro); animation: ui-raya 1.1s ease-in-out infinite; }
.ui-rayas i:nth-child(2) { animation-delay: 0.16s; }
.ui-rayas i:nth-child(3) { animation-delay: 0.32s; }

@keyframes ui-raya {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Hilo de mensajes. Visitante en naranja, asistente oscuro con la marca "IA", persona del equipo en arena.
   data-lado dice quién mira: "visitante" (burbuja del sitio) o "equipo" (panel); lo propio va a la derecha. */
.ui-hilo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem var(--ui-pad); }
.ui-msj { flex: none; display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; gap: 0.2rem;
  max-width: min(88%, 60ch); }
.ui-msj__autor,
.ui-msj__nota { display: flex; align-items: center; gap: 0.4rem; padding-inline: 0.3rem; color: var(--arena-2);
  font-size: var(--ui-t-mini); font-weight: 600; }
.ui-msj__autor time { color: var(--gris); font-weight: 400; }
.ui .ui-msj__texto { padding: 0.55rem 0.8rem; border-radius: var(--ui-burbuja) var(--ui-burbuja) var(--ui-burbuja) 6px;
  background: var(--carbon-2); white-space: pre-wrap; overflow-wrap: anywhere; }

.ui-hilo[data-lado="visitante"] .ui-msj--visitante,
.ui-hilo[data-lado="equipo"] .ui-msj--asistente,
.ui-hilo[data-lado="equipo"] .ui-msj--soporte { align-self: flex-end; align-items: flex-end; }
.ui-hilo[data-lado="visitante"] .ui-msj--visitante .ui-msj__texto,
.ui-hilo[data-lado="equipo"] .ui-msj--asistente .ui-msj__texto,
.ui-hilo[data-lado="equipo"] .ui-msj--soporte .ui-msj__texto {
  border-radius: var(--ui-burbuja) var(--ui-burbuja) 6px var(--ui-burbuja); }

.ui .ui-msj--visitante .ui-msj__texto { background: var(--naranja); color: var(--tinta); }
.ui .ui-msj--soporte .ui-msj__texto { background: var(--arena); color: var(--tinta); }
.ui-msj--soporte .ui-msj__autor { color: var(--hueso); }
.ui-msj--aviso { align-self: center; align-items: center; max-width: 34ch; }
.ui .ui-msj--aviso .ui-msj__texto { padding: 0.1rem 0.3rem; border-radius: 0; background: none; color: var(--arena-2);
  font-size: var(--t-chico); text-align: center; }
.ui .ui-msj--fallida .ui-msj__texto { background: none; color: var(--hueso); box-shadow: inset 0 0 0 1.5px var(--naranja); }
.ui-msj--fallida .ui-msj__nota { color: var(--naranja-claro); }
.ui .ui-msj--escribiendo .ui-msj__texto { display: flex; align-items: center; gap: 0.6rem; color: var(--arena-2); font-size: var(--t-chico); }

/* Superficie clara (arena) para las preguntas de confirmar: cerrar una conversación, borrar la cuenta */
.ui-claro { background: var(--arena); color: var(--tinta); }
.ui-claro :focus-visible { outline-color: var(--naranja-tinta); }
.ui-claro .ui-btn--linea { border-color: var(--tinta-suave); color: var(--tinta); }
.ui-claro .ui-btn--linea:not(:disabled):hover { border-color: var(--tinta); }
.ui-claro .ui-btn--naranja { background: var(--tinta); color: var(--hueso); }
.ui-claro .ui-btn--naranja:not(:disabled):hover { background: #000; }
.ui .ui-claro .campo label,
.ui .ui-claro .ui-estado { color: var(--tinta-suave); }
.ui .ui-claro .ui-estado--error { color: var(--naranja-tinta); }
.ui .ui-claro .campo input { background: var(--papel); border-color: var(--tinta-suave); color: var(--tinta); }
.ui .ui-claro .campo input:focus { border-color: var(--naranja-tinta); box-shadow: 0 0 0 1px var(--naranja-tinta); }

/* Icono de quién escribe: robot = asistente IA, auriculares = persona del equipo, silueta = visitante. */
.ui-avatar { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; }
.ui-avatar svg { width: 1rem; height: 1rem; }
.ui-avatar--asistente { background: var(--carbon-2); color: var(--naranja-claro); box-shadow: inset 0 0 0 1px var(--raya-oscura); }
.ui-avatar--soporte { background: var(--arena); color: var(--tinta); }
.ui-avatar--visitante { background: var(--naranja); color: var(--tinta); }