/* ==========================================================================
   Configurador de permisos por perfil — estilos
   Método hospitalizado: CSS externo + variables scoped al root
   (#pantallaConfigPerfiles) + prefijo de clases "cp-".
   ========================================================================== */

#pantallaConfigPerfiles {
  --cp-primary: #1a6fc4;
  --cp-primary-dark: #155a9f;
  --cp-header: #1c2a3a;
  --cp-bg: #f4f6f9;
  --cp-card-bg: #ffffff;
  --cp-borde: #dee2e6;
  --cp-texto: #2d3748;
  --cp-texto-suave: #6c757d;
  --cp-success: #198754;
  --cp-warning: #b76e00;
  --cp-radio: 10px;
  --cp-sombra: 0 2px 6px rgba(28, 42, 58, 0.08);

  background: var(--cp-bg);
  min-height: 100%;
  padding-bottom: 28px;
  color: var(--cp-texto);
}

#pantallaConfigPerfiles .cp-contenido {
  padding: 14px;
}

/* ── Panel de datos del perfil ───────────────────────────────────────────── */
#pantallaConfigPerfiles .cp-panel {
  background: var(--cp-card-bg);
  border: 1px solid var(--cp-borde);
  border-radius: var(--cp-radio);
  box-shadow: var(--cp-sombra);
  padding: 16px 18px;
}

#pantallaConfigPerfiles .cp-panel-titulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

#pantallaConfigPerfiles .cp-panel-titulo > i {
  font-size: 1.6rem;
  color: var(--cp-primary);
}

#pantallaConfigPerfiles .cp-panel-titulo h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--cp-header);
  margin: 0;
}

#pantallaConfigPerfiles .cp-panel-titulo p {
  font-size: 12.5px;
  color: var(--cp-texto-suave);
  margin: 2px 0 0;
}

#pantallaConfigPerfiles .cp-form {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1.6fr 0.8fr auto;
  gap: 12px;
  align-items: end;
}

@media (max-width: 991px) {
  #pantallaConfigPerfiles .cp-form {
    grid-template-columns: 1fr 1fr;
  }
  #pantallaConfigPerfiles .cp-campo--guardar {
    grid-column: 1 / -1;
  }
}

#pantallaConfigPerfiles .cp-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#pantallaConfigPerfiles .cp-campo label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cp-texto-suave);
  font-weight: 700;
  margin: 0;
}

#pantallaConfigPerfiles .cp-campo input,
#pantallaConfigPerfiles .cp-campo select {
  border: 1px solid var(--cp-borde);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #fff;
  color: var(--cp-texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}

#pantallaConfigPerfiles .cp-campo input:focus,
#pantallaConfigPerfiles .cp-campo select:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.12);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
#pantallaConfigPerfiles .cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#pantallaConfigPerfiles .cp-btn--primario {
  background: var(--cp-success);
  color: #fff;
  border-color: var(--cp-success);
}

#pantallaConfigPerfiles .cp-btn--primario:hover {
  background: #157347;
  border-color: #146c43;
}

#pantallaConfigPerfiles .cp-btn--primario:disabled {
  opacity: 0.6;
  cursor: progress;
}

#pantallaConfigPerfiles .cp-btn--secundario {
  background: #fff;
  color: var(--cp-texto);
  border-color: var(--cp-borde);
}

#pantallaConfigPerfiles .cp-btn--secundario:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* Eliminar perfil: acción destructiva e irreversible → contorno rojo, nunca sólido
   (no debe competir visualmente con "Guardar perfil"). */
#pantallaConfigPerfiles .cp-btn--peligro {
  background: #fff;
  color: #d33;
  border-color: #f5c2c7;
}

#pantallaConfigPerfiles .cp-btn--peligro:hover:not(:disabled) {
  background: #fdecec;
  border-color: #d33;
}

#pantallaConfigPerfiles .cp-btn--peligro:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Aviso fantasma ──────────────────────────────────────────────────────── */
#pantallaConfigPerfiles .cp-fantasma {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 12.5px;
  color: #9a5b00;
}

#pantallaConfigPerfiles .cp-fantasma i {
  color: var(--cp-warning);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
#pantallaConfigPerfiles .cp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}

#pantallaConfigPerfiles .cp-buscador {
  position: relative;
  display: flex;
  align-items: center;
}

#pantallaConfigPerfiles .cp-buscador i {
  position: absolute;
  left: 12px;
  color: var(--cp-texto-suave);
  font-size: 0.85rem;
}

#pantallaConfigPerfiles .cp-buscador input {
  border: 1px solid var(--cp-borde);
  border-radius: 8px;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  min-width: 280px;
  background: #fff;
}

#pantallaConfigPerfiles .cp-buscador input:focus {
  outline: none;
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.12);
}

#pantallaConfigPerfiles .cp-toolbar-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

#pantallaConfigPerfiles .cp-contador {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cp-primary-dark);
  margin-right: 4px;
}

/* ── Indicador de guardado reactivo ──────────────────────────────────────── */
#pantallaConfigPerfiles .cp-guardado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 6px;
  transition: opacity 0.2s ease;
}
#pantallaConfigPerfiles .cp-guardado--load {
  color: var(--cp-primary-dark);
  background: rgba(26, 111, 196, 0.10);
}
#pantallaConfigPerfiles .cp-guardado--ok {
  color: var(--cp-success);
  background: rgba(25, 135, 84, 0.10);
}
#pantallaConfigPerfiles .cp-guardado--error {
  color: #b02a37;
  background: rgba(176, 42, 55, 0.10);
}

/* ── Matriz (árbol × perfiles) ───────────────────────────────────────────── */
/* El scroll VERTICAL vive en .cp-matriz: por eso el encabezado de columnas puede
   quedar sticky arriba mientras se recorre el árbol. El scroll HORIZONTAL de las
   columnas de perfiles vive en cada .cp-celdas (ver más abajo), de modo que la
   columna de nombres nunca se va de pantalla. El min-width del inner mantiene
   alineadas las celdas de todas las filas, aun con la indentación. */
#pantallaConfigPerfiles .cp-matriz {
  background: var(--cp-card-bg);
  border: 1px solid var(--cp-borde);
  border-radius: var(--cp-radio);
  box-shadow: var(--cp-sombra);
  max-height: calc(100vh - 210px);
  min-height: 520px;
  overflow: auto;
}

#pantallaConfigPerfiles .cp-matriz-inner {
  min-width: 760px;
}

#pantallaConfigPerfiles .cp-matriz-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 12px;
  background: var(--cp-card-bg);
  border-bottom: 2px solid var(--cp-borde);
  box-shadow: 0 2px 4px rgba(28, 42, 58, 0.05);
}

#pantallaConfigPerfiles .cp-arbol {
  padding: 8px 12px 12px;
}

/* ── Celdas de perfil ────────────────────────────────────────────────────── */

/* Franja de columnas con scroll horizontal propio. El ancho (--cp-celdas-w) lo
   calcula el JS y es el MISMO para todas las filas: como el borde derecho de la
   fila coincide en todos los niveles de indentación, un ancho único deja las
   columnas alineadas en vertical. El scroll de las filas se sincroniza por JS con
   el del encabezado, que es el único que muestra la barra. */
#pantallaConfigPerfiles .cp-celdas {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  width: var(--cp-celdas-w, auto);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

#pantallaConfigPerfiles .cp-celdas::-webkit-scrollbar {
  height: 0;
}

/* Única barra visible: la del encabezado sticky (arrastra a todas las filas) */
#pantallaConfigPerfiles .cp-matriz-head .cp-celdas {
  scrollbar-width: thin;
  scrollbar-color: #c1cbd6 transparent;
}

#pantallaConfigPerfiles .cp-matriz-head .cp-celdas::-webkit-scrollbar {
  height: 8px;
}

#pantallaConfigPerfiles .cp-matriz-head .cp-celdas::-webkit-scrollbar-thumb {
  background: #c1cbd6;
  border-radius: 4px;
}

#pantallaConfigPerfiles .cp-matriz-head .cp-celdas::-webkit-scrollbar-track {
  background: transparent;
}

#pantallaConfigPerfiles .cp-celda {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
  border-left: 1px solid #eef1f5;
  transition: background 0.12s;
}

#pantallaConfigPerfiles .cp-celda:hover {
  background: rgba(26, 111, 196, 0.07);
}

/* Columna del perfil seleccionado en el <select> */
#pantallaConfigPerfiles .cp-celda--activa {
  background: rgba(26, 111, 196, 0.06);
  border-left-color: rgba(26, 111, 196, 0.25);
}

#pantallaConfigPerfiles .cp-celda--activa:hover {
  background: rgba(26, 111, 196, 0.12);
}

/* Encabezado: nombre del perfil */
#pantallaConfigPerfiles .cp-celda--head {
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 9px 4px;
  cursor: default;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--cp-header);
  text-align: center;
}

#pantallaConfigPerfiles .cp-celda--head:hover {
  background: transparent;
}

#pantallaConfigPerfiles .cp-celda--head.cp-celda--activa,
#pantallaConfigPerfiles .cp-celda--head.cp-celda--activa:hover {
  background: rgba(26, 111, 196, 0.10);
  color: var(--cp-primary-dark);
}

#pantallaConfigPerfiles .cp-celda-txt {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cuántos usuarios tienen ese perfil: dato con el que el super usuario decide si puede
   eliminarlo (un perfil con usuarios NO se elimina). */
#pantallaConfigPerfiles .cp-celda-usuarios {
  font-size: 9px;
  font-weight: 600;
  color: var(--cp-texto-suave, #6c757d);
  text-transform: none;
  letter-spacing: 0;
}

#pantallaConfigPerfiles .cp-celda-off {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--cp-warning);
  text-transform: none;
  letter-spacing: 0;
}

/* Perfil desactivado: se puede editar igual, pero se ve apagado */
#pantallaConfigPerfiles .cp-celda--inactivo {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px, rgba(183, 110, 0, 0.05) 5px, rgba(183, 110, 0, 0.05) 10px
  );
}

#pantallaConfigPerfiles .cp-celda--inactivo .cp-chk {
  opacity: 0.65;
}

#pantallaConfigPerfiles .cp-matriz-head .cp-fila-nombre--head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px 9px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--cp-texto-suave);
}

/* Check maestro: concede/quita el árbol completo al perfil seleccionado */
#pantallaConfigPerfiles .cp-todos {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

#pantallaConfigPerfiles .cp-todos:hover {
  background: rgba(26, 111, 196, 0.10);
}

#pantallaConfigPerfiles .cp-todos input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--cp-primary);
}

#pantallaConfigPerfiles .cp-todos input[type='checkbox']:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#pantallaConfigPerfiles .cp-nodo {
  margin: 1px 0;
}

#pantallaConfigPerfiles .cp-hijos {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px dashed #d7dde5;
}

#pantallaConfigPerfiles .cp-nodo.cp-colapsado > .cp-hijos {
  display: none;
}

/* Sin padding a la derecha: así el borde derecho de la fila coincide con el del
   encabezado y las celdas quedan alineadas en todos los niveles de indentación. */
#pantallaConfigPerfiles .cp-fila {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 0 0 6px;
  border-radius: 7px 0 0 7px;
  transition: background 0.12s;
}

#pantallaConfigPerfiles .cp-fila:hover {
  background: #f6f8fb;
}

#pantallaConfigPerfiles .cp-toggle {
  border: none;
  background: transparent;
  color: var(--cp-texto-suave);
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}

#pantallaConfigPerfiles .cp-nodo.cp-colapsado > .cp-fila .cp-toggle {
  transform: rotate(-90deg);
}

/* Nodos sin hijos renderizados: ocultar el caret */
#pantallaConfigPerfiles .cp-nodo:not(.cp-tiene-hijos) > .cp-fila .cp-toggle {
  visibility: hidden;
}

#pantallaConfigPerfiles .cp-fila-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  flex: 1;
  padding: 5px 8px 5px 0;
  font-weight: 500;
}

#pantallaConfigPerfiles .cp-chk {
  width: 16px;
  height: 16px;
  accent-color: var(--cp-primary);
  cursor: pointer;
  flex-shrink: 0;
}

#pantallaConfigPerfiles .cp-icono {
  font-size: 0.82rem;
  flex-shrink: 0;
}

#pantallaConfigPerfiles .cp-icono.fa-bars { color: var(--cp-primary); }
#pantallaConfigPerfiles .cp-icono.fa-link { color: #6c8cae; }
#pantallaConfigPerfiles .cp-icono.fa-desktop { color: var(--cp-success); }
#pantallaConfigPerfiles .cp-icono.fa-hand-pointer { color: #adb5bd; }

#pantallaConfigPerfiles .cp-nodo--pantalla > .cp-fila .cp-nombre {
  font-weight: 700;
  color: var(--cp-header);
}

/* Descripción (solo ícono + tooltip) */
#pantallaConfigPerfiles .cp-desc {
  display: inline-flex;
  align-items: center;
  cursor: help;
  flex-shrink: 0;
}
#pantallaConfigPerfiles .cp-desc i { font-size: 0.78rem; color: #9bb3cf; transition: color 0.12s; }
#pantallaConfigPerfiles .cp-desc:hover i,
#pantallaConfigPerfiles .cp-desc:focus i { color: var(--cp-primary); outline: none; }

#pantallaConfigPerfiles .cp-nombre {
  font-size: 13px;
  color: var(--cp-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pantallaConfigPerfiles .cp-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  background: #eef2f7;
  color: #54657a;
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: help;
  transition: background 0.12s, color 0.12s;
}

#pantallaConfigPerfiles .cp-chip:hover {
  background: #dde7f3;
  color: var(--cp-primary-dark);
}

/* Tooltip del chip (id_html) con la descripción del nodo. Va colgado del <body> y
   posicionado con position:fixed, así no lo recorta el overflow de .cp-matriz;
   por eso el selector NO puede ir dentro de #pantallaConfigPerfiles. */
.cp-tooltip {
  position: fixed;
  z-index: 1080;
  max-width: 340px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #1c2a3a;
  color: #e8eef5;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(28, 42, 58, 0.28);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.cp-tooltip--visible {
  opacity: 1;
}

.cp-tooltip__titulo {
  font-weight: 700;
  margin-bottom: 2px;
}

.cp-tooltip__id {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #9bb3cf;
  margin-bottom: 6px;
  word-break: break-all;
}

.cp-tooltip__desc {
  white-space: pre-line; /* respeta los saltos de línea de las descripciones largas */
}

.cp-tooltip__desc--vacia {
  color: #9bb3cf;
  font-style: italic;
}

/* ── Pantallas sueltas ───────────────────────────────────────────────────── */
#pantallaConfigPerfiles .cp-grupo-suelto {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px dashed #e3e8ef;
}

#pantallaConfigPerfiles .cp-suelto-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cp-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 6px 6px 8px;
}

#pantallaConfigPerfiles .cp-grupo-suelto .cp-hijos {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
}

/* ── Estados auxiliares ──────────────────────────────────────────────────── */
#pantallaConfigPerfiles .cp-cargando,
#pantallaConfigPerfiles .cp-vacio {
  text-align: center;
  color: var(--cp-texto-suave);
  font-size: 13px;
  padding: 30px 12px;
}

#pantallaConfigPerfiles .cp-cargando i,
#pantallaConfigPerfiles .cp-vacio i {
  margin-right: 6px;
  color: var(--cp-primary);
}

@media (max-width: 600px) {
  #pantallaConfigPerfiles .cp-chip { display: none; }
  #pantallaConfigPerfiles .cp-buscador input { min-width: 0; width: 100%; }
}