/* ==========================================================================
   vjs-movil.css — el correo en el celular, estilo Outlook con la marca VJS
   (23-sep-2026). Pedido de Andrés: «que se vea como el del PC, tipo Outlook».

   - Barra superior negra (la misma del programa de escritorio) con el buscador
     dentro, círculo con las iniciales del usuario para abrir las carpetas.
   - Cada correo con el círculo de iniciales del remitente.
   - Botón amarillo «Redactar» y barra inferior: Correo, Agenda, CRM, Chat, Más
     (la arma vjs-movil.js).
   Solo aplica al ancho de teléfono de Elastic (≤ 480 px); el PC no cambia.
   ========================================================================== */
:root{
  --m-ink:#111820; --m-ink2:#1b2530; --m-gold:#f4c400; --m-gold-bg:#fff8d6;
  --m-line:#edf0f4; --m-txt:#1c2530; --m-muted:#6a7683; --m-muted2:#9aa5b1;
  --m-tab:60px;
}
/* fuera del teléfono la barra inferior y los círculos no existen */
#vjs-tabbar, .vjs-av{ display:none; }

@media screen and (max-width:480px){
  html, body{ background:#fff !important; }
  body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important; }

  /* con la barra inferior visible, la página termina encima de ella */
  body.vjs-tabs #layout{ height:calc(100% - var(--m-tab) - env(safe-area-inset-bottom)) !important; }

  /* ---------------- Encabezados negros, como la barra del PC ---------------- */
  #layout > div > .header{
    background:var(--m-ink) !important; background-image:none !important; border:0 !important;
    height:56px !important; min-height:56px !important; line-height:56px !important;
    padding:0 4px !important; justify-content:flex-start !important; box-shadow:none !important;
  }
  #layout > div > .header .header-title{
    color:#fff !important; font-size:19px !important; font-weight:700 !important; letter-spacing:-.2px;
    text-align:left !important; margin:0 !important; padding:0 6px !important;
  }
  #layout-sidebar > .header .header-title{ font-size:15px !important; font-weight:600 !important; color:#e8edf2 !important; }
  #layout > div > .header a.button, #layout > div > .header a.button:before,
  #layout > div > .header .toolbar a, #layout > div > .header .toolbar a:before{ color:#fff !important; }
  #layout > div > .header a.button{ border-radius:50% !important; }
  #layout > div > .header a.button:hover, #layout > div > .header a.button:active{ background:rgba(255,255,255,.10) !important; }
  #layout > div > .header a.button.disabled:before{ color:rgba(255,255,255,.35) !important; }

  /* el menú de hamburguesa pasa a «Más» en la barra inferior */
  body.vjs-tabs #layout-list > .header a.task-menu-button{ display:none !important; }

  /* el botón de carpetas es el círculo con las iniciales del usuario */
  #layout-list > .header a.back-sidebar-button{ width:48px !important; min-width:48px !important; padding:0 !important;
    display:flex !important; align-items:center; justify-content:center; background:transparent !important; }
  #layout-list > .header a.back-sidebar-button[data-ini]:before{
    content:attr(data-ini) !important; font-family:inherit !important; font-weight:700 !important; font-size:14px !important;
    width:34px !important; height:34px !important; line-height:34px !important; margin:0 !important; float:none !important;
    border-radius:50%; background:var(--m-gold); color:var(--m-ink) !important; text-align:center; letter-spacing:.3px;
  }

  /* ---------------- Buscador dentro de la franja negra ---------------- */
  #layout-list .searchbar{
    background:var(--m-ink) !important; border:0 !important; border-radius:0 !important; height:56px !important; min-height:56px !important;
    padding:0 6px 10px 12px !important; align-items:center !important; box-shadow:0 1px 0 rgba(0,0,0,.08);
  }
  #layout-list .searchbar form{ height:40px !important; background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.08) !important; border-radius:20px !important; }
  #layout-list .searchbar form:focus-within{ background:#fff !important; border-color:var(--m-gold) !important; box-shadow:none !important; }
  #layout-list .searchbar form:before{ color:rgba(255,255,255,.6) !important; margin-left:.85rem !important; }
  #layout-list .searchbar form:focus-within:before{ color:var(--m-muted) !important; }
  #layout-list .searchbar input{ color:#fff !important; font-size:16px !important; }
  #layout-list .searchbar input::placeholder{ color:rgba(255,255,255,.55) !important; }
  #layout-list .searchbar form:focus-within input{ color:var(--m-txt) !important; }
  #layout-list .searchbar form:focus-within input::placeholder{ color:var(--m-muted2) !important; }
  #layout-list .searchbar a.button:before, #layout-list .searchbar a.options:before,
  #layout-list .searchbar .button:before{ color:rgba(255,255,255,.75) !important; height:46px !important; line-height:46px !important; }
  #layout-list .searchbar a.unread.selected:before, #layout-list .searchbar a.button.selected:before{ color:var(--m-gold) !important; }

  /* ---------------- Lista de correos ---------------- */
  #layout-list, #messagelist-content, #messagelist{ background:#fff !important; }
  #messagelist tbody tr.message > td,
  #messagelist tbody tr.message.unread > td,
  #messagelist tbody tr.message:hover > td{ background:#fff !important; border-bottom:1px solid var(--m-line) !important; box-shadow:none !important; }
  #messagelist tbody tr.message.selected > td,
  #messagelist tbody tr.message.focused > td,
  #messagelist tbody tr.message.unread.selected > td{ background:var(--m-gold-bg) !important; }
  #messagelist tbody tr.message > td.flags{ background:transparent !important; border:0 !important; }

  #messagelist tbody tr.message > td.subject{ position:relative; padding:12px 14px 12px 70px !important; line-height:1.35 !important; }
  /* barra amarilla a la izquierda de los no leídos */
  #messagelist tbody tr.message.unread > td.subject{ box-shadow:inset 3px 0 0 var(--m-gold) !important; }

  .vjs-av{ display:flex; position:absolute; left:14px; top:13px; width:42px; height:42px; border-radius:50%;
    align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:600; letter-spacing:.3px;
    pointer-events:none; }
  .vjs-av.c0{ background:#2f5d8a; } .vjs-av.c1{ background:#1a7f64; } .vjs-av.c2{ background:#8a5a00; }
  .vjs-av.c3{ background:#6d4a9c; } .vjs-av.c4{ background:#b5473b; } .vjs-av.c5{ background:#0f7c88; }
  .vjs-av.c6{ background:#56606b; } .vjs-av.c7{ background:#3d6b2f; }
  .vjs-av.vjs{ background:var(--m-ink); color:var(--m-gold); }

  #messagelist tr.message td.subject span.fromto{ padding-left:0 !important; }
  #messagelist tr.message td.subject .fromto,
  #messagelist tr.message td.subject .fromto span{ font-size:15.5px !important; font-weight:500 !important; color:var(--m-txt) !important; }
  #messagelist tr.message.unread td.subject .fromto,
  #messagelist tr.message.unread td.subject .fromto span{ font-weight:700 !important; color:var(--m-ink) !important; }
  #messagelist tr.message td.subject span.date{ font-size:12.5px !important; color:var(--m-muted2) !important; font-weight:500 !important; }
  #messagelist tr.message.unread td.subject span.date{ color:#8a6a00 !important; font-weight:700 !important; }
  #messagelist tr.message td.subject span.subject,
  #messagelist tr.message td.subject span.subject a{ font-size:14.5px !important; color:var(--m-muted) !important; font-weight:400 !important; }
  #messagelist tr.message.unread td.subject span.subject,
  #messagelist tr.message.unread td.subject span.subject a{ color:var(--m-txt) !important; font-weight:600 !important; }
  /* el punto de estado sobra: lo dicen la negrilla y la barra amarilla */
  #messagelist tr.message td.subject span.msgicon.status:not(.replied):not(.forwarded){ display:none !important; }
  #messagelist tr.message td.subject span.msgicon.status.replied:before,
  #messagelist tr.message td.subject span.msgicon.status.forwarded:before{ color:var(--m-muted2) !important; }
  #messagelist tr.message td.flags span.attachment span:before,
  #messagelist tr.message td.flags span.attachment:before{ color:var(--m-muted2) !important; }

  /* modo selección: el círculo cede su lugar a la casilla */
  #messagelist.withselection .vjs-av{ display:none; }
  #messagelist.withselection tr.message > td.subject{ padding-left:14px !important; }

  /* ---------------- Paginación discreta ---------------- */
  #layout-list > .footer.pagenav{ background:#fff !important; border-top:1px solid var(--m-line) !important;
    height:40px !important; min-height:40px !important; }
  #layout-list > .footer.pagenav a:before{ line-height:40px !important; color:var(--m-muted) !important; }
  #layout-list > .footer.pagenav a.disabled:before{ color:#d5dbe2 !important; }
  #layout-list > .footer.pagenav .pagenav-text{ color:var(--m-muted2) !important; font-size:12.5px !important; text-align:center; }

  /* ---------------- Botón «Redactar» ---------------- */
  .floating-action-buttons{ right:16px !important; bottom:56px !important; }
  .floating-action-buttons a.button{ width:auto !important; height:52px !important; border-radius:26px !important;
    padding:0 20px 0 16px !important; margin:0 !important; display:flex !important; align-items:center; gap:8px;
    background:var(--m-gold) !important; color:var(--m-ink) !important; opacity:1 !important; float:none !important;
    box-shadow:0 8px 22px rgba(17,24,32,.28) !important; text-decoration:none !important; }
  .floating-action-buttons a.button:before{ width:auto !important; height:auto !important; line-height:1 !important;
    margin:0 !important; font-size:18px !important; color:var(--m-ink) !important; }
  .floating-action-buttons a.button .inner{ display:inline !important; font-size:15px; font-weight:700; letter-spacing:.1px; }

  /* ---------------- Carpetas: cajón lateral, como Outlook ----------------
     Se abre por encima de la lista (que queda de fondo, oscurecida) en vez de
     ocupar toda la pantalla. Arriba la cuenta; luego Favoritos (Entrada,
     Borradores, Enviados, los arma vjs-movil.js) y todas las carpetas. */
  body.task-mail.vjs-cajon #layout > #layout-list.hidden{ display:flex !important; }
  body.task-mail #layout > #layout-sidebar:not(.hidden){
    position:fixed !important; top:0; left:0; bottom:0; z-index:9750;
    width:86% !important; max-width:340px !important; min-width:0 !important;
    display:flex !important; flex-direction:column; background:#fff !important;
    box-shadow:6px 0 28px rgba(8,12,18,.22) !important; animation:vjs-cajon-entra .2s ease-out; }
  body.vjs-tabs.task-mail #layout > #layout-sidebar:not(.hidden){ bottom:calc(var(--m-tab) + env(safe-area-inset-bottom)); }
  @keyframes vjs-cajon-entra{ from{ transform:translateX(-100%); } to{ transform:none; } }
  #vjs-velo{ display:none; position:fixed; inset:0; z-index:9740; background:rgba(17,24,32,.42);
    -webkit-tap-highlight-color:transparent; animation:vjs-velo-entra .2s ease-out; }
  body.vjs-cajon #vjs-velo{ display:block; }
  @keyframes vjs-velo-entra{ from{ opacity:0; } to{ opacity:1; } }

  /* encabezado blanco: la cuenta y, debajo, la empresa */
  #layout > #layout-sidebar > .header{
    background:#fff !important; height:auto !important; min-height:0 !important; line-height:1.25 !important;
    padding:calc(18px + env(safe-area-inset-top)) 8px 14px 20px !important; border-bottom:1px solid var(--m-line) !important; align-items:center !important; }
  #layout > #layout-sidebar > .header .header-title{
    color:var(--m-ink) !important; font-size:16px !important; font-weight:600 !important; padding:0 !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; line-height:1.3 !important; }
  #layout > #layout-sidebar > .header .header-title:after{ content:"Grupo VJS"; display:block; margin-top:2px;
    font-size:13px; font-weight:500; color:var(--m-muted); letter-spacing:.2px; }
  /* se cierra tocando fuera o deslizando a la izquierda, como en Outlook */
  #layout > #layout-sidebar > .header a.back-list-button{ display:none !important; }
  #layout > #layout-sidebar > .header a.button, #layout > #layout-sidebar > .header a.button:before{ color:var(--m-muted) !important; }
  #layout > #layout-sidebar > .header a.button:hover, #layout > #layout-sidebar > .header a.button:active{ background:#f1f3f6 !important; }

  #layout-sidebar, #folderlist-content, #layout-sidebar .folderlist{ background:#fff !important; }
  #layout-sidebar .folderlist{ padding:4px 0 16px !important; }
  #layout-sidebar .folderlist li{ border:0 !important; background:transparent !important; box-shadow:none !important; }
  #layout-sidebar .folderlist li a{ height:auto !important; min-height:48px !important; line-height:48px !important;
    padding:0 60px 0 58px !important; margin:0 !important; width:auto !important; box-sizing:border-box !important;
    border:0 !important; border-radius:0 !important; position:relative !important;
    font-size:16px !important; font-weight:400 !important; color:#2b3440 !important; box-shadow:none !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #layout-sidebar .folderlist li a:before{ position:absolute !important; left:20px; top:0; width:24px !important;
    margin:0 !important; text-align:center; font-size:19px !important; color:#6a7683 !important;
    line-height:48px !important; height:48px !important; }
  #layout-sidebar .folderlist li ul li a{ padding-left:80px !important; }
  #layout-sidebar .folderlist li ul li a:before{ left:42px; }
  #layout-sidebar .folderlist li ul li ul li a{ padding-left:102px !important; }
  #layout-sidebar .folderlist li ul li ul li a:before{ left:64px; }
  #layout-sidebar .folderlist li a:active{ background:#f4f6f8 !important; }
  #layout-sidebar .folderlist li.selected > a{ background:var(--m-gold-bg) !important; color:var(--m-ink) !important;
    font-weight:600 !important; box-shadow:inset 3px 0 0 var(--m-gold) !important; }
  #layout-sidebar .folderlist li.selected > a:before{ color:#8a6a00 !important; }
  /* el número de no leídos: discreto, como en Outlook */
  #layout-sidebar .folderlist li .unreadcount{ position:absolute !important; right:16px !important; top:50% !important;
    transform:translateY(-50%) !important; margin:0 !important; min-width:24px !important; height:22px !important;
    line-height:22px !important; padding:0 6px !important; border-radius:5px !important; text-align:center;
    background:#eef1f4 !important; color:#3a4450 !important; font-size:13px !important; font-weight:600 !important; }
  #layout-sidebar .folderlist li.selected > a .unreadcount{ background:var(--m-gold) !important; color:var(--m-ink) !important; }
  #layout-sidebar .folderlist li div.treetoggle{ color:var(--m-muted) !important; line-height:48px !important; height:48px !important; }
  #layout-sidebar > .footer{ display:none !important; }

  /* Favoritos arriba, separados del resto por una línea */
  .vjs-fav{ border-bottom:1px solid var(--m-line); padding:6px 0 8px; margin-bottom:4px; }
  .vjs-fav-t{ padding:10px 20px 6px; font-size:13px; font-weight:600; color:var(--m-muted); letter-spacing:.2px; }
  #layout-sidebar .vjs-fav .folderlist{ padding:0 !important; }

  /* ---------------- Lectura de un correo ---------------- */
  #layout-content, #layout-content .iframe-wrapper{ background:#fff !important; }
  #layout-content > .header .toolbar a.button, #layout-content > .header #mailtoolbar a{ color:#fff !important; }

  /* ---------------- Chat: vive en la barra inferior ---------------- */
  #vjschat-launcher{ display:none !important; }
  .vjsapp-barra{ bottom:calc(var(--m-tab) + 12px + env(safe-area-inset-bottom)) !important; }
  body.vjs-app-open #vjs-app-overlay{ bottom:calc(var(--m-tab) + env(safe-area-inset-bottom)) !important; }

  /* ---------------- Barra inferior ---------------- */
  #vjs-tabbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:9800;
    height:calc(var(--m-tab) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:var(--m-ink); border-top:1px solid rgba(255,255,255,.06); box-shadow:0 -4px 18px rgba(8,12,18,.18); }
  body.vjs-tabs #vjs-tabbar{ display:flex; }
  #vjs-tabbar button{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    position:relative; border:0; background:transparent; color:#8d99a6; font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  #vjs-tabbar button svg{ width:23px; height:23px; }
  #vjs-tabbar button.on{ color:var(--m-gold); }
  #vjs-tabbar button.on:after{ content:""; position:absolute; top:0; left:30%; right:30%; height:3px; border-radius:0 0 3px 3px; background:var(--m-gold); }
  #vjs-tabbar .vjs-tab-badge{ position:absolute; top:7px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px;
    border-radius:9px; background:#e0433f; color:#fff; font-size:11px; line-height:18px; text-align:center; }
  #vjs-tabbar .vjs-tab-badge[hidden]{ display:none; }
}

/* ---- v3 · deslizar hacia abajo para actualizar la lista ---- */
#vjs-ptr{ flex:0 0 auto; height:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  gap:10px; background:#f3f5f8; color:#4a5561; font-size:13px; font-weight:600;
  transition:height .22s ease; }
#vjs-ptr.tirando{ transition:none; }
#vjs-ptr .vjs-ptr-ic{ width:18px; height:18px; border-radius:50%; border:2px solid #cfd6de;
  border-top-color:#111820; box-sizing:border-box; }
#vjs-ptr.listo{ color:#111820; }
#vjs-ptr.listo .vjs-ptr-ic{ border-top-color:#c9a227; border-right-color:#c9a227; }
#vjs-ptr.cargando .vjs-ptr-ic{ animation:vjs-ptr-giro .8s linear infinite; border-top-color:#c9a227; }
@keyframes vjs-ptr-giro{ to{ transform:rotate(360deg); } }
@media (max-width:480px){
  /* que el navegador no recargue toda la página al tirar desde arriba */
  html.layout-phone #messagelist-content{ overscroll-behavior-y:contain; }
}
html.dark-mode #vjs-ptr{ background:#1b2229; color:#b6c0ca; }
html.dark-mode #vjs-ptr.listo{ color:#e8edf2; }

/* ---- v5 · leer el correo a la medida de la pantalla (lo arma vjs-movil.js) ----
   El correo abre ajustado al ancho; con dos dedos o doble toque se agranda y se
   recorre de lado. El gesto es propio: el zoom del navegador está bloqueado. */
.message-htmlpart.vjs-zoomable{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; }
.message-htmlpart .vjs-zoom{ min-width:0; }

/* ---- v5 · menús del celular como hoja inferior, estilo Outlook ----
   El menú de tres puntos y las opciones de búsqueda salían como franja lateral con
   encabezado azul y la barra inferior les tapaba el final (el botón «Buscar»).
   Ahora suben desde abajo, por encima de todo, con renglones amplios y la marca. */
@keyframes vjs-hoja{ from{ translate:0 100%; } to{ translate:0 0; } }
@media screen and (max-width:480px){
  html.layout-phone .popover-overlay, html.layout-small .popover-overlay{
    position:fixed !important; inset:0 !important; z-index:9890 !important; background:rgba(17,24,32,.45) !important; }
  html.layout-phone .popover:not(.select-menu), html.layout-small .popover:not(.select-menu){
    position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
    width:auto !important; max-width:none !important; max-height:86vh !important; z-index:9900 !important;
    border-radius:18px 18px 0 0 !important; background:#fff !important; overflow:hidden !important;
    box-shadow:0 -10px 34px rgba(8,12,18,.24) !important; padding-bottom:env(safe-area-inset-bottom) !important;
    animation:vjs-hoja .22s ease-out; }
  html.layout-phone .popover:not(.select-menu) .popover-body{ flex:1 1 auto; min-height:0; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

  /* encabezado blanco con la manija arriba; «Cerrar» a la derecha, «Atrás» a la izquierda */
  html.layout-phone .popover:not(.select-menu) .popover-header{
    position:relative; display:block !important; height:54px !important; min-height:54px !important; line-height:54px !important;
    padding:0 8px !important; background:#fff !important; color:var(--m-ink) !important;
    border:0 !important; border-bottom:1px solid var(--m-line) !important; border-radius:18px 18px 0 0 !important; }
  html.layout-phone .popover:not(.select-menu) .popover-header:before{ content:""; display:block !important; position:absolute;
    top:7px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:2px; background:#d5dbe2; }
  html.layout-phone .popover:not(.select-menu) .popover-header a{ display:block !important; width:100% !important; height:54px;
    padding:0 14px !important; box-sizing:border-box; color:var(--m-muted) !important; font-size:15px !important; font-weight:600 !important;
    text-decoration:none !important; background:transparent !important; }
  html.layout-phone .popover:not(.select-menu) .popover-header a.cancel{ text-align:right; }
  html.layout-phone .popover:not(.select-menu) .popover-header a.cancel:before{ float:right !important; margin:0 0 0 8px !important;
    line-height:54px !important; height:54px !important; font-size:17px !important; }
  html.layout-phone .popover:not(.select-menu) .popover-header a.back{ text-align:left; color:var(--m-ink) !important; }
  html.layout-phone .popover:not(.select-menu) .popover-header a.back:before{ line-height:54px !important; height:54px !important;
    margin:0 8px 0 0 !important; font-size:17px !important; }

  /* renglones del menú: amplios, mismo tamaño de letra, iconos alineados */
  html.layout-phone .popover:not(.select-menu) .menu{ padding:6px 0 10px !important; }
  html.layout-phone .popover:not(.select-menu) .menu li{ border:0 !important; background:transparent !important; }
  html.layout-phone .popover:not(.select-menu) .menu li a{
    height:52px !important; line-height:52px !important; padding:0 20px !important; margin:0 !important;
    font-size:16px !important; font-weight:500 !important; color:var(--m-txt) !important; opacity:1 !important;
    background:transparent !important; border:0 !important; border-radius:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html.layout-phone .popover:not(.select-menu) .menu li a *{ font-size:inherit !important; color:inherit !important; line-height:inherit !important; }
  html.layout-phone .popover:not(.select-menu) .menu li a:before{ width:24px !important; min-width:24px !important;
    margin:0 16px 0 0 !important; text-align:center; font-size:18px !important; color:var(--m-muted) !important; }
  html.layout-phone .popover:not(.select-menu) .menu li a:not(.disabled):active{ background:var(--m-gold-bg) !important; }
  html.layout-phone .popover:not(.select-menu) .menu li a.disabled,
  html.layout-phone .popover:not(.select-menu) .menu li a.disabled:before{ color:#b3bcc6 !important; }
  html.layout-phone .popover:not(.select-menu) .menu li a[aria-haspopup]:after{ margin-left:auto !important;
    color:var(--m-muted2) !important; font-size:14px !important; }
  html.layout-phone .popover:not(.select-menu) .menu li.separator{ background:transparent !important; color:var(--m-muted) !important;
    padding:12px 20px 4px !important; font-size:12.5px !important; font-weight:600 !important; line-height:1.4 !important; }
  /* «Responder a todos» y parecidos: la flecha de opciones sin caja gris */
  html.layout-phone .popover:not(.select-menu) .menu .dropbutton{ display:flex !important; align-items:stretch; }
  html.layout-phone .popover:not(.select-menu) .menu .dropbutton > a:first-child{ flex:1 1 auto; min-width:0; }
  html.layout-phone .popover:not(.select-menu) .menu .dropbutton a.dropdown{ flex:0 0 56px; width:56px !important; padding:0 !important;
    background:transparent !important; border:0 !important; border-left:1px solid var(--m-line) !important; text-align:center; }
  html.layout-phone .popover:not(.select-menu) .menu .dropbutton a.dropdown:before{ margin:0 auto !important; float:none !important;
    display:inline-block !important; color:var(--m-muted) !important; font-size:15px !important; }

  /* ---------------- Opciones de búsqueda ---------------- */
  html.layout-phone .popover #searchmenu{ overflow:visible !important; padding:4px 20px 0 !important; background:#fff !important; }
  html.layout-phone .popover #searchmenu .formcontent{ padding:0 !important; }
  #searchmenu ul.proplist > li{ border-bottom:1px solid var(--m-line) !important; padding:10px 0 !important; margin:0 !important; position:relative; }
  #searchmenu ul.proplist li label{ font-size:16px !important; color:var(--m-txt) !important; line-height:2rem !important;
    margin:0 !important; width:100%; }
  #searchmenu ul.proplist ul.proplist{ padding:0 0 6px 16px !important; }
  #searchmenu ul.proplist ul.proplist li{ border:0 !important; padding:4px 0 !important; }
  #searchmenu ul.proplist ul.proplist li label{ font-size:15px !important; color:var(--m-muted) !important; }
  #searchmenu .with-sublist > a.dropdown{ top:10px !important; height:2rem !important; width:44px; background:transparent !important; border:0 !important; }
  #searchmenu .with-sublist > a.dropdown:before{ color:var(--m-muted2) !important; }
  /* interruptores con el dorado de la marca */
  #searchmenu .custom-switch .custom-control-label:before{ background:#dfe4ea !important; border-color:#dfe4ea !important; }
  #searchmenu .custom-switch .custom-control-label:after{ background:#fff !important; box-shadow:0 1px 3px rgba(17,24,32,.3) !important; }
  #searchmenu .custom-switch .custom-control-input:checked ~ .custom-control-label:before{ background:var(--m-gold) !important; border-color:var(--m-gold) !important; }
  #searchmenu .custom-switch .custom-control-input:checked:disabled ~ .custom-control-label:before{ background:#f7e39a !important; border-color:#f7e39a !important; }
  #searchmenu .custom-switch .custom-control-input:focus ~ .custom-control-label:before{ box-shadow:0 0 0 3px rgba(244,196,0,.25) !important; }
  #searchmenu .custom-control-input:disabled ~ .custom-control-label{ color:var(--m-txt) !important; }
  /* Tipo, Fecha y Ámbito */
  #searchmenu ul.proplist + div, #searchmenu .input-group{ margin-top:14px !important; margin-bottom:0 !important; }
  #searchmenu .input-group{ flex-wrap:nowrap !important; }
  #searchmenu .input-group .input-group-prepend{ width:34% !important; }
  #searchmenu .input-group-text{ height:46px; background:#f4f6f8 !important; border:1px solid var(--m-line) !important;
    border-radius:10px 0 0 10px !important; color:var(--m-muted) !important; font-size:14px !important; font-weight:600 !important; }
  #searchmenu .custom-select{ height:46px !important; font-size:16px !important; color:var(--m-txt) !important;
    border:1px solid var(--m-line) !important; border-left:0 !important; border-radius:0 10px 10px 0 !important; background-color:#fff !important; }
  /* «Buscar» siempre a la vista, al pie de la hoja */
  #searchmenu .formbuttons{ position:sticky; bottom:0; z-index:2; margin:14px -20px 0 !important; padding:14px 20px 16px !important;
    background:#fff !important; border-top:1px solid var(--m-line); }
  #searchmenu .formbuttons button.search{ height:50px !important; border-radius:12px !important; border:0 !important;
    background:var(--m-gold) !important; color:var(--m-ink) !important; font-size:16px !important; font-weight:700 !important;
    box-shadow:none !important; }
  #searchmenu .formbuttons button.search:before{ color:var(--m-ink) !important; }

  /* el buscador: iconos sin cajas grises */
  #layout-list .searchbar a, #layout-list .searchbar a.button{ background:transparent !important; border:0 !important; box-shadow:none !important; }
}

/* ---- v6 · deslizar un correo de la lista: izquierda elimina, derecha responde ----
   (lo maneja vjs-movil.js). La fila se corre con el dedo y debajo aparece la acción;
   el color se enciende cuando ya se pasó el umbral y al soltar se ejecuta. */
@media screen and (max-width:480px){
  #messagelist tr.message.vjs-sw > td{ will-change:transform; position:relative; z-index:1; }
  #messagelist tr.message.vjs-sw-vuelve > td{ transition:transform .2s ease; }
  #messagelist tr.message.vjs-sw-izq{ background:#f6d9d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Ctext x='88' y='17' text-anchor='end' font-family='Segoe UI,Roboto,Helvetica,Arial,sans-serif' font-size='15' font-weight='600' fill='%239b2a22'%3EEliminar%3C/text%3E%3Cg transform='translate(96 0)' fill='none' stroke='%239b2a22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5.5 7l1 13h11l1-13M9 7V4h6v3'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 20px center / 120px 24px !important; }
  #messagelist tr.message.vjs-sw-izq.vjs-sw-listo{ background:#c9362c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Ctext x='88' y='17' text-anchor='end' font-family='Segoe UI,Roboto,Helvetica,Arial,sans-serif' font-size='15' font-weight='600' fill='%23ffffff'%3EEliminar%3C/text%3E%3Cg transform='translate(96 0)' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5.5 7l1 13h11l1-13M9 7V4h6v3'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 20px center / 120px 24px !important; }
  #messagelist tr.message.vjs-sw-der{ background:#e8ebef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cg fill='none' stroke='%23111820' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7 5 12l5 5'/%3E%3Cpath d='M5.5 12H14a5 5 0 0 1 5 5v2'/%3E%3C/g%3E%3Ctext x='32' y='17' font-family='Segoe UI,Roboto,Helvetica,Arial,sans-serif' font-size='15' font-weight='600' fill='%23111820'%3EResponder%3C/text%3E%3C/svg%3E") no-repeat left 20px center / 120px 24px !important; }
  #messagelist tr.message.vjs-sw-der.vjs-sw-listo{ background:#111820 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cg fill='none' stroke='%23f4c400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7 5 12l5 5'/%3E%3Cpath d='M5.5 12H14a5 5 0 0 1 5 5v2'/%3E%3C/g%3E%3Ctext x='32' y='17' font-family='Segoe UI,Roboto,Helvetica,Arial,sans-serif' font-size='15' font-weight='600' fill='%23f4c400'%3EResponder%3C/text%3E%3C/svg%3E") no-repeat left 20px center / 120px 24px !important; }
}

/* ---- v7 · barra de abajo del correo abierto: Anterior, Responder, Reenviar,
   Archivar, Eliminar y Siguiente, repartidos parejo (los tres del medio los pone
   vjs-movil.js). «Archivar» abre la hoja con las carpetas. ---- */
@media screen and (max-width:480px){
  #layout-content > .content-frame-navigation{ display:flex !important; justify-content:space-between !important;
    background:#fff !important; border-top:1px solid var(--m-line) !important; padding:0 2px !important; }
  #layout-content > .content-frame-navigation > .buttons{ display:contents !important; }
  #layout-content > .content-frame-navigation a.button{ flex:1 1 0 !important; min-width:0 !important; max-width:none !important;
    padding:.45rem 0 !important; float:none !important; color:var(--m-ink) !important; font-size:11.5px !important;
    font-weight:500 !important; letter-spacing:-.1px; }
  #layout-content > .content-frame-navigation a.button .inner{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #layout-content > .content-frame-navigation a.button:before{ font-size:18px !important; line-height:1.75rem !important; }
  #layout-content > .content-frame-navigation a.button.disabled{ color:#b3bcc6 !important; }
  #layout-content > .content-frame-navigation a.button.delete{ color:#b3261e !important; }
  #layout-content > .content-frame-navigation a.button:not(.disabled):active{ background:var(--m-gold-bg) !important; }
}

/* hoja «Archivar en…» */
#vjs-hoja-carpetas .vjs-hoja-velo{ position:fixed; inset:0; z-index:9890; background:rgba(17,24,32,.45); animation:vjs-velo .2s ease-out; }
#vjs-hoja-carpetas .vjs-hoja{ position:fixed; left:0; right:0; bottom:0; z-index:9900; max-height:80vh; display:flex; flex-direction:column;
  background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -10px 34px rgba(8,12,18,.24);
  padding-bottom:env(safe-area-inset-bottom); animation:vjs-hoja .22s ease-out;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
#vjs-hoja-carpetas.vjs-sale .vjs-hoja{ translate:0 100%; transition:translate .18s ease-in; }
#vjs-hoja-carpetas.vjs-sale .vjs-hoja-velo{ opacity:0; transition:opacity .18s; }
@keyframes vjs-velo{ from{ opacity:0; } to{ opacity:1; } }
#vjs-hoja-carpetas .vjs-hoja-cab{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 20px; border-bottom:1px solid var(--m-line); font-size:16px; font-weight:700; color:var(--m-ink); }
#vjs-hoja-carpetas .vjs-hoja-cab:before{ content:""; position:absolute; top:7px; left:50%; width:38px; height:4px; margin-left:-19px;
  border-radius:2px; background:#d5dbe2; }
#vjs-hoja-carpetas .vjs-hoja-cerrar{ color:var(--m-muted); font-size:15px; font-weight:600; text-decoration:none; padding:12px 0 12px 16px; }
#vjs-hoja-carpetas .vjs-hoja-lista{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; margin:0; padding:6px 0 10px; list-style:none; }
#vjs-hoja-carpetas .vjs-hoja-lista li{ border:0 !important; background:transparent !important; }
#vjs-hoja-carpetas .vjs-hoja-lista li a{ display:flex !important; align-items:center; height:52px !important; line-height:52px !important;
  padding:0 20px !important; font-size:16px !important; font-weight:500; color:var(--m-txt) !important; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:transparent !important; }
#vjs-hoja-carpetas .vjs-hoja-lista li a:before{ float:none !important; height:52px !important; line-height:52px !important;
  width:24px !important; min-width:24px; margin:0 16px 0 0 !important; text-align:center;
  font-size:18px !important; color:var(--m-muted) !important; }
#vjs-hoja-carpetas .vjs-hoja-lista li a:active{ background:var(--m-gold-bg) !important; }
#vjs-hoja-carpetas .vjs-hoja-lista a.vjs-n1{ padding-left:44px !important; }
#vjs-hoja-carpetas .vjs-hoja-lista a.vjs-n2{ padding-left:68px !important; }
#vjs-hoja-carpetas .vjs-hoja-lista a.vjs-n3,
#vjs-hoja-carpetas .vjs-hoja-lista a.vjs-n4{ padding-left:92px !important; }
#vjs-hoja-carpetas .vjs-hoja-vacia{ margin:0; padding:24px 20px 28px; color:var(--m-muted); font-size:15px; line-height:1.5; }

/* ---- v8 · correos que solo traen texto: letra normal y a la medida, no de máquina ---- */
@media screen and (max-width:480px){
  #messagebody div.pre{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size:15.5px !important; line-height:1.55 !important; white-space:pre-wrap !important; word-wrap:break-word; color:var(--m-txt); }
}

/* ==========================================================================
   v9 · la lista como en el correo del iPhone y Outlook (26-sep-2026)
   Andrés: «es lento, se congela, toca darle varias veces para abrir un correo» y
   «cuando uno mantenga seleccionado un mensaje lo pueda fijar, poner como urgente,
   marcar como no leído». Todo lo mueve vjs-movil.js; aquí va cómo se ve.
   ========================================================================== */
@media screen and (max-width:480px){
  /* el dedo sobre un correo: sin lupa ni selección de texto al mantener; lo vertical
     es del navegador (desplazar) y lo horizontal de nosotros (deslizar) */
  #messagelist tr.message, .vjs-fj-item{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
    touch-action:pan-y; -webkit-tap-highlight-color:transparent; }
  #messagelist tbody tr.message > td{ transition:background-color .12s ease; }
  #messagelist tbody tr.message.vjs-presionado > td,
  #messagelist tbody tr.message.unread.vjs-presionado > td{ background:#eef1f4 !important; }

  /* urgente: la bandera roja junto a la hora, como en Outlook */
  #messagelist tr.message.flagged td.subject span.date:before{ content:""; display:inline-block; width:13px; height:13px;
    margin:0 5px -1px 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d93025' stroke='%23d93025' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 21V4' fill='none'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5z'/%3E%3C/svg%3E") no-repeat center / contain; }
  #messagelist tbody tr.message.flagged > td.subject{ box-shadow:inset 3px 0 0 #d93025 !important; }

  /* los fijados salen arriba, en su bloque; en la lista de abajo no se repiten */
  #messagelist-content.vjs-con-fijados #messagelist:not(.withselection) tr.message.vjs-fijado{ display:none !important; }
  /* en «Seleccionar varios» vuelven a su sitio en la lista, con su casilla */
  #messagelist-content:has(#messagelist.withselection) #vjs-fijados{ display:none; }
  #messagelist tr.message.vjs-fijado td.subject span.date:after{ content:""; display:inline-block; width:12px; height:12px;
    margin:0 0 -1px 5px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l-1 6 4 4H6l4-4z'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E") no-repeat center / contain; }

  #vjs-fijados{ background:#fff; border-bottom:6px solid #f3f5f8; }
  #vjs-fijados .vjs-fj-t{ display:flex; align-items:center; gap:8px; padding:12px 16px 6px; font-size:13px; font-weight:700;
    color:#8a6a00; letter-spacing:.2px; }
  #vjs-fijados .vjs-fj-t svg{ width:15px; height:15px; }
  #vjs-fijados .vjs-fj-t span{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--m-gold-bg);
    color:#6b5200; font-size:12px; line-height:20px; text-align:center; }
  .vjs-fj-item{ position:relative; display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 14px;
    border-top:1px solid var(--m-line); background:#fff; cursor:pointer; transition:background-color .12s ease; }
  .vjs-fj-t + .vjs-fj-item{ border-top:0; }
  .vjs-fj-item.vjs-presionado{ background:#eef1f4; }
  .vjs-fj-item.unread{ box-shadow:inset 3px 0 0 var(--m-gold); }
  .vjs-fj-item.flagged{ box-shadow:inset 3px 0 0 #d93025; }
  .vjs-fj-item .vjs-av{ position:static; flex:0 0 42px; }
  .vjs-fj-txt{ flex:1 1 auto; min-width:0; }
  .vjs-fj-l1{ display:flex; align-items:baseline; gap:10px; }
  .vjs-fj-l1 b{ flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    font-size:15.5px; font-weight:500; color:var(--m-txt); }
  .vjs-fj-item.unread .vjs-fj-l1 b{ font-weight:700; color:var(--m-ink); }
  .vjs-fj-l1 time{ flex:0 0 auto; font-size:12.5px; font-weight:500; color:var(--m-muted2); }
  .vjs-fj-item.flagged .vjs-fj-l1 time:before{ content:""; display:inline-block; width:13px; height:13px; margin:0 5px -1px 0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d93025' stroke='%23d93025' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 21V4' fill='none'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5z'/%3E%3C/svg%3E") no-repeat center / contain; }
  .vjs-fj-l2{ margin-top:3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14.5px; color:var(--m-muted); }
  .vjs-fj-item.unread .vjs-fj-l2{ color:var(--m-txt); font-weight:600; }

  /* ---------------- Abriendo un correo: esqueleto al instante ---------------- */
  #layout-content .iframe-wrapper{ position:relative; }
  .vjs-esqueleto{ position:absolute; inset:0; z-index:4; overflow:hidden; background:#fff; padding:18px 18px 0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; animation:vjs-velo .12s ease-out; }
  .vjs-esqueleto.vjs-sale{ opacity:0; transition:opacity .16s ease; }
  .vjs-esq-asunto{ font-size:20px; font-weight:700; line-height:1.3; color:var(--m-ink); letter-spacing:-.2px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .vjs-esq-de{ display:flex; align-items:center; gap:12px; margin:16px 0 22px; padding-bottom:16px; border-bottom:1px solid var(--m-line); }
  .vjs-esq-de .vjs-av{ position:static; flex:0 0 42px; }
  .vjs-esq-de > div{ flex:1 1 auto; min-width:0; }
  .vjs-esq-de b{ display:block; font-size:15.5px; font-weight:600; color:var(--m-txt); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .vjs-esq-l{ display:block; height:12px; margin:0 0 14px; border-radius:6px;
    background:linear-gradient(90deg,#eef1f4 0%,#f7f8fa 45%,#eef1f4 90%) 0 0 / 300% 100%; animation:vjs-brillo 1.1s ease-in-out infinite; }
  .vjs-esq-l.l0{ width:45%; height:10px; margin:8px 0 0; }
  .vjs-esq-l.l1{ width:92%; } .vjs-esq-l.l2{ width:85%; } .vjs-esq-l.l3{ width:95%; } .vjs-esq-l.l4{ width:60%; }
  @keyframes vjs-brillo{ from{ background-position:100% 0; } to{ background-position:0 0; } }
}

/* ---------------- Hoja de acciones (mantener presionado un correo) ---------------- */
#vjs-acciones{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
#vjs-acciones .vjs-acc-velo{ position:fixed; inset:0; z-index:9890; background:rgba(17,24,32,.45); animation:vjs-velo .18s ease-out; }
#vjs-acciones .vjs-acc-hoja{ position:fixed; left:0; right:0; bottom:0; z-index:9900; max-height:88vh; overflow-y:auto;
  background:#f3f5f8; border-radius:18px 18px 0 0; box-shadow:0 -10px 34px rgba(8,12,18,.24);
  padding:0 12px calc(12px + env(safe-area-inset-bottom)); animation:vjs-hoja .22s cubic-bezier(.2,.8,.3,1); }
#vjs-acciones.vjs-sale .vjs-acc-hoja{ translate:0 100%; transition:translate .18s ease-in; }
#vjs-acciones.vjs-sale .vjs-acc-velo{ opacity:0; transition:opacity .18s; }
#vjs-acciones .vjs-acc-cab{ position:relative; display:flex; align-items:center; gap:12px; padding:22px 6px 14px; }
#vjs-acciones .vjs-acc-cab:before{ content:""; position:absolute; top:8px; left:50%; width:38px; height:4px; margin-left:-19px;
  border-radius:2px; background:#cfd6de; }
#vjs-acciones .vjs-av{ display:flex; position:static; flex:0 0 42px; width:42px; height:42px; border-radius:50%;
  align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:600; }
#vjs-acciones .vjs-acc-txt{ min-width:0; flex:1 1 auto; }
#vjs-acciones .vjs-acc-txt b{ display:block; font-size:16px; font-weight:700; color:var(--m-ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#vjs-acciones .vjs-acc-txt span{ display:block; margin-top:2px; font-size:14px; color:var(--m-muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#vjs-acciones button{ font:inherit; -webkit-tap-highlight-color:transparent; cursor:pointer; }
#vjs-acciones .vjs-acc-grandes{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
#vjs-acciones .vjs-acc-g{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; height:78px;
  border:0; border-radius:14px; background:#fff; color:var(--m-ink); font-size:13.5px; font-weight:600; padding:0 4px; }
#vjs-acciones .vjs-acc-g svg{ width:25px; height:25px; }
#vjs-acciones .vjs-acc-g:active{ background:#e8ebef; }
#vjs-acciones .vjs-acc-fijar svg{ color:#8a6a00; }
#vjs-acciones .vjs-acc-urgente svg{ color:#d93025; }
#vjs-acciones .vjs-acc-noleido svg, #vjs-acciones .vjs-acc-leido svg{ color:#2f5d8a; }
#vjs-acciones .vjs-acc-g.vjs-acc-fijar.on{ background:var(--m-gold-bg); box-shadow:inset 0 0 0 1.5px var(--m-gold); }
#vjs-acciones .vjs-acc-g.vjs-acc-urgente.on{ background:#fdecea; box-shadow:inset 0 0 0 1.5px #f1a7a1; }
#vjs-acciones .vjs-acc-g.vjs-acc-fijar.on svg{ fill:var(--m-gold); }
#vjs-acciones .vjs-acc-g.vjs-acc-urgente.on svg{ fill:#d93025; }
#vjs-acciones .vjs-acc-lista{ list-style:none; margin:0 0 10px; padding:0; background:#fff; border-radius:14px; overflow:hidden; }
#vjs-acciones .vjs-acc-lista li + li{ border-top:1px solid var(--m-line); }
#vjs-acciones .vjs-acc-lista button{ display:flex; align-items:center; gap:16px; width:100%; height:52px; padding:0 18px;
  border:0; background:#fff; color:var(--m-txt); font-size:16px; font-weight:500; text-align:left; }
#vjs-acciones .vjs-acc-lista button:active{ background:#eef1f4; }
#vjs-acciones .vjs-acc-lista svg{ flex:0 0 22px; width:22px; height:22px; color:var(--m-muted); }
#vjs-acciones .vjs-acc-lista .vjs-acc-eliminar, #vjs-acciones .vjs-acc-lista .vjs-acc-eliminar svg{ color:#c9362c; }
#vjs-acciones .vjs-acc-cancelar{ display:block; width:100%; height:54px; border:0; border-radius:14px; background:#fff;
  color:var(--m-ink); font-size:16px; font-weight:700; }
#vjs-acciones .vjs-acc-cancelar:active{ background:#e8ebef; }

/* aviso corto de lo que se hizo («Correo fijado arriba») */
#vjs-toast{ position:fixed; left:50%; bottom:calc(var(--m-tab) + 18px + env(safe-area-inset-bottom)); z-index:9950;
  translate:-50% 16px; opacity:0; pointer-events:none; max-width:calc(100% - 32px); padding:11px 18px; border-radius:22px;
  background:var(--m-ink); color:#fff; font:600 14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(8,12,18,.28); transition:opacity .18s ease, translate .18s ease; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
#vjs-toast.vjs-ve{ opacity:1; translate:-50% 0; }