/* =====================================================================
   ESPACIO DE TRABAJO (capa final de diseno; carga despues de tema.css)
   Lenguaje visual: superficies claras y neutras, el color de la institucion solo como acento (seleccion, botones
   principales, foco) con brillos suaves; tipografia Geist; iconos de aplicacion Fluent (assets/ws_iconos.svg).
   Menu lateral unico (vistas/sidebar.php), lanzador y cuenta (vistas/topbar.php), carga y progreso (layout.php).
   Todo deriva de los colores que configura cada institucion (--bl-sidebar, --bl-primario, --bl-acento).
   ===================================================================== */
:root {
  --ws-fuente: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ws-nav: 264px;
  --ws-nav-mini: 68px;
  --ws-p: var(--bl-primario, #0b57d0);
  --ws-acento: var(--bl-acento, #22c55e);
  --ws-marca: var(--bl-sidebar, #0f3d5e);
  --ws-nt: var(--bl-sidebar-texto, #ffffff);
  --ws-fondo: #f5f6f8;
  --ws-sup: #ffffff;
  --ws-linea: #e7eaef;
  --ws-linea2: #d9dee6;
  --ws-txt: #161b26;
  --ws-txt2: #5b6474;
  --ws-txt3: #8a92a1;
  --ws-hover: rgb(15 23 42 / .045);
  --ws-sel: color-mix(in srgb, var(--ws-p) 10%, #ffffff);
  --ws-sel-txt: color-mix(in srgb, var(--ws-p) 70%, #0b1220);
  --ws-brillo: color-mix(in srgb, var(--ws-p) 55%, transparent);
  --ws-sombra-1: 0 1px 2px rgb(16 24 40 / .05);
  --ws-sombra-2: 0 1px 2px rgb(16 24 40 / .04), 0 4px 12px -2px rgb(16 24 40 / .08);
  --ws-sombra-3: 0 2px 6px rgb(16 24 40 / .05), 0 18px 48px -12px rgb(16 24 40 / .22);
  --ws-curva: cubic-bezier(.2, .8, .2, 1);
}
html body.bl-body { font-family: var(--ws-fuente); -webkit-font-smoothing: antialiased; }
html body.ws {
  background:
    radial-gradient(1100px 420px at 12% -8%, color-mix(in srgb, var(--ws-p) 7%, transparent), transparent 70%),
    radial-gradient(900px 380px at 100% -10%, color-mix(in srgb, var(--ws-acento) 5%, transparent), transparent 70%),
    var(--ws-fondo);
  background-attachment: fixed;
  color: var(--ws-txt);
}
/* Mientras carga la pagina no hay animaciones de ancho (el menu llega ya en su estado) */
html.ws-quieto body.ws *, html.ws-quieto body.ws *::before { transition: none !important; }

/* ---------------- Pantalla de carga (primera vez por pestana) y barra de progreso ---------------- */
.ws-carga {
  position: fixed; inset: 0; z-index: 20000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(50% 40% at 50% 42%, color-mix(in srgb, var(--ws-p) 12%, transparent), transparent 70%), #fbfbfc;
  transition: opacity .35s var(--ws-curva);
}
.ws-carga.fuera { opacity: 0; pointer-events: none; }
.ws-carga-logo {
  position: relative; width: 84px; height: 84px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--ws-marca); box-shadow: 0 0 0 1px rgb(16 24 40 / .06), 0 16px 40px -12px color-mix(in srgb, var(--ws-p) 55%, transparent);
}
.ws-carga-logo img { width: 62%; height: 62%; object-fit: contain; }
.ws-carga-logo::before {
  content: ""; position: absolute; inset: -7px; border-radius: 30px; padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 60%, var(--ws-p) 82%, var(--ws-acento) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wsGiro 1s linear infinite;
}
.ws-carga-nombre { font: 600 .95rem/1.3 var(--ws-fuente); color: var(--ws-txt2); text-align: center; max-width: 80vw; }
.ws-carga-barra { display: none; }
@keyframes wsGiro { to { transform: rotate(360deg); } }
.ws-progreso {
  position: fixed; top: 0; left: 0; z-index: 19999; height: 2px; width: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ws-p), var(--ws-acento)); box-shadow: 0 0 8px var(--ws-brillo);
}
.ws-progreso.activo { opacity: 1; width: 75%; transition: width 1.6s cubic-bezier(.1, .7, .2, 1), opacity .15s; }
.ws-progreso.fin { opacity: 0; width: 100%; transition: width .2s ease, opacity .3s ease .15s; }

/* ---------------- Iconos de aplicacion ---------------- */
.ws-ico { display: inline-block; flex: none; vertical-align: middle; }

/* =====================================================================
   MENU LATERAL
   ===================================================================== */
.ws-nav, .ws-flot, .ws-tip { display: none; }
html body.ws .bl-sidebar { display: none !important; }
.ws-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 1042; width: var(--ws-nav); flex-direction: column;
  /* Color del menu configurado por la institucion (Identidad y diseno), con un degradado suave del mismo tono */
  background:
    radial-gradient(140% 30% at 0% 0%, rgb(255 255 255 / .09), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ws-marca) 93%, #ffffff), var(--ws-marca) 32%, color-mix(in srgb, var(--ws-marca) 90%, #000000));
  color: var(--ws-nt);
  border-right: 1px solid color-mix(in srgb, var(--ws-nt) 8%, transparent);
  transition: width .22s var(--ws-curva), transform .25s var(--ws-curva);
}
html body.ws .ws-nav { display: flex; }
.ws-nav-cab { padding: 14px 12px 8px; }
.ws-nav-marca { display: flex; align-items: center; gap: 11px; padding: 6px; border-radius: 12px; text-decoration: none !important; min-width: 0; }
.ws-nav-marca:hover { background: color-mix(in srgb, var(--ws-nt) 8%, transparent); }
.ws-nav-logo {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws-nt) 18%, transparent), 0 4px 10px -4px rgb(0 0 0 / .3) !important;
}
.ws-nav-logo img { width: 72%; height: 72%; object-fit: contain; }
.ws-nav-inst { display: grid; min-width: 0; line-height: 1.2; }
.ws-nav-inst strong { font: 650 .875rem/1.25 var(--ws-fuente); color: var(--ws-nt); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-nav-inst small { font: 500 .72rem/1.3 var(--ws-fuente); color: color-mix(in srgb, var(--ws-nt) 62%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ws-nav-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 12px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ws-nav-cuerpo:hover { scrollbar-color: color-mix(in srgb, var(--ws-nt) 25%, transparent) transparent; }
.ws-nav-titulo { margin: 16px 10px 6px; font: 600 .68rem/1 var(--ws-fuente); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--ws-nt) 52%, transparent); }

.ws-nav-it {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 10px; margin: 1px 0;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; text-decoration: none !important;
  color: color-mix(in srgb, var(--ws-nt) 84%, transparent) !important; font: 500 .875rem/1 var(--ws-fuente); letter-spacing: -.005em; transition: background .12s, color .12s;
}
.ws-nav-it:hover { background: color-mix(in srgb, var(--ws-nt) 9%, transparent); color: var(--ws-nt) !important; }
.ws-nav-ico { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; }
.ws-nav-ico .ws-ico { width: 22px; height: 22px; }
.ws-nav-ico > i { font-size: 15px; color: var(--ws-nt); opacity: .85; }
.ws-nav-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-nav-num {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ws-nt) 13%, transparent); color: var(--ws-nt); font: 600 .7rem/1 var(--ws-fuente); font-variant-numeric: tabular-nums;
}
.ws-nav-flecha { flex: none; color: color-mix(in srgb, var(--ws-nt) 55%, transparent); transition: transform .2s var(--ws-curva); }
.ws-nav-grupo.abierto > .ws-nav-it .ws-nav-flecha { transform: rotate(180deg); }
.ws-nav-grupo.contiene > .ws-nav-it { color: var(--ws-nt) !important; font-weight: 600; }

/* Opcion actual: velo translucido del color del texto del menu y una linea de acento luminosa al borde */
.ws-nav-it.activo, .ws-nav-sub-it.activo {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ws-nt) 16%, transparent), color-mix(in srgb, var(--ws-nt) 8%, transparent));
  color: var(--ws-nt) !important; font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ws-nt) 10%, transparent);
}
.ws-nav-it.activo::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ws-acento), color-mix(in srgb, var(--ws-acento) 55%, #ffffff)); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--ws-acento) 60%, transparent);
}
.ws-nav-it.activo .ws-nav-num, .ws-nav-sub-it.activo .ws-nav-num { background: color-mix(in srgb, var(--ws-nt) 20%, transparent); color: var(--ws-nt); }

.ws-nav-sub { display: none; position: relative; margin: 2px 0 8px 21px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--ws-nt) 16%, transparent); }
.ws-nav-grupo.abierto > .ws-nav-sub { display: block; animation: wsBaja .18s var(--ws-curva); }
@keyframes wsBaja { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ws-nav-sub-it {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; margin: 1px 0; border-radius: 8px;
  color: color-mix(in srgb, var(--ws-nt) 76%, transparent) !important; font: 500 .82rem/1.3 var(--ws-fuente); text-decoration: none !important; transition: background .12s, color .12s;
}
.ws-nav-sub-it:hover { background: color-mix(in srgb, var(--ws-nt) 9%, transparent); color: var(--ws-nt) !important; }
.ws-nav-sub-it.activo::before {
  content: ""; position: absolute; left: -13px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px;
  background: var(--ws-acento); box-shadow: 0 0 8px color-mix(in srgb, var(--ws-acento) 60%, transparent);
}

.ws-nav-pie { padding: 8px 10px 12px; border-top: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent); }
.ws-nav-plegar { color: color-mix(in srgb, var(--ws-nt) 70%, transparent) !important; }

/* Menu contraido: solo iconos; el nombre aparece al pasar el mouse y los grupos abren una tarjeta */
@media (min-width: 992px) {
  html body.ws .bl-hamb, html body.ws .bl-overlay { display: none !important; }
  html body.ws .bl-main, html body.ws.bl-colapsado .bl-main { margin-left: var(--ws-nav); transition: margin-left .22s var(--ws-curva); }
  html body.ws.ws-nav-mini .bl-main { margin-left: var(--ws-nav-mini); }
  body.ws-nav-mini .ws-nav { width: var(--ws-nav-mini); }
  body.ws-nav-mini .ws-nav-cab { padding: 14px 10px 8px; }
  body.ws-nav-mini .ws-nav-marca { justify-content: center; padding: 6px 0; }
  body.ws-nav-mini .ws-nav :is(.ws-nav-inst, .ws-nav-txt, .ws-nav-flecha, .ws-nav-sub) { display: none !important; }
  body.ws-nav-mini .ws-nav-titulo { margin: 10px 8px; height: 1px; background: color-mix(in srgb, var(--ws-nt) 12%, transparent); }
  body.ws-nav-mini .ws-nav-titulo span { display: none; }
  body.ws-nav-mini .ws-nav-it { justify-content: center; padding: 0; height: 42px; }
  body.ws-nav-mini .ws-nav-it .ws-nav-num {
    position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem;
    background: linear-gradient(180deg, #f04461, #d61f45); color: #fff; box-shadow: 0 0 0 2px var(--ws-marca);
  }
  body.ws-nav-mini .ws-nav-grupo.contiene > .ws-nav-it { background: color-mix(in srgb, var(--ws-nt) 14%, transparent); }
  body.ws-nav-mini .ws-nav-grupo.contiene > .ws-nav-it::before {
    content: ""; position: absolute; left: -10px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ws-acento), color-mix(in srgb, var(--ws-acento) 55%, #ffffff)); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--ws-acento) 60%, transparent);
  }
  body.ws-nav-mini .ws-nav-grupo.flot > .ws-nav-it { background: color-mix(in srgb, var(--ws-nt) 11%, transparent); }

  /* Tarjeta flotante: tinte suave del color institucional, borde y sombra con color para que se separe del fondo blanco */
  html body.ws .ws-flot:not([hidden]) {
    display: block; position: fixed; z-index: 1060; width: 272px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px 8px 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ws-p) 9%, #ffffff) 0, color-mix(in srgb, var(--ws-p) 4%, #ffffff) 100%);
    border: 1px solid color-mix(in srgb, var(--ws-p) 24%, #e2e6ec); border-radius: 14px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ws-p) 7%, transparent), 0 2px 6px rgb(16 24 40 / .08),
      0 26px 56px -14px color-mix(in srgb, var(--ws-p) 34%, rgb(16 24 40 / .45));
    animation: wsFlot .14s var(--ws-curva);
  }
  @keyframes wsFlot { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
  /* Velo muy leve sobre la pagina mientras la tarjeta esta abierta (no bloquea el mouse) */
  body.ws.ws-flot-abierto::after {
    content: ""; position: fixed; inset: 0 0 0 var(--ws-nav-mini); z-index: 1055; pointer-events: none;
    background: rgb(15 23 42 / .12); animation: wsVelo .14s var(--ws-curva);
  }
  @keyframes wsVelo { from { opacity: 0; } to { opacity: 1; } }
  .ws-flot-cab {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 -2px 6px; border-radius: 10px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--ws-p) 16%, #ffffff), color-mix(in srgb, var(--ws-acento) 10%, #ffffff));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 0 0 1px color-mix(in srgb, var(--ws-p) 12%, transparent);
  }
  .ws-flot-cab .ws-nav-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none;
    background: #ffffff; box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 4px 10px -4px var(--ws-brillo), inset 0 0 0 1px color-mix(in srgb, var(--ws-p) 14%, transparent);
  }
  .ws-flot-cab .ws-nav-ico > i { color: var(--ws-p); opacity: 1; }
  .ws-flot-cab strong { font: 650 .875rem/1.2 var(--ws-fuente); color: var(--ws-sel-txt, var(--ws-txt)); }
  .ws-flot-lista { display: block; }
  .ws-flot-lista .ws-nav-sub-it { display: flex; color: #3a4352 !important; }
  .ws-flot-lista .ws-nav-sub-it:hover { background: color-mix(in srgb, var(--ws-p) 10%, #ffffff); color: var(--ws-txt) !important; }
  .ws-flot-lista .ws-nav-sub-it.activo {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ws-p) 12%, #ffffff), color-mix(in srgb, var(--ws-p) 6%, #ffffff));
    color: var(--ws-sel-txt) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ws-p) 10%, transparent);
  }
  .ws-flot-lista .ws-nav-num { background: rgb(15 23 42 / .06); color: var(--ws-txt2); margin-left: auto; }
  .ws-flot-lista .ws-nav-sub-it.activo::before { left: 0; top: 8px; bottom: 8px; background: linear-gradient(180deg, var(--ws-p), var(--ws-acento)); box-shadow: 0 0 8px var(--ws-brillo); }
  .ws-flot-lista .ws-nav-txt { display: block; white-space: normal; }

  html body.ws .ws-tip:not([hidden]) {
    display: block; position: fixed; z-index: 1070; pointer-events: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    background: #1c2230; color: #fff; font: 600 .75rem/1.2 var(--ws-fuente); box-shadow: 0 6px 18px -6px rgb(16 24 40 / .4);
  }

  /* Barra superior: el nombre de la institucion ya esta en el menu */
  html body.ws .bl-topbar {
    min-height: 60px; padding: 8px 20px 8px 24px; background: color-mix(in srgb, #ffffff 72%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 var(--ws-linea);
  }
  html body.ws .bl-topbar .bl-brand { display: none; }
}

/* Celular y tablet: el menu es un cajon que abre el boton de menu */
@media (max-width: 991.98px) {
  html body.ws .ws-nav { width: min(86vw, 300px); transform: translateX(-104%); z-index: 1065; box-shadow: none; }
  html body.ws.bl-abierto .ws-nav { transform: none; box-shadow: 0 0 48px rgb(15 23 42 / .28); }
  html body.ws .ws-nav-pie { display: none; }
  html body.ws .ws-nav-it { height: 42px; }
}

/* =====================================================================
   LANZADOR DE APLICACIONES Y MENU DE CUENTA
   ===================================================================== */
.ws-lanzador, .ws-cuenta { position: relative; }
.ws-lanzador-btn { color: var(--ws-txt2) !important; }
.ws-lanzador-btn[aria-expanded="true"] { background: var(--ws-hover) !important; color: var(--ws-txt) !important; }
.ws-lanzador-panel, .ws-cuenta-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1060; background: var(--ws-sup); border-radius: 16px; box-shadow: var(--ws-sombra-3);
  border: 1px solid var(--ws-linea); animation: wsAbre .16s var(--ws-curva); transform-origin: top right;
}
@keyframes wsAbre { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.ws-lanzador-panel { width: 380px; max-height: min(78vh, 640px); overflow-y: auto; padding: 12px 12px 14px; }
.ws-lanzador-buscar {
  width: 100%; height: 40px; border: 1px solid var(--ws-linea2); border-radius: 10px; padding: 0 14px; margin-bottom: 4px;
  font: 500 .875rem var(--ws-fuente); background: #fbfbfc; color: var(--ws-txt); outline: none;
}
.ws-lanzador-buscar:focus { background: #fff; border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 16%, transparent); }
.ws-lanzador-tit { font: 600 .68rem/1 var(--ws-fuente); text-transform: uppercase; letter-spacing: .08em; color: var(--ws-txt3); margin: 14px 6px 6px; }
.ws-lanzador-crear { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.ws-lanzador-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ws-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border: 0; background: transparent; border-radius: 12px; cursor: pointer;
  text-decoration: none !important; color: var(--ws-txt) !important; font: 500 .75rem/1.25 var(--ws-fuente); text-align: center; transition: background .12s;
}
.ws-app span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 104px; }
.ws-app .ws-ico { width: 32px; height: 32px; transition: transform .18s var(--ws-curva); }
.ws-app:hover, .ws-app:focus-visible { background: var(--ws-hover); }
.ws-app:hover .ws-ico { transform: translateY(-1px) scale(1.05); }
.ws-lanzador-crear .ws-app { padding: 10px 2px 8px; font-size: .7rem; }
.ws-lanzador-crear .ws-app .ws-ico { width: 26px; height: 26px; }
.ws-lanzador-panel .ws-app[hidden] { display: none; }
.ws-lanzador-opciones a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--ws-txt) !important; text-decoration: none !important; font: 500 .85rem var(--ws-fuente);
}
.ws-lanzador-opciones a:hover { background: var(--ws-hover); }
.ws-lanzador-opciones a small { margin-left: auto; color: var(--ws-txt3); font-size: .72rem; }

.ws-cuenta-btn {
  width: 40px; height: 40px; padding: 2px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .2s;
}
.ws-cuenta-btn img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ws-cuenta-btn:hover, .ws-cuenta-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--ws-p) 45%, transparent); }
.ws-cuenta-panel { width: 300px; padding: 8px; }
.ws-cuenta-cab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px 14px; text-align: center; border-bottom: 1px solid var(--ws-linea); margin-bottom: 6px; }
.ws-cuenta-cab img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgb(16 24 40 / .14); }
.ws-cuenta-cab strong { font: 650 .95rem/1.3 var(--ws-fuente); color: var(--ws-txt); }
.ws-cuenta-cab small { color: var(--ws-txt2); font-size: .78rem; }
.ws-cuenta-panel a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--ws-txt) !important; text-decoration: none !important;
  font: 500 .86rem var(--ws-fuente); transition: background .12s;
}
.ws-cuenta-panel a .ws-ico { width: 20px; height: 20px; }
.ws-cuenta-panel a:hover { background: var(--ws-hover); }
.ws-cuenta-panel a.ws-cuenta-salir { margin-top: 6px; border-top: 1px solid var(--ws-linea); border-radius: 0 0 10px 10px; color: #b42318 !important; }
.ws-cuenta-panel a.ws-cuenta-salir i { width: 20px; text-align: center; }
/* Los enlaces de la barra superior son botones de 40 px (balcon.css): dentro del lanzador y del menu de cuenta no */
html body .bl-top-iconos .ws-lanzador-panel a.ws-app, html body .bl-top-iconos .ws-cuenta-panel a, html body .bl-top-iconos .ws-lanzador-opciones a {
  width: auto; height: auto; min-width: 0; color: var(--ws-txt) !important; justify-content: flex-start; text-align: left;
}
html body .bl-top-iconos .ws-lanzador-panel a.ws-app { display: flex; justify-content: center; text-align: center; font-size: .75rem; }
html body .bl-top-iconos .ws-lanzador-crear a.ws-app { font-size: .7rem; }
html body .bl-top-iconos .ws-cuenta-panel a { display: flex; font-size: .86rem; }
html body .bl-top-iconos .ws-lanzador-panel a.ws-app:hover, html body .bl-top-iconos .ws-cuenta-panel a:hover { background: var(--ws-hover); }
html body .bl-top-iconos .ws-cuenta-panel a.ws-cuenta-salir { color: #b42318 !important; }
@media (max-width: 991.98px) {
  .ws-lanzador-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .ws-cuenta-panel { position: fixed; right: 12px; top: 64px; width: min(300px, calc(100vw - 24px)); }
}

/* =====================================================================
   COMPONENTES DE LAS PANTALLAS (funcionario): botones, tarjetas, tablas, campos, etiquetas, pestanas
   ===================================================================== */
html body.ws .bl-main { color: var(--ws-txt); }
html body.ws :is(h1, h2, h3, h4) { font-family: var(--ws-fuente); letter-spacing: -.015em; }

/* Encabezado de pagina */
html body.ws :is(.ui-cab h1, .bl-admin-title, .pn-cab h1, .bj-cabecera h1, .ca-cab h1), html body.ws .bl-main h1:has(> i.fas:first-child) {
  display: flex; align-items: center; gap: 14px; font: 650 1.5rem/1.2 var(--ws-fuente) !important; letter-spacing: -.025em; color: var(--ws-txt);
}
html body.ws :is(.ui-cab h1, .bl-admin-title, .pn-cab h1, .bj-cabecera h1, .ca-cab h1) > i:first-child, html body.ws .bl-main h1:has(> i.fas:first-child) > i:first-child {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; margin: 0;
  background: #ffffff !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--ws-p) !important; -webkit-text-fill-color: currentColor;
  box-shadow: inset 0 0 0 1px var(--ws-linea), 0 1px 2px rgb(16 24 40 / .06), 0 6px 16px -8px var(--ws-brillo);
}
html body.ws :is(.ui-cab, .bl-admin-header, .pn-cab) p, html body.ws .bl-admin-header .bl-admin-subtitle { color: var(--ws-txt2); font-size: .9rem; line-height: 1.55; }

/* Botones */
html body.ws :is(.ui-btn, .bl-btn) {
  border-radius: 10px; min-height: 36px; padding: 0 14px; gap: 8px; font: 600 .84rem/1.2 var(--ws-fuente); letter-spacing: -.005em;
  transition: background .14s, border-color .14s, box-shadow .14s, color .14s, filter .14s; transform: none;
}
html body.ws :is(.ui-btn, .bl-btn):hover { transform: none; }
html body.ws :is(.ui-btn, .bl-btn):active { transform: translateY(1px); }
html body.ws :is(.ui-btn-sm, .bl-btn-sm) { min-height: 30px; padding: 0 10px; border-radius: 8px; font-size: .78rem; }
html body.ws :is(.ui-btn-p, .bl-btn-primario) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ws-p) 86%, #ffffff), var(--ws-p)) !important; color: #fff !important;
  border: 1px solid color-mix(in srgb, var(--ws-p) 82%, #000000) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(16 24 40 / .12), 0 6px 14px -6px var(--ws-brillo) !important;
}
html body.ws :is(.ui-btn-p, .bl-btn-primario):hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(16 24 40 / .12), 0 8px 20px -6px var(--ws-brillo) !important; }
html body.ws :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario) {
  background: #ffffff !important; border: 1px solid var(--ws-linea2) !important; color: var(--ws-txt) !important; box-shadow: var(--ws-sombra-1);
}
html body.ws :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario):hover { background: #f8f9fb !important; border-color: #c9d0da !important; }
html body.ws :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario) > i { color: var(--ws-p); }
html body.ws .ui-btn-t { border-radius: 8px; color: var(--ws-txt2); }
html body.ws .ui-btn-t:hover { background: var(--ws-hover); color: var(--ws-txt); }
html body.ws :is(.ui-btn-peligro, .bl-btn-peligro) { background: #ffffff !important; border: 1px solid #f4c7c3 !important; color: #b42318 !important; box-shadow: var(--ws-sombra-1); }
html body.ws :is(.ui-btn-peligro, .bl-btn-peligro):hover { background: #fef3f2 !important; }
html body.ws .bl-btn-acento { background: linear-gradient(180deg, color-mix(in srgb, var(--ws-acento) 86%, #ffffff), var(--ws-acento)) !important; border: 1px solid color-mix(in srgb, var(--ws-acento) 80%, #000000) !important; }

/* Tarjetas y superficies */
html body.ws :is(.ui-card, .bl-card, .bj-tarjeta, .bl-stat-card, .bl-kpi-card, .bl-pie-card, .ui-tabla-wrap) {
  background: var(--ws-sup); border: 1px solid var(--ws-linea); border-radius: 14px; box-shadow: var(--ws-sombra-1);
}
html body.ws :is(.ui-card-cab h2, .bl-card-head h2, .bl-card-title) { font: 650 .98rem/1.3 var(--ws-fuente); letter-spacing: -.01em; color: var(--ws-txt); }
html body.ws :is(.ui-card-cab h2, .bl-card-head h2, .bl-card-title) > i { color: var(--ws-p); background: none; -webkit-text-fill-color: currentColor; font-size: .9em; }
html body.ws :is(.bj-nt-card, .bl-tile, .bl-cat-item, a.bl-card, .pj-card):hover { box-shadow: var(--ws-sombra-2); border-color: var(--ws-linea2); transform: none; }

/* Tablas */
html body.ws :is(.ui-tabla, .bl-admin-table, .bl-tabla) { font-size: .84rem; border-collapse: separate; border-spacing: 0; }
html body.ws :is(.ui-tabla, .bl-admin-table, .bl-tabla) th {
  background: #fafbfc; color: var(--ws-txt2); font: 600 .74rem/1.3 var(--ws-fuente); text-transform: none; letter-spacing: 0;
  padding: 10px 14px; border-bottom: 1px solid var(--ws-linea); white-space: nowrap;
}
html body.ws :is(.ui-tabla, .bl-admin-table, .bl-tabla) td { padding: 11px 14px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
html body.ws :is(.ui-tabla, .bl-admin-table, .bl-tabla) tr:last-child td { border-bottom: 0; }
html body.ws :is(.ui-tabla, .bl-admin-table, .bl-tabla) tbody tr:hover td { background: #f8f9fb; }

/* Campos */
html body.ws :is(.ui-input, .bl-input, .bl-select, .bl-textarea), html body.ws .ui-campo :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea) {
  background-color: #ffffff; border: 1px solid var(--ws-linea2); border-radius: 10px; color: var(--ws-txt); font-family: var(--ws-fuente);
  box-shadow: var(--ws-sombra-1); transition: border-color .14s, box-shadow .14s;
}
html body.ws :is(.ui-input, .bl-input, .bl-select, .bl-textarea):hover { border-color: #c9d0da; }
html body.ws :is(.ui-input, .bl-input, .bl-select, .bl-textarea):focus, html body.ws .ui-campo :is(input, select, textarea):focus {
  outline: none; border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 16%, transparent);
}
:where(body.ws .bl-main) :where(select:not([class]):not([multiple]), input:not([class]):is([type=date], [type=month], [type=time])) {
  height: 38px; padding: 0 12px; border: 1px solid var(--ws-linea2); border-radius: 10px; background-color: #ffffff; color: var(--ws-txt);
  font: 500 .86rem var(--ws-fuente); outline: none; box-shadow: var(--ws-sombra-1);
}
:where(body.ws .bl-main) :where(select:not([class]), input:not([class])):focus { border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 16%, transparent); }
html body.ws .bl-main select:not([multiple]):not([size]):not(.select2-hidden-accessible) {
  -webkit-appearance: none; appearance: none; padding-right: 32px !important; background-repeat: no-repeat; background-position: right 11px center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235b6474' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html body.ws .bl-main input[type=file] { font: 500 .8rem var(--ws-fuente); color: var(--ws-txt2); max-width: 100%; }
html body.ws .bl-main input[type=file]::file-selector-button {
  border: 1px solid var(--ws-linea2); border-radius: 8px; padding: 7px 12px; margin-right: 10px; cursor: pointer; font: 600 .78rem var(--ws-fuente);
  background: #ffffff; color: var(--ws-txt); box-shadow: var(--ws-sombra-1); transition: background .14s;
}
html body.ws .bl-main input[type=file]::file-selector-button:hover { background: #f8f9fb; }

/* Etiquetas, codigos y avisos */
html body.ws .ui-chip { font: 600 .72rem/1.2 var(--ws-fuente); padding: 3px 9px; border-radius: 999px; letter-spacing: 0; }
html body.ws .bl-badge { font-family: var(--ws-fuente); font-weight: 600; letter-spacing: 0; border-radius: 999px; }
html body.ws .bl-main code { color: #334155; background: #f1f3f6; padding: 2px 7px; border-radius: 6px; font: 600 .8em/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; box-shadow: inset 0 0 0 1px #e6e9ee; }
html body.ws .ui-aviso { border-radius: 12px; font-family: var(--ws-fuente); }

/* Pestanas: segmentadas y finas (ui-tabs y las de pantallas antiguas) */
html body.ws :is(.ui-tabs, .bl-admin-tabs, .bl-perfil-tabs, .bt-tabs) {
  display: flex !important; flex-wrap: wrap; gap: 2px !important; padding: 3px; border: 1px solid var(--ws-linea) !important; background: #f1f3f6;
  border-radius: 12px; width: fit-content; max-width: 100%; margin-bottom: 18px !important; overflow: visible;
}
html body.ws :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn, .bt-tabs > button) {
  display: inline-flex; align-items: center; gap: 8px; flex: none; margin: 0 !important; padding: 7px 14px !important; border: 0 !important; border-radius: 9px !important;
  background: transparent; color: var(--ws-txt2) !important; font: 600 .82rem/1.25 var(--ws-fuente); white-space: nowrap; text-decoration: none !important;
  box-shadow: none; cursor: pointer; transition: background .14s, color .14s, box-shadow .14s;
}
html body.ws :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn, .bt-tabs > button):hover { color: var(--ws-txt) !important; background: rgb(255 255 255 / .6); }
html body.ws :is(.ui-tab[aria-selected=true], .bl-admin-tab.activa, .bl-tab-item.activo, .bl-ptab-btn.activo, .bt-tabs > button.on) {
  background: #ffffff !important; color: var(--ws-txt) !important; box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 0 0 1px rgb(16 24 40 / .04) !important;
}
html body.ws :is(.ui-tab[aria-selected=true], .bl-admin-tab.activa, .bl-tab-item.activo, .bl-ptab-btn.activo, .bt-tabs > button.on) > i { color: var(--ws-p); }
html body.ws :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn) > i { font-size: .82rem; }

/* Busqueda global de la barra superior */
html body.ws .bl-search input { height: 40px; border-radius: 10px; background: #eef0f4; border: 1px solid transparent; font: 500 .875rem var(--ws-fuente); }
html body.ws .bl-search input:focus { background: #fff; border-color: var(--ws-linea2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 14%, transparent); }

/* =====================================================================
   MI PANEL
   ===================================================================== */
html body .ct-pend { display: flex; flex-wrap: wrap; gap: 10px; }
html body .ct-pend .ct-pend-it.cero { display: none !important; }
html body .ct-pend .ct-pend-it {
  flex: 0 1 auto; display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; border-radius: 12px; min-height: 0;
  background: #fff; border: 1px solid var(--ws-linea); box-shadow: var(--ws-sombra-1); transition: box-shadow .15s, border-color .15s;
}
html body .ct-pend .ct-pend-it:hover { box-shadow: var(--ws-sombra-2); border-color: var(--ws-linea2); }
html body .ct-pend .ct-pend-it .ic { width: 34px; height: 34px; border-radius: 9px; }
html body .ct-pend .ct-pend-it .n { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin-right: 6px; }
html body .ct-pend .ct-pend-it > span:last-child { display: flex; align-items: baseline; flex-wrap: wrap; }
html body .ct-pend .ct-pend-it .l { font-size: .84rem; color: var(--ws-txt2); font-weight: 500; }
.ct-pend-ok {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 12px; background: #f0fdf4;
  border: 1px solid #ccf0d9; color: #05603a; font: 600 .86rem var(--ws-fuente);
}
.ct-pend-ok .ws-ico { width: 28px; height: 28px; }

.ws-crear { position: relative; }
.ws-crear > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 10px; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ws-p) 86%, #ffffff), var(--ws-p)); color: #fff; font: 600 .875rem var(--ws-fuente);
  border: 1px solid color-mix(in srgb, var(--ws-p) 82%, #000000);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(16 24 40 / .12), 0 8px 18px -8px var(--ws-brillo); transition: filter .14s;
}
.ws-crear > summary::-webkit-details-marker { display: none; }
.ws-crear > summary:hover { filter: brightness(1.05); }
.ws-crear > summary .ws-mas { font-size: 1.15rem; line-height: 1; font-weight: 500; }
.ws-crear-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 280px; padding: 6px; border-radius: 14px; background: #fff;
  box-shadow: var(--ws-sombra-3); border: 1px solid var(--ws-linea); animation: wsAbre .14s var(--ws-curva); transform-origin: top right;
}
.ws-crear-menu a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--ws-txt) !important; text-decoration: none !important; font: 600 .86rem var(--ws-fuente);
}
.ws-crear-menu a .ws-ico { width: 26px; height: 26px; }
.ws-crear-menu a small { display: block; color: var(--ws-txt2); font-weight: 450; font-size: .75rem; margin-top: 1px; }
.ws-crear-menu a:hover { background: var(--ws-hover); }

/* "Requiere su atencion" (una tarjeta en lugar de varios avisos grandes) */
.ws-atencion { margin: 0 0 18px; padding: 12px 14px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--ws-linea); box-shadow: var(--ws-sombra-1); }
.ws-atencion[hidden] { display: none; }
.ws-aten-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 650 .88rem/1.2 var(--ws-fuente); color: var(--ws-txt); }
.ws-aten-ico {
  width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; color: #fff;
  background: linear-gradient(180deg, #fb8a4c, #ea4b2a); box-shadow: 0 4px 10px -4px rgb(234 75 42 / .6);
}
.ws-aten-lista { display: grid; }
.ws-aten-lista > [data-ra-bajas] { margin: 0; padding: 0; }
.ws-aten-it, .ws-aten-det > summary { display: flex; align-items: center; gap: 12px; padding: 9px 2px; font: 500 .84rem/1.45 var(--ws-fuente); color: var(--ws-txt2); }
.ws-aten-lista > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid #f0f2f5; }
.ws-aten-det { display: block; padding: 0; margin: 0; }
.ws-aten-det > summary { list-style: none; cursor: pointer; }
.ws-aten-det > summary::-webkit-details-marker { display: none; }
.ws-aten-it > i, .ws-aten-det > summary > i {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: #fef3f2; color: #d92d20;
}
.ws-aten-it[data-tono="ambar"] > i { background: #fffaeb; color: #dc6803; }
.ws-aten-it > span:not(.ws-aten-acc), .ws-aten-det > summary > span:not(.ws-aten-acc) { flex: 1; min-width: 0; }
.ws-aten-it strong { color: var(--ws-txt); font-weight: 600; }
.ws-aten-acc {
  flex: none; padding: 6px 12px; border-radius: 8px; font: 600 .78rem/1 var(--ws-fuente); text-decoration: none !important;
  background: #fff; border: 1px solid var(--ws-linea2); color: var(--ws-txt) !important; box-shadow: var(--ws-sombra-1); transition: background .14s;
}
.ws-aten-acc:hover, .ws-aten-det > summary:hover .ws-aten-acc { background: #f8f9fb; }
.ws-aten-det[open] .ws-aten-acc { background: var(--ws-sel); border-color: color-mix(in srgb, var(--ws-p) 25%, transparent); color: var(--ws-sel-txt) !important; }
.ws-aten-det ul { list-style: none; margin: 0 0 10px 38px; padding: 0; display: grid; gap: 6px; }
.ws-aten-det li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f8f9fb; border: 1px solid #eef0f3; }
.ws-aten-det li span { flex: 1; min-width: 0; display: grid; }
.ws-aten-det li small { color: var(--ws-txt2); font-size: .76rem; }
@media (max-width: 600px) {
  .ws-aten-it, .ws-aten-det > summary { flex-wrap: wrap; }
  .ws-aten-it > span:not(.ws-aten-acc), .ws-aten-det > summary > span:not(.ws-aten-acc) { flex: 1 1 calc(100% - 44px); }
  .ws-aten-acc { margin-left: 38px; }
  .ws-aten-det ul { margin-left: 0; }
  html body .ct-pend { gap: 8px; }
  html body .ct-pend .ct-pend-it { padding: 7px 12px 7px 8px; gap: 8px; }
  html body .ct-pend .ct-pend-it .ic { width: 28px; height: 28px; border-radius: 8px; }
  html body .ct-pend .ct-pend-it .n { font-size: 1rem; }
  html body .ct-pend .ct-pend-it .l { font-size: .8rem; }
}

/* =====================================================================
   PORTAL DEL CIUDADANO: menu lateral con el color configurado y la misma terminacion (el portal no usa body.ws)
   ===================================================================== */
html body:not(.ws) .bl-sidebar {
  background:
    radial-gradient(140% 30% at 0% 0%, rgb(255 255 255 / .09), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ws-marca) 93%, #ffffff), var(--ws-marca) 32%, color-mix(in srgb, var(--ws-marca) 90%, #000000)) !important;
  border-right: 1px solid color-mix(in srgb, var(--ws-nt) 8%, transparent); box-shadow: none;
}
html body:not(.ws) .bl-sidebar .bl-nav { padding: 8px 10px 14px; }
html body:not(.ws) .bl-sidebar :is(.bl-nav-item, .bl-nav-grupo > summary) {
  border-bottom: 0 !important; border-radius: 10px; padding: 9px 10px 9px 12px; margin: 1px 0; font: 500 .875rem/1.25 var(--ws-fuente); box-shadow: none;
}
html body:not(.ws) .bl-sidebar :is(.bl-nav-item, .bl-nav-grupo > summary):hover { background: color-mix(in srgb, var(--ws-nt) 9%, transparent) !important; }
html body:not(.ws) .bl-sidebar .bl-nav-item.activo {
  position: relative; font-weight: 600;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ws-nt) 16%, transparent), color-mix(in srgb, var(--ws-nt) 8%, transparent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ws-nt) 10%, transparent) !important;
}
html body:not(.ws) .bl-sidebar .bl-nav-item.activo::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--ws-acento); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--ws-acento) 60%, transparent);
}
html body:not(.ws) .bl-sidebar .bl-nav-sub { border-left-color: color-mix(in srgb, var(--ws-nt) 16%, transparent) !important; }
html body:not(.ws) .bl-sidebar .bl-nav-sep { letter-spacing: .08em; text-transform: uppercase; }
html body:not(.ws) .bl-sidebar .bl-side-acciones .bl-btn { border-radius: 10px; }

/* =====================================================================
   ACCESIBILIDAD Y DETALLES COMUNES
   ===================================================================== */
html body .ax-btn {
  left: auto; right: 16px; bottom: 16px; width: 42px; height: 42px; font-size: 1.05rem; color: var(--ws-txt);
  background: rgb(255 255 255 / .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px var(--ws-linea), 0 8px 22px -8px rgb(16 24 40 / .3); transition: transform .15s var(--ws-curva), opacity .2s;
}
html body .ax-btn:hover { transform: translateY(-2px); color: var(--ws-p); }
html body .ax-panel { left: auto; right: 16px; bottom: 68px; border-radius: 14px; box-shadow: var(--ws-sombra-3); border: 1px solid var(--ws-linea); }
html body.bl-abierto .ax-btn, html body.bl-abierto .ax-panel { opacity: 0; pointer-events: none; }
html body .bl-pie2-base { padding-right: 72px; }
@media (max-width: 600px) { html body .bl-pie2-base { padding-right: 0; padding-bottom: 64px; } }
/* El pie institucional es del portal ciudadano: en el espacio de trabajo no se muestra */
html body.ws .bl-pie2 { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ws-carga, .ws-carga *, .ws-nav, .ws-nav *, .ws-flot, body.ws-flot-abierto::after, .ws-lanzador-panel, .ws-cuenta-panel, .ws-crear-menu, .ws-progreso { animation: none !important; transition: none !important; }
}

/* Aviso de funcionarios inactivos (Funcionarios): tarjeta blanca con el acento de advertencia, no un bloque naranja */
html body.ws .ra-aviso { background: #ffffff; border: 1px solid var(--ws-linea); border-radius: 14px; box-shadow: var(--ws-sombra-1); padding: 14px 16px; }
html body.ws .ra-aviso > i { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: .9rem; background: #fffaeb; color: #dc6803; margin: 0; }
html body.ws .ra-aviso strong { color: var(--ws-txt); }
html body.ws .ra-aviso p { color: var(--ws-txt2); font-size: .84rem; }
html body.ws .ra-aviso li { background: #f8f9fb; border: 1px solid #eef0f3; border-radius: 10px; }

/* Encabezado de pantalla con el icono de aplicacion de su opcion del menu (workspace.js) */
html body.ws .bl-main h1:has(> .ws-cab-ico) { display: flex; align-items: center; gap: 14px; }
.ws-cab-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f7f8fa); box-shadow: inset 0 0 0 1px var(--ws-linea), 0 1px 2px rgb(16 24 40 / .06), 0 8px 18px -10px var(--ws-brillo);
}
.ws-cab-ico .ws-ico { width: 24px; height: 24px; }

/* =====================================================================
   SUPERFICIE UNICA (como Outlook y Gmail): el contenido es una sola superficie blanca pegada al menu y a la barra
   superior, sin franjas grises entre bloques. La cabecera de cada pantalla (titulo + acciones) se vuelve la barra de
   comandos, fija bajo la barra superior; las pestanas van subrayadas como las de Outlook. Bandeja y Mensajes llegan
   hasta los bordes.
   ===================================================================== */
html body.ws { background: #ffffff; --ws-pad: 28px; }
html body.ws .bl-content { max-width: none; margin: 0; padding: 0 var(--ws-pad) 32px; background: #ffffff; }
html body.ws :is(.ui-app, .ct-app, .bj-app, .bl-admin-container, .pn-app) { max-width: none; margin: 0; padding: 0; }
html body.ws .bl-topbar { background: #ffffff; box-shadow: none; border-bottom: 1px solid var(--ws-linea); }

/* Barra de comandos */
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) {
  position: sticky; top: 60px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  min-height: 60px; margin: 0 calc(var(--ws-pad) * -1) 20px !important; padding: 10px var(--ws-pad) !important;
  background: rgb(255 255 255 / .94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ws-linea); border-radius: 0; box-shadow: none;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) > div:first-child { flex: 1 1 320px; min-width: 0; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) h1 { font-size: 1.12rem !important; gap: 10px !important; margin: 0 !important; letter-spacing: -.015em; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(p, .bl-admin-subtitle) {
  margin: 2px 0 0 !important; font-size: .78rem !important; line-height: 1.35 !important; color: var(--ws-txt2); max-width: 80ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) h1 > :is(.ws-cab-ico, i:first-child) { width: 32px !important; height: 32px !important; border-radius: 9px !important; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) .ws-cab-ico .ws-ico { width: 20px; height: 20px; }
/* Acciones de la barra: la principal rellena y compacta; las demas planas con icono (como Outlook) */
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn, .bl-btn) { min-height: 32px; padding: 0 12px; font-size: .82rem; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario, .ui-btn-t) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--ws-txt) !important;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario, .ui-btn-t):hover { background: var(--ws-hover) !important; }
html body.ws .ct-cab .ws-crear > summary { height: 32px; font-size: .82rem; padding: 0 14px 0 10px; }
html body.ws .ct-cab #ctFecha { white-space: nowrap; }

/* Pestanas como las de Outlook: texto con subrayado del color institucional */
html body.ws :is(.ui-tabs, .bl-admin-tabs, .bl-perfil-tabs, .bt-tabs) {
  width: 100%; padding: 0 !important; gap: 2px !important; background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--ws-linea) !important; border-radius: 0 !important; box-shadow: none !important;
}
html body.ws :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn, .bt-tabs > button) {
  position: relative; padding: 10px 12px 11px !important; border-radius: 6px 6px 0 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--ws-txt2) !important; font-weight: 550;
}
html body.ws :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn, .bt-tabs > button):hover { background: var(--ws-hover) !important; color: var(--ws-txt) !important; }
html body.ws :is(.ui-tab[aria-selected=true], .bl-admin-tab.activa, .bl-tab-item.activo, .bl-ptab-btn.activo, .bt-tabs > button.on) {
  background: transparent !important; box-shadow: none !important; color: var(--ws-txt) !important; font-weight: 650;
}
html body.ws :is(.ui-tab[aria-selected=true], .bl-admin-tab.activa, .bl-tab-item.activo, .bl-ptab-btn.activo, .bt-tabs > button.on)::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--ws-p); box-shadow: 0 0 8px var(--ws-brillo);
}

/* Tarjetas sobre la superficie blanca: solo borde fino, sin sombra (no flotan) */
html body.ws :is(.ui-card, .bl-card, .bj-tarjeta, .bl-stat-card, .bl-kpi-card, .bl-pie-card, .ui-tabla-wrap, .ws-atencion) { box-shadow: none; border-color: var(--ws-linea); }
html body .ct-pend .ct-pend-it { box-shadow: none; }

/* Bandeja: carpetas y lista pegadas a los bordes, separadas por una linea */
html body.ws .bl-content .bj-app > .bj-cabecera { margin-bottom: 0 !important; }
html body.ws .bj-layout { gap: 0; margin: 0 calc(var(--ws-pad) * -1) -32px; min-height: calc(100vh - 121px); align-items: stretch; }
html body.ws .bj-nav {
  top: 121px; align-self: start; min-height: calc(100vh - 121px); border: 0; border-right: 1px solid var(--ws-linea); border-radius: 0;
  padding: 10px 8px; background: #fbfbfc;
}
html body.ws .bj-nav-item { border-radius: 8px; font-size: .84rem; }
html body.ws .bj-nav-item[aria-current="page"] { background: var(--ws-sel); color: var(--ws-sel-txt); font-weight: 650; }
html body.ws .bj-lista { border: 0; border-radius: 0; padding: 8px 16px 24px; min-height: 0; background: #ffffff; }
html body.ws .bj-detalle { border-radius: 0; border: 0; border-left: 1px solid var(--ws-linea); top: 121px; max-height: calc(100vh - 121px); }
html body.ws .bj-kpis { margin: 0; }

/* Mensajes: la lista de conversaciones y el chat ocupan toda el area */
html body.ws .ch-app { border: 0; border-radius: 0; margin: 0 calc(var(--ws-pad) * -1) -32px; height: calc(100vh - 61px); max-width: none; }
html body.ws .ch-lista { background: #fbfbfc; border-right-color: var(--ws-linea); }

@media (max-width: 991.98px) {
  html body.ws { --ws-pad: 16px; }
  html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) { position: static; }
  html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(p, .bl-admin-subtitle) { white-space: normal; }
  html body.ws .bj-layout { margin: 0 calc(var(--ws-pad) * -1); min-height: 0; }
  html body.ws .bj-nav { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ws-linea); }
  html body.ws .ch-app { height: calc(100vh - 120px); }
}

/* =====================================================================
   CABECERA Y BARRA DE COMANDOS CON LOS COLORES DE LA INSTITUCION
   Cabecera (52 px) del color del menu: forma un marco continuo con el menu lateral. Barra de comandos (40 px, una
   sola linea: icono, titulo y acciones) con un tinte del color primario; la descripcion queda al pasar el mouse.
   ===================================================================== */
html body.ws { --ws-top: 52px; --ws-cmd: 40px; }
@media (min-width: 992px) {
  html body.ws .bl-topbar {
    min-height: var(--ws-top); height: var(--ws-top); padding: 0 14px 0 20px; gap: 12px; color: var(--ws-nt);
    background: linear-gradient(90deg, color-mix(in srgb, var(--ws-marca) 96%, #ffffff), var(--ws-marca) 40%, color-mix(in srgb, var(--ws-marca) 86%, var(--ws-p)));
    border-bottom: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  }
  html body.ws .ws-nav-cab { height: var(--ws-top); padding-top: 8px; padding-bottom: 8px; display: flex; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent); }
  html body.ws .ws-nav-cab .ws-nav-marca { flex: 1; padding: 0 6px; }
  html body.ws .ws-nav-logo { width: 32px; height: 32px; }
}
html body.ws .bl-topbar .bl-avisos-btn { width: 34px; height: 34px; background: transparent !important; color: var(--ws-nt) !important; transition: background .12s; }
html body.ws .bl-topbar .bl-avisos-btn:hover, html body.ws .bl-topbar .bl-avisos-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ws-nt) 14%, transparent) !important; }
html body.ws .bl-topbar .bl-avisos-badge { box-shadow: 0 0 0 2px var(--ws-marca); }
html body.ws .bl-topbar .bl-hamb { color: var(--ws-nt); background: transparent; }
html body.ws .bl-topbar .bl-brand-tit, html body.ws .bl-topbar .bl-brand-sub { color: var(--ws-nt); }
html body.ws .bl-topbar .bl-search input {
  height: 34px; background: color-mix(in srgb, var(--ws-nt) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent); color: var(--ws-nt);
}
html body.ws .bl-topbar .bl-search input::placeholder { color: color-mix(in srgb, var(--ws-nt) 72%, transparent); }
html body.ws .bl-topbar .bl-search > i { color: color-mix(in srgb, var(--ws-nt) 75%, transparent); }
html body.ws .bl-topbar .bl-search input:focus { background: #ffffff; color: var(--ws-txt); border-color: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-nt) 25%, transparent); }
html body.ws .bl-topbar .bl-search:focus-within > i { color: var(--ws-txt2); }
html body.ws .ws-cuenta-btn:hover, html body.ws .ws-cuenta-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ws-marca), 0 0 0 4px color-mix(in srgb, var(--ws-nt) 55%, transparent); }

/* Barra de comandos: 40 px, una linea */
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) {
  top: var(--ws-top); flex-wrap: nowrap; min-height: var(--ws-cmd); height: var(--ws-cmd); padding: 0 var(--ws-pad) !important; gap: 10px; overflow: visible;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ws-p) 13%, #ffffff), color-mix(in srgb, var(--ws-p) 7%, #ffffff) 60%, color-mix(in srgb, var(--ws-acento) 8%, #ffffff));
  border-bottom: 1px solid color-mix(in srgb, var(--ws-p) 18%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) > div:first-child { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) > div:first-child > :not(h1):not(h2):not(#ctFecha),
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) > :is(p, .bl-admin-subtitle) { display: none !important; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) h1 {
  font-size: .95rem !important; font-weight: 650 !important; gap: 8px !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) h1 > :is(.ws-cab-ico, i:first-child) {
  width: 26px !important; height: 26px !important; border-radius: 7px !important; font-size: .78rem !important;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) .ws-cab-ico .ws-ico { width: 17px; height: 17px; }
html body.ws .ct-cab #ctFecha { display: block !important; margin: 0 !important; font-size: .78rem !important; color: var(--ws-txt2); white-space: nowrap; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) > :not(div:first-child) { flex: none; display: flex; align-items: center; gap: 4px; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn, .bl-btn) { min-height: 28px; height: 28px; padding: 0 10px; font-size: .8rem; border-radius: 7px; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario, .ui-btn-t):hover { background: color-mix(in srgb, var(--ws-p) 12%, transparent) !important; }
html body.ws .ct-cab .ws-crear > summary { height: 28px; border-radius: 7px; font-size: .8rem; }
/* Busqueda de la Bandeja dentro de la barra */
html body.ws .bj-cabecera .bj-buscar input { height: 28px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: .8rem; background: #ffffff; border: 1px solid color-mix(in srgb, var(--ws-p) 18%, var(--ws-linea2)); border-radius: 7px; }
html body.ws .bj-cabecera .bj-cab-acciones { display: flex; align-items: center; gap: 8px; }

/* Lo que se ubica debajo de la barra usa las nuevas alturas (computador) */
@media (min-width: 992px) {
  html body.ws .bj-layout { min-height: calc(100vh - var(--ws-top) - var(--ws-cmd) - 1px); }
  html body.ws .bj-nav { top: calc(var(--ws-top) + var(--ws-cmd)); min-height: calc(100vh - var(--ws-top) - var(--ws-cmd) - 1px); }
  html body.ws .bj-detalle { top: calc(var(--ws-top) + var(--ws-cmd)); max-height: calc(100vh - var(--ws-top) - var(--ws-cmd)); }
  html body.ws .ch-app { height: calc(100vh - var(--ws-top) - 1px); }
}
@media (max-width: 991.98px) {
  html body.ws .bl-topbar { background: var(--ws-marca); color: var(--ws-nt); border-bottom: 0; }
  html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) { height: auto; min-height: var(--ws-cmd); padding: 6px var(--ws-pad) !important; flex-wrap: wrap; }
  html body.ws .ch-app { height: calc(100vh - 120px); }
}

html body.ws .bl-content .bl-admin-header > div:first-child > h2 {
  margin: 0 !important; font: 650 .95rem/1.2 var(--ws-fuente) !important; color: var(--ws-txt) !important; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body.ws .bl-content .bl-admin-header > div:first-child > h2 > .ws-cab-ico { width: 26px; height: 26px; border-radius: 7px; }
html body.ws .bl-content .bl-admin-header > div:first-child > h2 > .ws-cab-ico .ws-ico { width: 17px; height: 17px; }
html body.ws .bj-cabecera .bj-buscar { background: transparent; border: 0; padding: 0; min-width: 280px; box-shadow: none !important; position: relative; }
html body.ws .bj-cabecera .bj-buscar > i { position: absolute; left: 9px; font-size: .75rem; color: var(--ws-txt2); }
html body.ws .bj-cabecera .bj-buscar input { padding-left: 28px !important; width: 100%; }
html body.ws .bj-cabecera .bj-buscar input:focus { border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 16%, transparent); outline: none; }
/* Algunas cabeceras antiguas traen alineacion en linea (style=): en la barra todo va centrado */
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) { align-items: center !important; flex-wrap: nowrap !important; }
@media (max-width: 991.98px) { html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) { flex-wrap: wrap !important; } }
/* Celular: las carpetas de la Bandeja en una sola fila que se desliza */
@media (max-width: 991.98px) {
  html body.ws .bj-layout { min-height: 0; }
  html body.ws .bj-nav {
    display: flex !important; flex-wrap: nowrap; gap: 4px; position: static !important; min-height: 0; overflow-x: auto; scrollbar-width: none;
    padding: 8px 12px; border: 0; border-bottom: 1px solid var(--ws-linea); background: #fbfbfc;
  }
  html body.ws .bj-nav::-webkit-scrollbar { display: none; }
  html body.ws .bj-nav-item { flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; }
  html body.ws .bj-nav :is(.bj-nav-tit, .bj-nav-ayuda) { display: none; }
}

/* =====================================================================
   BARRAS EN COLOR SOLIDO (pedido del usuario): cabecera con el color del menu lateral (52 px) y barra de
   comandos con el color de fondo configurado (40 px). Textos con el color que contrasta con cada una.
   ===================================================================== */
html body.ws { --ws-top: 52px; --ws-cmd: 40px; --ws-bt: var(--ws-barra-txt, #1b2433); }
@media (min-width: 992px) {
  html body.ws .bl-topbar { background: var(--ws-marca); color: var(--ws-nt); border-bottom: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent); }
}
@media (max-width: 991.98px) {
  html body.ws .bl-topbar { background: var(--ws-marca); color: var(--ws-nt); border-bottom: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent); }
}
html body.ws .bl-topbar :is(.bl-avisos-btn, .bl-hamb, .bl-brand-tit, .bl-brand-sub) { color: var(--ws-nt) !important; }
html body.ws .bl-topbar .bl-avisos-btn:hover, html body.ws .bl-topbar .bl-avisos-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ws-nt) 10%, transparent) !important; }
html body.ws .bl-topbar .bl-avisos-badge { box-shadow: 0 0 0 2px var(--ws-marca); }
html body.ws .bl-topbar .bl-search input {
  height: 34px; background: color-mix(in srgb, var(--ws-nt) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ws-nt) 9%, transparent); color: var(--ws-nt);
}
html body.ws .bl-topbar .bl-search input::placeholder { color: color-mix(in srgb, var(--ws-nt) 62%, transparent); }
html body.ws .bl-topbar .bl-search > i { color: color-mix(in srgb, var(--ws-nt) 65%, transparent); }
html body.ws .bl-topbar .bl-search input:focus { background: #ffffff; color: var(--ws-txt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 18%, transparent); }
html body.ws .ws-cuenta-btn:hover, html body.ws .ws-cuenta-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ws-marca), 0 0 0 4px color-mix(in srgb, var(--ws-p) 50%, transparent); }
html body.ws .ws-nav-logo { width: 32px; height: 32px; }

/* Barra de comandos: color de fondo configurado */
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) {
  background: var(--ws-barra, #f6f8fc) !important; color: var(--ws-bt); border-bottom: 1px solid color-mix(in srgb, var(--ws-bt) 10%, transparent);
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(h1, .bl-admin-header > div:first-child > h2) { color: var(--ws-bt) !important; font-size: .95rem !important; }
html body.ws .bl-content .bl-admin-header > div:first-child > h2 { color: var(--ws-bt) !important; font-size: .95rem !important; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) h1 > :is(.ws-cab-ico, i:first-child),
html body.ws .bl-content .bl-admin-header > div:first-child > h2 > .ws-cab-ico {
  width: 26px !important; height: 26px !important; border-radius: 7px !important;
  background: #ffffff !important; box-shadow: inset 0 0 0 1px var(--ws-linea), 0 1px 2px rgb(16 24 40 / .08) !important;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) .ws-cab-ico .ws-ico { width: 17px; height: 17px; }
html body.ws .ct-cab #ctFecha { color: color-mix(in srgb, var(--ws-bt) 72%, transparent) !important; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn, .bl-btn) { min-height: 28px; height: 28px; padding: 0 10px; font-size: .8rem; border-radius: 7px; }
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario, .ui-btn-t),
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario, .ui-btn-t) > i {
  color: var(--ws-bt) !important;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-b, .bl-btn-borde, .bl-btn-secundario, .ui-btn-t):hover { background: color-mix(in srgb, var(--ws-bt) 14%, transparent) !important; }
/* El boton principal de la barra: color primario */
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-p, .bl-btn-primario), html body.ws .ct-cab .ws-crear > summary {
  background: var(--ws-p) !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 1px 2px rgb(16 24 40 / .15), 0 4px 10px -4px var(--ws-brillo) !important;
}
html body.ws .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-p, .bl-btn-primario) > i { color: #ffffff !important; }
html body.ws .ct-cab .ws-crear > summary { height: 28px; border-radius: 7px; }
html body.ws .bj-cabecera .bj-buscar input { height: 28px !important; border: 1px solid var(--ws-linea2) !important; background: #ffffff !important; }

/* =====================================================================
   MENU DE OPCIONES DEL MODULO (columna izquierda de cada pantalla; workspace.js)
   Panel claro pegado al menu lateral con las opciones del grupo (icono en placa de color + nombre) y, bajo la opcion
   actual, sus pestanas como sub-opciones. Mismo acabado para las carpetas de la Bandeja y la lista del chat.
   ===================================================================== */
html body.ws { --ws-mod: 248px; }
.ws-nav .ws-nav-sub-ico { display: none; }
.ws-flot-lista .ws-nav-sub-ico { width: 16px; text-align: center; font-size: .8rem; color: var(--ws-p); opacity: .85; }
@media (min-width: 992px) {
  html body.ws .ws-con-modulo { position: relative; padding-left: var(--ws-mod) !important; min-height: calc(100vh - var(--ws-top) - 32px); }
  html body.ws .ws-con-modulo > :is(.ui-cab, .bl-admin-header, .pn-cab) { margin-left: calc((var(--ws-mod) + var(--ws-pad)) * -1) !important; }
  /* Vista escrita directo en el contenido: el propio contenido lleva la columna */
  html body.ws .bl-content.ws-con-modulo-raiz { padding-left: calc(var(--ws-mod) + var(--ws-pad)) !important; min-height: calc(100vh - var(--ws-top)); }
  html body.ws .bl-content.ws-con-modulo-raiz > .ws-modulo { left: 0; bottom: 0; }
  html body.ws .ws-modulo {
    position: absolute; left: calc(var(--ws-pad) * -1); bottom: -32px; width: var(--ws-mod);
    background: #fbfbfc; border-right: 1px solid var(--ws-linea);
  }
  html body.ws .ws-modulo-in { position: sticky; top: calc(var(--ws-top) + var(--ws-cmd)); max-height: calc(100vh - var(--ws-top) - var(--ws-cmd)); overflow-y: auto; padding: 14px 10px 20px; scrollbar-width: thin; }
}
.ws-modulo-tit { display: flex; align-items: center; gap: 10px; padding: 4px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--ws-linea); }
.ws-modulo-tit .ws-nav-ico .ws-ico { width: 20px; height: 20px; }
.ws-modulo-tit strong { font: 650 .86rem/1.2 var(--ws-fuente); color: var(--ws-txt); letter-spacing: -.01em; }
.ws-mod-it {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 10px 5px 6px; margin: 2px 0; border-radius: 10px;
  color: #3a4352 !important; font: 500 .84rem/1.25 var(--ws-fuente); text-decoration: none !important; transition: background .12s, color .12s, box-shadow .12s;
}
.ws-mod-ico {
  width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ws-p) 9%, #ffffff); color: var(--ws-p); font-size: .78rem; transition: background .12s, color .12s;
}
.ws-mod-txt { flex: 1; min-width: 0; }
/* Separadores del menu del sistema de gestion (titulo de un grupo de opciones) */
.ws-mod-sep { margin: 12px 0 4px; padding: 8px 10px 2px; border-top: 1px solid var(--ws-linea); color: var(--ws-txt2); font: 650 .68rem/1.3 var(--ws-fuente); text-transform: uppercase; letter-spacing: .06em; }
.ws-nav-sub-sep { display: block; padding: 8px 10px 2px; color: color-mix(in srgb, var(--ws-nt) 55%, transparent); font: 650 .66rem/1.3 var(--ws-fuente); text-transform: uppercase; letter-spacing: .06em; }
.ws-mod-it .ws-nav-num { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgb(15 23 42 / .06); color: var(--ws-txt2); font: 600 .7rem/1 var(--ws-fuente); }
.ws-mod-it:hover { background: rgb(15 23 42 / .045); color: var(--ws-txt) !important; }
.ws-mod-it:hover .ws-mod-ico { background: color-mix(in srgb, var(--ws-p) 16%, #ffffff); }
.ws-mod-it.activo { background: #ffffff; color: var(--ws-txt) !important; font-weight: 650; box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 0 0 1px rgb(16 24 40 / .05); }
.ws-mod-it.activo .ws-mod-ico { background: var(--ws-p); color: #ffffff; box-shadow: 0 4px 10px -4px var(--ws-brillo); }
.ws-mod-it.activo::before {
  content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ws-p), var(--ws-acento)); box-shadow: 0 0 8px var(--ws-brillo);
}
/* Pestanas como sub-opciones de la opcion actual */
html body.ws .ws-modulo .ws-mod-tabs {
  display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: 1px !important; width: auto; margin: 4px 0 8px 20px !important; padding: 0 0 0 12px !important;
  border: 0 !important; border-left: 1px solid var(--ws-linea) !important; border-radius: 0 !important; background: transparent !important; overflow: visible;
}
html body.ws .ws-modulo .ws-mod-tabs > :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn, button) {
  justify-content: flex-start; width: 100%; padding: 7px 10px !important; border-radius: 8px !important; white-space: normal; text-align: left;
  font: 500 .8rem/1.3 var(--ws-fuente) !important; color: var(--ws-txt2) !important; background: transparent !important;
}
html body.ws .ws-modulo .ws-mod-tabs > :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn, button) > i { width: 14px; text-align: center; font-size: .75rem; opacity: .75; }
html body.ws .ws-modulo .ws-mod-tabs > :is(.ui-tab, .bl-admin-tab, .bl-tab-item, .bl-ptab-btn, button):hover { background: rgb(15 23 42 / .045) !important; color: var(--ws-txt) !important; }
html body.ws .ws-modulo .ws-mod-tabs > :is(.ui-tab[aria-selected=true], .bl-admin-tab.activa, .bl-tab-item.activo, .bl-ptab-btn.activo, button.on) {
  color: var(--ws-sel-txt) !important; font-weight: 650 !important; background: var(--ws-sel) !important;
}
html body.ws .ws-modulo .ws-mod-tabs > :is(.ui-tab[aria-selected=true], .bl-admin-tab.activa, .bl-tab-item.activo, .bl-ptab-btn.activo, button.on)::after {
  left: -13px; right: auto; top: 7px; bottom: 7px; width: 2px; height: auto; border-radius: 2px;
}
/* Celular: las demas opciones del grupo estan en el cajon del menu; aqui solo quedan las pestanas en una fila */
@media (max-width: 991.98px) {
  html body.ws .ws-modulo { margin: -20px calc(var(--ws-pad) * -1) 16px; background: #fbfbfc; border-bottom: 1px solid var(--ws-linea); }
  html body.ws .ws-modulo:not(:has(.ws-mod-tabs)) { display: none; }
  html body.ws .ws-modulo-in { padding: 6px 12px; }
  html body.ws :is(.ws-modulo-tit, .ws-mod-it, .ws-mod-sep) { display: none !important; }
  html body.ws .ws-modulo .ws-mod-tabs { flex-direction: row; margin: 0 !important; padding: 0 !important; border-left: 0 !important; overflow-x: auto; scrollbar-width: none; }
  html body.ws .ws-modulo .ws-mod-tabs > * { width: auto !important; flex: 0 0 auto; white-space: nowrap; }
  html body.ws .ws-modulo .ws-mod-tabs > *::after { display: none; }
  html body.ws .ct-cab #ctFecha { display: none !important; }
}

/* Bandeja y chat: el mismo acabado que el menu del modulo */
html body.ws .bj-nav-item { min-height: 36px; color: #3a4352; }
html body.ws .bj-nav-item i { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ws-p) 9%, #ffffff); color: var(--ws-p); font-size: .75rem; }
html body.ws .bj-nav-item:hover { background: rgb(15 23 42 / .045); }
html body.ws .bj-nav-item[aria-current="page"] { background: #ffffff; color: var(--ws-txt); font-weight: 650; box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 0 0 1px rgb(16 24 40 / .05); position: relative; }
html body.ws .bj-nav-item[aria-current="page"] i { background: var(--ws-p); color: #ffffff; box-shadow: 0 4px 10px -4px var(--ws-brillo); }
html body.ws .bj-nav-tit { color: var(--ws-txt3); font-weight: 600; letter-spacing: .08em; }

/* =====================================================================
   MI PANEL EN DOS COLUMNAS: a la izquierda "Mi dia" (asuntos, pendientes, moderacion, encuestas, eventos y avisos)
   como panel claro pegado al menu; a la derecha la cartelera.
   ===================================================================== */
@media (min-width: 1100px) {
  html body.ws .ct-cols { grid-template-columns: 340px minmax(0, 1fr); gap: 0 28px; margin: -20px 0 -32px calc(var(--ws-pad) * -1); align-items: stretch; }
  html body.ws .ct-lado {
    order: -1; position: relative; top: auto; align-self: stretch; display: block; padding: 0; background: #fbfbfc; border-right: 1px solid var(--ws-linea);
    min-height: calc(100vh - var(--ws-top) - var(--ws-cmd));
  }
  html body.ws .ct-lado > * { margin: 0 !important; }
  html body.ws .ct-muro { padding-top: 20px; padding-bottom: 32px; }
}
html body.ws .ct-lado { display: block; }
html body.ws .ct-lado > :is(section, div):not([hidden]) {
  background: transparent; border: 0; border-bottom: 1px solid var(--ws-linea); border-radius: 0; box-shadow: none; padding: 16px 18px;
}
html body.ws .ct-lado .ct-card-cab h2, html body.ws .ct-lado .ws-aten-cab { font: 650 .8rem/1.2 var(--ws-fuente); text-transform: uppercase; letter-spacing: .06em; color: var(--ws-txt2); }
html body.ws .ct-lado .ct-card-cab h2 i { color: var(--ws-p); }
/* Pendientes como opciones: fila con icono, nombre y numero */
html body.ws .ct-lado .ct-pend { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
html body.ws .ct-lado .ct-pend::before { content: "Mis pendientes"; font: 650 .8rem/1.2 var(--ws-fuente); text-transform: uppercase; letter-spacing: .06em; color: var(--ws-txt2); margin-bottom: 6px; }
html body.ws .ct-lado .ct-pend .ct-pend-it {
  display: flex; width: 100%; padding: 6px 10px 6px 6px; border-radius: 10px; border: 0; background: transparent; box-shadow: none;
}
html body.ws .ct-lado .ct-pend .ct-pend-it:hover { background: #ffffff; box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 0 0 1px rgb(16 24 40 / .05); }
html body.ws .ct-lado .ct-pend .ct-pend-it .ic { width: 30px; height: 30px; border-radius: 8px; }
html body.ws .ct-lado .ct-pend .ct-pend-it > span:last-child { flex: 1; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
html body.ws .ct-lado .ct-pend .ct-pend-it .n { margin: 0; font-size: .95rem; min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 999px; background: rgb(15 23 42 / .06); }
html body.ws .ct-lado .ct-pend .ct-pend-it .l { font-size: .86rem; color: #3a4352; font-weight: 550; }
html body.ws .ct-lado .ct-pend-ok { width: 100%; }
/* "Requiere su atencion" dentro de la columna: compacto */
html body.ws .ct-lado .ws-atencion { padding: 16px 18px 8px; }
html body.ws .ct-lado .ws-aten-ico { width: 22px; height: 22px; font-size: .68rem; }
html body.ws .ct-lado .ws-aten-it, html body.ws .ct-lado .ws-aten-det > summary { flex-wrap: wrap; font-size: .8rem; gap: 6px 10px; }
html body.ws .ct-lado .ws-aten-it > span:not(.ws-aten-acc), html body.ws .ct-lado .ws-aten-det > summary > span:not(.ws-aten-acc) { flex: 1 1 calc(100% - 40px); }
html body.ws .ct-lado .ws-aten-acc { margin-left: 36px; }
html body.ws .ct-lado .ws-aten-det ul { margin-left: 0; }
/* Tablero de gestion: los accesos en cuadros (Reportes, Demanda, Bitacora) ya estan en el menu del modulo */
html body.ws .pn-cab .pn-rapidos { display: none !important; }

/* =====================================================================
   ESTILO DE LOS ICONOS DEL MENU (Identidad y diseno: body.ws-ico-<estilo>; vista previa: .ws-est-<estilo>)
   ===================================================================== */
:is(body.ws-ico-placa .ws-nav, .ws-est-placa) .ws-nav-ico,
:is(body.ws-ico-vidrio .ws-nav, .ws-est-vidrio) .ws-nav-ico { width: 32px; height: 32px; border-radius: 9px; }
:is(body.ws-ico-placa .ws-nav, .ws-est-placa) .ws-nav-ico {
  background: linear-gradient(180deg, #ffffff, #eef2f7); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 2px 6px rgb(0 0 0 / .28);
}
:is(body.ws-ico-vidrio .ws-nav, .ws-est-vidrio) .ws-nav-ico {
  background: linear-gradient(160deg, rgb(255 255 255 / .34), rgb(255 255 255 / .1)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28), 0 4px 12px -4px rgb(0 0 0 / .35);
  backdrop-filter: blur(4px);
}
:is(body.ws-ico-vidrio .ws-nav, .ws-est-vidrio) .ws-nav-ico .ws-ico { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)) saturate(1.2) brightness(1.08); }
:is(body.ws-ico-placa .ws-nav, .ws-est-placa, body.ws-ico-vidrio .ws-nav, .ws-est-vidrio) .ws-nav-ico .ws-ico { width: 20px; height: 20px; }
/* Un solo color: silueta del color del texto del menu */
:is(body.ws-ico-blanco .ws-nav, .ws-est-blanco) .ws-nav-ico .ws-ico { filter: brightness(0) invert(1); opacity: .92; }
body.ws-ico-blanco.ws-clara .ws-nav .ws-nav-ico .ws-ico, .ws-est-blanco.ws-est-claro .ws-nav-ico .ws-ico { filter: brightness(0); opacity: .75; }
/* Opcion actual: la placa se resalta con el acento */
:is(body.ws-ico-placa, body.ws-ico-vidrio) .ws-nav :is(.ws-nav-it.activo, .ws-nav-grupo.contiene > .ws-nav-it) .ws-nav-ico { box-shadow: 0 0 0 2px var(--ws-acento), 0 4px 12px -2px color-mix(in srgb, var(--ws-acento) 60%, transparent); }
body.ws-ico-blanco .ws-nav :is(.ws-nav-it.activo, .ws-nav-grupo.contiene > .ws-nav-it) .ws-nav-ico .ws-ico { opacity: 1; }
/* Vista previa en Identidad y diseno */
.ws-est-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ws-est-op { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--ws-linea, #e2e8f0); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ws-est-op:has(input:checked) { border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 18%, transparent); }
.ws-est-op input { position: absolute; opacity: 0; pointer-events: none; }
.ws-est-op strong { font-size: .86rem; }
.ws-est-op small { color: #64748b; font-size: .74rem; line-height: 1.35; }
.ws-est-demo { display: flex; gap: 8px; justify-content: center; padding: 12px 8px; border-radius: 10px; margin-bottom: 4px; background: var(--bl-sidebar, #1b2a6b); }
.ws-est-demo .ws-nav-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; }



/* =====================================================================
   PORTAL DEL CIUDADANO AL ESTILO OUTLOOK (pedido del usuario)
   Una aplicacion, no un sitio web: barra superior solida (52 px) con el buscador, menu lateral fijo con las
   carpetas (categorias, servicios y la cuenta), barra de comandos de 40 px y el contenido en una superficie blanca
   pegada a los bordes. La portada es una lista compacta de tramites agrupados por categoria (vistas/inicio.php).
   ===================================================================== */
html body:not(.ws) { background: #ffffff; }
/* Barra superior */
html body:not(.ws) .bl-topbar {
  position: sticky; top: 0; z-index: 1030; height: 52px; min-height: 52px; padding: 0 14px 0 16px; gap: 12px;
  background: var(--ws-marca); color: var(--ws-nt); border-bottom: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent); box-shadow: none;
}
html body:not(.ws) .bl-topbar :is(.bl-brand-tit, .bl-brand-sub, .bl-hamb, .bl-top-iconos > a, .bl-avisos-btn, .bl-top-logout) { color: var(--ws-nt) !important; }
html body:not(.ws) .bl-topbar :is(.bl-brand-sub, .bl-brand-fecha) { display: none; }
html body:not(.ws) .bl-topbar .bl-brand-tit { font-size: .92rem; font-weight: 600; }
html body:not(.ws) .bl-topbar .bl-brand-badge-btn { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws-nt) 25%, transparent) !important; }
html body:not(.ws) .bl-topbar .bl-search { flex: 0 1 560px; margin: 0 auto; }
html body:not(.ws) .bl-topbar .bl-search input {
  height: 34px; border-radius: 8px; font-size: .86rem; color: var(--ws-nt);
  background: color-mix(in srgb, var(--ws-nt) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ws-nt) 10%, transparent);
}
html body:not(.ws) .bl-topbar .bl-search input::placeholder { color: color-mix(in srgb, var(--ws-nt) 72%, transparent); }
html body:not(.ws) .bl-topbar .bl-search > i { color: color-mix(in srgb, var(--ws-nt) 75%, transparent); }
html body:not(.ws) .bl-topbar .bl-search input:focus { background: #ffffff; color: var(--ws-txt); box-shadow: none; }
html body:not(.ws) .bl-topbar .bl-search:focus-within > i { color: var(--ws-txt2); }
html body:not(.ws) .bl-topbar :is(.bl-top-iconos > a, .bl-avisos-btn) { width: 34px; height: 34px; background: transparent !important; }
html body:not(.ws) .bl-topbar :is(.bl-top-iconos > a, .bl-avisos-btn):hover { background: color-mix(in srgb, var(--ws-nt) 14%, transparent) !important; }
html body:not(.ws) .bl-topbar a.pt-login { width: auto !important; padding: 0 10px; gap: 8px; display: inline-flex; align-items: center; font-size: .84rem; }
html body:not(.ws) .bl-topbar .bl-top-user-pill { background: color-mix(in srgb, var(--ws-nt) 14%, transparent) !important; border: 0 !important; height: 34px; }
html body:not(.ws) .bl-topbar .bl-top-user-pill * { color: var(--ws-nt) !important; }

/* Menu lateral fijo y compacto (las carpetas) */
@media (min-width: 992px) {
  html body:not(.ws) { --bl-ancho-side: 240px; }
  html body:not(.ws) .bl-sidebar { width: 240px; transform: none !important; }
  html body:not(.ws) .bl-main, html body:not(.ws).bl-colapsado .bl-main { margin-left: 240px; }
  html body:not(.ws) .bl-topbar .bl-hamb { display: none; }
  html body:not(.ws) .bl-sidebar .bl-side-logos { height: 52px; min-height: 0; margin: 0 !important; padding: 0 !important; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  html body:not(.ws) .bl-sidebar .bl-side-banner-wrap { height: 52px; width: 100%; margin: 0 !important; border-radius: 0 !important; display: block; background: var(--ws-marca); }
  html body:not(.ws) .bl-sidebar .bl-side-banner-img { width: 100%; height: 100%; object-fit: cover; }
  html body:not(.ws) .bl-sidebar .bl-side-logo-img { max-height: 30px !important; width: auto; }
  html body:not(.ws) .bl-sidebar .bl-nav { padding: 6px 8px 10px; }
  html body:not(.ws) .bl-sidebar :is(.bl-nav-item, .bl-nav-grupo > summary) { min-height: 32px; padding: 6px 10px !important; font-size: .82rem !important; gap: 10px; }
  html body:not(.ws) .bl-sidebar .bl-nav-item :is(i, .bl-nav-ico) { font-size: .8rem; width: 16px; }
  html body:not(.ws) .bl-sidebar .bl-nav-sep { margin: 10px 10px 4px; font-size: .62rem; }
  html body:not(.ws) .bl-sidebar .bl-side-acciones { padding: 8px 10px; gap: 6px; }
  html body:not(.ws) .bl-sidebar .bl-side-acciones .bl-btn { min-height: 34px; padding: 0 12px; font-size: .82rem; border-radius: 8px; }
  html body:not(.ws) .bl-sidebar .bl-side-footer { padding: 8px 14px; font-size: .7rem; }
}

/* Superficie unica y barra de comandos (portada y pantallas con encabezado ui-cab) */
html body:not(.ws) { --ws-pad: 22px; }
html body:not(.ws) .bl-content { max-width: none; margin: 0; padding: 0 var(--ws-pad) 28px; background: #ffffff; }
html body:not(.ws) .bl-content > .ui-cab:first-child, html body:not(.ws) .bl-content > .ol-cab {
  position: sticky; top: 52px; z-index: 40; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; height: 44px; min-height: 44px;
  margin: 0 calc(var(--ws-pad) * -1) 0 !important; padding: 0 var(--ws-pad) !important; background: var(--ws-barra, #f6f8fc); color: var(--ws-bt, #1b2433);
  border-bottom: 1px solid color-mix(in srgb, var(--ws-bt, #1b2433) 10%, transparent);
}
html body:not(.ws) .ol-cab > div:first-child { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
html body:not(.ws) .ol-cab h1 { margin: 0; font: 650 .98rem/1.2 var(--ws-fuente); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
html body:not(.ws) .ol-cab h1 > i { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: #ffffff; color: var(--ws-p); -webkit-text-fill-color: currentColor; box-shadow: inset 0 0 0 1px var(--ws-linea); }
html body:not(.ws) .ol-cab p { margin: 0; font-size: .78rem; color: var(--ws-txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-acciones { display: flex; align-items: center; gap: 4px; flex: none; }
html body:not(.ws) .ol-acciones .ui-btn { min-height: 28px; height: 28px; padding: 0 10px; font-size: .8rem; border-radius: 7px; gap: 6px; }
html body:not(.ws) .ol-acciones .ui-btn-b { background: transparent; border-color: transparent; box-shadow: none; color: var(--ws-txt); }
html body:not(.ws) .ol-acciones .ui-btn-b:hover { background: rgb(15 23 42 / .06); }
html body:not(.ws) .ol-acciones .ui-btn-b > i { color: var(--ws-p); }
html body:not(.ws) .ol-acciones .ui-btn-p { background: var(--ws-p); color: #ffffff; border: 0; }

/* Lista de tramites (como la bandeja de entrada) */
.ol-lista { margin: 0 calc(var(--ws-pad) * -1); }
.ol-filtros { position: sticky; top: 96px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px var(--ws-pad); background: #ffffff; border-bottom: 1px solid var(--ws-linea); }
.ol-buscar { position: relative; display: flex; align-items: center; flex: 0 1 320px; margin: 0; }
.ol-buscar > i { position: absolute; left: 10px; font-size: .75rem; color: var(--ws-txt2); }
.ol-buscar input { width: 100%; height: 30px; padding: 0 10px 0 28px; border: 1px solid var(--ws-linea2); border-radius: 7px; font: 500 .82rem var(--ws-fuente); outline: none; background: #ffffff; }
.ol-buscar input:focus { border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 15%, transparent); }
.ol-chips { display: flex; gap: 4px; }
.ol-chips button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ws-txt2); font: 600 .8rem var(--ws-fuente); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ol-chips button:hover { background: rgb(15 23 42 / .05); }
.ol-chips button.on { background: var(--ws-sel); color: var(--ws-sel-txt); }
.ol-chips .fa-star { color: #f5b800; }
.ol-grupo-cab {
  display: flex; align-items: center; gap: 8px; padding: 10px var(--ws-pad) 6px; color: var(--ws-txt) !important; text-decoration: none !important;
  font: 650 .78rem var(--ws-fuente); text-transform: uppercase; letter-spacing: .05em;
}
.ol-grupo-cab small { font-weight: 600; color: var(--ws-txt3); letter-spacing: 0; }
.ol-grupo-cab i { font-size: .6rem; color: var(--ws-txt3); opacity: 0; transition: opacity .12s; }
.ol-grupo-cab:hover { color: var(--ws-p) !important; }
.ol-grupo-cab:hover i { opacity: 1; }
.ol-fila {
  display: grid; grid-template-columns: 32px minmax(180px, 1.1fr) minmax(0, 2fr) auto; align-items: center; gap: 14px;
  min-height: 46px; padding: 6px var(--ws-pad); border-bottom: 1px solid #f0f2f5; color: var(--ws-txt) !important; text-decoration: none !important;
  position: relative; transition: background .1s;
}
.ol-fila[hidden], .ol-grupo[hidden] { display: none; }
.ol-fila:hover { background: color-mix(in srgb, var(--ws-p) 5%, #ffffff); }
.ol-fila:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ws-p); }
.ol-ico {
  width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: .82rem;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c, var(--ws-p)) 80%, #ffffff), var(--c, var(--ws-p)) 60%, color-mix(in srgb, var(--c, var(--ws-p)) 88%, #000000));
}
.ol-nom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ol-nom strong { font: 600 .86rem/1.25 var(--ws-fuente); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-estrella { color: #f5b800; font-size: .7rem; flex: none; }
.ol-desc { font-size: .8rem; color: var(--ws-txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ol-ir, .ol-lock { font: 600 .76rem var(--ws-fuente); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ol-ir { color: var(--ws-p); opacity: 0; transition: opacity .12s; }
.ol-ir i { font-size: .6rem; }
.ol-fila:hover .ol-ir { opacity: 1; }
.ol-lock { color: var(--ws-txt3); }
.ol-nada { padding: 30px var(--ws-pad); color: var(--ws-txt2); text-align: center; }

/* Pie: discreto, como el de una aplicacion */
html body:not(.ws) .bl-pie2 { margin-top: 0; background: #f6f7f9; color: var(--ws-txt2); border-top: 1px solid var(--ws-linea); }
html body:not(.ws) .bl-pie2 h2 { color: var(--ws-txt2); }
html body:not(.ws) .bl-pie2-marca strong { color: var(--ws-txt); }
html body:not(.ws) .bl-pie2-lista a { color: var(--ws-txt2) !important; }
html body:not(.ws) .bl-pie2-lista i { color: var(--ws-p); }
html body:not(.ws) .bl-pie2-base { border-top-color: var(--ws-linea); opacity: 1; padding-right: 72px; }
html body:not(.ws) .bl-pie2-redes a { background: #ffffff; color: var(--ws-txt2); box-shadow: inset 0 0 0 1px var(--ws-linea); }

/* Barra de navegacion inferior (celular y tablet) */
.bl-barra-app { display: none; }
@media (max-width: 991.98px) {
  html body:not(.ws) .bl-barra-app {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    height: calc(60px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); background: rgb(255 255 255 / .96);
    backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--ws-linea);
  }
  .bl-barra-app > :is(a, button) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; cursor: pointer;
    color: var(--ws-txt2) !important; font: 600 .68rem/1 var(--ws-fuente); text-decoration: none !important;
  }
  .bl-barra-app > :is(a, button) > i { width: 44px; height: 28px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
  .bl-barra-app > a.activo { color: var(--ws-p) !important; }
  .bl-barra-app > a.activo > i { background: var(--ws-sel); }
  html body:not(.ws) .bl-main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  html body:not(.ws) .ax-btn { bottom: calc(72px + env(safe-area-inset-bottom)); }
  html body:not(.ws).bl-abierto .bl-barra-app { z-index: 1029; }
  html body:not(.ws) { --ws-pad: 14px; }
  html body:not(.ws) .bl-topbar { padding: 0 10px; gap: 8px; }
  html body:not(.ws) .bl-topbar .bl-brand { flex: 1 1 auto; min-width: 0; }
  html body:not(.ws) .bl-topbar .bl-brand-tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
  html body:not(.ws) .bl-topbar .bl-search { display: none; }
  html body:not(.ws) .bl-topbar a.pt-login span { display: none; }
  html body:not(.ws) .bl-content > .ui-cab:first-child, html body:not(.ws) .bl-content > .ol-cab { position: static; height: auto; padding: 8px var(--ws-pad) !important; flex-wrap: wrap; }
  html body:not(.ws) .ol-cab p { display: none; }
  .ol-acciones { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ol-filtros { top: 52px; flex-wrap: wrap; }
  .ol-buscar { flex: 1 1 100%; }
  .ol-buscar input { height: 38px; font-size: .9rem; }
  .ol-fila { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; min-height: 56px; }
  .ol-desc { grid-column: 2; grid-row: 2; margin-top: -4px; }
  .ol-nom strong { white-space: normal; }
  .ol-ir { opacity: 1; }
}
@media (max-width: 991.98px) {
  html body:not(.ws) .bl-topbar { flex-wrap: nowrap !important; }
  html body:not(.ws) .bl-topbar .bl-top-iconos { flex: none; margin-left: 0 !important; }
  html body:not(.ws) .bl-topbar .bl-top-user-name { display: none; }
}
@media (max-width: 991.98px) {
  html body:not(.ws) .ol-acciones .ui-btn { flex: none; white-space: nowrap; }
  html body:not(.ws) .ol-acciones { margin: 0 calc(var(--ws-pad) * -1); padding: 0 var(--ws-pad); width: calc(100% + var(--ws-pad) * 2); }
}

/* =====================================================================
   TRAMITES COMO TARJETAS (revision del usuario: la lista plana se veia como un simple listado)
   Cada categoria es una cuadricula de tarjetas: icono solido grande, nombre, descripcion en dos lineas y la accion.
   ===================================================================== */
.ol-grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 4px var(--ws-pad) 18px; }
.ol-grupo-cab { grid-column: 1 / -1; padding: 10px 0 2px; }
.ol-fila {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; row-gap: 4px; align-items: start;
  min-height: 0; padding: 14px; border: 1px solid var(--ws-linea); border-radius: 16px; background: #ffffff;
  box-shadow: 0 1px 2px rgb(16 24 40 / .04); transition: transform .15s var(--ws-curva), box-shadow .15s, border-color .15s; overflow: hidden;
}
.ol-fila::after {
  content: ""; position: absolute; right: -26px; top: -26px; width: 86px; height: 86px; border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--ws-p)) 10%, transparent); pointer-events: none;
}
.ol-fila:hover { background: #ffffff; transform: translateY(-2px); border-color: color-mix(in srgb, var(--c, var(--ws-p)) 35%, #ffffff);
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--c, var(--ws-p)) 60%, transparent); }
.ol-fila:hover::before { display: none; }
.ol-ico { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; font-size: 1.15rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 8px 16px -8px color-mix(in srgb, var(--c, var(--ws-p)) 75%, transparent); }
.ol-nom { grid-column: 2; align-self: end; position: relative; z-index: 1; }
.ol-nom strong { white-space: normal; font-size: .92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ol-desc { grid-column: 2; white-space: normal; font-size: .78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ol-ir, .ol-lock { grid-column: 1 / -1; justify-self: start; align-self: end; margin-top: 8px; height: 30px; padding: 0 12px; border-radius: 8px; }
.ol-ir { opacity: 1; background: color-mix(in srgb, var(--c, var(--ws-p)) 12%, #ffffff); color: color-mix(in srgb, var(--c, var(--ws-p)) 80%, #000000); }
.ol-fila:hover .ol-ir { background: var(--c, var(--ws-p)); color: #ffffff; }
.ol-lock { background: #f3f4f6; color: var(--ws-txt2); }
.ol-filtros { border-bottom: 0; }
@media (max-width: 991.98px) {
  .ol-grupo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 12px; }
  .ol-fila { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; padding: 12px; row-gap: 6px; min-height: 0; }
  .ol-ico { grid-row: auto; width: 42px; height: 42px; font-size: 1rem; }
  .ol-nom, .ol-desc { grid-column: 1; grid-row: auto; margin: 0; }
  .ol-nom strong { font-size: .86rem; }
  .ol-estrella { position: absolute; top: -48px; right: 0; }
  .ol-desc { font-size: .74rem; }
  .ol-ir, .ol-lock { grid-column: 1; font-size: .74rem; height: 28px; margin-top: 4px; }
  .ol-ir i { font-size: .6rem; }
}

/* =====================================================================
   PORTADA DEL PORTAL DE TRAMITES (ideas de Quito, Cuenca y Buenos Aires dentro del marco tipo Outlook)
   Franja del color institucional con el buscador y "lo mas buscado", barra de accesos rapidos con iconos de color,
   temas como tarjetas que filtran y las tarjetas de los tramites.
   ===================================================================== */
.pr-hero {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; overflow: hidden;
  margin: 0 calc(var(--ws-pad) * -1); padding: 34px var(--ws-pad) 30px; color: #ffffff;
  background: linear-gradient(120deg, var(--ws-marca), color-mix(in srgb, var(--ws-marca) 55%, var(--ws-p)));
}
.pr-hero.con-img {
  background: linear-gradient(120deg, color-mix(in srgb, var(--ws-marca) 92%, transparent), color-mix(in srgb, var(--ws-marca) 70%, transparent)), var(--bl-banner) center / cover;
}
.pr-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--ws-p), var(--ws-acento)); }
.pr-saludo { font: 600 .8rem var(--ws-fuente); padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .22); }
.pr-hero h1 { margin: 0; font: 800 2.3rem/1.1 var(--ws-fuente); letter-spacing: -.03em; color: #ffffff; text-shadow: 0 2px 12px rgb(0 0 0 / .25); }
.pr-buscar { position: relative; display: flex; align-items: center; width: min(640px, 100%); margin: 4px 0 0; }
.pr-buscar > i { position: absolute; left: 18px; color: var(--ws-txt2); }
.pr-buscar input {
  width: 100%; height: 50px; padding: 0 20px 0 48px; border: 0; border-radius: 999px; background: #ffffff; color: var(--ws-txt);
  font: 500 1rem var(--ws-fuente); outline: none; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .4);
}
.pr-buscar input:focus { box-shadow: 0 14px 30px -12px rgb(0 0 0 / .4), 0 0 0 4px color-mix(in srgb, var(--ws-acento) 65%, transparent); }
.pr-pop { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin: 2px 0 0; max-width: 980px; font: 500 .82rem var(--ws-fuente); }
.pr-pop strong { font-weight: 700; }
.pr-pop a { color: #ffffff !important; text-decoration: underline !important; text-decoration-color: rgb(255 255 255 / .45) !important; text-underline-offset: 3px; }
.pr-pop a:hover { text-decoration-color: #ffffff !important; }

/* Accesos rapidos (barra de iconos de color, como la de Quito) */
.pr-accesos {
  position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -1px calc(var(--ws-pad) * -1) 0; padding: 14px var(--ws-pad);
  background: #ffffff; border-bottom: 1px solid var(--ws-linea);
}
.pr-accesos a {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 7px; border-radius: 12px; border: 1px solid var(--ws-linea); background: #ffffff;
  color: var(--ws-txt) !important; text-decoration: none !important; font: 600 .84rem var(--ws-fuente); white-space: nowrap; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pr-accesos a:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 40%, #ffffff); box-shadow: 0 10px 20px -14px var(--c); }
.pr-accesos a > span {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: .82rem;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #ffffff), var(--c));
}

/* Temas: tarjetas que filtran (como los "Temas" de Buenos Aires) */
.pr-tit { margin: 22px 0 12px; padding: 0 var(--ws-pad); font: 750 1.2rem var(--ws-fuente); letter-spacing: -.02em; color: var(--ws-txt); }
.pr-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 0 var(--ws-pad) 6px; }
.pr-tema {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ws-linea); border-radius: 14px; background: #ffffff; cursor: pointer; text-align: left;
  box-shadow: 0 1px 2px rgb(16 24 40 / .05); transition: border-color .15s, box-shadow .15s, background .15s;
}
.pr-tema:hover { border-color: color-mix(in srgb, var(--c) 40%, #ffffff); box-shadow: 0 10px 22px -16px var(--c); }
.pr-tema.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #ffffff); box-shadow: 0 0 0 1px var(--c), 0 10px 22px -16px var(--c); }
.pr-tema-ico {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.1rem;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #ffffff), var(--c) 60%, color-mix(in srgb, var(--c) 86%, #000000));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 8px 14px -8px var(--c);
}
.pr-tema > span:last-child { display: grid; gap: 2px; min-width: 0; }
.pr-tema strong { font: 650 .92rem/1.25 var(--ws-fuente); color: var(--ws-txt); }
.pr-tema small { font: 500 .76rem/1.35 var(--ws-fuente); color: var(--ws-txt2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Titulo de cada grupo de tramites con la marca de color del tema */
.ol-grupo-cab { gap: 10px; }
.ol-grupo-cab::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--c, var(--ws-p)); }
.ol-grupo:first-of-type { margin-top: 8px; }

@media (max-width: 991.98px) {
  .pr-hero { padding: 22px var(--ws-pad) 20px; gap: 10px; }
  .pr-hero h1 { font-size: 1.6rem; }
  .pr-buscar input { height: 46px; font-size: .92rem; }
  .pr-pop { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + var(--ws-pad) * 2); margin: 2px calc(var(--ws-pad) * -1) 0; padding: 0 var(--ws-pad); scrollbar-width: none; }
  .pr-pop > * { flex: none; }
  /* Accesos como iconos redondos con texto debajo, deslizables (como una app) */
  .pr-accesos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 12px var(--ws-pad); }
  .pr-accesos::-webkit-scrollbar { display: none; }
  .pr-accesos a { flex-direction: column; gap: 6px; height: auto; width: 78px; padding: 4px 2px; border: 0; background: transparent; white-space: normal; text-align: center; font-size: .7rem; line-height: 1.2; }
  .pr-accesos a > span { width: 50px; height: 50px; border-radius: 16px; font-size: 1.15rem; box-shadow: 0 8px 16px -10px var(--c); }
  .pr-tit { margin: 16px 0 10px; font-size: 1.05rem; }
  /* Temas como fila deslizable de fichas */
  .pr-temas { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 4px; }
  .pr-temas::-webkit-scrollbar { display: none; }
  .pr-tema { flex: none; width: auto; max-width: 220px; padding: 8px 14px 8px 8px; border-radius: 999px; gap: 10px; }
  .pr-tema-ico { width: 34px; height: 34px; border-radius: 50%; font-size: .85rem; }
  .pr-tema strong { font-size: .82rem; white-space: nowrap; }
  .pr-tema small { display: none; }
}
html body:not(.ws):has(.pr-hero) .bl-topbar .bl-search { visibility: hidden; }
/* Color de marca claro (blanco, crema...): la franja del portal usa el color primario oscurecido para que el texto blanco
   siempre se lea */
html body.ws-clara .pr-hero {
  background: linear-gradient(120deg, color-mix(in srgb, var(--ws-p) 72%, #0b1220), color-mix(in srgb, var(--ws-p) 88%, #0b1220));
}
html body.ws-clara .pr-hero.con-img {
  background: linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--ws-p) 70%, #0b1220) 90%, transparent), color-mix(in srgb, color-mix(in srgb, var(--ws-p) 80%, #0b1220) 72%, transparent)), var(--bl-banner) center / cover;
}

/* =====================================================================
   MENU SIEMPRE CONTRAIDO CON NOMBRES (pedido del usuario: "hay que adivinar que hace cada icono")
   Como la barra de Teams/Outlook: icono con su nombre corto debajo; al pasar el mouse, el nombre completo y, en los
   grupos, la tarjeta con sus opciones.
   ===================================================================== */
.ws-nav-corto { display: none; }
@media (min-width: 992px) {
  html body.ws { --ws-nav-mini: 78px; }
  body.ws-nav-mini .ws-nav-cuerpo { padding: 6px 6px 12px; }
  body.ws-nav-mini .ws-nav-it { flex-direction: column; justify-content: center; gap: 3px; height: auto; min-height: 54px; padding: 6px 2px 5px; border-radius: 12px; }
  body.ws-nav-mini .ws-nav .ws-nav-corto {
    display: block; max-width: 100%; text-align: center; font: 600 10.5px/1.15 var(--ws-fuente); letter-spacing: -.005em;
    color: color-mix(in srgb, var(--ws-nt) 78%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.ws-nav-mini .ws-nav :is(.ws-nav-it.activo, .ws-nav-grupo.contiene > .ws-nav-it, .ws-nav-it:hover) .ws-nav-corto { color: var(--ws-nt); }
  body.ws-nav-mini .ws-nav :is(.ws-nav-it.activo, .ws-nav-grupo.contiene > .ws-nav-it) .ws-nav-corto { font-weight: 700; }
  body.ws-nav-mini .ws-nav-it .ws-nav-num { top: 2px; right: 10px; }
  body.ws-nav-mini .ws-nav-it.activo::before, body.ws-nav-mini .ws-nav-grupo.contiene > .ws-nav-it::before { left: -6px; top: 14px; bottom: auto; height: 26px; }
  body.ws-nav-mini .ws-nav-titulo { margin: 6px 10px; }
  /* Con poca altura, items mas bajos para que quepan */
  @media (max-height: 820px) { body.ws-nav-mini .ws-nav-it { min-height: 48px; padding: 4px 2px; gap: 2px; } }
}
@media (min-width: 992px) { body.ws-nav-mini .ws-nav .ws-nav-corto { font-size: 10px; letter-spacing: -.02em; } }

/* =====================================================================
   BARRA SUPERIOR CON IDENTIDAD (pedido del usuario: "se ve vacia y poco profesional")
   Izquierda: institucion y fecha/hora; centro: buscador; derecha: iconos y la cuenta con nombre y unidad.
   Una linea fina de acento (primario -> acento) remata la barra.
   ===================================================================== */
@media (min-width: 992px) {
  html body.ws .bl-topbar { position: sticky; gap: 18px; padding: 0 16px 0 22px; }
  html body.ws .bl-topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, var(--ws-p), var(--ws-acento) 60%, transparent);
  }
  html body.ws .bl-topbar .bl-brand { display: flex !important; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; max-width: 34%; }
  html body.ws .bl-topbar .bl-brand-badge-btn { display: none !important; }
  html body.ws .bl-topbar .bl-brand-txt { display: grid; min-width: 0; line-height: 1.2; padding-left: 14px; border-left: 3px solid var(--ws-acento); }
  html body.ws .bl-topbar .bl-brand-tit { font: 700 .95rem/1.2 var(--ws-fuente) !important; letter-spacing: -.01em; color: var(--ws-nt) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body.ws .bl-topbar .bl-brand-sub { display: none !important; }
  html body.ws .bl-topbar .bl-brand-fecha { display: block !important; font: 500 .74rem/1.3 var(--ws-fuente); color: color-mix(in srgb, var(--ws-nt) 68%, transparent) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body.ws .bl-topbar .bl-search { flex: 1 1 520px; max-width: 620px; margin: 0 auto; }
  html body.ws .bl-topbar .bl-top-iconos { gap: 2px !important; }
  /* Cuenta: nombre y unidad junto al avatar */
  html body.ws .ws-cuenta-btn { width: auto; height: 42px; padding: 3px 3px 3px 12px; gap: 10px; border-radius: 999px; margin-left: 6px; }
  html body.ws .ws-cuenta-btn:hover, html body.ws .ws-cuenta-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--ws-nt) 10%, transparent); box-shadow: none; }
  .ws-cuenta-yo { display: grid; text-align: right; line-height: 1.2; max-width: 180px; }
  .ws-cuenta-yo strong { font: 650 .82rem var(--ws-fuente); color: var(--ws-nt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ws-cuenta-yo small { font: 500 .7rem var(--ws-fuente); color: color-mix(in srgb, var(--ws-nt) 65%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body.ws .ws-cuenta-btn img { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--ws-marca), 0 0 0 3.5px color-mix(in srgb, var(--ws-acento) 70%, transparent); }
}
@media (max-width: 1280px) { .ws-cuenta-yo { display: none; } html body.ws .ws-cuenta-btn { padding: 3px; } }
@media (max-width: 991.98px) { .ws-cuenta-yo { display: none; } }

/* =====================================================================
   MI UNIDAD Y REDACTAR DOCUMENTO: barra de comandos y ancho completo como el resto de pantallas
   ===================================================================== */
/* Mi unidad: su barra de comandos (ui-cab) y el Drive pegado a los bordes, alto hasta el final de la ventana */
html body.ws .dv-app {
  margin: 0 calc(var(--ws-pad) * -1) -32px; border: 0; border-radius: 0;
  height: calc(100vh - var(--ws-top) - var(--ws-cmd) - 1px); min-height: 480px;
}
html body.ws .dv-app .dv-lateral { background: #fbfbfc; border-right: 1px solid var(--ws-linea); }
/* Redactar: la barra de titulo del editor es la barra de comandos (40 px, color de fondo configurado) */
html body.ws .ed-app { max-width: none; margin: 0 calc(var(--ws-pad) * -1); padding-bottom: 40px; }
html body.ws .ed-titlebar {
  position: sticky; top: var(--ws-top); z-index: 40; flex-wrap: nowrap; height: var(--ws-cmd); padding: 0 var(--ws-pad); border-radius: 0;
  background: var(--ws-barra, #f6f8fc); color: var(--ws-bt, #1b2433); border-bottom: 1px solid color-mix(in srgb, var(--ws-bt, #1b2433) 10%, transparent);
}
html body.ws .ed-tb-doc { gap: 10px; }
html body.ws .ed-tb-doc > i { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; opacity: 1;
  background: #ffffff; color: #2b579a; box-shadow: inset 0 0 0 1px var(--ws-linea), 0 1px 2px rgb(16 24 40 / .08); }
html body.ws .ed-tb-doc > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
html body.ws .ed-tb-doc h1 { font: 650 .95rem/1.2 var(--ws-fuente); color: var(--ws-bt, #1b2433); }
html body.ws .ed-guardado { color: var(--ws-txt2); }
html body.ws .ed-guardado.pendiente { color: #b45309; }
html body.ws .ed-tb-acc { flex-wrap: nowrap; gap: 4px; }
html body.ws .ed-titlebar .ed-btn { height: 28px; padding: 0 10px; border-radius: 7px; border: 0; background: transparent; color: var(--ws-txt); font: 600 .8rem var(--ws-fuente); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
html body.ws .ed-titlebar .ed-btn > i { color: var(--ws-p); }
html body.ws .ed-titlebar .ed-btn:hover { background: rgb(15 23 42 / .06); }
html body.ws .ed-titlebar .ed-btn-p { background: var(--ws-p); color: #ffffff; box-shadow: 0 1px 2px rgb(16 24 40 / .15), 0 4px 10px -4px var(--ws-brillo); }
html body.ws .ed-titlebar .ed-btn-p > i { color: #ffffff; }
html body.ws .ed-titlebar .ed-btn-p:hover { background: var(--ws-p); filter: brightness(1.06); }
html body.ws .ed-sobre, html body.ws .ed-layout { border-left: 0; border-right: 0; }
@media (max-width: 991.98px) {
  html body.ws .dv-app { height: calc(100vh - 140px); }
  html body.ws .ed-titlebar { position: static; height: auto; padding: 8px var(--ws-pad); flex-wrap: wrap; }
}
html body.ws .bl-content .dv-cab { margin-bottom: 0 !important; }
/* Redactar: el icono de la aplicacion (workspace.js) reemplaza al de Word de la barra */
html body.ws .ed-tb-doc > i { display: none; }
html body.ws .ed-tb-doc h1 { display: flex; align-items: center; gap: 8px; }
html body.ws .ed-tb-doc h1 > .ws-cab-ico { width: 26px; height: 26px; border-radius: 7px; flex: none; }
html body.ws .ed-tb-doc h1 > .ws-cab-ico .ws-ico { width: 17px; height: 17px; }

/* Plantillas de correo, Expedientes y series, Mensajes y Geoportal: barra de comandos y ancho completo */
html body.ws .bl-content .bl-admin-container { max-width: none !important; margin: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 32px !important; }
html body.ws .bl-content .bl-admin-container:not(.ws-con-modulo) { padding-left: 0 !important; }
/* Mensajes: el titulo ya esta en la barra de comandos; en la lista quedan los botones de nueva conversacion */
html body.ws .ch-cabws ~ .ch-app .ch-lista-cab :is(h1, h2, strong):first-child { visibility: hidden; }
html body.ws .idx-app { max-width: none; margin: 0; padding: 0 0 32px; }
html body.ws .bl-content .idx-cabecera .idx-acciones { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
html body.ws .bl-content .idx-cabecera .idx-buscador input { height: 28px; font-size: .8rem; }
html body.ws .bl-content .idx-cabecera .idx-titulo { font-size: .95rem !important; }
html body.ws .bl-content :is(.ch-cabws, .gp-cabws) { margin-bottom: 0 !important; }
@media (min-width: 992px) {
  html body.ws .ch-app { height: calc(100vh - var(--ws-top) - var(--ws-cmd) - 1px); }
  html body.ws .gp-app { margin: 0 calc(var(--ws-pad) * -1) -32px; border: 0; border-radius: 0; height: calc(100vh - var(--ws-top) - var(--ws-cmd) - 1px); }
  /* El titulo ya esta en la barra de comandos: en el panel de capas solo queda el buscador */
  html body.ws .gp-cabws ~ .gp-app .gp-cab h1 { display: none !important; }
}

/* =====================================================================
   MESA DE SOPORTE: barra de comandos, menu de carpetas con el acabado del sistema y ancho completo
   ===================================================================== */
html body.ws .bl-content .sm-cab { margin-bottom: 0 !important; }
html body.ws .sm-app { margin: 0 calc(var(--ws-pad) * -1) -32px; }
html body.ws .sm-shell { gap: 0; min-height: calc(100vh - var(--ws-top) - var(--ws-cmd) - 1px); align-items: stretch; grid-template-columns: 248px minmax(0, 1fr); }
html body.ws .sm-nav { top: calc(var(--ws-top) + var(--ws-cmd)); align-self: start; min-height: calc(100vh - var(--ws-top) - var(--ws-cmd) - 1px);
  padding: 10px 10px 20px; background: #fbfbfc; border-right: 1px solid var(--ws-linea); gap: 0; }
html body.ws .sm-nav-tit { padding: 12px 10px 6px; font: 600 .68rem/1 var(--ws-fuente); letter-spacing: .08em; color: var(--ws-txt3); }
html body.ws .sm-nav-tit1 { padding-top: 6px; }
html body.ws .sm-nav nav a { min-height: 38px; padding: 5px 10px 5px 6px; margin: 2px 0; border-radius: 10px; gap: 10px; font: 500 .84rem/1.25 var(--ws-fuente); color: #3a4352; position: relative; }
html body.ws .sm-nav nav a i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem;
  background: color-mix(in srgb, var(--ws-p) 9%, #ffffff); color: var(--ws-p); flex: none; }
html body.ws .sm-nav nav a b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgb(15 23 42 / .06); color: var(--ws-txt2); font: 600 .7rem/1 var(--ws-fuente); }
html body.ws .sm-nav nav a b:empty { display: none; }
html body.ws .sm-nav nav a:hover { background: rgb(15 23 42 / .045); }
html body.ws .sm-nav nav a.act { background: #ffffff; color: var(--ws-txt); font-weight: 650; box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 0 0 1px rgb(16 24 40 / .05); }
html body.ws .sm-nav nav a.act i { background: var(--ws-p); color: #ffffff; box-shadow: 0 4px 10px -4px var(--ws-brillo); }
html body.ws .sm-nav nav a.act::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--ws-p), var(--ws-acento)); box-shadow: 0 0 8px var(--ws-brillo); }
html body.ws .sm-main { padding: 14px var(--ws-pad) 32px; }
.sm-pasos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 12px; }
.sm-pasos li { line-height: 1.5; }
.sm-pasos .ui-btn { margin: 6px 0 4px; }
@media (max-width: 991.98px) {
  html body.ws .sm-shell { grid-template-columns: 1fr; min-height: 0; }
  html body.ws .sm-nav { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ws-linea); }
}

/* =====================================================================
   MI PANEL: TABLERO DE BIENVENIDA (portada con resumen, accesos a aplicaciones, cifras clave y novedades)
   ===================================================================== */
.pn-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  margin: 18px 0 16px; padding: 28px 30px 22px; border-radius: 22px; color: #ffffff;
  background:
    radial-gradient(520px 260px at 92% -10%, color-mix(in srgb, var(--ws-acento) 55%, transparent), transparent 70%),
    radial-gradient(600px 300px at 0% 120%, color-mix(in srgb, var(--ws-p) 70%, transparent), transparent 70%),
    linear-gradient(120deg, color-mix(in srgb, var(--ws-p) 78%, #0b1220), var(--ws-p) 55%, color-mix(in srgb, var(--ws-p) 70%, var(--ws-acento)));
  box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--ws-p) 90%, transparent);
}
.pn-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: radial-gradient(rgb(255 255 255 / .9) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000); mask-image: linear-gradient(100deg, transparent 35%, #000);
}
.pn-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgb(255 255 255 / .07); pointer-events: none; }
.pn-hero > * { position: relative; z-index: 1; }
.pn-hero-eti { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font: 600 .78rem var(--ws-fuente); background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .22); }
.pn-hero h2 { margin: 12px 0 6px; font: 800 2rem/1.15 var(--ws-fuente); letter-spacing: -.03em; color: #ffffff; }
.pn-hero-txt p { margin: 0; font: 500 1rem/1.5 var(--ws-fuente); color: rgb(255 255 255 / .88); max-width: 720px; }
.pn-hero-lado { display: flex; align-items: center; gap: 14px; }
.pn-reloj { display: grid; text-align: right; }
.pn-reloj strong { font: 750 2.4rem/1 var(--ws-fuente); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pn-reloj small { margin-top: 6px; font: 500 .8rem var(--ws-fuente); color: rgb(255 255 255 / .8); }
.pn-clima { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .2); backdrop-filter: blur(6px); }
.pn-clima > i { font-size: 1.6rem; color: #fde68a; }
.pn-clima span { display: grid; line-height: 1.2; }
.pn-clima b { font: 750 1.15rem var(--ws-fuente); }
.pn-clima small { font: 500 .74rem var(--ws-fuente); color: rgb(255 255 255 / .82); }
.pn-apps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pn-apps a {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 6px; border-radius: 14px; text-decoration: none !important;
  color: #ffffff !important; font: 600 .86rem var(--ws-fuente); background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2);
  transition: background .15s, transform .15s;
}
.pn-apps a:hover { background: rgb(255 255 255 / .22); transform: translateY(-2px); }
.pn-apps a > span { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .35); }
.pn-apps .ws-ico { width: 20px; height: 20px; }

/* Cifras clave */
.pn-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pn-kpis[hidden] { display: none; }
.pn-kpi {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 16px; border-radius: 16px; background: #ffffff; border: 1px solid var(--ws-linea); text-decoration: none !important; color: var(--ws-txt) !important;
  transition: transform .15s var(--ws-curva), box-shadow .15s, border-color .15s;
}
.pn-kpi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--k), color-mix(in srgb, var(--k) 40%, #ffffff)); }
.pn-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--k) 35%, #ffffff); box-shadow: 0 14px 28px -18px var(--k); }
.pn-kpi-ico { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1.1rem;
  background: linear-gradient(150deg, color-mix(in srgb, var(--k) 75%, #ffffff), var(--k)); box-shadow: 0 8px 16px -8px var(--k); }
.pn-kpi-n { font: 800 1.9rem/1 var(--ws-fuente); letter-spacing: -.03em; color: var(--ws-txt); }
.pn-kpi-t { grid-column: 2; font: 650 .86rem/1.2 var(--ws-fuente); }
.pn-kpi small { grid-column: 1 / -1; margin-top: 10px; font: 500 .74rem var(--ws-fuente); color: var(--ws-txt2); }
.pn-kpi.cero .pn-kpi-n { color: var(--ws-txt3); }
.pn-kpi.cero .pn-kpi-ico { filter: saturate(.35); opacity: .7; }

/* Novedades */
.pn-nove {
  position: relative; display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--ws-p) 8%, #ffffff), #ffffff 60%); border: 1px solid color-mix(in srgb, var(--ws-p) 18%, var(--ws-linea));
}
.pn-nove[hidden] { display: none; }
.pn-nove-ico { flex: none; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; box-shadow: 0 0 0 1px var(--ws-linea), 0 8px 18px -10px var(--ws-brillo); }
.pn-nove-eti { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--ws-p); color: #ffffff; font: 700 .68rem var(--ws-fuente); letter-spacing: .06em; text-transform: uppercase; }
.pn-nove h3 { margin: 8px 0 4px; font: 750 1.05rem var(--ws-fuente); color: var(--ws-txt); }
.pn-nove p { margin: 0 0 10px; color: var(--ws-txt2); font-size: .88rem; }
.pn-nove ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn-nove li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #ffffff; border: 1px solid var(--ws-linea); font-size: .82rem; color: var(--ws-txt2); }
.pn-nove li i { color: var(--ws-p); margin-top: 3px; }
.pn-nove li b { color: var(--ws-txt); }
.pn-nove-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--ws-txt3); cursor: pointer; }
.pn-nove-x:hover { background: var(--ws-hover); color: var(--ws-txt); }

@media (max-width: 1200px) { .pn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-nove ul { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pn-hero { grid-template-columns: 1fr; padding: 22px 18px 18px; border-radius: 18px; margin-top: 12px; }
  .pn-hero h2 { font-size: 1.5rem; }
  .pn-hero-lado { justify-content: space-between; }
  .pn-reloj { text-align: left; } .pn-reloj strong { font-size: 1.8rem; }
  .pn-apps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
  .pn-apps a { flex: none; }
  .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pn-kpi { padding: 12px; }
  .pn-kpi-n { font-size: 1.5rem; }
  .pn-nove { flex-direction: column; }
}
/* El tablero va sobre la cartelera, a todo el ancho del contenido de Mi panel */
html body.ws .ct-app > .pn-hero, html body.ws .ct-app > .pn-kpis, html body.ws .ct-app > .pn-nove { margin-left: 0; margin-right: 0; }
/* Redactar: los botones de la barra siguen la letra calculada para el color de fondo (blanca u oscura) */
html body.ws .ed-titlebar .ed-btn:not(.ed-btn-p), html body.ws .ed-titlebar .ed-btn:not(.ed-btn-p) > i { color: var(--ws-bt, #1b2433); }
html body.ws .ed-titlebar .ed-btn:not(.ed-btn-p):hover { background: color-mix(in srgb, var(--ws-bt, #1b2433) 14%, transparent); }
html body.ws .ed-guardado { color: color-mix(in srgb, var(--ws-bt, #1b2433) 72%, transparent); }
/* Boton principal de la barra: si el fondo es casi del mismo color que el primario, va en blanco con letra del primario */
html body.ws .ed-titlebar .ed-btn-p { box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 55%, transparent), 0 4px 10px -4px rgb(0 0 0 / .3); }
html body.ws-barra-oscura .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-p, .bl-btn-primario),
html body.ws-barra-oscura .ct-cab .ws-crear > summary,
html body.ws-barra-oscura .ed-titlebar .ed-btn-p {
  background: #ffffff !important; color: var(--ws-barra, #1b2433) !important; border: 0 !important; box-shadow: 0 2px 6px rgb(0 0 0 / .22) !important;
}
html body.ws-barra-oscura .bl-content :is(.ui-cab, .bl-admin-header, .pn-cab, .bj-cabecera, .ct-cab) :is(.ui-btn-p, .bl-btn-primario) > i,
html body.ws-barra-oscura .ed-titlebar .ed-btn-p > i { color: var(--ws-barra, #1b2433) !important; }
html body.ws-barra-oscura .ct-cab .ws-crear > summary .ws-mas { color: var(--ws-barra, #1b2433); }
/* Mi panel compacto: la cartelera se ve sin bajar (fecha y hora solo en la barra superior) */
html body.ws .ct-cab #ctFecha { display: none !important; }
.pn-hero { margin: 14px 0 12px; padding: 18px 22px 14px; gap: 10px 20px; border-radius: 18px; }
.pn-hero h2 { margin: 8px 0 2px; font-size: 1.55rem; }
.pn-hero-txt p { font-size: .9rem; }
.pn-hero-eti { padding: 3px 10px; font-size: .72rem; }
.pn-apps { margin-top: 2px; gap: 6px; }
.pn-apps a { height: 36px; padding: 0 12px 0 4px; border-radius: 11px; font-size: .8rem; gap: 7px; }
.pn-apps a > span { width: 28px; height: 28px; border-radius: 8px; }
.pn-apps .ws-ico { width: 18px; height: 18px; }
.pn-hero-lado:empty { display: none; }
.pn-kpis { gap: 10px; margin-bottom: 12px; }
.pn-kpi { padding: 10px 14px; grid-template-columns: auto auto 1fr; grid-template-rows: auto; column-gap: 10px; border-radius: 14px; }
.pn-kpi-ico { grid-row: auto; width: 34px; height: 34px; border-radius: 10px; font-size: .85rem; }
.pn-kpi-n { font-size: 1.4rem; }
.pn-kpi-t { grid-column: auto; font-size: .82rem; }
.pn-kpi small { display: none; }
.pn-nove { display: block; padding: 0; margin-bottom: 14px; border-radius: 12px; }
.pn-nove > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; font-size: .86rem; color: var(--ws-txt); }
.pn-nove > summary::-webkit-details-marker { display: none; }
.pn-nove > summary b { font-weight: 650; }
.pn-nove-ver { margin-left: auto; color: var(--ws-p); font: 600 .8rem var(--ws-fuente); display: inline-flex; align-items: center; gap: 6px; }
.pn-nove-ver i { font-size: .65rem; transition: transform .2s; }
.pn-nove[open] .pn-nove-ver i { transform: rotate(180deg); }
.pn-nove .pn-nove-x { position: static; flex: none; width: 26px; height: 26px; }
.pn-nove ul { padding: 0 14px 12px; }
@media (max-width: 760px) {
  .pn-nove > summary { flex-wrap: wrap; }
  .pn-nove-ver { margin-left: 0; }
  .pn-kpi { grid-template-columns: auto 1fr; }
  .pn-kpi-t { grid-column: 1 / -1; }
}
/* Las dos columnas de Mi panel van debajo del tablero (ya no pegadas a la barra de comandos): sin margen negativo arriba */
@media (min-width: 1100px) {
  html body.ws .ct-cols { margin-top: 0; }
  html body.ws .ct-lado { border-top: 1px solid var(--ws-linea); border-top-right-radius: 14px; }
}

/* Mensajes: la lista de conversaciones con el mismo acabado que las carpetas de la Bandeja */
html body.ws .ch-lista { background: #fbfbfc; border-right-color: var(--ws-linea); }
html body.ws .ch-lista-cab { padding: 10px 12px 6px; }
html body.ws .ch-lista-cab .ui-btn { min-height: 30px; height: 30px; width: 30px; padding: 0; border-radius: 8px; justify-content: center; }
html body.ws .ch-filtro { height: 36px; margin: 0 10px 6px; padding: 0 12px; border: 1px solid var(--ws-linea2); border-radius: 10px; background: #ffffff; font: 500 .84rem var(--ws-fuente); box-shadow: var(--ws-sombra-1); }
html body.ws .ch-filtro:focus { outline: none; border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 16%, transparent); }
html body.ws .ch-canales { padding: 0 10px 12px; }
html body.ws .ch-canales h4 { margin: 14px 8px 6px; font: 600 .68rem/1 var(--ws-fuente); letter-spacing: .08em; color: var(--ws-txt3); }
html body.ws .ch-canales button { position: relative; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; min-height: 44px; padding: 6px 10px 6px 6px; margin: 2px 0; border-radius: 10px; }
html body.ws .ch-canales button:hover { background: rgb(15 23 42 / .045); }
html body.ws .ch-canales button.on { background: #ffffff; box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 0 0 1px rgb(16 24 40 / .05); }
html body.ws .ch-canales button.on::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--ws-p), var(--ws-acento)); box-shadow: 0 0 8px var(--ws-brillo); }
/* Icono del canal en placa del color institucional (las personas conservan su foto redonda) */
html body.ws .ch-canales .ico { width: 28px; height: 28px; border-radius: 8px; font-size: .75rem; background: color-mix(in srgb, var(--ws-p) 9%, #ffffff); color: var(--ws-p); overflow: hidden; }
html body.ws .ch-canales .ico:has(img) { border-radius: 50%; background: transparent; }
html body.ws .ch-canales .ico img { width: 100%; height: 100%; object-fit: cover; }
html body.ws .ch-canales button.on .ico:not(:has(img)) { background: var(--ws-p); color: #ffffff; box-shadow: 0 4px 10px -4px var(--ws-brillo); }
html body.ws .ch-canales strong { font: 600 .84rem/1.25 var(--ws-fuente); color: var(--ws-txt); }
html body.ws .ch-canales small { font: 500 .74rem/1.3 var(--ws-fuente); color: var(--ws-txt2); }
html body.ws .ch-canales .nl { background: #fee2e2; color: #b91c1c; font: 700 .7rem/1 var(--ws-fuente); padding: 3px 7px; }
html body.ws .ch-canales button.on strong { color: var(--ws-txt); font-weight: 650; }

/* =====================================================================
   REUNIONES: portada tipo campana (acciones grandes, ilustracion de la llamada y ventajas)
   ===================================================================== */
.vl-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px 28px; align-items: center;
  margin: 16px 0 14px; padding: 26px 28px 18px; border-radius: 22px; color: #ffffff;
  background:
    radial-gradient(420px 260px at 100% 0%, rgb(255 122 69 / .45), transparent 70%),
    radial-gradient(520px 300px at 0% 110%, rgb(124 58 237 / .45), transparent 70%),
    linear-gradient(125deg, #10204a, #1e3a8a 45%, #2b59c3);
  box-shadow: 0 24px 48px -28px rgb(30 58 138 / .9);
}
.vl-hero::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / .9) 1px, transparent 1.2px); background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.vl-hero > * { position: relative; z-index: 1; }
.vl-hero-eti { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font: 600 .76rem var(--ws-fuente); background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .22); }
.vl-hero-eti i { color: #86efac; }
.vl-hero h2 { margin: 12px 0 8px; font: 800 1.85rem/1.15 var(--ws-fuente); letter-spacing: -.03em; color: #ffffff; max-width: 560px; }
.vl-hero-txt > p { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: rgb(255 255 255 / .82); max-width: 560px; }
.vl-botones { display: flex; flex-wrap: wrap; gap: 14px; }
.vl-boton { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; border: 0; background: transparent; cursor: pointer; color: #ffffff !important; text-decoration: none !important; font: 600 .78rem var(--ws-fuente); }
.vl-boton > span {
  width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #ffffff;
  background: linear-gradient(150deg, #4f8cff, #1a5fd6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 12px 22px -10px rgb(0 0 0 / .6); transition: transform .15s var(--ws-curva), box-shadow .15s;
}
.vl-boton.nar > span { background: linear-gradient(150deg, #ff9a5a, #f15a24); }
.vl-boton:hover > span { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 18px 26px -10px rgb(0 0 0 / .6); }
/* Ilustracion: una llamada en curso */
.vl-pantalla { margin-left: auto; width: min(100%, 440px); border-radius: 16px; overflow: hidden; background: #0b1226; box-shadow: 0 30px 50px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .12); transform: perspective(900px) rotateY(-8deg) rotateX(3deg); }
.vl-pant-cab { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #131c36; font: 700 .64rem var(--ws-fuente); }
.vl-pant-cab > i { width: 8px; height: 8px; border-radius: 50%; background: #475569; }
.vl-rec { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #fca5a5; }
.vl-rec b { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: vlRec 1.4s ease-in-out infinite; }
.vl-cif { color: #86efac; }
@keyframes vlRec { 50% { opacity: .25; } }
.vl-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
.vl-t { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.vl-t span { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 1rem var(--ws-fuente); color: #ffffff; background: rgb(255 255 255 / .18); }
.vl-t small { position: absolute; left: 8px; bottom: 6px; font: 600 .6rem var(--ws-fuente); color: rgb(255 255 255 / .85); }
.vl-t.t1 { background: linear-gradient(135deg, #7c3aed, #4c1d95); } .vl-t.t2 { background: linear-gradient(135deg, #0ea5e9, #0c4a6e); }
.vl-t.t3 { background: linear-gradient(135deg, #f97316, #9a3412); } .vl-t.t4 { background: linear-gradient(135deg, #10b981, #065f46); }
.vl-t.hablando { box-shadow: 0 0 0 2px #22c55e, 0 0 18px rgb(34 197 94 / .6); animation: vlHabla 2.4s ease-in-out infinite; }
@keyframes vlHabla { 50% { box-shadow: 0 0 0 2px #22c55e, 0 0 6px rgb(34 197 94 / .3); } }
.vl-pant-pie { display: flex; justify-content: center; gap: 10px; padding: 8px; color: #cbd5e1; font-size: .78rem; }
.vl-pant-pie > * { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #1e293b; }
.vl-pant-pie b { background: #dc2626; color: #fff; }
.vl-ventajas { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; border-top: 1px solid rgb(255 255 255 / .14); font: 600 .8rem var(--ws-fuente); color: rgb(255 255 255 / .85); }
.vl-ventajas i { color: #93c5fd; margin-right: 7px; }
/* Consumo del plan */
.vl-plan-caja { margin: -4px 0 14px; }
.vl-plan-barra { height: 6px; border-radius: 6px; background: #e8edf4; overflow: hidden; max-width: 520px; }
.vl-plan-barra b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ws-p), var(--ws-acento)); transition: width .6s var(--ws-curva); }
/* Lista vacia */
.vl-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; text-align: center; border-radius: 16px; border: 1px dashed var(--ws-linea2); background: #fbfbfc; color: var(--ws-txt2); }
.vl-vacio-ico { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--ws-p); background: color-mix(in srgb, var(--ws-p) 10%, #ffffff); margin-bottom: 4px; }
.vl-vacio b { color: var(--ws-txt); font-size: 1rem; }
.vl-vacio .ui-btn { margin-top: 8px; }
@media (max-width: 900px) {
  .vl-hero { grid-template-columns: 1fr; padding: 20px 18px 14px; }
  .vl-arte { display: none; }
  .vl-hero h2 { font-size: 1.4rem; }
  .vl-botones { gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vl-boton > span { width: 50px; height: 50px; font-size: 1.15rem; border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) { .vl-rec b, .vl-t.hablando { animation: none; } }
@media (max-width: 900px) {
  .vl-hero { grid-template-columns: minmax(0, 1fr); }
  .vl-hero-txt { min-width: 0; }
  .vl-ventajas { gap: 6px 14px; }
}
/* Portada de Reuniones mas baja: las reuniones quedan a la vista */
@media (min-width: 901px) {
  .vl-hero { margin: 12px 0 10px; padding: 16px 22px 12px; gap: 8px 22px; border-radius: 18px; }
  .vl-hero h2 { margin: 8px 0 4px; font-size: 1.4rem; }
  .vl-hero-txt > p { margin: 0 0 12px; font-size: .86rem; }
  .vl-hero-eti { padding: 3px 10px; font-size: .7rem; }
  .vl-botones { gap: 10px; }
  .vl-boton { min-width: 64px; gap: 5px; font-size: .72rem; }
  .vl-boton > span { width: 44px; height: 44px; border-radius: 13px; font-size: 1.05rem; }
  .vl-pantalla { width: min(100%, 300px); }
  .vl-t span { width: 32px; height: 32px; font-size: .75rem; }
  .vl-t small { display: none; }
  .vl-pant-pie { padding: 5px; gap: 8px; } .vl-pant-pie > * { width: 22px; height: 22px; font-size: .65rem; }
  .vl-ventajas { padding-top: 8px; margin-top: 0; font-size: .74rem; gap: 6px 18px; }
}
@media (max-width: 900px) {
  .vl-hero-txt > p, .vl-ventajas { display: none; }
  .vl-hero h2 { font-size: 1.2rem; margin-bottom: 12px; }
}

/* =====================================================================
   DOCUMENTOS DE OFICINA: portada que da confianza (compatible con Office, en equipo, datos en la institucion)
   ===================================================================== */
.of-hero {
  position: relative; overflow: hidden; margin: 14px 0 14px; padding: 20px 24px 14px; border-radius: 20px; color: #ffffff;
  background:
    radial-gradient(420px 240px at 100% 0%, rgb(22 163 74 / .45), transparent 70%),
    radial-gradient(420px 260px at 70% 120%, rgb(234 88 12 / .4), transparent 70%),
    linear-gradient(125deg, #0f2c5c, #185abd 55%, #2b7cd3);
  box-shadow: 0 24px 48px -28px rgb(24 90 189 / .9);
}
.of-hero::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / .9) 1px, transparent 1.2px); background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
.of-hero > * { position: relative; z-index: 1; }
.of-hero-eti { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font: 600 .74rem var(--ws-fuente); background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .22); }
.of-hero-eti i { color: #86efac; }
.of-hero h2 { margin: 10px 0 4px; font: 800 1.45rem/1.2 var(--ws-fuente); letter-spacing: -.025em; color: #ffffff; }
.of-hero-txt > p { margin: 0 0 14px; font-size: .88rem; line-height: 1.5; color: rgb(255 255 255 / .85); max-width: 860px; }
.of-hero-txt > p b { color: #ffffff; }
html body .of-hero .of-crear { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
html body .of-hero .of-crear button {
  padding: 12px 14px; gap: 12px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .2); background: #ffffff; color: var(--ws-txt);
  box-shadow: 0 10px 22px -14px rgb(0 0 0 / .6); transition: transform .15s var(--ws-curva), box-shadow .15s;
}
html body .of-hero .of-crear button:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 18px 28px -14px rgb(0 0 0 / .7); }
html body .of-hero .of-crear i { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #ffffff !important; flex: none; }
html body .of-hero .of-crear [data-nuevo="docx"] i { background: linear-gradient(150deg, #4f8cff, #185abd); }
html body .of-hero .of-crear [data-nuevo="xlsx"] i { background: linear-gradient(150deg, #34c27a, #107c41); }
html body .of-hero .of-crear [data-nuevo="pptx"] i { background: linear-gradient(150deg, #ff8a5c, #c43e1c); }
html body .of-hero .of-crear [data-subir] i { background: linear-gradient(150deg, #94a3b8, #475569); }
html body .of-hero .of-crear b { font: 700 .92rem var(--ws-fuente); }
html body .of-hero .of-crear small { font-size: .74rem; line-height: 1.35; color: var(--ws-txt2); }
.of-confianza { list-style: none; margin: 14px 0 0; padding: 12px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; border-top: 1px solid rgb(255 255 255 / .16); }
.of-confianza li { display: flex; gap: 10px; align-items: flex-start; }
.of-confianza li > i { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .14); color: #bfdbfe; font-size: .85rem; }
.of-confianza span { display: grid; gap: 1px; }
.of-confianza b { font: 700 .8rem var(--ws-fuente); }
.of-confianza small { font: 500 .72rem/1.35 var(--ws-fuente); color: rgb(255 255 255 / .75); }
@media (max-width: 1200px) { .of-confianza { grid-template-columns: repeat(3, minmax(0, 1fr)); } html body .of-hero .of-crear { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .of-hero { padding: 18px 16px 12px; }
  .of-hero h2 { font-size: 1.2rem; }
  .of-hero-txt > p { display: none; }
  html body .of-hero .of-crear { grid-template-columns: 1fr 1fr; }
  html body .of-hero .of-crear small { display: none; }
  .of-confianza { grid-template-columns: 1fr; gap: 8px; }
  .of-confianza small { display: none; }
}
html body.ws .of-filtros label { flex: none; white-space: nowrap; font-weight: 500 !important; }
html body.ws .of-filtros label input { width: 16px; height: 16px; margin: 0; }
html body.ws .of-filtros .ui-tabs { flex: 1 1 100%; }
@media (max-width: 700px) { html body.ws .of-filtros label { white-space: normal; } }
@media (max-width: 700px) { html body.ws .of-filtros label { flex: 1 1 100%; white-space: normal !important; } }

/* Oficina y Reuniones: fondo con el color de la institucion, menos oscuro (como la portada de Mi panel) */
html body .of-hero, html body .vl-hero {
  background:
    radial-gradient(520px 260px at 92% -10%, color-mix(in srgb, var(--ws-acento) 50%, transparent), transparent 70%),
    radial-gradient(600px 300px at 0% 120%, color-mix(in srgb, var(--ws-p) 60%, transparent), transparent 70%),
    linear-gradient(120deg, color-mix(in srgb, var(--ws-p) 88%, #0b1220), var(--ws-p) 55%, color-mix(in srgb, var(--ws-p) 70%, var(--ws-acento)));
  box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--ws-p) 90%, transparent);
}
html body .vl-boton > span { background: linear-gradient(150deg, rgb(255 255 255 / .32), rgb(255 255 255 / .14)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 10px 20px -10px rgb(0 0 0 / .45); }
html body .vl-boton.nar > span { background: linear-gradient(150deg, #ff9a5a, #f15a24); }
html body .vl-pantalla { width: min(100%, 270px); }
/* Oficina: iconos dibujados de la suite dentro de las tarjetas */
.of-ico { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 3px 4px rgb(16 24 40 / .16)); }
html body .of-hero h2 { margin-bottom: 12px; }

/* =====================================================================
   CHAT FLOTANTE (assets/chat_flotante.js): barra derecha, panel de personas y ventanas abajo
   ===================================================================== */
.lxc { font-family: var(--ws-fuente); }
.lxc-barra {
  position: fixed; top: var(--ws-top, 52px); right: 0; bottom: 0; z-index: 1041; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0;
  background: #fbfbfc; border-left: 1px solid var(--ws-linea);
}
.lxc-b { position: relative; width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--ws-p) !important; font-size: 1rem; text-decoration: none !important; transition: background .12s; }
.lxc-b:hover { background: rgb(15 23 42 / .06); }
.lxc-b.on { background: var(--ws-p); color: #ffffff !important; box-shadow: 0 6px 14px -6px var(--ws-brillo); }
.lxc-b:nth-child(2) { color: #1a73e8 !important; } .lxc-b:nth-child(3) { color: #16a34a !important; } .lxc-b:nth-child(4) { color: var(--ws-txt2) !important; font-size: .85rem; }
.lxc-n { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: #e11d48; color: #ffffff; font: 700 .64rem/1 var(--ws-fuente); box-shadow: 0 0 0 2px #fbfbfc; }
.lxc-n[hidden] { display: none; }
@media (min-width: 992px) { html body.ws.lxc-con-barra .bl-main { margin-right: 52px; } }
.lxc-fab { display: none; }
/* Panel de personas */
.lxc-panel {
  position: fixed; top: var(--ws-top, 52px); right: 52px; bottom: 0; z-index: 1043; width: 300px; display: flex; flex-direction: column;
  background: #ffffff; border-left: 1px solid var(--ws-linea); box-shadow: -14px 0 32px -18px rgb(16 24 40 / .35); animation: lxcEntra .16s var(--ws-curva);
}
.lxc-panel[hidden] { display: none; }
@keyframes lxcEntra { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.lxc-panel-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 16px; }
.lxc-panel-cab strong { font: 700 1rem var(--ws-fuente); color: var(--ws-txt); }
.lxc-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ws-txt2) !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none !important; font-size: .8rem; flex: none; }
.lxc-x:hover { background: rgb(15 23 42 / .07); }
.lxc-buscar { margin: 0 12px 8px; height: 36px; padding: 0 12px; border: 1px solid var(--ws-linea2); border-radius: 10px; font: 500 .84rem var(--ws-fuente); outline: none; }
.lxc-buscar:focus { border-color: var(--ws-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-p) 16%, transparent); }
.lxc-lista { flex: 1; overflow-y: auto; padding: 0 8px 14px; }
.lxc-lista h4 { margin: 12px 8px 6px; font: 600 .66rem/1 var(--ws-fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--ws-txt3); }
.lxc-it { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.lxc-it:hover { background: rgb(15 23 42 / .05); }
.lxc-it-t { flex: 1; min-width: 0; display: grid; }
.lxc-it-t b { font: 600 .84rem/1.25 var(--ws-fuente); color: var(--ws-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxc-it-t small { font: 500 .72rem/1.3 var(--ws-fuente); color: var(--ws-txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxc-it-n { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font: 700 .7rem/20px var(--ws-fuente); text-align: center; }
.lxc-av { position: relative; flex: none; display: inline-flex; }
.lxc-av img, .lxc-it img { border-radius: 50%; }
.lxc-av.vivo::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #ffffff; }
.lxc-grupo { width: 32px; height: 32px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ws-p) 10%, #ffffff); color: var(--ws-p); font-size: .8rem; }
.lxc-ini { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ws-p); color: #fff; font-weight: 700; }
.lxc-vacio { padding: 18px 10px; text-align: center; color: var(--ws-txt2); font-size: .84rem; }
/* Ventanas */
.lxc-ventanas { position: fixed; right: 64px; bottom: 0; z-index: 1050; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none; }
body.lxc-panel-abierto .lxc-ventanas { right: 364px; }
.lxc-v { pointer-events: auto; width: 320px; height: 430px; display: flex; flex-direction: column; background: #ffffff; border-radius: 14px 14px 0 0; overflow: hidden;
  box-shadow: 0 -2px 6px rgb(16 24 40 / .06), 0 18px 48px -12px rgb(16 24 40 / .35); border: 1px solid var(--ws-linea); border-bottom: 0; }
.lxc-v.min { height: auto; }
.lxc-v.min .lxc-msgs, .lxc-v.min .lxc-escribir { display: none; }
.lxc-v-cab { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 10px; cursor: pointer; background: var(--ws-p); color: #ffffff; }
.lxc-v-cab .lxc-x { color: rgb(255 255 255 / .85) !important; }
.lxc-v-cab .lxc-x:hover { background: rgb(255 255 255 / .18); }
.lxc-v-t { flex: 1; min-width: 0; font: 650 .86rem var(--ws-fuente); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxc-v-n { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ffffff; color: #e11d48; font: 700 .66rem/18px var(--ws-fuente); text-align: center; }
.lxc-v-n[hidden] { display: none; }
.lxc-v.nuevo .lxc-v-cab { animation: lxcLlama 1.2s ease-in-out 3; }
@keyframes lxcLlama { 50% { filter: brightness(1.25); } }
.lxc-v-cab .lxc-grupo { width: 28px; height: 28px; background: rgb(255 255 255 / .2); color: #fff; }
.lxc-msgs { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #f7f8fa; }
.lxc-m { max-width: 84%; display: grid; gap: 2px; align-self: flex-start; }
.lxc-m.mio { align-self: flex-end; justify-items: end; }
.lxc-m-q { font: 600 .66rem var(--ws-fuente); color: var(--ws-txt3); padding-left: 4px; }
.lxc-m-b { padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: #ffffff; border: 1px solid var(--ws-linea); font: 500 .84rem/1.4 var(--ws-fuente); color: var(--ws-txt); word-wrap: break-word; overflow-wrap: anywhere; }
.lxc-m.mio .lxc-m-b { background: var(--ws-p); border-color: transparent; color: #ffffff; border-radius: 14px 14px 4px 14px; }
.lxc-m.mio .lxc-m-b a { color: #ffffff; }
.lxc-m-h { font: 500 .62rem var(--ws-fuente); color: var(--ws-txt3); padding: 0 4px; }
.lxc-escribir { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--ws-linea); background: #ffffff; }
.lxc-escribir textarea { flex: 1; min-height: 36px; max-height: 110px; resize: none; padding: 8px 12px; border: 1px solid var(--ws-linea2); border-radius: 18px; font: 500 .84rem/1.35 var(--ws-fuente); outline: none; }
.lxc-escribir textarea:focus { border-color: var(--ws-p); }
.lxc-escribir button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ws-p); color: #ffffff; cursor: pointer; flex: none; }
/* Celular: boton flotante, panel y ventana a pantalla casi completa */
@media (max-width: 991.98px) {
  .lxc-barra { display: none; }
  .lxc-fab { display: inline-flex; position: fixed; right: 16px; bottom: 74px; z-index: 1045; width: 52px; height: 52px; border: 0; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--ws-p); color: #ffffff; font-size: 1.2rem; box-shadow: 0 12px 24px -8px var(--ws-brillo); }
  .lxc-fab .lxc-n { box-shadow: 0 0 0 2px #ffffff; }
  .lxc-panel { top: 0; right: 0; left: 0; width: auto; z-index: 1070; }
  .lxc-ventanas, body.lxc-panel-abierto .lxc-ventanas { right: 0; left: 0; }
  .lxc-v { width: 100%; height: min(70vh, 520px); }
  html body .ax-btn { bottom: 134px; }
}
/* Boton de accesibilidad: no queda debajo de la barra del chat */
@media (min-width: 992px) { html body.lxc-con-barra .ax-btn { right: 66px; } }
@media (max-width: 991.98px) { html body.ws .bj-layout { grid-template-columns: minmax(0, 1fr) !important; } html body.ws .bj-layout > * { min-width: 0; max-width: 100%; } html body.ws .bj-nav { max-width: 100vw; } }
@media (max-width: 991.98px) { html body.ws .bj-nav { overflow-x: auto !important; overflow-y: hidden !important; } }
/* Chat flotante: herramientas de escritura, grabacion de voz y adjuntos */
.lxc-escribir { flex-wrap: wrap; }
.lxc-herr { display: flex; gap: 2px; width: 100%; }
.lxc-escribir .lxc-h, .lxc-h { width: 30px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ws-txt2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .85rem; }
.lxc-escribir .lxc-h:hover { background: rgb(15 23 42 / .06); color: var(--ws-p); }
.lxc-grab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font: 600 .82rem var(--ws-fuente); }
.lxc-grab[hidden] { display: none; }
.lxc-grab > i { font-size: .55rem; animation: vlRec 1.2s ease-in-out infinite; }
.lxc-grab span { flex: 1; }
.lxc-escribir .lxc-grab .lxc-h.ok { background: var(--ws-p); color: #ffffff; border-radius: 50%; }
.lxc-v.grabando .lxc-herr, .lxc-v.grabando textarea, .lxc-v.grabando .lxc-env { display: none; }
.lxc-escribir textarea { flex: 1 1 auto; min-width: 0; }
.lxc-m-b audio { width: 210px; max-width: 100%; height: 34px; display: block; }
.lxc-m-b img { max-width: 220px; max-height: 160px; border-radius: 8px; display: block; }
.lxc-adj { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none !important; color: inherit !important; }
.lxc-m:not(.mio) .lxc-adj { color: var(--ws-p) !important; }
.lxc-v-cab .lxc-x[data-a="llamar"], .lxc-v-cab .lxc-x[data-a="video"] { font-size: .85rem; }
/* Boton de Atencion por WhatsApp en la barra derecha (quienes atienden): verde; con conversaciones en cola, aviso rojo */
.lxc-b.lxc-at { color: #25d366 !important; font-size: 1.05rem; }
.lxc-b.lxc-at.alerta .lxc-n { animation: atLatido 2s ease-in-out infinite; }
@keyframes atLatido { 50% { box-shadow: 0 0 0 4px rgb(239 68 68 / .25); } }

/* "Volver a Puesta en marcha" en las demas pantallas cuando se llego desde ahi (workspace.js) */
.pm-volver { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border-radius: 999px;
  background: #0f172a; color: #ffffff; box-shadow: 0 12px 30px -10px rgb(15 23 42 / .6); font: 600 .84rem var(--ws-fuente, inherit); }
.pm-volver a { color: #ffffff !important; text-decoration: none !important; display: inline-flex; gap: 8px; align-items: center; padding: 6px 4px; }
.pm-volver button { border: 0; background: rgb(255 255 255 / .12); color: #ffffff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }

/* Recordatorio de vincular el WhatsApp para avisos (bwa_vinculado): punto verde en el avatar y etiqueta en el menu */
.ws-cuenta-btn { position: relative; }
.ws-wa-punto { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #25d366; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); animation: ws-wa-pulso 2s infinite; }
@keyframes ws-wa-pulso { 70% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
@media (prefers-reduced-motion: reduce) { .ws-wa-punto { animation: none; } }
.ws-wa-pend { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: .72rem; font-weight: 700; }

/* Portal: el logo (sin banner) va reducido en un recuadro blanco. Sobre el menu de color de la institucion un logo
   del mismo color no se distinguia, y con 65px de alto dentro de la cabecera de 52px quedaba recortado arriba. */
html body:not(.ws) .bl-sidebar .bl-side-logos:not(.bl-side-logos-banner) .bl-side-logo-wrap {
  width: auto; max-width: 86%; background: #fff; border-radius: 10px; padding: 5px 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
}
html body:not(.ws) .bl-sidebar .bl-side-logos:not(.bl-side-logos-banner) .bl-side-logo-img { max-width: 100% !important; max-height: 30px !important; }