/* VIERNES-PERMISOS-UI-v1 (diseño v3) — complemento de la pestaña «Permisos de VIERNES» de Oficina IA. Todo bajo el prefijo .ovp-.
   La pantalla se ve igual que Admin → Usuarios y Permisos porque usa SUS clases (psp-*: tarjetas, ventana, categorías, interruptor, ⓘ),
   que permisos-suite-pro.js inyecta al arrancar el sistema. Aquí solo va lo que ese módulo no trae (puerta, bloque ámbar, pie con
   resumen, estados). Sin tema oscuro propio: el sistema no lo tiene. */

.ovp-raiz {
  --ovp-texto: var(--texto, rgb(30, 41, 59));
  --ovp-suave: var(--gris, rgb(100, 116, 139));
  --ovp-borde: var(--borde, rgb(226, 232, 240));
  --ovp-azul: var(--azul, rgb(26, 60, 143));
  --ovp-ok-bg: rgb(220, 252, 231);
  --ovp-ok: rgb(21, 128, 61);
  --ovp-med-bg: rgb(254, 243, 199);
  --ovp-med-borde: rgb(245, 158, 11);
  --ovp-med: rgb(146, 64, 14);
  --ovp-mal-bg: rgb(254, 226, 226);
  --ovp-mal: rgb(185, 28, 28);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 24px;
  color: var(--ovp-texto);
  font-family: inherit;
}

.ovp-raiz .psp-header {
  margin-bottom: 0;
}

.ovp-raiz .psp-filters {
  flex-wrap: wrap;
}

.ovp-raiz .psp-search {
  min-width: 0;
}

.ovp-ayuda {
  margin: 0;
  color: var(--ovp-suave);
  font-size: 13.5px;
  line-height: 1.5;
}

.ovp-persona .psp-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ovp-card-datos {
  flex: 1;
  min-width: 0;
}

.ovp-persona:focus-visible,
.ovp-info:focus-visible,
.ovp-sw:focus-visible,
.ovp-save-revisar:focus-visible,
.ovp-save-confirmar:focus-visible {
  outline: 3px solid var(--ovp-med-borde);
  outline-offset: 2px;
}

/* ── estados: vacío, cargando, error ── */
.ovp-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 56px 20px;
  text-align: center;
  color: var(--ovp-suave);
}

.ovp-vacio-icono {
  font-size: 34px;
  line-height: 1;
}

.ovp-vacio-txt {
  margin: 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.5;
}

.ovp-vacio-error {
  color: var(--ovp-mal);
}

.ovp-vacio-carga .ovp-vacio-icono {
  width: 30px;
  height: 30px;
  border: 3px solid rgb(224, 231, 255);
  border-top-color: var(--ovp-azul);
  border-radius: 50%;
  animation: ovp-gira 0.9s linear infinite;
}

@keyframes ovp-gira {
  to {
    transform: rotate(360deg);
  }
}

.ovp-cerrar-estado {
  margin-top: 8px;
  padding: 8px 18px;
  border: 1px solid var(--ovp-borde);
  border-radius: 10px;
  background: rgb(255, 255, 255);
  color: var(--ovp-texto);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ── la ventana por persona ── */
.ovp-modal .ovp-cab-nombre {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ovp-modal .ovp-resumen {
  font-size: 12px;
  color: rgb(199, 210, 254);
}

.ovp-modal .ovp-stat-rol {
  font-size: 13px;
  line-height: 1.4;
  padding-top: 4px;
}

.ovp-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ovp-cuerpo > .psp-cat,
.ovp-cuerpo > .ovp-funciones > .psp-cat {
  margin-bottom: 0;
}

.ovp-funciones {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ovp-vacio-busca {
  padding: 28px 16px;
}

.ovp-cab-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ovp-regla {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ovp-texto);
}

.ovp-regla-cascada {
  color: var(--ovp-suave);
}

.ovp-puerta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.ovp-puerta-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ovp-puerta-ok {
  background: var(--ovp-ok-bg);
  border-color: var(--ovp-ok);
  color: var(--ovp-ok);
}

.ovp-puerta-falta {
  background: var(--ovp-med-bg);
  border-color: var(--ovp-med-borde);
  color: var(--ovp-med);
}

.ovp-puerta-dudosa {
  background: var(--ovp-mal-bg);
  border-color: var(--ovp-mal);
  color: var(--ovp-mal);
}

.ovp-puerta-icono {
  flex: none;
  font-weight: 800;
  font-size: 16px;
}

/* ── cada permiso: nota, estado y candado ── */
.ovp-fila-titulo {
  display: block;
}

.ovp-fila-nota {
  display: inline-block;
  margin-top: 3px;
}

.ovp-nota-fija {
  background: rgb(241, 245, 249);
  color: rgb(71, 85, 105);
}

.ovp-fila-cambia,
.ovp-fila-cambia:hover {
  border-color: var(--ovp-med-borde);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.ovp-fija {
  opacity: 0.78;
  cursor: not-allowed;
}

.ovp-info {
  flex: 0 0 18px;
  margin: 0 2px;
}

.ovp-sw {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ovp-sw[aria-checked="true"] {
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
}

.ovp-sw[aria-checked="true"]::after {
  transform: translateX(18px);
}

.ovp-sw[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── bloque ámbar: información sensible ── */
.ovp-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  background: rgb(255, 255, 255);
  border: 1px solid var(--ovp-borde);
  border-radius: 16px;
}

.ovp-tarjeta-titulo {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.ovp-especial {
  background: var(--ovp-med-bg);
  border-color: var(--ovp-med-borde);
  border-left: 6px solid var(--ovp-med-borde);
}

.ovp-etiqueta {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ovp-med);
  color: rgb(255, 255, 255);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ovp-especial .ovp-ayuda,
.ovp-especial .ovp-fila-desc {
  color: var(--ovp-med);
}

.ovp-fila-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ovp-suave);
}

.ovp-especial-fila {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ovp-especial-fila .ovp-fila-titulo {
  flex: 1;
  font-weight: 800;
  font-size: 14px;
}

.ovp-pendientes {
  background: rgb(248, 250, 252);
  border-style: dashed;
}

.ovp-tecnica .psp-cat-body {
  background: rgb(248, 250, 252);
}

/* ── pie de la ventana: sin cambios / guardar en dos pasos ── */
.ovp-barra {
  flex: none;
}

.ovp-barra-resumen {
  order: 3;
  flex: 1 1 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgb(238, 242, 255);
  border: 1px solid rgb(199, 210, 254);
}

.ovp-barra-resumen[hidden],
.ovp-barra-acciones [hidden] {
  display: none;
}

.ovp-frase {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
}

.ovp-save-revisar::before,
.ovp-save-confirmar::before {
  content: "💾";
}

.ovp-descartar {
  color: rgb(185, 28, 28);
}

@media (max-width: 820px) {
  .ovp-especial-fila {
    flex-wrap: wrap;
  }

  .ovp-barra-acciones {
    flex-wrap: wrap;
    width: 100%;
  }

  .ovp-barra-acciones button {
    flex: 1 1 130px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ovp-raiz * {
    transition: none;
    animation: none;
  }
}