/* El login propio, el panel del administrador general y la licencia en
   Administración. Mismos colores y mismos significados que estilos.css: violeta
   lo que se hace, naranja lo que frena, rojo lo rechazado. Sin estilos en línea. */

/* Qué se ve de la página lo deciden clases del <body> (login.js): con el login
   propio no hay «Entrar como», y sin sesión (o con la licencia sin dejar pasar,
   o siendo el administrador general) no hay pestañas ni pantallas de corporativo.
   Mientras el servidor no dice cómo se entra (sin-modo), tampoco hay «Ver como». */
body.acceso-propio .quien { display: none; }
body.sin-modo .quien { display: none; }
body.sin-adentro .pestanas, body.sin-adentro main { display: none; }

/* La cabecera de quien entró con su cuenta: quién es, de qué corporativo y su rol. */
.sesion-propia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sesion-propia.oculta { display: none; }
.quien-soy { color: var(--tenue); font-size: 14px; overflow-wrap: anywhere; }

.acceso { display: grid; place-items: start center; padding: 48px 16px; }
.tarjeta-acceso {
  position: relative; overflow: hidden;
  width: min(420px, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 24px;
  display: grid; gap: 14px;
}
/* La entrada es donde se presenta la marca: lleva su degradado como filo. */
.tarjeta-acceso::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--marca); }
/* El logo es de fondo blanco: va en una tarjeta clara también en el tema oscuro. La tarjeta guarda la proporción de la imagen. */
.logo-acceso { width: 100%; max-width: 320px; margin: 4px auto 0; aspect-ratio: 629 / 483; overflow: hidden; border-radius: 10px; background: var(--blanco); }
.logo-acceso img { display: block; width: 100%; height: 100%; }
.tarjeta-acceso button[type="submit"] { background: var(--marca-firme); }
.tarjeta-acceso h1 { font-size: 20px; margin: 0; }
.tarjeta-acceso h2 { font-size: 16px; margin: 0; }
.tarjeta-acceso label { display: grid; gap: 4px; color: var(--tenue); font-size: 13px; }
.tarjeta-acceso .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.error-acceso {
  margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--peligro); color: var(--peligro); font-size: 14px;
}

/* La licencia vencida o revocada: se dice en claro, y no hay nada más que hacer que salir. */
.bloqueo-licencia {
  display: grid; gap: 8px; padding: 12px; border-radius: 8px; border-left: 4px solid var(--alerta); background: var(--alerta-suave);
}
.bloqueo-licencia h2 { color: var(--alerta); }
.bloqueo-licencia p { margin: 0; }

/* El aviso de que algo no se edita con esta licencia, y la licencia misma. */
.aviso-licencia {
  margin: 8px 0; padding: 8px 10px; border-radius: 8px; border-left: 4px solid var(--alerta); background: var(--alerta-suave); font-size: 13px;
}
.licencia { display: grid; gap: 6px; margin-bottom: 14px; }
.licencia .linea { font-weight: 600; }
.etiqueta.vigente { background: var(--cian-suave); color: var(--cian-tinta); }
.etiqueta.por_vencer { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.vencida, .etiqueta.revocada { background: none; color: var(--peligro); border: 1px solid var(--peligro); }

/* La contraseña temporal se entrega una vez: aquí, bien a la vista. */
.temporal {
  display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border-radius: 8px; border: 1px dashed var(--acento); background: var(--acento-suave);
}
.temporal .clave { font: 600 18px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 0.04em; user-select: all; overflow-wrap: anywhere; }
.temporal .acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* El alta sin lugares libres: se ve apagada, pero pulsarla explica por qué. */
.formulario button.apagado { opacity: 0.55; cursor: not-allowed; }

.lista li.persona { display: grid; gap: 4px; }
.lista li.persona.suspendida { opacity: var(--apagado); }
.lista li.persona .acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* El panel del administrador general. */
.operador { padding-bottom: 32px; }
/* Las tarjetas de las inteligencias de Pepe: una debajo de la otra, en el panel de Grow y en Administración. */
.tarjetas-de-inteligencias { display: grid; gap: 12px; }
.tarjeta-de-inteligencia .agregar-a-la-tarjeta { display: grid; gap: 8px; margin-top: 10px; }
.tarjeta-de-inteligencia .capacidades-del-producto { display: grid; gap: 10px; }
.tarjeta-de-inteligencia .capacidad-del-producto { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; }
.tarjeta-de-inteligencia details.plegado { margin-top: 10px; }
.pestanas-operador { display: flex; gap: 4px; padding: 8px 20px 0; overflow-x: auto; }
.pestanas-operador button {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--tenue); padding: 8px 12px; cursor: pointer; font: inherit; white-space: nowrap;
}
.pestanas-operador button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
.vista-operador { padding: 16px 20px; display: grid; gap: 16px; }
.vista-operador > .panel { margin: 0; overflow-x: auto; }
/* La tabla de corporativos tiene siete columnas: va en la columna ancha, junto al
   formulario, y si aun así no cabe corre sola dentro de su panel, nunca por
   encima de lo que tiene al lado. */
.operador .columnas { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.operador .columnas > .panel { overflow-x: auto; }
@media (max-width: 800px) { .operador .columnas { grid-template-columns: 1fr; } }
.tabla tr.seleccionable { cursor: pointer; }
.tabla tr.seleccionable:hover, .tabla tr.elegida { background: var(--acento-suave); }
.tabla tr.seleccionable:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.operador .encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.operador .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.operador .accion { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; align-content: start; }
.operador .accion h3 { margin: 0; }
.operador .accion .en-linea { display: flex; flex-wrap: wrap; gap: 6px; }
.operador .conteos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.operador .conteos span { padding: 4px 10px; border: 1px solid var(--borde); border-radius: 999px; font-size: 13px; }

@media (max-width: 720px) {
  .acceso { padding: 24px 12px; }
  .vista-operador { padding: 12px; }
}