/* --- Presentacion de la dimension --------------------------------------------------------
   Aparece sola al entrar a un tema nuevo, tapa la pregunta a proposito -si se pudiera leer
   la pregunta por debajo, nadie leeria la explicacion- y se va por cuatro puertas: el boton,
   la cruz, el velo y Escape. Lo que se mueve tiene una razon: el sello marca de que dimension
   se habla, los puntos dicen cuanto del recorrido va, y los parrafos entran en orden para que
   la vista los recorra en ese orden y no de un golpe. Nada de lo que se mueve cuesta un
   recalculo: el velo tapa con tinta y no con desenfoque -detras late el agente y el boton
   flotante, y difuminar el fondo obligaba a rehacer la pantalla entera en cada cuadro-, el
   punto de ahora se abre escalando en vez de crecer en la fila, y la espera brilla con un
   reflejo que se desplaza en vez de repintarse. */
.iv-dim-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.iv-dim-veil{position:absolute;inset:0;background:rgba(8,30,55,.62);
  animation:iv-dim-veil .18s ease-out both}
.iv-dim-card{position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
  overflow:hidden;border:1px solid #d8e4f1;border-radius:20px;background:#fff;
  box-shadow:0 30px 80px rgba(8,38,69,.34);will-change:transform,opacity;
  animation:iv-dim-card .26s cubic-bezier(.22,.9,.3,1) both}
.iv-dim-card>header{display:flex;align-items:center;gap:13px;padding:20px 20px 14px}
.iv-dim-card>header>div{min-width:0;flex:1}
.iv-dim-card>header small{display:block;color:#2a66cd;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.iv-dim-card>header b{display:block;margin-top:4px;color:#0d223d;font-size:clamp(18px,2.2vw,23px);line-height:1.25;letter-spacing:-.02em}
.iv-dim-mark{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:15px;
  color:#0e8f7d;background:linear-gradient(145deg,#e6f9f4,#dff1ff);font-size:22px;
  box-shadow:0 8px 20px rgba(17,167,149,.18);animation:iv-dim-mark .34s cubic-bezier(.34,1.5,.5,1) both}
.iv-dim-close{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border:1px solid #e0e8f1;
  border-radius:9px;color:#7789a0;background:#fff;font-size:17px;line-height:1}
.iv-dim-close:hover{color:#17436f;background:#eef4fa}
/* Los puntos: donde empieza el tema dentro del recorrido completo. */
.iv-dim-dots{display:flex;gap:5px;padding:0 20px 14px}
.iv-dim-dots>i{height:5px;flex:1;border-radius:99px;background:#e5ebf3;transition:background-color .2s ease}
.iv-dim-dots>i.done{background:#4fc5ad}
.iv-dim-dots>i.now{background:linear-gradient(90deg,#3478f6,#2a63de);transform-origin:left center;
  animation:iv-dim-dot .34s cubic-bezier(.22,.9,.3,1) both}
.iv-dim-body{overflow-y:auto;padding:8px 20px 24px;scrollbar-width:thin;scrollbar-color:#cbd8e6 transparent}
.iv-dim-summary{margin:0;color:#4b6079;font-size:14px;line-height:1.7;
  animation:iv-dim-part .26s cubic-bezier(.22,.9,.3,1) both}
/* Sin texto todavia: la forma del parrafo que viene, latiendo. */
.iv-dim-skeleton{display:grid;gap:10px;padding:16px 0}
.iv-dim-skeleton>i{position:relative;overflow:hidden;height:11px;border-radius:99px;background:#e9eef5}
.iv-dim-skeleton>i:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:iv-dim-shimmer 1.15s linear infinite}
.iv-dim-skeleton>i:nth-child(2){width:92%}
.iv-dim-skeleton>i:nth-child(3){width:78%}
.iv-dim-skeleton>i:nth-child(4){width:86%}
.iv-dim-card>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-top:1px solid #e9eef4;background:#f8fafc}
.iv-dim-card>footer:not(:has(small)){justify-content:flex-end}
.iv-dim-card>footer small{min-width:0;color:#7b8ca1;font-size:9.5px;line-height:1.5}
.iv-dim-go{flex:0 0 auto;height:42px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;
  border-radius:12px;color:#fff;background:linear-gradient(135deg,#3478f6,#245ed5);font-size:12px;font-weight:850;
  box-shadow:0 10px 24px rgba(37,99,235,.28);transition:transform .18s cubic-bezier(.34,1.4,.5,1),box-shadow .18s ease}
.iv-dim-go:hover{box-shadow:0 14px 30px rgba(37,99,235,.36);transform:translateY(-2px)}
.iv-dim-go:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.3),0 10px 24px rgba(37,99,235,.28)}
.iv-dim-intro.leaving .iv-dim-veil{animation:iv-dim-veil .15s ease-in reverse both}
.iv-dim-intro.leaving .iv-dim-card{animation:iv-dim-out .15s ease-in both}
@keyframes iv-dim-veil{from{opacity:0}to{opacity:1}}
@keyframes iv-dim-card{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes iv-dim-out{to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes iv-dim-mark{from{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.12) rotate(3deg)}to{transform:none}}
@keyframes iv-dim-dot{from{opacity:.4;transform:scaleX(.25)}to{opacity:1;transform:none}}
@keyframes iv-dim-part{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes iv-dim-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(max-width:600px){
  .iv-dim-intro{padding:12px}
  .iv-dim-card>header{padding:16px 16px 12px}
  .iv-dim-body,.iv-dim-dots,.iv-dim-card>footer{padding-inline:16px}
  .iv-dim-card>footer{flex-direction:column;align-items:stretch;gap:10px}
  .iv-dim-go{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .iv-dim-veil,.iv-dim-card,.iv-dim-mark,.iv-dim-dots>i.now,.iv-dim-summary,.iv-dim-skeleton>i:after,
  .iv-dim-intro.leaving .iv-dim-veil,.iv-dim-intro.leaving .iv-dim-card{animation:none}
  .iv-dim-go{transition:none}
}


/* Elección del acceso al entrar y desde el menú de la cuenta. */
.role-entry{min-height:100dvh;display:grid;place-items:center;padding:32px 20px;background:radial-gradient(ellipse at top left,#dcebf6,transparent 60%),#f1f5fa;color:#143454}
.role-entry-card{width:min(100%,580px);padding:38px;border:1px solid #dae5ef;border-radius:24px;background:#fff;box-shadow:0 22px 70px #173d6420}
.role-entry-card>.login-brand{margin-bottom:30px}.role-entry-card>.login-brand .brand-mark{width:240px;max-width:100%;height:auto}.role-entry h1{font-size:29px;line-height:1.18;margin:8px 0 12px}.role-entry-card>p:not(.eyebrow){color:#62758c;line-height:1.6}
.role-choices{display:grid;gap:12px;margin:26px 0 16px}.role-choice{display:flex;align-items:center;gap:16px;width:100%;padding:19px 18px;text-align:left;border:1px solid #d6e3ef;border-radius:15px;background:#fbfdff;color:#173958}
.role-choice:hover:not(:disabled){border-color:#2d739e;background:#eff7fc;box-shadow:0 3px 14px #24567815}.role-choice:focus-visible{outline:3px solid #389dc8;outline-offset:3px}.role-choice>i{display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:12px;background:#e6efff;color:#3265b8;font-size:23px;font-style:normal}.role-choice.invitado>i{color:#008b7d;background:#ddf5ee}.role-choice.supervisor>i{color:#7053bb;background:#efe8fb}
.role-choice>span{flex:1;min-width:0}.role-choice b{display:block;font-size:16px}.role-choice small{display:block;margin-top:6px;font-size:13px;line-height:1.5;font-weight:400;color:#657990}.role-choice em{font-style:normal;font-size:13px;color:#55708c}.role-choice[aria-current]{background:#edf5fa;border-color:#abc8dc;opacity:1;cursor:default}
.role-choice-error{color:#ac233a;font-size:14px}.role-entry-logout{display:block;margin:20px auto 0;padding:10px 20px;background:transparent;color:#546e87;font-size:14px}
.role-switch-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto;padding:28px;border:1px solid #d4e1eb;border-radius:22px;background:#fff;color:#143454;box-shadow:0 28px 80px #001d3b55}.role-switch-dialog::backdrop{background:#061c37a8;backdrop-filter:blur(3px)}.role-switch-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.role-switch-dialog h2{font-size:24px;margin:6px 0}.role-switch-dialog header button{background:#eff4f8;color:#294967;width:34px;height:34px;border-radius:50%;font-size:24px}.role-switch-dialog>p{color:#63788f;font-size:14px;line-height:1.5}.role-switch-dialog .role-choices{margin-top:22px}
@media(max-width:600px){.role-entry{padding:18px 12px}.role-entry-card{padding:26px 20px}.role-entry h1{font-size:26px}.role-choice{padding:16px 12px;gap:12px}.role-choice>i{flex-basis:36px;height:36px;font-size:20px}.role-switch-dialog{padding:22px 18px}}

.access-user-row .system-role{white-space:normal;line-height:1.5}
/* El unico escalon por encima del Administrador. Se distingue del resto de roles porque no
   es uno mas de la lista: es quien alcanza a los demas. */
.system-role.super{margin-left:5px;padding:5px 8px;color:#8a5a08;background:#fdf3dd;border:1px solid #f0dcae;cursor:help}
.user-editor-super{border-color:#f0dcae;background:#fffaf0}
.user-editor-super b{color:#8a5a08}

/* Cuando el reparto de la asesoria y la ficha de la persona no coinciden. No es un error que
   se pueda esconder: aqui manda el reparto porque guio las respuestas, y la ficha rige de la
   siguiente asesoria en adelante. Se dice en voz baja, al lado del nombre. */
.track-diverges{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:1px 6px;border:1px solid #e4d3a6;border-radius:20px;background:#fdf6e3;color:#8a6a1c;font-style:normal;font-size:9.5px;font-weight:750;white-space:nowrap;cursor:help}

/* Ver la contrasena que se escribe. En el movil no es un lujo: el teclado tapa media pantalla,
   se teclea a ciegas detras de los puntos y un dedo torcido se lee igual que una clave mala.
   El campo pasa a ser el ancla del boton, y el texto le deja sitio para no pasar por debajo. */
.login-panel .field-pass{position:relative}
.reveal-password{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;color:#7b8fa6;cursor:pointer;-webkit-tap-highlight-color:transparent}
.reveal-password svg{width:21px;height:21px}
.reveal-password:hover{color:#2f5f96;background:#eef4fa}
.reveal-password:focus-visible{outline:2px solid #75b9e8;outline-offset:2px}
.reveal-password[aria-pressed="true"]{color:#1c6fb8}
.login-panel .field-pass input{padding-right:50px}

/* Piezas que solo existen para el movil: fuera de el no se pintan nunca. */
.mobile-login-kicker,.mobile-trust{display:none}

/* Movil, pantallas que comparten el markup de `.login` pero no el diseno de acceso
   -la invitacion y el aviso de servidor caido-: la columna navy no cabe al lado del panel,
   y ponerla encima empujaba el contenido fuera de la primera pantalla. `display:contents`
   disuelve la seccion de discurso para que sus piezas sean hermanas del panel y `order` las
   reparta: marca arriba, panel visible, argumento debajo. */
@media(max-width:780px){
  .login:not(.login-access){display:flex;flex-direction:column;min-height:100dvh;padding-bottom:38px;background:radial-gradient(circle at 84% 4%,#1c5f8b,transparent 44%),radial-gradient(circle at 8% 96%,#164b74,transparent 42%),linear-gradient(168deg,#0b2038,#123a62)}
  .login:not(.login-access) .login-copy{display:contents}
  /* Sin caja que las agrupe, cada pieza se paga su propio margen lateral. */
  .login:not(.login-access) .login-copy>.login-brand{order:1;gap:0;padding:26px 22px 18px}
  .login:not(.login-access) .login-copy>.login-brand .brand-mark{width:min(100%,190px)}
  .login:not(.login-access) .login-panel{order:2;display:block;min-height:0;margin:0 14px;padding:24px 20px 22px;border-radius:20px;box-shadow:0 22px 50px #04162c4d}
  .login:not(.login-access) .login-copy>div:not(.login-brand):not(.login-proof){order:3;padding:34px 22px 0}
  .login:not(.login-access) .login-proof{order:4;gap:7px;padding:16px 22px 0}
  .login:not(.login-access) .login-copy h1{max-width:none;margin:0 0 10px;font-size:clamp(22px,6vw,29px);letter-spacing:-1px;line-height:1.16}
  .login:not(.login-access) .login-copy p:not(.eyebrow){max-width:none;font-size:14px;line-height:1.5}
  /* Detras del parrafo generico a proposito: `p:not(.eyebrow)` pesa lo mismo que
     `p.login-product`, asi que el orden es lo unico que decide. */
  .login:not(.login-access) .login-copy p.login-product{margin:0 0 7px;font-size:clamp(32px,9.5vw,42px);letter-spacing:-1.6px}
  .login:not(.login-access) .login-proof span{padding:6px 9px;font-size:10.5px}
  .login:not(.login-access) .login-brand.mobile{display:none}
  .login:not(.login-access) .login-panel>form,.login:not(.login-access) .login-panel>div{width:100%}
  .login:not(.login-access) .login-panel h2{font-size:26px;letter-spacing:-.6px}
  .login:not(.login-access) .login-panel label{margin:12px 0}
}

/* =========================================================
   ACCESO EN MOVIL: UNA SOLA SUPERFICIE
   La tarjeta blanca flotando sobre fondo blanco no aportaba nada, y el discurso de venta
   empujaba el formulario fuera de la pantalla. Aqui el panel deja de ser una tarjeta y pasa
   a SER la pantalla: banda navy con la marca arriba, formulario centrado debajo, y se entra
   sin scrollear. El discurso se retira: en el movil quien llega ya sabe a que viene.
   Solo <=780px; el escritorio no ve nada de esto.
   ========================================================= */
@media(max-width:780px){
  .login-access{
    --dm-navy-950:#061d35;--dm-navy-900:#082a4c;--dm-navy-800:#0d3f6b;
    --dm-cyan:#4cc9df;--dm-ink:#0a2540;--dm-muted:#6d8295;
    --dm-line:#d9e5ef;--dm-soft:#f5f9fc;--dm-green:#18a982;
    display:block;min-height:100svh;background:#fff;isolation:isolate;
  }
  .login-access .login-copy{display:none}

  .login-access .login-panel{display:block;width:100%;min-height:100svh;margin:0;padding:0;border:0;border-radius:0;background:#fff;box-shadow:none}
  .login-access #login{display:block;width:100%;max-width:none;min-height:100svh;margin:0;padding:0 22px max(14px,env(safe-area-inset-bottom));border:0;border-radius:0;background:linear-gradient(180deg,#f7fbfe 0,#fff 18%,#fff 100%);box-shadow:none}

  /* La banda navy sangra hasta los bordes: el formulario lleva el padding lateral, asi que
     ella se lo devuelve con margen negativo en vez de sacarse del flujo. */
  .login-access .login-brand.mobile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:auto;min-height:168px;margin:0 -22px;padding:max(48px,calc(env(safe-area-inset-top) + 36px)) 24px 22px;overflow:hidden;border:0;border-radius:0 0 30px 30px;background:radial-gradient(circle at 84% 12%,#4cc9df3d,transparent 26%),radial-gradient(circle at 10% 90%,#177fd52e,transparent 28%),linear-gradient(135deg,var(--dm-navy-950) 0,var(--dm-navy-900) 52%,var(--dm-navy-800) 100%);box-shadow:0 12px 30px #082a4c1f}
  .login-access .login-brand.mobile::before{content:'';position:absolute;top:-94px;right:-76px;width:190px;height:190px;border:27px solid #ffffff0e;border-radius:50%;box-shadow:0 0 0 18px #4cc9df09;pointer-events:none}
  .login-access .login-brand.mobile::after{content:'AI GUIDED ASSESSMENT';position:absolute;top:max(13px,env(safe-area-inset-top));right:16px;display:flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid #ffffff24;border-radius:999px;background:#ffffff13;color:#ffffffb8;font-size:8px;font-weight:800;letter-spacing:.11em}
  .login-access .login-brand.mobile .brand-mark{position:relative;z-index:2;display:block;width:min(70vw,250px);max-width:250px;height:auto;max-height:44px;margin:0 auto 2px;object-fit:contain}
  .login-access .login-brand p.login-product.dark{position:relative;z-index:2;margin:0;padding:0;color:#fff;font-size:clamp(29px,8vw,36px);font-weight:900;letter-spacing:-.055em;line-height:1;text-align:center}
  .login-access .login-product.dark span{color:var(--dm-cyan);text-shadow:0 0 20px #4cc9df2e}
  .login-access .login-product.dark::after{content:'';display:block;width:54px;height:3px;margin:10px auto 0;border-radius:999px;background:linear-gradient(90deg,transparent,var(--dm-cyan),transparent);box-shadow:0 0 14px #4cc9df6b}

  /* Una sola columna centrada: nada mas necesita caja propia. */
  .login-access .mobile-login-kicker,
  .login-access #login>h2,
  .login-access #login>p:not(.eyebrow),
  .login-access .login-notice,
  .login-access #login .field,
  .login-access #login .primary.wide,
  .login-access .mobile-trust{width:min(100%,430px);margin-left:auto;margin-right:auto}

  /* El eyebrow de escritorio lo releva el kicker, que dice ademas que el asistente esta vivo. */
  .login-access #login>p.eyebrow{display:none}
  .login-access .mobile-login-kicker{display:flex;align-items:center;min-height:30px;margin-top:18px;margin-bottom:8px;color:#1c5d92}
  .login-access .mobile-login-kicker b{display:flex;align-items:center;gap:7px;min-height:28px;padding:0 10px 0 9px;border:1px solid #d7e8f5;border-radius:999px;background:#eef7fd;font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
  .login-access .mobile-login-kicker small{margin-left:auto;color:#7d91a4;font-size:9px;font-weight:750}
  .login-access .pulse-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--dm-green);box-shadow:0 0 0 5px #18a9821a}

  .login-access #login>h2{margin:0 0 5px;color:var(--dm-ink);font-size:clamp(31px,8.3vw,38px);font-weight:900;letter-spacing:-.045em;line-height:1}
  .login-access #login>p:not(.eyebrow){margin:0 0 17px;color:var(--dm-muted);font-size:14px;line-height:1.35}

  .login-access #login .field{position:relative;display:block;margin:0 0 11px;color:#25425b;font-size:12px;font-weight:800;line-height:1.2}
  .login-access #login .field>span{display:block;margin-bottom:6px}
  .login-access #login .field::after{content:'';position:absolute;left:15px;bottom:17px;width:18px;height:18px;opacity:.7;background-repeat:no-repeat;background-size:18px 18px;pointer-events:none}
  .login-access #login .field-user::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e7790' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20c.6-4 3.6-6 7.5-6s6.9 2 7.5 6'/%3E%3C/svg%3E")}
  .login-access #login .field-pass::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e7790' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
  /* 16px no es capricho: por debajo, iOS hace zoom al enfocar y descuadra la pantalla. */
  .login-access #login input{display:block;width:100%;height:52px;margin:0;padding:0 15px 0 45px;border:1px solid var(--dm-line);border-radius:15px;outline:none;background:#fff;color:var(--dm-ink);box-shadow:0 3px 10px #0a25400a;font:inherit;font-size:16px;font-weight:560;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .login-access #login input::placeholder{color:#9aabba;font-weight:550}
  .login-access .reveal-password{right:7px;bottom:6px;width:40px;height:40px}
  .login-access #login .field-pass input{padding-right:52px}
  .login-access #login input:focus{border-color:#75b9e8;box-shadow:0 0 0 4px #177fd514;transform:translateY(-1px)}

  .login-access #login .primary.wide{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;margin:7px auto 0;padding:0 18px;overflow:hidden;border:0;border-radius:15px;background:linear-gradient(100deg,#0c4777 0,#1168b1 52%,#1c8de7 100%);color:#fff;box-shadow:0 10px 24px #1168b136;font-size:15px;font-weight:850;-webkit-tap-highlight-color:transparent}
  .login-access #login .primary.wide::before{content:'';position:absolute;top:0;bottom:0;left:0;width:42%;background:linear-gradient(90deg,#ffffff14,transparent);pointer-events:none}
  .login-access #login .primary.wide b{font:inherit;font-weight:850}
  .login-access #login .primary.wide span{font-size:19px}
  .login-access #login .primary.wide:active{transform:translateY(1px)}

  .login-access .mobile-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
  .login-access .mobile-trust span{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:34px;padding:6px 8px;border:0;border-radius:10px;background:var(--dm-soft);color:#63798e;font-size:9.5px;font-weight:730;white-space:nowrap}
  .login-access .mobile-trust i{display:grid;place-items:center;flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:#e4f7f1;color:#0e8b69;font-size:10px;font-style:normal;font-weight:900}

  .login-access .login-notice{margin-top:0;margin-bottom:13px}
}

/* Pantallas bajas: se compacta para que el boton siga entrando sin scroll. */
@media(max-width:780px) and (max-height:720px){
  .login-access #login{padding-left:18px;padding-right:18px}
  .login-access .login-brand.mobile{min-height:134px;margin-left:-18px;margin-right:-18px;padding-top:max(34px,calc(env(safe-area-inset-top) + 24px));padding-bottom:15px;border-radius:0 0 24px 24px}
  .login-access .login-brand.mobile .brand-mark{width:min(62vw,215px);max-height:34px;margin-top:0}
  .login-access .login-brand p.login-product.dark{font-size:27px}
  .login-access .login-product.dark::after{width:44px;height:2px;margin-top:7px}
  .login-access .mobile-login-kicker{min-height:26px;margin-top:12px;margin-bottom:5px}
  .login-access .mobile-login-kicker b{min-height:25px;font-size:9px}
  .login-access #login>h2{margin-bottom:3px;font-size:29px}
  .login-access #login>p:not(.eyebrow){margin-bottom:11px;font-size:13px}
  .login-access #login .field{margin-bottom:8px}
  .login-access #login .field>span{margin-bottom:4px}
  .login-access #login .field::after{bottom:14px}
  .login-access #login input{height:45px}
  .login-access .reveal-password{height:35px;width:36px;bottom:5px}
  .login-access #login .primary.wide{height:47px;margin-top:3px}
  .login-access .mobile-trust{gap:6px;margin-top:8px}
  .login-access .mobile-trust span{min-height:30px;padding:4px 6px;font-size:8.9px}
}

@media(max-width:360px){
  .login-access #login{padding-left:15px;padding-right:15px}
  .login-access .login-brand.mobile{margin-left:-15px;margin-right:-15px}
  .login-access .mobile-trust span{padding-left:4px;padding-right:4px;font-size:8.6px}
}


/* --- Registro de actividad (solo administración) ---
   La lista es larga por definición y se lee de arriba a abajo, así que la fila tiene que
   decirlo todo en una línea —cuándo, quién, qué, dónde— y guardar el resto detrás de un clic:
   la IP, el detalle del hecho y el enlace a la asesoría solo importan cuando se está mirando
   ese hecho en concreto. */
.ops-metric-soft{font-size:19px!important;letter-spacing:-.3px}

/* Los datos a la izquierda y los filtros en una columna a la derecha. El panel a lo ancho
   ocupaba una pantalla entera de alto -treinta y pico acciones en filas larguísimas- y empujaba
   la primera fila del registro fuera de la vista: se entraba a leer lo que pasó y lo primero
   que se veía era el aparato para buscarlo. Va pegado, porque acotar se hace mirando la lista. */
.ops-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start;margin-top:14px}
.ops-workspace .surface{margin-bottom:0}
.ops-main{min-width:0;display:grid;gap:12px}
.ops-main #ops-active:empty{display:none}
.ops-main .ops-active{margin-top:0}
.ops-main .ops-groupbar{margin:0;padding:9px 13px;border:1px solid #e6ecf4;border-top:1px solid #e6ecf4;border-radius:13px;background:#fff;gap:10px}
.ops-side{min-width:0;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;scrollbar-width:thin}
.ops-side .ops-filters{padding:15px}
.ops-side .surface-head{flex-direction:column;align-items:stretch;gap:11px;margin-bottom:0}
.ops-side .surface-head h2{font-size:16px}
.ops-side .ops-headtools{width:100%;justify-content:stretch}
.ops-side .ops-search,.ops-side .ops-search input{width:100%}
.ops-side .ops-facet{margin-top:14px}
.ops-side .ops-chips{gap:5px}
.ops-side .ops-chip{padding:5px 7px 5px 10px;gap:5px;font-size:10.5px}
.ops-side .ops-chip em{padding:1px 5px;font-size:9.5px}
.ops-side .ops-date{width:100%;justify-content:space-between}
.ops-side .ops-selects{flex-direction:column;align-items:stretch;gap:11px}
.ops-side .ops-select select{width:100%;min-width:0}
.ops-side .ops-hide-pick{margin-top:10px}
.ops-side .ops-hidden-people{margin-top:9px}
@media(max-width:1180px){
  /* Sin sitio para dos columnas el panel vuelve arriba, entero y sin pegar: una columna de
     filtros de doscientos píxeles no acota, estorba. */
  .ops-workspace{grid-template-columns:minmax(0,1fr)}
  .ops-side{position:static;max-height:none;overflow:visible;order:-1}
  .ops-side .ops-selects{flex-direction:row;flex-wrap:wrap}
  .ops-side .ops-select select{width:auto;min-width:min(230px,70vw)}
  .ops-side .ops-date{width:auto}
  .ops-side .surface-head{flex-direction:row;align-items:flex-start;gap:14px}
  .ops-side .surface-head>div:first-child{flex:1 1 auto;min-width:0}
  .ops-side .ops-headtools{width:auto;justify-content:flex-end}
  .ops-side .ops-hide-pick{max-width:340px}
  .ops-side .ops-search input{width:min(280px,60vw)}
}
.ops-filters{padding-bottom:18px}
.ops-headtools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.ops-search input{width:min(280px,60vw);padding:9px 13px;border:1px solid #dbe4ef;border-radius:11px;background:#fbfdff;color:#16304f;font:inherit;font-size:12.5px}
.ops-search input:focus{outline:0;border-color:#7fb2d8;box-shadow:0 0 0 3px #d9ecf8}
.ops-facet{margin-top:16px}
.ops-facet-label{margin:0 0 8px;color:#8a99aa;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.ops-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ops-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;border:1px solid #e0e8f3;border-radius:99px;background:#f7fafd;color:#3b5578;font-size:11px;font-weight:800}
.ops-chip:hover{border-color:#b9d2e6;background:#eff7fc}
.ops-chip em{font-style:normal;padding:1px 7px;border-radius:99px;background:#e6ecf4;color:#6d8098;font-size:10px;font-variant-numeric:tabular-nums}
.ops-chip.on{border-color:#2d6dea;background:#eaf1ff;color:#143a80}
.ops-chip.on em{background:#2d6dea;color:#fff}
.ops-chip:focus-visible{outline:3px solid #389dc8;outline-offset:2px}
.ops-more{font-size:11px}
.ops-selects{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.ops-select{display:flex;flex-direction:column;gap:5px;min-width:0}
.ops-select span{color:#8a99aa;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.ops-select select{min-width:min(230px,70vw);padding:8px 11px;border:1px solid #dbe4ef;border-radius:10px;background:#fbfdff;color:#16304f;font:inherit;font-size:12px}
.ops-groupbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #edf1f5}
.ops-groupbar>span{color:#8a99aa;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}

/* --- Lo que está puesto ------------------------------------------------------------------
   Un filtro que esconde es invisible por definición: no deja rastro en la pantalla salvo el
   hueco de lo que ya no está. En una pantalla que se mira para auditar, eso engaña, así que
   todo lo activo se repite aquí arriba con su nombre y su cruz, y lo que aparta va en rosa y
   tachado para no confundirse con lo que acota. */
.ops-active{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:11px 13px;border:1px solid #dbe7f5;border-radius:13px;background:#f7fafd}
.ops-active-count{margin:0;flex:0 0 auto;color:#6c7f97;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.ops-active-count b{color:#16304f;font-size:13.5px}
.ops-active .ops-chips{flex:1 1 auto}
.ops-active>.text-btn{flex:0 0 auto;font-size:11px}
.ops-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 11px;border:1px solid #bcd0ea;border-radius:99px;background:#eaf1ff;color:#143a80;font-size:11px;font-weight:800}
.ops-pill i{font-style:normal;font-size:14px;line-height:1;color:#5f7fb5}
.ops-pill:hover{border-color:#2d6dea}
.ops-pill:hover i{color:#c4405c}
.ops-pill.off{border-color:#e6adbb;background:#fdeff2;color:#a13049}
.ops-pill.off span{text-decoration:line-through;text-decoration-thickness:1px}
.ops-pill.off i{color:#c07d8d}
.ops-pill.range{border-color:#bfe0d6;background:#eaf8f4;color:#0c7d6d}
.ops-pill:focus-visible{outline:3px solid #389dc8;outline-offset:2px}

/* El chip que aparta es el mismo que el que incluye, y solo se distingue cuando está puesto:
   apagado son las dos la misma pregunta —«esta acción»— y teñirlo antes de pulsarlo diría que
   ya está escondiendo algo. */
.ops-chip.off.on{border-color:#e0879a;background:#fdeff2;color:#a13049}
.ops-chip.off.on em{background:#c4405c}
.ops-chip.off.on span{text-decoration:line-through;text-decoration-thickness:1px}
.ops-hide{margin-top:16px;padding:13px;border:1px dashed #e6c3cd;border-radius:13px;background:#fefafb}
.ops-hide .ops-facet-label{color:#a13049}
.ops-hide-note{margin:9px 0 0;color:#9c8b91;font-size:10px;line-height:1.5}
.ops-drop{color:#b33a51}

.ops-date{display:inline-flex;align-items:center;gap:8px;padding:4px 11px;border:1px solid #e0e8f3;border-radius:99px;background:#fbfdff}
.ops-date span{color:#8a99aa;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.ops-date input{border:0;background:transparent;color:#16304f;font:inherit;font-size:11.5px;font-weight:800;padding:3px 0}
.ops-date input:focus{outline:0}
.ops-date:focus-within{border-color:#7fb2d8;box-shadow:0 0 0 3px #d9ecf8}

/* La franja de días: la forma del registro —una tarde de entrevistas es una torre— no se ve
   en una lista de filas. Cada día es un botón porque pulsarlo para acotar a ese día es el
   gesto que todo el mundo intenta, y antes no hacía nada. */
.ops-spark{margin:4px 0 18px}
.ops-spark-bars{display:flex;align-items:flex-end;gap:2px;height:56px;padding:0 2px;border-bottom:1px solid #dbe4ef}
.ops-spark-bars button{flex:1 1 0;min-width:2px;height:100%;display:flex;align-items:flex-end;padding:0;background:transparent;border-radius:4px 4px 0 0}
.ops-spark-bars button:hover{background:rgba(45,109,234,.09)}
.ops-spark-bars button:focus-visible{outline:3px solid #389dc8;outline-offset:1px}
.ops-spark-bars i{display:block;width:100%;height:max(var(--h),3%);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#5c95ff,#2d6dea)}
.ops-spark-bars button.zero i{background:#e6ecf4;height:3px}
.ops-spark-bars button.on i{background:linear-gradient(180deg,#2ad0af,#0c8574)}
.ops-spark-foot{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:#8496ac;font-size:9.5px;font-weight:800}

#ops-results.loading{opacity:.55;transition:opacity .12s}
.ops-list{display:grid}
/* La lista es larga por definición: quien viene a barrer un mes quiere más filas en pantalla,
   y quien viene a leer un hecho quiere el resumen. Es preferencia de quien mira y no un
   filtro, así que se recuerda en el navegador y no viaja en el enlace. */
.ops-list.compact .ops-row{min-height:42px;padding:5px 6px;font-size:11px}
.ops-list.compact .ops-who .user-avatar{width:24px;height:24px;font-size:9px}
.ops-list.compact .ops-what small,.ops-list.compact .ops-where small{display:none}
.ops-item{border-top:1px solid #edf1f5}
.ops-item.open{background:#f8fbfe}
.ops-row{display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,2fr) minmax(0,1fr) 18px;gap:14px;align-items:center;width:100%;min-height:58px;padding:9px 6px;text-align:left;background:transparent;color:#2b4160;font-size:11.5px}
.ops-row:hover{background:#f4f9fd}
.ops-row>span{min-width:0}
.ops-when b{display:block;font-size:12.5px;font-weight:900;color:#16304f;font-variant-numeric:tabular-nums}
.ops-when small,.ops-who small,.ops-what small,.ops-where small{display:block;color:#8fa0b4;font-size:9.5px;font-weight:700}
/* El rol con el que se actuó, en la fila y con color: es la diferencia entre «Marco respondió»
   y «Marco, administrando, respondió», y es también el filtro que más se usa. */
.ops-who small.ops-role{font-weight:800}
.ops-who small.ops-role.admin{color:#6a48b8}
.ops-who small.ops-role.supervisor{color:#2b5fd0}
.ops-who small.ops-role.invitado{color:#0c7d6d}
.ops-who{display:flex;align-items:center;gap:9px;min-width:0}
.ops-who>span{min-width:0}
.ops-who b,.ops-what b,.ops-where{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#16304f;font-weight:800}
.ops-what b{font-size:12px}
.ops-what small,.ops-where small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops-tag{display:inline-block;margin-bottom:3px;padding:2px 8px;border-radius:99px;font-style:normal;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;background:#eef2f7;color:#6d8098}
.ops-tag.blue{background:#e8f0ff;color:#2b5fd0}
.ops-tag.violet{background:#f0eafc;color:#6a48b8}
.ops-tag.mint{background:#e0f7f1;color:#0c7d6d}
.ops-tag.amber{background:#fdf1dd;color:#a06a10}
.ops-tag.rose{background:#fde9ec;color:#b33a51}
.ops-tag.teal{background:#e0f4f8;color:#12748c}
.ops-tag.slate{background:#eef1f5;color:#5b6e85}
.ops-where{color:#54697f;font-weight:700}
.ops-caret{color:#b6c3d2;font-size:17px;text-align:right;transition:transform .15s}
.ops-item.open .ops-caret{transform:rotate(90deg)}
.ops-detail{padding:4px 8px 18px 100px;animation:opsReveal .16s ease both}
@keyframes opsReveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.ops-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 20px}
.ops-detail-grid span{min-width:0}
.ops-detail-grid small{display:block;color:#8a99aa;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.ops-detail-grid b{display:block;margin-top:3px;color:#22405f;font-size:12px;font-weight:800;overflow-wrap:anywhere}
.ops-detail-actions{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.ops-detail>.text-btn{margin-top:14px}
.ops-more-rows{display:block;width:100%;margin-top:14px;padding:12px;border:1px dashed #c9d8ee;border-radius:12px;background:#f6f9ff;color:#225fd7;font-size:12px;font-weight:900}
.ops-more-rows:hover:not(:disabled){background:#eaf1ff}

.ops-groups-list{display:grid;gap:12px}
.ops-group{display:block;width:100%;padding:13px 15px;text-align:left;border:1px solid #e6ecf4;border-radius:13px;background:#fbfdff;color:#2b4160}
.ops-group:hover:not(.static){border-color:#b9d2e6;background:#f2f9fd}
.ops-group.static{cursor:default}
.ops-grouphead{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.ops-grouphead b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#16304f;font-size:12.5px;font-weight:800}
.ops-grouphead span{flex:0 0 auto;color:#6c7f97;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums}
.ops-group .bill-bar{margin:8px 0 5px}
.ops-groupfoot{color:#8fa0b4;font-size:9.5px;font-weight:700;min-height:12px}

@media(max-width:1000px){
  .ops-row{grid-template-columns:70px minmax(0,1fr) 16px;grid-template-areas:"when what caret" "when where caret" "who who caret";row-gap:4px}
  .ops-when{grid-area:when}.ops-what{grid-area:what}.ops-where{grid-area:where}.ops-who{grid-area:who}
  .ops-detail{padding-left:12px}
  .ops-headtools{width:100%;justify-content:flex-start}
}

@media(max-width:900px){
  /* La cuenta de lo puesto encabeza su propia línea: apretada contra las pastillas se leía
     como una de ellas, y es justo la cifra que dice cuánto se está escondiendo. */
  .ops-active{flex-direction:column;align-items:stretch;gap:9px}
  .ops-date{justify-content:space-between}
  .ops-search,.ops-search input{width:100%}
}



/* --- Correo de la plataforma (solo administración) ---
   Formulario a la izquierda en tres pasos -proveedor, cuenta, cómo lo ve quien recibe- y la
   prueba a la derecha, pegada: se prueba mirando lo que se acaba de escribir. La bandeja va
   debajo y a lo ancho, porque se consulta después de configurar y no mientras. */
.mail-state{align-self:center;padding:8px 14px;border-radius:99px;font-size:12px;font-weight:900;white-space:nowrap}
.mail-state.ok{background:#e3f7f3;color:#0b7a68}
.mail-state.off{background:#eef2f7;color:#6d8098}
.mail-state.error{background:#fff1e2;color:#a4560c}
.mail-workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.mail-main,.mail-side{min-width:0;display:grid;gap:12px}
.mail-side{position:sticky;top:12px}
.mail-form{display:grid;gap:12px}
.mail-card{margin-bottom:0}
.mail-card .surface-head{margin-bottom:12px}
.mail-banner{display:grid;gap:3px;padding:12px 15px;border:1px solid;border-radius:12px;font-size:12px;line-height:1.5}
.mail-banner b{font-size:12.5px}
.mail-banner.info{border-color:#cfe0f7;background:#f3f8ff;color:#28507f}
.mail-banner.error{border-color:#f6d2a8;background:#fff6ec;color:#8a4a0b}

.mail-switchrow{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.mail-switchtext{display:grid;gap:3px;min-width:0}
.mail-switchtext b{font-size:15px;color:#13304f}
.mail-switchtext small{color:#6b7c91;font-size:12px;line-height:1.45}
.mail-switch{position:relative;flex:none;width:46px;height:26px}
.mail-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.mail-switch i{position:absolute;inset:0;border-radius:99px;background:#cfd9e5;transition:background-color .2s}
.mail-switch i:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,45,80,.25);transition:transform .2s}
.mail-switch input:checked+i{background:#18a98f}
.mail-switch input:checked+i:before{transform:translateX(20px)}
.mail-switch input:focus-visible+i{outline:3px solid #389dc8;outline-offset:2px}

.mail-providers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.mail-provider{position:relative;cursor:pointer}
.mail-provider input{position:absolute;opacity:0;pointer-events:none}
.mail-provider>span{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;height:100%;padding:12px;border:1.5px solid #e0e8f3;border-radius:12px;background:#fbfdff;transition:border-color .15s,box-shadow .15s}
.mail-provider i{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef3f9;color:#3a5a80;font-style:normal;font-weight:900}
.mail-provider b{font-size:13px;color:#13304f}
.mail-provider small{color:#7a8ba0;font-size:11px;line-height:1.35}
.mail-provider input:checked+span{border-color:#2f6fe4;background:#f4f8ff;box-shadow:0 0 0 3px #e3edff}
.mail-provider input:checked+span i{background:#2f6fe4;color:#fff}
.mail-provider input:focus-visible+span{outline:3px solid #389dc8;outline-offset:2px}
.mail-preset{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#f4f7fb;color:#5c6f86;font-size:12px}
.mail-preset b{color:#1d3b5e}

.mail-grid{display:grid;gap:12px;margin-top:12px}
.mail-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.mail-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.mail-custom{grid-template-columns:minmax(0,1.6fr) 110px minmax(0,1.2fr)}
.mail-field{display:grid;gap:5px;align-content:start;min-width:0}
.mail-field>span{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#4f6580;font-size:11.5px;font-weight:800}
.mail-field input,.mail-field select{width:100%;min-width:0;padding:10px 12px;border:1px solid #d8e2ee;border-radius:10px;background:#fbfdff;color:#16304f;font:inherit;font-size:13px}
.mail-field input:focus,.mail-field select:focus{outline:0;border-color:#7fb2d8;box-shadow:0 0 0 3px #d9ecf8}
.mail-field small{color:#8091a4;font-size:11px;line-height:1.4}
.mail-field.invalid input,.mail-field.invalid select{border-color:#e08a5a;background:#fffaf6}
.mail-error{color:#b4520f;font-size:11px;font-style:normal;font-weight:700;line-height:1.4}
.mail-saved{color:#0b7a68;font-size:10.5px;font-style:normal;font-weight:800}
.mail-secret{position:relative;display:block}
.mail-secret input{padding-right:74px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em}
.mail-reveal{position:absolute;top:50%;right:6px;transform:translateY(-50%);padding:5px 10px;border-radius:7px;background:#eef3f8;color:#3e5876;font-size:11px;font-weight:800}

.mail-inbox{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:14px;padding:12px 14px;border:1px dashed #d6e0ec;border-radius:12px;background:#fbfcfe}
.mail-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#2f6fe4,#18a98f);color:#fff;font-weight:900}
.mail-inbox-main{display:grid;min-width:0}
.mail-inbox-main b{color:#13304f;font-size:13px}
.mail-inbox-main span,.mail-inbox-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-inbox-main span{color:#40566f;font-size:12px}
.mail-inbox-main small{color:#8a9aae;font-size:11px}
.mail-inbox time{color:#8a9aae;font-size:11px}

.mail-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:4px 2px}
.mail-stamp{margin-right:auto;color:#8091a4;font-size:11.5px}

.mail-help{margin:0 0 10px;color:#6b7c91;font-size:12px;line-height:1.5}
.mail-test .mail-field{margin-bottom:12px}
.mail-test .primary.wide{width:100%}
.mail-result{display:grid;gap:3px;margin-top:12px;padding:11px 13px;border-radius:11px;font-size:12px;line-height:1.45}
.mail-result.ok{background:#e3f7f3;color:#0b6f61}
.mail-result.error{background:#fff2e4;color:#93500f}
.mail-result small{opacity:.75;font-size:11px}
.mail-guide ol{margin:0 0 12px;padding-left:18px;color:#33475f;font-size:12.5px;line-height:1.55}
.mail-guide li{margin-bottom:6px}
.mail-guide a{color:#2563eb;font-weight:800;overflow-wrap:anywhere}

.mail-queue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.mail-list{display:grid}
.mail-row{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #eef2f7}
.mail-row:first-child{border-top:0}
.mail-row-main{display:grid;min-width:0}
.mail-row-main b{color:#16304f;font-size:12.5px}
.mail-row-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7a8ba0;font-size:11px}
.mail-row-main em{margin-top:3px;color:#93500f;font-size:11px;font-style:normal;line-height:1.4}
.mail-row time{color:#8a9aae;font-size:11px;white-space:nowrap}
.mail-chip{justify-self:start;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:900}
.mail-chip.ok{background:#e3f7f3;color:#0b7a68}
.mail-chip.pending{background:#eaf1ff;color:#2457c5}
.mail-chip.error{background:#fff1e2;color:#a4560c}
.mail-chip.off{background:#eef2f7;color:#6d8098}
.mail-mini{padding:6px 11px;border:1px solid #d8e2ee;border-radius:9px;background:#fff;color:#2457c5;font-size:11.5px;font-weight:800;white-space:nowrap}
.mail-mini:hover{border-color:#9fbce8;background:#f4f8ff}
.mail-mini:disabled{opacity:.5;cursor:wait}

@media(max-width:1100px){
  .mail-workspace{grid-template-columns:minmax(0,1fr)}
  .mail-side{position:static}
  .mail-queue{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .mail-providers,.mail-grid.two,.mail-grid.three,.mail-custom{grid-template-columns:minmax(0,1fr)}
  .mail-row{grid-template-columns:minmax(0,1fr) auto}
  .mail-row .mail-chip{grid-column:1/-1}
  .mail-actions{justify-content:stretch}
  .mail-actions .primary,.mail-actions .secondary{flex:1}
  .mail-stamp{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.mail-switch i,.mail-switch i:before,.mail-provider>span{transition:none}}