/*
 * Estilos de la entrada «Histórico · En este dispositivo».
 *
 * Mismas reglas que `bubble.css`, y por el mismo motivo: esto se inyecta dentro
 * de una aplicación ajena.
 *
 *   - Todo cuelga de `.smh-root` o lleva el prefijo `.smh-`. Ni un selector de
 *     elemento suelto: un `a{}` aquí repinta el webmail entero.
 *   - Todas las propiedades explícitas. Este árbol hereda de un CSS que no
 *     controlamos y que cambia entre versiones de Bulwark.
 *   - Las variables van locales a `.smh-root`, nunca en `:root`, para no pisar
 *     las de Bulwark si coincide algún nombre.
 *
 * ESQUINA INFERIOR IZQUIERDA, a propósito: la burbuja del copiloto ocupa la
 * derecha (`right: 20px; bottom: 20px`). Dos elementos flotantes en la misma
 * esquina se tapan, y el que pierde es siempre el que se añadió después.
 *
 * La CSP de Bulwark trae `style-src 'self' 'unsafe-inline'` y esta hoja se
 * sirve desde el mismo origen: pasa por 'self' sin tocar la política.
 */

.smh-root {
  --smh-fg: #14181f;
  --smh-fg-soft: #5b6472;
  --smh-bg: #ffffff;
  --smh-borde: #dde2ea;
  --smh-acento: #5f3dc4; /* el morado de «local» del escritorio: misma familia */
  --smh-sombra: 0 12px 32px rgba(16, 24, 40, 0.18);
  --smh-radio: 12px;

  /* Tipografía propia y no heredada: dentro de Bulwark la fuente base cambia
     por pantalla, y esta entrada debe verse igual en todas. */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--smh-fg);

  position: fixed;
  /*
   * ESTA ESQUINA NO ESTABA LIBRE. Medido contra produccion el 2026-09-09 en
   * 1920x1080: con `left:20 bottom:20` esta tarjeta ocupaba x 20-175,
   * y 1002-1060, encima del carril de iconos de Bulwark, y dejaba sin poder
   * pulsar el boton "Storage" (12-44, 988-1020) y el de la cuenta (y~1048).
   * El centro de los dos caia dentro de la tarjeta.
   *
   * Se apila sobre la burbuja en la esquina derecha, que en escritorio si esta
   * libre por encima de la barra de acciones del redactor: la burbuja esta en
   * bottom 90, mide 52 de alto y se dejan 12 de separacion.
   * Subirla por la izquierda se descarto: el alto de la columna de carpetas
   * depende de cuantas tenga cada cuenta, asi que cualquier holgura que
   * funcione con este buzon deja de funcionar con uno que tenga mas.
   */
  right: 20px;
  left: auto;
  bottom: 154px;
  /* Por debajo del techo de 32 bits y del mismo orden que la burbuja, para que
     un modal de Bulwark siga pudiendo taparlo si de verdad lo necesita. */
  z-index: 2147482999;
}

/* En movil la burbuja se va a la izquierda para librar la barra de navegacion;
   esta tarjeta la acompaña y se apila encima: 150 + 52 + 12 (Sprint-011). */
@media (max-width: 767px) {
  .smh-root {
    left: 20px;
    right: auto;
    bottom: 214px;
  }
}

/*
 * Las dos piezas del sidecar comparten esquina en escritorio, asi que cuando el
 * panel del copiloto esta desplegado esta tarjeta se aparta. El selector solo
 * mira y solo pinta cosas nuestras: `.cpx-panel` es del sidecar y `.smh-root`
 * tambien, de modo que no se toca ni un nodo de Bulwark.
 */
body:has(.cpx-panel:not([hidden])) .smh-root {
  display: none;
}

/* El tema lo decide Bulwark con una clase en <html> (light/dark), no el
   sistema: con prefers-color-scheme, un usuario con Windows en oscuro y el
   webmail en claro veía esta pieza oscura sobre un webmail claro. */
html.dark .smh-root,
html.dark .smh-dialogo {
  --smh-fg: #e7e9ec;
  --smh-fg-soft: #99a1ac;
  --smh-bg: #1e2126;
  --smh-borde: #2e333a;
  --smh-acento: #b197ff;
  --smh-sombra: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.smh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid var(--smh-borde);
  border-left: 3px solid var(--smh-acento);
  border-radius: var(--smh-radio);
  background: var(--smh-bg);
  box-shadow: var(--smh-sombra);
  color: var(--smh-fg);
  text-decoration: none;
  cursor: pointer;
  max-width: 260px;
}

.smh-item:hover,
.smh-item:focus-visible {
  border-color: var(--smh-acento);
  text-decoration: none;
  color: var(--smh-fg);
  outline: none;
}

.smh-item:focus-visible {
  /* Un foco visible propio: el de Bulwark puede no verse sobre este fondo, y
     esta entrada tiene que poder alcanzarse con el teclado. */
  box-shadow: var(--smh-sombra), 0 0 0 2px var(--smh-acento);
}

.smh-ico {
  font-size: 18px;
  line-height: 1;
  flex: none;
}

.smh-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.smh-t {
  font-size: 14px;
  font-weight: 650;
  color: var(--smh-fg);
}

/* El rótulo que evita la confusión entera: esto NO es una carpeta del servidor
   y seguirá ahí aunque el servidor no. */
.smh-s {
  font-size: 11px;
  color: var(--smh-fg-soft);
  white-space: nowrap;
}

.smh-aviso {
  box-sizing: border-box;
  margin-top: 8px;
  padding: 12px 14px;
  max-width: 260px;
  border: 1px solid var(--smh-borde);
  border-radius: var(--smh-radio);
  background: var(--smh-bg);
  box-shadow: var(--smh-sombra);
}

.smh-aviso[hidden] {
  display: none !important;
}

.smh-aviso-t {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--smh-fg);
}

.smh-aviso-d {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--smh-fg-soft);
}

.smh-aviso-x {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--smh-borde);
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--smh-fg);
  cursor: pointer;
}

.smh-aviso-x:hover {
  border-color: var(--smh-acento);
}

/* En pantallas estrechas la entrada estorbaría sobre el listado de correo. El
   webmail en el móvil no puede abrir una aplicación de escritorio de todos
   modos, así que ahí no aporta nada y se retira. */
@media (max-width: 640px) {
  .smh-root {
    display: none;
  }
}

/* ------------------------------------------------------------------------
 * La fila en la barra de Configuración. Su aspecto lo copia historico.js de
 * una fila hermana de Bulwark; aquí solo se decide cuándo NO se enseña.
 * --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .smh-nav {
    display: none;
  }
}

/* ------------------------------------------------------------------------
 * El diálogo que dice qué es el Histórico antes de abrir nada.
 * --------------------------------------------------------------------- */
.smh-dialogo {
  --smh-fg: #14181f;
  --smh-fg-soft: #5b6472;
  --smh-bg: #ffffff;
  --smh-borde: #dde2ea;
  --smh-acento: #5f3dc4;
  --smh-sombra: 0 12px 32px rgba(16, 24, 40, 0.18);
  --smh-radio: 12px;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--smh-fg);

  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(16, 24, 40, 0.45);
  z-index: 2147483000;
}

.smh-caja {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border: 1px solid var(--smh-borde);
  border-top: 3px solid var(--smh-acento);
  border-radius: var(--smh-radio);
  background: var(--smh-bg);
  box-shadow: var(--smh-sombra);
}

.smh-caja-t {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--smh-fg);
}

.smh-caja-d {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--smh-fg-soft);
}

.smh-caja-acc {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.smh-b {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--smh-borde);
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--smh-fg);
  text-decoration: none;
  cursor: pointer;
}

.smh-b:hover,
.smh-b:focus-visible {
  border-color: var(--smh-acento);
  color: var(--smh-fg);
  text-decoration: none;
  outline: none;
}

.smh-b1 {
  border-color: var(--smh-acento);
  background: var(--smh-acento);
  color: #ffffff;
}

.smh-b1:hover,
.smh-b1:focus-visible {
  color: #ffffff;
  box-shadow: 0 0 0 2px var(--smh-bg), 0 0 0 4px var(--smh-acento);
}

.smh-caja-aviso {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--smh-borde);
  font-size: 12px;
  color: var(--smh-fg);
}

.smh-caja-aviso[hidden] {
  display: none !important;
}