/* ============================================================
   elegir_empresa.css — elegir y cambiar de empresa en Gestiona
   (04/10/2026, tramo B del ingreso: IN-033 e IN-048).

   Todo va con el prefijo «ee-» para no chocar con lo que ya tiene cada
   pantalla. Los valores están COPIADOS, no imitados:
   · el panel del ingreso, del panel lateral del sistema (pm_agenda.css,
     «.panel-lat .ficha-caja.gr-panel», regla 344) con los ajustes del
     mockup aprobado (mockup_accesos.html, escena 1);
   · el recuadro del encabezado, del selector de agendas (pm_agenda.css,
     «.ag-agsel-*») con los ajustes de mockup_cambiar_empresa.html;
   · la tira positiva, de «.ag-aviso.info» de la agenda (regla 342);
   · el popup rojo, de «.agp-modal.alerta» de la agenda (regla 342).
   El ingreso no carga pm_agenda.css: por eso se copian acá.
   ============================================================ */

/* ── 1. El panel del ingreso ───────────────────────────────── */
.ee-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9998; }
.ee-caja {
  display: flex; flex-direction: column;
  position: fixed; top: 0; right: -80vw; bottom: 0; left: auto;
  width: 52vw; min-width: min(640px, 100vw); max-width: 100vw;
  overflow: hidden; box-sizing: border-box;
  background: #131518; color: #fff; font-family: 'Lato', sans-serif;
  border-left: 1px solid rgba(255,255,255,.08);
  z-index: 9999; transition: right .25s ease;
  box-shadow: -16px 0 56px rgba(0,0,0,.7);
}
.ee-caja.abierto { right: 0; }
.ee-cab { flex: 0 0 auto; padding: 22px 34px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ee-titulo { font-size: 17px; font-weight: 700; color: #d4a017; }
.ee-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; line-height: 1.5; }
.ee-sub b { color: rgba(255,255,255,.8); }
.ee-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
             padding: 10px 40px 26px 34px; }
.ee-cuerpo::-webkit-scrollbar { width: 8px; }
.ee-cuerpo::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.ee-pie { flex: 0 0 auto; padding: 14px 40px 20px 34px; border-top: 1px solid rgba(255,255,255,.07);
          display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.ee-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
            color: rgba(255,255,255,.35); margin: 20px 0 6px 10px; }
.ee-op { display: flex; flex-direction: row; align-items: center; gap: 12px; text-align: left;
         width: 100%; min-width: 0; box-sizing: border-box;
         background: none; border: 1px solid transparent; border-radius: 7px;
         padding: 10px 12px; margin-bottom: 3px; cursor: pointer;
         font-family: 'Lato', sans-serif; color: rgba(255,255,255,.8); }
.ee-op:hover { background: rgba(255,255,255,.04); }
.ee-op:disabled { cursor: default; opacity: .6; }
/* La que usó por última vez: fondo suave y barra de 3 px (IN-015 / IN-033). */
.ee-op.activa { background: rgba(201,146,10,.12); border-color: transparent; box-shadow: inset 3px 0 0 #c9920a; color: #fff; }
.ee-op-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ee-op-txt b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-op-txt small { font-size: 12.5px; color: rgba(255,255,255,.6); }
.ee-ini { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
          color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); box-sizing: border-box; }
.ee-op.activa .ee-ini { color: #fff; background: rgba(201,146,10,.35); border-color: transparent; }
.ee-ultima { font-size: 11px; color: #d4a017; font-weight: 700; white-space: nowrap; }

.ee-btn-sec { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
              color: rgba(255,255,255,.7); height: 34px; padding: 0 18px; min-width: 136px; border-radius: 7px;
              font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ee-btn-sec:hover { background: rgba(255,255,255,.14); color: #fff; }

/* El popup del ingreso que avisa un error tiene que quedar por encima del panel. */
.popup-overlay.ee-encima { z-index: 10050; }

@media (max-width: 768px) { .ee-fondo, .ee-caja { display: none !important; } }

/* ── 2. El recuadro del encabezado ─────────────────────────── */
.ee-sel { position: relative; display: inline-block; vertical-align: middle; }
.ee-sel-btn {
  width: 220px; height: 26px; box-sizing: border-box; padding: 0 32px 0 11px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; color: #fff; font-family: 'Lato', sans-serif; font-size: 12px;
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ee-sel-btn:hover { background: rgba(255,255,255,.09); }
.ee-sel-flecha { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                 font-size: 8px; color: rgba(255,255,255,.35); pointer-events: none; }
.ee-sel-lista {
  /* Del mismo ancho que la caja cerrada (regla 139). */
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; width: auto;
  background: #1a1e22; border: 1px solid rgba(201,146,10,.4);
  border-radius: 7px; max-height: 70vh; overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.6); z-index: 9999; text-align: left;
}
/* Abierta, la barra de arriba pasa por encima de lo que la pantalla fija debajo
   (en la agenda, el bloque de filtros tiene z-index 25 y la barra 10: tapaba la lista). */
.topbar:has(.ee-sel-lista) { z-index: 10000 !important; }
.ee-sel-grupo { padding: 8px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
                text-transform: uppercase; color: rgba(255,255,255,.4); }
.ee-sel-op { display: flex; justify-content: space-between; align-items: center; gap: 12px;
             padding: 7px 12px; font-size: 13px; color: rgba(255,255,255,.85); cursor: pointer;
             font-family: 'Lato', sans-serif; }
.ee-sel-op .det { display: block; font-size: 11.5px; color: rgba(255,255,255,.45); font-weight: 400; }
.ee-sel-op:hover, .ee-sel-op.foco { background: #c9920a; color: #fff; }
.ee-sel-op:hover .det, .ee-sel-op.foco .det { color: rgba(255,255,255,.8); }
.ee-sel-op > div { min-width: 0; white-space: normal; }
/* Con el teclado en el panel: la opción con foco se marca como al pasar el mouse. */
.ee-op:focus { outline: none; border-color: rgba(201,146,10,.6); background: rgba(255,255,255,.05); }
/* «?» del título del panel, con su globo (regla 44: nada de title nativo). */
.ee-ayuda { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  margin-left: 8px; border-radius: 50%; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
  font-size: 11px; font-weight: 700; cursor: default; vertical-align: 2px; }
.ee-ayuda .ee-tip { display: none; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 300px;
  background: #22272e; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; padding: 10px 12px;
  font-size: 12px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.8); z-index: 10; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.ee-ayuda:hover .ee-tip, .ee-ayuda:focus .ee-tip { display: block; }
.ee-sel-op.activa { font-weight: 700; color: #fff; box-shadow: inset 3px 0 0 #c9920a; }

/* ── 5. Mis accesos (tramo C, 04/10, IN-061) ───────────────── */
/* Al pie del panel del ingreso: copiado de mockup_accesos.html (.pl-pie-link, .pl-link). */
.ee-pie-link { margin: 22px 0 0 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07);
               font-size: 13px; color: rgba(255,255,255,.6); }
.ee-link { color: #d4a017; font-weight: 700; cursor: pointer; }
.ee-link:hover, .ee-link:focus { text-decoration: underline; outline: none; }
/* Al pie del recuadro del encabezado, separado de las empresas por una línea. */
.ee-sel-pie { padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; font-weight: 700;
              color: #d4a017; cursor: pointer; font-family: 'Lato', sans-serif; }
.ee-sel-pie:hover, .ee-sel-pie.foco { background: #c9920a; color: #fff; }

/* ── 3. La tira positiva «Trabajas en X» (regla 342) ───────── */
/* En la agenda se usa su propia tira (#agAviso); en las otras pantallas, esta copia. */
.ee-tira { position: fixed; top: 100px; right: 24px; z-index: 9999; max-width: 560px;
           padding: 10px 14px; border-radius: 7px; font-family: 'Lato', sans-serif; font-size: 13px;
           background: #14161a; border: 1px solid rgba(201,146,10,.55); color: #d4a017;
           box-shadow: 0 8px 24px rgba(0,0,0,.6); }

/* ── 4. El popup rojo de error, con «Entendido» (regla 342) ── */
.ee-pop-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex;
                align-items: center; justify-content: center; z-index: 10050; }
.ee-pop { background: #22272e; border: 1px solid rgba(255,255,255,.13); border-top: 3px solid #cc0000;
          border-radius: 12px; padding: 20px; width: 320px; max-width: 90vw; box-sizing: border-box;
          font-family: 'Lato', sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,.85); }
.ee-pop-tit { font-size: 14px; font-weight: 700; color: #cc0000; margin-bottom: 12px; }
.ee-pop-tit span { margin-right: 7px; font-size: 15px; }
.ee-pop-txt { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 20px; }
.ee-pop-pie { display: flex; justify-content: flex-end; }
.ee-pop-btn { background: #cc0000; color: #fff; border: none; height: 32px; padding: 0 16px; border-radius: 6px;
              font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
.ee-pop-btn:hover { filter: brightness(1.15); }

/* IN-064 / IN-065 (07/10): el nombre de la barra abre «Mi cuenta» (Contraseña, Mis accesos,
   Cerrar sesión). Flecha visible a su derecha; el menú arranca en la línea del nombre, se abre
   hacia la derecha y mide lo mismo que su caja (regla 139). La empresa queda como texto. */
.ee-yo { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-width: 152px; padding: 0 12px;
         box-sizing: border-box; height: 26px; outline: none; }
.ee-yo::after { content: '\25BE'; font-size: 12px; color: rgba(255,255,255,.7); }
.ee-mc-lista { position: fixed; right: auto; display: none; z-index: 10050; width: max-content; max-width: calc(100vw - 16px); }
.ee-mc-lista .ee-sel-op .det { white-space: nowrap; }
.ee-mc-lista.abierta { display: block; }
.ee-mc-lista .ee-sel-op { justify-content: flex-start; gap: 10px; }
.ee-mc-lista .ee-sel-op svg { width: 15px; height: 15px; flex: 0 0 15px; }
/* «Cambia email (solo cuenta personal)» sin cuenta personal (IN-067): se ve, no se elige. */
.ee-mc-lista .ee-sel-op.apagada { opacity: .4; cursor: default; }
.ee-mc-lista .ee-sel-op.apagada:hover { background: none; color: inherit; }
.ee-mc-lista .ee-sel-op.apagada:hover .det { color: rgba(255,255,255,.45); }

/* «Mi cuenta» fuera de Gestiona (EVALUA, Alejandro 10/10): el naranja de EVALUA en lugar del mostaza. */
body:not(.modulo-gestiona) .ee-mc-lista { border-color: rgba(224,96,16,.45); }
body:not(.modulo-gestiona) .ee-mc-lista .ee-sel-op:hover,
body:not(.modulo-gestiona) .ee-mc-lista .ee-sel-op.foco { background: #e06010; }