/* Lo propio del webmail real sobre la base de la demo (propuesta Suave). */

/* Fila de carga mientras llegan los correos */
.hilo.esqueleto { pointer-events: none; }
.hilo.esqueleto .av { background: var(--sup2); color: transparent; }
.hilo.esqueleto i { display: block; height: 10px; margin: 6px 0; border-radius: 6px; background: var(--sup2); animation: latido 1.2s ease-in-out infinite; }
.hilo.esqueleto i:nth-child(1) { width: 40%; } .hilo.esqueleto i:nth-child(2) { width: 75%; } .hilo.esqueleto i:nth-child(3) { width: 90%; }
@keyframes latido { 50% { opacity: .45; } }
.wm-lista-cab { display: flex; align-items: baseline; gap: .6rem; }
.wm-lista-cab .b-ico { margin-left: auto; align-self: center; }
.wm-mas { display: block; margin: .6rem auto 1.2rem; }

/* El correo HTML va en un marco blanco sin scripts */
.wm-marco { display: block; width: 100%; min-height: 120px; margin: 0 0 1rem; border: 0; border-radius: 12px; background: #fff; }
.wm-msj .wm-marco { width: calc(100% - 3rem); margin-left: 3rem; }
.wm-msj-cab { cursor: default; }
.wm-msj-cuerpo { display: block; }
.wm-bloqueo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .8rem 3rem; padding: .55rem .8rem; border-radius: 12px; background: var(--sup2); color: var(--suave); font-size: 13px; }
.wm-bloqueo .i { flex: none; }
.wm-desuscribir { margin: .4rem 0 0 3rem; font-size: 12.5px; }
.wm-desuscribir a { color: var(--acento-fuerte); }
.wm-adjuntos a.adj { text-decoration: none; color: inherit; }
.wm-adjuntos .adj .mini { margin-left: .3rem; opacity: .6; }
.wm-redactar-caja .adj .b-ico.mini { width: 26px; height: 26px; margin-left: .2rem; }
.b-sec.chico, .b-texto.chico { min-height: 30px; padding: .2rem .6rem; font-size: 12.5px; }
.campo .b-texto.chico { margin-left: auto; flex: none; }

/* Mover a carpeta */
.wm-lista-mover { display: grid; gap: 4px; }
.b-fila { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 42px; padding: .4rem .7rem; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.b-fila:hover, .b-fila:focus-visible { background: var(--hover); }

/* Ajustes: muestras de paleta */
.wm-paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; margin: .8rem 0 .2rem; }
.wm-muestra { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--sup); color: inherit; font: 600 13px var(--fuente); cursor: pointer; }
.wm-muestra i { width: 26px; height: 26px; flex: none; border-radius: 8px; background: linear-gradient(135deg, var(--m) 0 55%, var(--mf) 55%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.wm-muestra[aria-checked="true"] { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.wm-muestra.personal input { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.wm-logo-actual { display: flex; align-items: center; min-height: 64px; margin: .6rem 0; }
.wm-logo-actual img { max-height: 56px; max-width: 220px; }
.wm-marca.con-logo .logo { max-height: 34px; max-width: 120px; object-fit: contain; }

/* Doble factor */
.wm-pasos { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .8rem; }
.wm-qr { display: grid; place-items: center; margin: .6rem 0; padding: .8rem; border-radius: 14px; background: #fff; width: max-content; }
.wm-qr img { display: block; image-rendering: pixelated; }
.wm-pasos code, .wm-seguridad code { font-family: var(--fuente-mono); word-break: break-all; }
.wm-acceso-caja .b-texto { align-self: center; }

@media (max-width: 759px) {
  .wm-msj .wm-marco { width: 100%; margin-left: 0; }
  .wm-bloqueo, .wm-desuscribir { margin-left: 0; }
}