/* ============================================================
   mis_accesos.css — el panel «Selecciona la empresa con la que vas a trabajar»
   (07/10/2026, maqueta 4: Evalua-codigo/mockup_accesos_v4.html, escenas 1 a 6).

   UN SOLO PANEL para el ingreso con varias empresas y para «Mis accesos» ya
   adentro: columna 1 tus empresas, columna 2 (al tocar «Ver emails vinculados»)
   tus emails. Reemplaza la ventana vieja de Mis accesos (04/10).
   COPIADO pieza por pieza del <style> de la maqueta 4 (los valores son los
   mismos); cambian solo los nombres: «#caja» es #maCaja y las clases de la
   maqueta llevan el prefijo «ma-», porque el panel se abre en el ingreso, en
   Inicio, en la Agenda, en Objetivos y en Configuración, y no tiene que chocar
   con lo de cada una. La caja, la cabecera y el pie son los del panel del
   ingreso (elegir_empresa.css: .ee-caja, .ee-cab, .ee-titulo, .ee-sub, .ee-pie,
   .ee-link, .ee-btn-sec), como en la maqueta.
   Los popups son los del ingreso de Gestiona (.ma-pop), proporcionados en
   mis_accesos.js (regla 364).
   ============================================================ */

/* ── La caja: una o dos columnas ───────────────────────────── */
#maPanel .ee-fondo { z-index: 10010; }
/* El acento del panel y de sus popups: mostaza en Gestiona; naranja de EVALUA fuera de Gestiona
   (Alejandro 10/10, como el menú de «Mi cuenta», IN-075). mis_accesos.js pone body.ma-evalua. */
:root { --ma-ac: #c9920a; --ma-ac2: #d4a017; --ma-rgb: 201,146,10; --ma-hover: #a87a08; }
body.ma-evalua { --ma-ac: #bf5808; --ma-ac2: #e06010; --ma-rgb: 191,88,8; --ma-hover: #9f4806; }
#maCaja { z-index: 10011; text-align: left; }
#maCaja ::-webkit-scrollbar, #maCaja::-webkit-scrollbar { width: 4px; height: 4px; }
#maCaja ::-webkit-scrollbar-track, #maCaja::-webkit-scrollbar-track { background: transparent; }
#maCaja ::-webkit-scrollbar-thumb, #maCaja::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }
#maCaja .ma-grid { overflow: hidden; }
/* Abrir y cerrar la columna 2: suave (Alejandro, 07/10). */
#maCaja.ma-v4 { width: 781px; min-width: 0; overflow: hidden;
  transition: right .45s cubic-bezier(.22,.61,.36,1), width .45s cubic-bezier(.22,.61,.36,1); }
#maCaja.ma-v4.dos { width: 1252px; }
/* Adentro del sistema, de la barra de arriba para abajo (regla 344); la barra queda a la vista. */
#maCaja.ma-v4.adentro { top: 52px; }
#maPanel.ma-adentro .ee-fondo { top: 52px; }
/* En el ingreso de Gestiona el encabezado (logo y «Define objetivos…») no se tapa (Alejandro 10/10):
   mis_accesos.js pone --ma-top debajo de su .top. */
#maCaja.ma-v4:not(.adentro) { top: var(--ma-top, 0px); }
#maPanel:not(.ma-adentro) .ee-fondo { top: var(--ma-top, 0px); }
body.ma-evalua #maCaja .ee-titulo { color: var(--ma-ac2); }
#maCaja.dos .ma-grid { grid-template-columns: 780px 470px; }
#maCaja .ma-grid .ee-cab { height: 92px; box-sizing: border-box; padding: 20px 34px 14px; }
#maCaja .ma-grid .ee-cab .ee-sub, #maCaja .ma-grid .ee-cab .ee-titulo { white-space: nowrap; }
#maCaja .ma-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 780px 1fr; grid-template-rows: auto 1fr; }
#maCaja:not(.dos):not(.cierra) .ma-c2 { display: none; }
#maCaja:not(.dos):not(.cierra) .ma-grid { grid-template-columns: 780px; }
/* Al ocultar, la columna 2 sale con el panel (se desvanece mientras el panel se cierra) y recién
   después se quita: nada queda vacío ni a medio dibujar. */
#maCaja.cierra:not(.dos) .ma-grid { grid-template-columns: 780px 470px; }
#maCaja.cierra:not(.dos) .ma-c2 { animation: maSale .3s ease both; overflow: hidden; pointer-events: none; }
@keyframes maSale { from { opacity: 1; } to { opacity: 0; } }
#maCaja .ma-grid > .ee-cab.ma-c1 { grid-column: 1; grid-row: 1; }
#maCaja .ma-grid > .ee-cab.ma-c2 { grid-column: 2; grid-row: 1; }
#maCaja .ma-grid > .ma-cuerpo.ma-c1 { grid-column: 1; grid-row: 2; }
#maCaja .ma-grid > .ma-cuerpo.ma-c2 { grid-column: 2; grid-row: 2; }
/* Línea entre columnas: del mismo color que la horizontal y solo debajo de ella (Alejandro, 07/10). */
#maCaja .ma-grid .ma-cuerpo.ma-c2 { border-left: 1px solid rgba(255,255,255,.12); }
#maCaja.dos .ma-cuerpo.ma-c1 { width: 770px; box-sizing: border-box; }
/* La columna 2 aparece (solo se aclara, sin correrse) cuando el panel terminó de ensancharse. */
#maCaja .ma-c2.entra { animation: maAparece .3s ease .45s both; }
@keyframes maAparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes maEntra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
#maCaja .ma-cuerpo { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 30px 12px 34px;
  display: flex; flex-direction: column; scrollbar-gutter: stable; box-sizing: border-box; }
#maCaja .ma-cuerpo::-webkit-scrollbar { width: 4px; }
#maCaja .ma-cuerpo::-webkit-scrollbar-track { background: transparent; }
#maCaja .ma-cuerpo::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }
#maCaja .ee-sub.nueva { color: rgba(255,255,255,.75); }
#maCaja .ee-sub.nueva b { color: var(--ma-ac2); }
/* La caja recibe el foco al abrirse, sin anillo (regla 86). */
#maCaja:focus { outline: none; }

/* El «?» del título: el botón de ayuda del sistema (.btn-ayuda-c de ui.css, copiado: el ingreso
   no carga ui.css). Abre la ayuda «Ingreso», sin globo (Alejandro, 07/10). */
#maCaja .btn-ayuda-c { width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(106,172,204,.25);
  color: rgba(180,220,255,.7); font-size: 10px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font,'Lato',sans-serif); vertical-align: middle; margin-left: 6px; line-height: 1;
  flex-shrink: 0; text-decoration: none; transition: background .15s; padding: 1px 6px; box-sizing: border-box; }
#maCaja .btn-ayuda-c:hover { background: rgba(106,172,204,.45); }

/* Rótulos, como Permisos */
#maCaja .ma-lbl { font-size: 10px; font-weight: 700; letter-spacing: .8px; color: rgba(255,255,255,.32); text-transform: uppercase; margin-bottom: 3px; }
#maCaja .ma-tit { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; }
/* Con vinculados, la columna 2 lleva la frase de Alejandro (09/10) en lugar de «Tus emails» y el
   título: dos renglones del mismo alto que rótulo + título, así las filas siguen alineadas al renglón 1. */
#maCaja .ma-c2-frase > .ma-lbl { display: none; }
/* «Tus cuentas relacionadas» en mostaza (Alejandro, 09/10; antes «Tus empresas» en gris). */
#maCaja .ma-lbl-cuentas { color: var(--ma-ac2); }
/* Los títulos de las dos columnas, en mostaza y sin negrita (Alejandro, 09/10). */
#maCaja #maTitEmp, #maCaja #maTxtEmails { font-size: 12.5px; font-weight: 400; color: var(--ma-ac2); line-height: 15px; margin-bottom: 13px; }
#maCaja .ma-c2-frase > #maTxtEmails { margin-bottom: 12px; }

/* La tabla: .utable de Permisos, una fila por empresa o por email (nombre en negrita, línea gris debajo). */
#maCaja .ma-tab { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* El panel se abre sobre cualquier pantalla: no hereda las reglas sueltas de th/thead/td de esa pantalla (Personas, alta masiva, estado de encuestas, Formularios… ponían una banda negra fija). Alejandro 13/10. */
#maCaja .ma-tab thead th { background: transparent !important; position: static !important; z-index: auto !important; box-shadow: none !important; }
#maCaja .ma-tab thead th::after, #maCaja .ma-tab thead th::before, #maCaja .ma-tab thead tr::after { content: none !important; display: none !important; }
#maCaja .ma-tab tbody td { position: static; }
#maCaja .ma-tab thead th { font-size: 9px; font-weight: 700; letter-spacing: .6px; color: rgba(255,255,255,.3); text-transform: uppercase;
  padding: 0 6px 7px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; white-space: nowrap; }
#maCaja .ma-tab td { padding: 8px 6px 7px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; height: 44px;
  line-height: 16px; box-sizing: border-box; transition: background .15s; }
#maCaja .ma-tab td.ma-tdsel { padding: 9px 0 0 6px; }
#maCaja .ma-tab td.ma-tdder { padding: 9px 6px 0 0; }
#maCaja .ma-tab td.ma-tdder .ma-sel, #maCaja .ma-opc .ma-sel { margin-left: auto; }
/* «Vincular otras cuentas»: el texto a la izquierda y el círculo a la derecha, en la columna de los otros círculos. */
#maCaja #maOpVinc { justify-content: flex-end; gap: 10px; padding-right: 6px; }
#maCaja #maOpVinc .ma-sel { margin-left: 0; }
#maCaja .ma-fila { cursor: pointer; }
#maCaja .ma-fila:hover td { background: rgba(255,255,255,.025); }
#maCaja .ma-fila.fija { cursor: default; }
#maCaja .ma-nom { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
#maCaja .ma-nom .ma-ini { margin-top: -6px; }
#maCaja .ma-ini { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
#maCaja .ma-ini svg { width: 14px; height: 14px; }
#maCaja .ma-nomtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#maCaja .ma-nm { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
#maCaja .ma-nm .ma-nmt { overflow: hidden; text-overflow: ellipsis; }
#maCaja .ma-gris { font-size: 10.5px; color: rgba(255,255,255,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#maCaja .ma-c { font-size: 11.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
#maCaja .ma-n { font-size: 12px; color: rgba(255,255,255,.6); }
#maCaja .ma-rol { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
#maCaja .ma-r-adm { color: var(--ma-ac2); } #maCaja .ma-r-col { color: #4ecba0; } #maCaja .ma-r-inv { color: #6aacff; } #maCaja .ma-r-per { color: rgba(255,255,255,.5); }
#maCaja .ma-nueva { font-size: 9.5px; font-weight: 700; color: #fff; background: var(--ma-ac); border-radius: 4px; padding: 1px 6px; letter-spacing: .3px; flex-shrink: 0; }
#maCaja .ma-pend { color: var(--ma-ac2); font-weight: 700; }
/* Verde, como «Desvincular» pero en el color de Colaborador (Alejandro, 09/10). */
#maCaja .ma-usado { font-size: 11.5px; font-weight: 700; color: #4ecba0; white-space: nowrap; }
/* «Pendiente de vincular»: en el lugar de «Desvincular», alineado a la derecha como los círculos. */
#maCaja .ma-tab td.ma-tdpend { font-size: 11.5px; white-space: nowrap; }
#maCaja .ma-hueco { display: inline-block; width: 1px; height: 1px; visibility: hidden; }
#maCaja .ma-sel.ma-hueco { display: block; width: 14px; height: 14px; }
#maCaja .ma-tab td.ma-tdpend .ma-pend { font-weight: 700; letter-spacing: -.1px; }
/* Las empresas dadas de baja (IN-035): solo con la columna de emails abierta, al final, en gris y
   sin círculo, con «Te dieron de baja el …». */
#maCaja .ma-fila.baja .ma-nm, #maCaja .ma-fila.baja .ma-rol, #maCaja .ma-fila.baja .ma-c { color: rgba(255,255,255,.3); }
#maCaja .ma-fila.baja .ma-ini { color: rgba(255,255,255,.3); }
#maCaja:not(.dos) .ma-fila.baja { display: none; }

/* El círculo de selección: COPIA del de Informes (.sel-op input[type="radio"] de
   informes_desempeno.html): 14 px, borde 2 px, punto al 45 %. Solo cambia el color:
   mostaza de Gestiona en vez del naranja de EVALUA. */
#maCaja .ma-sel { display: block; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.3); background: transparent; transition: border-color .12s, background .12s; }
#maCaja .on .ma-sel { border-color: var(--ma-ac); background: radial-gradient(circle, var(--ma-ac) 45%, transparent 46%); }

/* La elegida: la marca del panel real (.ee-op.activa): fondo mostaza suave y barra de 3 px. */
#maCaja .ma-fila.on td { background: rgba(var(--ma-rgb),.12); }
/* Ingreso de EVALUA: la cuenta sin acceso a EVALUA, apagada y sin poder elegirla (Alejandro 10/10). */
#maCaja .ma-fila.ma-sinev { opacity: .45; cursor: default; }
#maCaja .ma-fila.ma-sinev .ma-sel { visibility: hidden; }
/* Invitado sin agendas compartidas (Alejandro 13/10): la fila sigue apagada, pero «Todavía no te
   compartieron agendas» va entera en el rojo del panel (el de «Desvincular»). */
#maCaja .ma-fila.ma-sinag { opacity: 1; }
#maCaja .ma-fila.ma-sinag > td { opacity: .45; }
#maCaja .ma-fila.ma-sinag > td:nth-child(2) { opacity: 1; }
#maCaja .ma-fila.ma-sinag > td:nth-child(2) .ma-ini, #maCaja .ma-fila.ma-sinag > td:nth-child(2) .ma-nm { opacity: .45; }
#maCaja .ma-fila.ma-sinag .ma-gris { color: #ff6b6b; }
#maCaja .ma-fila.on td:first-child { box-shadow: inset 3px 0 0 var(--ma-ac); }
#maCaja .ma-fila.on .ma-ini { color: #fff; background: rgba(var(--ma-rgb),.35); border-color: transparent; }
/* Las empresas que dejarías de ver al desvincular el email elegido: rojo suave y su barra. */
#maCaja .ma-fila.pierde td { background: rgba(255,107,107,.09); }
/* Las empresas del email con el que entraste (o el que usas ahora), al tocar su fila: mostaza suave (no se pierden). */
#maCaja .ma-fila.suya td { background: rgba(var(--ma-rgb),.08); }
#maCaja .ma-fila.suya td:first-child { box-shadow: inset 3px 0 0 rgba(var(--ma-rgb),.7); }
#maCaja .ma-fila.pierde td:first-child { box-shadow: inset 3px 0 0 #ff6b6b; }
#maCaja .ma-fila.pierde .ma-gris .ma-deja { color: #ff8a80; font-weight: 700; }

/* «Ver emails vinculados»: en el pie, a la izquierda y en la misma fila que los botones (dibujo de Alejandro, 07/10). */
/* Sin «Ver / Ocultar emails vinculados»: el panel abre siempre con las dos columnas (Alejandro, 09/10). */
#maCaja #maVer { display: none; }
#maCaja #maVer svg { width: 12px; height: 12px; transition: transform .2s; }
#maCaja.dos #maVer svg { transform: rotate(180deg); }

/* Desvincular: enlace de texto rojo (sin tacho, contrato punto 16). */
#maCaja .ma-desv { font-size: 11.5px; font-weight: 700; color: #ff6b6b; cursor: pointer; background: none; border: none; font-family: inherit; padding: 2px 0; }
#maCaja .ma-desv:hover, #maCaja .ma-desv:focus { text-decoration: underline; outline: none; }
/* «Pendiente de vincular» se toca como «Desvincular» (Alejandro, 10/10). */
#maCaja .ma-pend-btn { font-size: 11.5px; cursor: pointer; background: none; border: none; font-family: inherit; padding: 2px 0; white-space: nowrap; }
#maCaja .ma-pend-btn:hover, #maCaja .ma-pend-btn:focus { text-decoration: underline; outline: none; }

/* «Vincular otras cuentas de email»: una opción más, con su círculo. */
#maCaja .ma-opc { display: flex; align-items: center; gap: 12px; padding: 0 6px; height: 44px; flex-shrink: 0; margin-top: 10px; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--ma-ac); box-sizing: border-box; }
#maCaja .ma-opc:hover { background: rgba(255,255,255,.025); }
#maCaja .ma-opc.on { background: rgba(var(--ma-rgb),.12); box-shadow: inset 3px 0 0 var(--ma-ac); color: var(--ma-ac2); }
#maCaja .ma-recuadro { display: none; margin-top: 8px; padding: 12px 14px 14px; border: 1px solid rgba(var(--ma-rgb),.35); border-radius: 8px; background: rgba(255,255,255,.02); }
#maCaja .ma-recuadro.visible { display: block; animation: maEntra .18s ease; }
#maCaja .ma-recuadro p { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.62); margin: 0 0 10px; }
#maCaja .ma-campo { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
#maCaja .ma-campo label { flex: 0 0 132px; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.4); }
#maCaja .ma-inp { width: 220px; height: 30px; box-sizing: border-box; padding: 0 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 7px;
  font-family: inherit; font-size: 13px; color: #fff; background: rgba(255,255,255,.06); outline: none; margin: 0; }
#maCaja .ma-inp:focus { border-color: rgba(var(--ma-rgb),.6); }
#maCaja .ma-inp::placeholder { color: rgba(255,255,255,.22); }

/* El pie: «Salir» y «Continuar», abajo a la derecha (regla 344). 96 px los dos (Alejandro, 07/10). */
#maCaja .ee-pie { padding: 12px 34px 16px; border-top: 1px solid rgba(255,255,255,.09); }
#maCaja .ee-pie .ma-btn, #maCaja .ee-pie .ee-btn-sec { min-width: 96px; width: 96px; padding: 0; box-sizing: border-box; }
/* El aviso verde «… se desvinculó», en el pie, al lado de «Ver emails vinculados»; vacío el resto del tiempo. */
#maCaja .ma-pista { margin: 0 auto 0 28px; font-size: 12px; color: rgba(255,255,255,.4); }
#maCaja .ma-pista.ok { color: #3fbf6f; font-weight: 700; font-size: 13px; }

/* ── Botones del pie: los del sistema ── */
.ma-btn { height: 34px; padding: 0 18px; min-width: 136px; border-radius: 7px; box-sizing: border-box;
  font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s; background: var(--ma-ac); color: #fff; border: none; }
.ma-btn:hover { background: var(--ma-hover); }
.ma-btn:disabled { background: rgba(255,255,255,.15); color: rgba(255,255,255,.3); cursor: not-allowed; }

/* ── La ayuda «Ingreso»: el panel de ayuda del sistema (ayuda.css), por encima del panel ── */
#maHpOv { z-index: 10040; }
#maHp { z-index: 10041; }
#maHp.fullscreen { z-index: 100000; }
#maHp:not(.open) { visibility: hidden; }

/* ── Los popups: los del ingreso de Gestiona ─────────────────
   Mostaza informa, rojo avisa o confirma algo que no tiene vuelta (reglas 332, 340 y 342).
   Sin ancho escrito: lo calcula mis_accesos.js (regla 364). */
.ma-pop-fondo { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 10060;
                align-items: center; justify-content: center; font-family: 'Lato', sans-serif; }
.ma-pop { background: #1c1f23; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; padding: 20px 22px 18px;
          box-sizing: border-box; max-width: 92vw; text-align: left; }
.ma-pop:focus { outline: none; }
.ma-pop.rojo { border-top: 3px solid #cc0000; }
.ma-pop.mostaza { border-top: 3px solid var(--ma-ac); }
.ma-pop-in { display: grid; grid-template-columns: 28px 1fr; gap: 10px; margin-bottom: 16px; }
.ma-pop-ico svg { width: 22px; height: 22px; stroke-width: 1.8; margin-top: 1px; fill: none; }
.ma-pop.rojo .ma-pop-ico svg { stroke: #cc0000; }
.ma-pop.mostaza .ma-pop-ico svg { stroke: var(--ma-ac); }
.ma-pop-tit { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ma-pop.rojo .ma-pop-tit { color: #cc0000; }
.ma-pop.mostaza .ma-pop-tit { color: var(--ma-ac); }
.ma-pop-msg { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
.ma-pop-msg b { color: var(--ma-ac2); }
/* Aviso al ingresar con varias cuentas (dibujo de Alejandro, 13/10): sin ícono ni título, las dos
   opciones en su renglón, corridas a la derecha; la cuenta en mostaza. El panel espera oculto. */
#maCaja.ma-oculta { visibility: hidden !important; }
.ma-aviso-ingreso .ma-pop-in { grid-template-columns: 1fr; }
.ma-aviso-ingreso .ma-pop-ico, .ma-aviso-ingreso .ma-pop-tit, .ma-aviso-ingreso .ma-pop-btns { display: none; }
.ma-aviso-ingreso .ma-pop-in { margin-bottom: 0; }
.ma-aviso-ingreso .ma-pop-msg { font-size: 13px; }
.ma-elige { margin: 12px 0 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: start; }
.ma-elige-rot { line-height: 20px; }
.ma-elige-ops { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ma-elige-op { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.85); cursor: pointer; outline: none; }
.ma-elige-op.ma-elige-cta { color: var(--ma-ac2); font-weight: 700; }
/* El círculo del panel (#maCaja .ma-sel), sin fondo en el texto: con el mouse o el foco se enciende el borde; al elegir, se marca. */
.ma-elige-op .ma-sel { display: block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.3); background: transparent; transition: border-color .12s, background .12s; }
.ma-elige-op:focus .ma-sel { border-color: var(--ma-ac); }
.ma-elige-op.on .ma-sel { border-color: var(--ma-ac); background: radial-gradient(circle, var(--ma-ac) 45%, transparent 46%); }
/* En el popup rojo solo el título va en rojo; lo destacado, en negrita del color del texto (Alejandro, 09/10). */
.ma-pop.rojo .ma-pop-msg b { color: rgba(255,255,255,.8); }
/* Los nombres no se parten, y ningún botón lleva anillo de foco (regla 86). */
.ma-pop-msg b.nw { white-space: nowrap; }
.ma-pop-btns { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.ma-pop-btns-in { display: flex; justify-content: flex-end; gap: 8px; }
.ma-pop-btn { height: 32px; padding: 0 16px; border: none; border-radius: 7px; font-family: 'Lato', sans-serif;
              font-size: 13px; font-weight: 700; cursor: pointer; color: #fff; white-space: nowrap; }
.ma-pop-btn:focus, .ma-pop-btn:focus-visible { outline: none; }
.ma-pop-btn.mostaza { background: var(--ma-ac); }
.ma-pop-btn.mostaza:hover { background: var(--ma-hover); }
.ma-pop-btn.rojo { background: #cc0000; }
.ma-pop-btn.rojo:hover { background: #a80000; }
.ma-pop-btn.gris { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.ma-pop-btn.gris:hover { background: rgba(255,255,255,.14); color: #fff; }

/* En el teléfono: el ingreso de Gestiona no se usa (pm_login_gestiona.html lo bloquea); adentro,
   el panel ocupa el ancho, con las columnas una debajo de la otra y la tabla que se desplaza de
   costado adentro del panel. */
@media (max-width: 768px) {
  #maPanel.ma-adentro .ee-fondo { display: block !important; }
  #maPanel.ma-adentro .ee-caja { display: flex !important; }
  #maCaja.ma-v4, #maCaja.ma-v4.dos { width: 100vw; }
  #maCaja .ma-grid, #maCaja.dos .ma-grid { grid-template-columns: 100%; grid-template-rows: auto auto auto auto; overflow-y: auto; }
  #maCaja .ma-grid > .ee-cab.ma-c2 { grid-column: 1; grid-row: 3; }
  #maCaja .ma-grid > .ma-cuerpo.ma-c2 { grid-column: 1; grid-row: 4; border-left: none; }
  #maCaja.dos .ma-cuerpo.ma-c1 { width: auto; }
  #maCaja .ma-grid .ee-cab { height: auto; padding: 16px; }
  #maCaja .ma-grid .ee-cab .ee-sub, #maCaja .ma-grid .ee-cab .ee-titulo { white-space: normal; }
  #maCaja .ma-cuerpo { overflow-x: auto; padding: 10px 16px; }
  #maCaja .ma-cuerpo.ma-c1 .ma-tab { min-width: 600px; }
  #maCaja .ee-pie { padding: 12px 16px; flex-wrap: wrap; }
  #maCaja .ma-pista { margin: 0 auto 0 12px; }
}

/* El globo de los emails (#maTip): el panel también se abre en el ingreso de Gestiona, que no
   carga ui.css; sin esto el globo salía sin fondo y con la letra de la pantalla (Alejandro 10/10:
   «el toplist está sin fondo», «tamaño del sistema»). Copia de .ui-tooltip de ui.css. */
#maTip {
  background: rgba(30,40,52,.95);
  border: 1px solid rgba(106,172,204,.25);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
  font-family: 'Lato', sans-serif;
}