/* ==========================================================================
   LeadSync - Base: reset, tipografia y utilidades
   El reset del navegador, la fuente y el fondo del body, la transicion de cambio de
   tema, las utilidades (.hidden, .ic), las barras de desplazamiento y el boton-icono.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {

  /* "Noto Color Emoji" va de último: gracias al unicode-range de su @font-face solo
     aplica a codepoints de emoji que las fuentes previas no tienen (evita las
     "cajitas" en Windows sin afectar dígitos/texto, que resuelven las fuentes de
     antes). Item 1 (heredado). */
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Noto Color Emoji";
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* Transición uniforme de colores al alternar el tema. La clase .theme-anim se
   añade a <html> solo durante el cambio (ver toggleTheme en ui.js) para que TODA
   la página cruce a la vez, sin discrepancias de duración entre elementos. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color var(--theme-t) ease, color var(--theme-t) ease,
    border-color var(--theme-t) ease, outline-color var(--theme-t) ease,
    text-decoration-color var(--theme-t) ease, fill var(--theme-t) ease,
    stroke var(--theme-t) ease, box-shadow var(--theme-t) ease,
    accent-color var(--theme-t) ease !important;
}
.hidden { display: none !important; }

/* item 49: acción que el rol actual no puede ejecutar. Clase aparte de .hidden porque a
   esa la gobiernan otras reglas (la papelera se oculta en "Mensajes guardados") y, al
   compartirla, volver a mostrar por un motivo revivía lo oculto por el otro. */
.role-hidden { display: none !important; }

/* Icono SVG genérico. flex:0 0 auto evita que se encoja dentro de contenedores
   flex (los iconos nunca deben deformarse). */
.ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* Scrollbars con color NEUTRO (igual en claro/oscuro) para que no salten al
   alternar el tema mientras el resto hace crossfade. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

/* Botón-icono (tema, acciones sin texto). */
.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  width: 34px;
  height: 34px;
  /* REDONDO, no cuadrado con las esquinas limadas (peticion suya). El boton es cuadrado y
     su dibujo es un icono centrado: el resalte del hover tiene que seguir la forma de lo
     que hay dentro, no la de la caja. Es ademas lo que hace WhatsApp con los suyos, y esta
     consola se mide con esa. */
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.icon-btn .ic {
  width: 20px;
  height: 20px;
}