/* =====================================================================
   TEMA VISUAL DEL BALCON (capa final, para todas las pantallas)
   Estilo limpio tipo Gmail / Gemini: tipografia Inter, superficies suaves, campos rellenos con foco luminoso,
   botones redondeados, pestanas en pildora, dialogos que en el celular salen desde abajo y un acento degradado
   discreto. Respeta los colores institucionales (--bl-primario, --bl-sidebar, --bl-acento).
   Los selectores llevan "html body" para ganar a los estilos de cada modulo sin usar !important.
   ===================================================================== */
:root {
  --t-p: var(--bl-primario, #0b57d0);
  --t-fondo: #f6f8fc;
  --t-sup: #ffffff;
  --t-sup2: #f8fafd;
  --t-campo: #f4f6fa;
  --t-borde: #e3e7ee;
  --t-borde2: #c9ced8;
  --t-txt: #1f1f1f;
  --t-txt2: #5f6368;
  --t-sombra1: 0 1px 2px rgb(60 64 67 / .08), 0 1px 3px 1px rgb(60 64 67 / .05);
  --t-sombra2: 0 2px 6px rgb(60 64 67 / .10), 0 8px 24px rgb(60 64 67 / .08);
  --t-sombra3: 0 12px 40px rgb(15 23 42 / .18);
  --t-anillo: 0 0 0 4px color-mix(in srgb, var(--t-p) 16%, transparent);
  --t-grad: linear-gradient(120deg, var(--t-p) 0%, #7c4dff 55%, #e5508d 100%);
  --t-r: 20px;
  --t-r-campo: 12px;
}

/* ---------------- Base ---------------- */
html body.bl-body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--t-fondo); color: var(--t-txt); letter-spacing: -.003em;
}
html body.bl-body :is(h1, h2, h3, h4) { letter-spacing: -.018em; }
html body.bl-body ::selection { background: color-mix(in srgb, var(--t-p) 22%, transparent); }
html body.bl-body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--t-p); outline-offset: 2px; }
html body.bl-body * { scrollbar-width: thin; scrollbar-color: #c4c9d2 transparent; }
html body.bl-body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body.bl-body ::-webkit-scrollbar-thumb { background: #c4c9d2; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
html body.bl-body input[type=checkbox], html body.bl-body input[type=radio], html body.bl-body input[type=range] { accent-color: var(--t-p); }
html body.bl-body input[type=checkbox], html body.bl-body input[type=radio] { width: 17px; height: 17px; }

/* Entrada suave del contenido */
/* Solo opacidad: un transform en el contenedor haria que los paneles fixed de adentro (detalle de la Bandeja) se desplacen con la pagina */
@keyframes tEntrar { from { opacity: 0; } to { opacity: 1; } }
html body .ui-app, html body .bj-app, html body .bl-contenido > .bl-card:first-child { animation: tEntrar .28s ease-out; }

/* ---------------- Barra superior (vidrio) ---------------- */
html body .bl-topbar {
  background: rgb(255 255 255 / .82); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: none; border-bottom: 1px solid rgb(15 23 42 / .06); gap: 14px;
}
html body .bl-brand { flex: 0 1 auto; min-width: 0; }
html body .bl-brand-txt { min-width: 0; max-width: 340px; }
html body .bl-brand-tit, html body .bl-brand-sub { overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
html body .bl-brand-fecha { overflow: hidden; text-overflow: ellipsis; color: var(--t-txt2); }
html body .bl-search { flex: 1 1 auto; max-width: 560px; }
html body .bl-search input {
  height: 46px; border: 1px solid transparent; background: #eaf1fb; font-size: .93rem; color: var(--t-txt);
  transition: background .2s, box-shadow .2s, border-color .2s;
}
html body .bl-search input:hover { background: #e2eaf6; }
html body .bl-search input:focus { background: #fff; border-color: transparent; box-shadow: var(--t-sombra2); }
html body .bl-search-res { border-radius: 18px; box-shadow: var(--t-sombra3); border: 1px solid var(--t-borde); top: 54px; }
html body .bl-avisos-btn, html body .bl-hamb { border-radius: 50%; transition: background .15s; }
html body .bl-avisos-btn:hover, html body .bl-hamb:hover { background: rgb(60 64 67 / .08); }
html body .bl-avisos-panel { border-radius: 20px; box-shadow: var(--t-sombra3); border: 1px solid var(--t-borde); overflow: hidden; }
html body .bl-top-user-pill { border-radius: 999px; transition: background .15s, box-shadow .15s; }
html body .bl-top-user-pill:hover { box-shadow: var(--t-sombra1); }

/* ---------------- Menu lateral: compacto, con separadores suaves ----------------
   Los tonos de fondo y lineas salen del color del texto del menu, asi funcionan igual con menu oscuro o claro. */
html body .bl-sidebar { --bl-linea-menu: color-mix(in srgb, var(--bl-sidebar-texto, #fff) 11%, transparent); }
html body .bl-sidebar .bl-nav { padding: 6px 8px 14px; }
/* Separacion del contenido: linea fina y sombra suave hacia la derecha (en movil la regla de abajo la ajusta) */
html body .bl-sidebar {
  border-right: 1px solid rgb(15 23 42 / .08);
  box-shadow: 1px 0 0 rgb(255 255 255 / .6), 6px 0 24px -6px rgb(15 23 42 / .14), 2px 0 6px -2px rgb(15 23 42 / .08);
}
html body .bl-sidebar .bl-nav-item,
html body .bl-sidebar .bl-nav-grupo > summary {
  font-size: .84rem; line-height: 1.25; gap: 10px; padding: 8px 12px 8px 16px; margin: 0;
  border-radius: 8px; border-left-width: 0; border-bottom: 1px solid var(--bl-linea-menu); transition: background .15s;
}
html body .bl-sidebar .bl-nav-grupo > summary { font-weight: 600; }
html body .bl-sidebar .bl-nav-grupo { margin: 0; }
html body .bl-sidebar .bl-nav-ico { width: 18px; font-size: .88rem; }
html body .bl-sidebar .bl-nav-flecha { font-size: .62rem; }
html body .bl-sidebar .bl-nav-item:hover,
html body .bl-sidebar .bl-nav-grupo > summary:hover { background: color-mix(in srgb, var(--bl-sidebar-texto, #fff) 7%, transparent) !important; }
html body .bl-sidebar .bl-nav-item.activo {
  background: color-mix(in srgb, var(--bl-sidebar-texto, #fff) 13%, transparent) !important; font-weight: 650;
  box-shadow: inset 3px 0 0 var(--bl-acento, #fff);
}
/* Submenu: algo mas pequeno, con su guia vertical y lineas mas tenues */
html body .bl-sidebar .bl-nav-sub { margin: 2px 0 6px 20px; padding-left: 6px; border-left: 1px solid var(--bl-linea-menu); }
html body .bl-sidebar .bl-nav-sub .bl-nav-item { font-size: .8rem; padding: 6px 10px 6px 12px; border-bottom-color: color-mix(in srgb, var(--bl-sidebar-texto, #fff) 6%, transparent); }
html body .bl-sidebar .bl-nav-sub .bl-nav-item:last-child { border-bottom: 0; }
html body .bl-sidebar .bl-nav-sep { margin: 14px 12px 4px 16px; font-size: .66rem; }
@media (max-width: 991.98px) {
  /* Cerrado no deja una franja de sombra en el borde de la pantalla */
  html body .bl-sidebar { box-shadow: none; }
  html body.bl-abierto .bl-sidebar { box-shadow: 0 0 48px rgb(0 0 0 / .32); }
  html body.bl-abierto .bl-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: rgb(15 23 42 / .38); }
}

/* ---------------- Encabezados de pagina ---------------- */
html body .ui-cab { align-items: center; margin-bottom: 20px; }
html body .ui-cab h1 { font-weight: 700; font-size: 1.55rem; letter-spacing: -.025em; }
html body .ui-cab h1 i, html body .bj-cabecera h1 i, html body .bl-card-head h2 > .fas,
html body :is(.ui-app, .bl-contenido) > h1 > i:first-child {
  background: var(--t-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html body .ui-cab p { color: var(--t-txt2); line-height: 1.5; }

/* ---------------- Tarjetas y superficies ---------------- */
html body :is(.ui-card, .bl-card, .bj-tarjeta, .bl-stat-card, .bl-kpi-card, .bl-pie-card) {
  border-radius: var(--t-r); border: 1px solid rgb(15 23 42 / .06); box-shadow: var(--t-sombra1); background: var(--t-sup);
}
html body :is(.bj-nt-card, .bl-tile, .bl-cat-item, a.bl-card, .pj-card):hover { box-shadow: var(--t-sombra2); transform: translateY(-1px); }
html body :is(.bj-nt-card, .bl-tile, .pj-card) { transition: box-shadow .2s, transform .2s, border-color .2s; border-radius: 18px; }
html body .ui-card-cab h2, html body .bl-card-head h2 { font-weight: 650; }
html body .bl-hero { border-radius: 28px; border: 0; box-shadow: var(--t-sombra2); }

/* ---------------- Botones ---------------- */
html body :is(.ui-btn, .bl-btn) {
  border-radius: 999px; font-weight: 600; letter-spacing: .005em; min-height: 38px; padding-inline: 18px;
  transition: background .18s, box-shadow .18s, border-color .18s, filter .18s, transform .12s;
}
html body :is(.ui-btn, .bl-btn):active { transform: scale(.98); }
html body .ui-btn-sm { min-height: 30px; padding: 4px 12px; }
html body :is(.ui-btn-p, .bl-btn-primario) { box-shadow: 0 1px 2px color-mix(in srgb, var(--t-p) 30%, transparent); }
html body :is(.ui-btn-p, .bl-btn-primario):hover { filter: none; box-shadow: 0 2px 8px color-mix(in srgb, var(--t-p) 38%, transparent), 0 1px 3px rgb(60 64 67 / .15); transform: none; }
html body .ui-btn-b { background: #fff; border-color: var(--t-borde2); color: color-mix(in srgb, var(--t-p) 80%, #0f172a); }
html body .ui-btn-b:hover { background: color-mix(in srgb, var(--t-p) 7%, #fff); border-color: color-mix(in srgb, var(--t-p) 35%, var(--t-borde2)); }
html body .ui-btn-t { border-radius: 999px; }
html body .ui-btn-t:hover { background: color-mix(in srgb, var(--t-p) 8%, transparent); }
html body .ui-btn-peligro:hover { background: #fef2f2; }
/* Acciones con IA: el acento degradado identifica lo generado por el asistente */
html body :is([data-ia], .bl-btn-ia, #edIA, .ed-ia) { position: relative; }
html body :is(.bl-btn-ia, .ui-btn-ia) { background: var(--t-grad); color: #fff; border: 0; }

/* ---------------- Campos de formulario ---------------- */
html body :is(.ui-campo, .bj-form, .bl-campo, .bl-filtros-lista, .bl-form-group, .ui-fila, .pt-form, .pt-filtros, .tr-filtros, .pt-card, .bl-verificar) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select, textarea),
html body :is(.ui-input, .bl-input, .bl-select, .bl-textarea) {
  background-color: var(--t-campo); border: 1px solid var(--t-borde); border-radius: var(--t-r-campo); color: var(--t-txt);
  min-height: 44px; padding: 10px 14px; font: inherit; font-size: .92rem; font-weight: 400;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
html body :is(.ui-campo, .bj-form, .bl-campo, .bl-filtros-lista, .bl-form-group) textarea, html body textarea:is(.ui-input, .bl-input) { min-height: 88px; line-height: 1.5; }
html body :is(.ui-campo, .bj-form, .bl-campo, .bl-filtros-lista, .bl-form-group, .ui-fila, .pt-form, .pt-filtros, .tr-filtros, .pt-card, .bl-verificar) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select, textarea):hover,
html body :is(.ui-input, .bl-input, .bl-select, .bl-textarea):hover { border-color: var(--t-borde2); }
html body :is(.ui-campo, .bj-form, .bl-campo, .bl-filtros-lista, .bl-form-group, .ui-fila, .pt-form, .pt-filtros, .tr-filtros, .pt-card, .bl-verificar) :is(input, select, textarea):focus,
html body :is(.ui-input, .bl-input, .bl-select, .bl-textarea):focus {
  outline: none; background-color: #fff; border-color: var(--t-p); box-shadow: var(--t-anillo);
}
html body :is(.ui-campo, .bj-form, .bl-campo, .bl-form-group) :is(input, textarea)::placeholder, html body :is(.ui-input, .bl-input)::placeholder { color: #8a9099; }
/* Flecha propia en las listas desplegables */
html body :is(.ui-campo, .bj-form, .bl-campo, .bl-filtros-lista, .bl-form-group, .ui-fila, .pt-form, .pt-filtros, .tr-filtros, .pt-card, .bl-verificar) select:not([multiple]):not([size]), html body select:is(.ui-input, .bl-input, .bl-select):not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px;
}
html body :is(.ui-campo, .bj-form label, .bl-label, .bl-filtros-lista label, .pt-form label) { color: #3c4043; font-weight: 600; font-size: .8rem; letter-spacing: .01em; }
html body .ui-campo { gap: 6px; margin-bottom: 14px; }
html body input[type=file]:is(.bl-input, *) { font-size: .85rem; }
html body input[type=file]::file-selector-button {
  border: 0; border-radius: 999px; padding: 8px 14px; margin-right: 10px; font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer;
  background: color-mix(in srgb, var(--t-p) 12%, #fff); color: color-mix(in srgb, var(--t-p) 85%, #0f172a); transition: background .15s;
}
html body input[type=file]::file-selector-button:hover { background: color-mix(in srgb, var(--t-p) 20%, #fff); }
html body .ui-check { font-weight: 500; gap: 10px; }
html body .ui-switch .pista { background: #c4c9d2; }

/* ---------------- Pestanas en pildora ---------------- */
html body .ui-tabs { border-bottom: 0; gap: 6px; padding: 4px; background: rgb(60 64 67 / .05); border-radius: 999px; width: fit-content; max-width: 100%; margin-bottom: 18px; }
html body .ui-tab { border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 600; color: var(--t-txt2); transition: background .18s, color .18s, box-shadow .18s; }
html body .ui-tab:hover { color: var(--t-txt); background: rgb(255 255 255 / .6); }
html body .ui-tab[aria-selected=true] { background: #fff; color: var(--t-p); box-shadow: var(--t-sombra1); border: 0; }
html body .bl-admin-tab { border-radius: 999px; }

/* ---------------- Tablas ---------------- */
html body .ui-tabla-wrap { background: var(--t-sup); border: 1px solid rgb(15 23 42 / .06); border-radius: 18px; box-shadow: var(--t-sombra1); }
html body .ui-card .ui-tabla-wrap, html body .ui-modal .ui-tabla-wrap { box-shadow: none; }
html body .ui-tabla th, html body .bl-admin-table th { background: var(--t-sup2); color: var(--t-txt2); font-weight: 600; font-size: .7rem; letter-spacing: .05em; padding: 11px 12px; border-bottom: 1px solid var(--t-borde); }
html body .ui-tabla td { padding: 12px; border-bottom: 1px solid #eef0f4; }
html body .ui-tabla tbody tr:last-child td { border-bottom: 0; }
html body .ui-tabla tr:hover td { background: color-mix(in srgb, var(--t-p) 4%, #fff); }
html body .bl-admin-table { border-radius: 16px; overflow: hidden; }

/* ---------------- Chips, avisos y vacios ---------------- */
html body .ui-chip { font-weight: 650; padding: 4px 10px; letter-spacing: .01em; }
html body .ui-aviso { border-radius: 16px; border: 0; background: color-mix(in srgb, var(--t-p) 8%, #fff); color: color-mix(in srgb, var(--t-p) 70%, #0f172a); }
html body .ui-aviso.warn { background: #fef7e0; color: #7a4b00; }
html body .ui-vacio { color: var(--t-txt2); padding: 44px 16px; }
html body .ui-vacio i { opacity: .5; background: var(--t-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html body .ui-skel, html body .bj-skel { background: linear-gradient(90deg, #eef1f6 25%, #e3e8f0 50%, #eef1f6 75%); background-size: 200% 100%; }

/* ---------------- Dialogos ---------------- */
html body :is(.ui-modal, .bj-dialogo) { border-radius: 28px; box-shadow: var(--t-sombra3); border: 0; }
html body :is(.ui-modal, .bj-dialogo)::backdrop { background: rgb(15 23 42 / .32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html body :is(.ui-modal, .bj-dialogo)[open] { animation: tDialogo .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes tDialogo { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
html body .ui-modal-cab { border-bottom: 0; padding: 20px 24px 6px; }
html body .ui-modal-cab h2 { font-weight: 650; font-size: 1.15rem; }
html body .ui-modal-cuerpo { padding: 12px 24px 18px; }
html body .ui-modal-pie { background: transparent; border-top: 1px solid #eef0f4; padding: 14px 24px; border-radius: 0 0 28px 28px; }
html body .bj-form { padding: 24px; gap: 12px; }
html body .bl-modal-panel { border-radius: 28px; }

/* ---------------- Bandeja ---------------- */
html body .bj-nav-item { border-radius: 0 999px 999px 0; }
html body .bj-nav-item[aria-current=true], html body .bj-nav-item.act, html body .bj-nav-item.activo { background: color-mix(in srgb, var(--t-p) 14%, #fff); color: color-mix(in srgb, var(--t-p) 85%, #0f172a); font-weight: 650; }
html body .bj-buscar { background: #eaf1fb; border: 1px solid transparent; min-height: 46px; padding: 4px 16px; transition: background .2s, box-shadow .2s; }
html body .bj-buscar:hover { background: #e2eaf6; }
html body .bj-buscar:focus-within { background: #fff; box-shadow: var(--t-sombra2); }
html body .bj-buscar input { background: transparent; border: 0; box-shadow: none; min-height: 0; padding: 0; }
html body .bj-fila:hover td { background: color-mix(in srgb, var(--t-p) 4%, #fff); }
html body .bj-fila.no-leido td { background: #fff; }
html body .bj-fila.no-leido .bj-abrir { font-weight: 700; }
html body .bj-reqs { border: 1px solid var(--t-borde); border-radius: 16px; padding: 12px 14px; }
html body .bj-reqs legend { font-weight: 650; padding: 0 6px; }

/* ---------------- Visor y asistente ---------------- */
html body .ia-lanzador { box-shadow: 0 6px 20px color-mix(in srgb, var(--t-p) 40%, transparent); }
html body .ia-burbuja { border-radius: 18px 18px 6px 18px; box-shadow: var(--t-sombra2); border: 0; }
html body .ia-burbuja.ia-sale { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
html body .ia-panel { border-radius: 24px; box-shadow: var(--t-sombra3); }

/* ---------------- Portal (personas externas) ---------------- */
html body .bl-reserva { border-radius: 18px; }
html body .bl-migas { color: var(--t-txt2); }

/* =====================================================================
   CELULAR Y TABLET
   ===================================================================== */
@media (max-width: 767.98px) {
  html body .bl-topbar { padding: 8px 12px; gap: 8px; }
  html body .bl-brand-fecha, html body .bl-brand-sub { display: none; }
  html body .bl-brand { flex: 1 1 0; }
  html body .bl-brand-txt { max-width: none; }
  html body .bl-top-iconos { flex: none; gap: 2px; }
  html body .bl-brand-badge-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 12px; }
  html body .ui-app { padding: 14px 12px 96px; }
  html body .ui-cab { gap: 10px; margin-bottom: 14px; }
  html body .ui-cab h1 { font-size: 1.28rem; }
  html body .ui-cab > .ui-acciones { width: 100%; }
  html body .ui-cab > .ui-acciones > .ui-btn-p { flex: 1 1 auto; }
  html body .ui-tabs { width: 100%; border-radius: 18px; }
  html body .ui-tab { flex: 1 1 auto; justify-content: center; }
  html body .ui-card, html body .bl-card { border-radius: 18px; padding: 14px; }
  html body .ui-tabla-wrap { border-radius: 14px; }
  html body .ui-tabla-wrap:has(> table.rsp-tarjetas) { background: none; border: 0; box-shadow: none; }
  /* 16 px evita que el celular acerque la pantalla al escribir */
  html body :is(.ui-campo, .bj-form, .bl-campo, .bl-filtros-lista, .bl-form-group, .ui-fila, .pt-form, .pt-filtros, .tr-filtros, .pt-card, .bl-verificar) :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
  html body :is(.ui-input, .bl-input, .bl-select, .bl-textarea, .bl-search input, .bj-buscar input) { font-size: 16px; }
  html body .ia-lanzador { width: 52px; height: 52px; font-size: 1.35rem; }
  html body .ia-w { --ia-abajo: calc(14px + env(safe-area-inset-bottom)); right: 14px; }
}
@media (max-width: 640px) {
  /* Dialogos como hoja inferior */
  html body :is(.ui-modal, .bj-dialogo) {
    width: 100vw !important; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 26px 26px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html body :is(.ui-modal, .bj-dialogo)[open] { animation: tHoja .26s cubic-bezier(.2, .8, .2, 1); }
  @keyframes tHoja { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
  html body :is(.ui-modal, .bj-dialogo)::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: #c4c9d2; margin: 10px auto 0; }
  html body .ui-modal-cab { padding: 10px 18px 4px; }
  html body .ui-modal-cuerpo { padding: 10px 18px 14px; max-height: calc(92vh - 150px); }
  html body .ui-modal-pie { padding: 12px 18px; border-radius: 0; position: sticky; bottom: 0; background: #fff; }
  html body .ui-modal-pie .ui-btn { flex: 1 1 0; }
  html body .bj-form { padding: 18px; }
  html body .bj-form-pie .ui-btn, html body .bj-form-pie button { flex: 1 1 0; }
  html body .bl-hero { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .ui-app, html body .bj-app, html body :is(.ui-modal, .bj-dialogo)[open] { animation: none; }
  html body :is(.ui-btn, .bl-btn, .bj-nt-card, .bl-tile) { transition: none; }
}

/* ---------------- Reasignacion de trabajo de funcionarios inactivos ---------------- */
html body [data-ra-bajas] { margin: 0 0 18px; }
html body .ra-aviso { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, #fff7ed, #fef2f2); border: 1px solid #fed7aa; box-shadow: var(--t-sombra1); }
html body .ra-aviso > i { font-size: 1.5rem; color: #c2410c; margin-top: 2px; }
html body .ra-aviso p { margin: 4px 0 10px; color: #7c2d12; font-size: .86rem; }
html body .ra-aviso ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html body .ra-aviso li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 10px; }
html body .ra-aviso li span { flex: 1; min-width: 0; display: grid; }
html body .ra-aviso li small { color: var(--t-txt2); font-size: .78rem; }
html body .ra-intro { margin: 0 0 10px; color: var(--t-txt2); font-size: .9rem; }
html body .ra-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
html body .ra-lista li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: var(--t-sup2); font-size: .88rem; }
html body .ra-elegido { display: flex; gap: 10px; align-items: center; margin: -6px 0 12px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--t-p) 8%, #fff); }
html body .ra-elegido span { display: grid; } html body .ra-elegido small { color: var(--t-txt2); }

/* ---------------- Archivo: explorador del expediente ---------------- */
html body .ar-fila-exp a[data-exp-abrir] { color: inherit; text-decoration: none; }
html body .ar-fila-exp a[data-exp-abrir]:hover strong { color: var(--t-p); text-decoration: underline; }
html body .ar-exp-tit { margin: -4px 0 12px; font-size: .95rem; color: var(--t-txt2); }
html body .ar-exp-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: var(--t-sup2); }
html body .ar-exp-datos dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--t-txt2); font-weight: 600; }
html body .ar-exp-datos dd { margin: 2px 0 0; font-size: .88rem; }
html body .ar-exp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
html body .ar-exp-barra [data-cuenta] { flex: 1; min-width: 160px; }
html body .ar-exp-docs td.ar-doc-acc { white-space: nowrap; text-align: right; }
html body .ar-exp-docs .ar-restringido td { color: var(--t-txt2); }
html body .ar-marcado i { color: #f9ab00; }
html body .ar-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
html body .ar-hist li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--t-sup2); }
html body .ar-hist li > i { color: var(--t-p); margin-top: 3px; width: 18px; text-align: center; }
html body .ar-hist li span { display: grid; } html body .ar-hist small { color: var(--t-txt2); font-size: .76rem; }
@media (max-width: 640px) { html body .ar-exp-docs td.ar-doc-acc { white-space: normal; } }

/* ---------------- Bandeja: panel de detalle como hoja flotante ---------------- */
html body .bj-detalle { border-radius: 22px; border: 1px solid rgb(15 23 42 / .06); box-shadow: var(--t-sombra1); padding: 18px 20px; overscroll-behavior: contain; }
@media (max-width: 1800px) {
  html body .bj-detalle { inset: 12px 12px 12px auto; top: 12px; height: auto; max-height: calc(100vh - 24px) !important; width: min(720px, calc(100vw - 24px));
    border-radius: 24px !important; box-shadow: 0 24px 70px rgb(15 23 42 / .28) !important; animation: tPanel .24s cubic-bezier(.2, .8, .2, 1); }
  @keyframes tPanel { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 760px) { html body .bj-detalle { inset: 0; width: 100vw; max-height: none !important; border-radius: 0 !important; } }
html body .bj-det-cab h2 { font-weight: 650; letter-spacing: -.015em; }

/* ---------------- Mensajes: estilo Google Chat / Gemini ---------------- */
html body .ch-app { border: 1px solid rgb(15 23 42 / .06); border-radius: 26px; box-shadow: var(--t-sombra1); background: #fff; height: calc(100vh - 150px); padding: 0; }
html body .ch-lista { background: var(--t-fondo); border-right: 0; padding: 8px 6px 0; }
html body .ch-lista-cab { padding: 12px 12px 8px; }
html body .ch-lista-cab strong { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }
html body .ch-lista-cab .ui-btn { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; }
html body .ch-filtro { margin: 0 8px 10px; border: 1px solid transparent; background: #eaf1fb; border-radius: 999px; padding: 10px 16px; min-height: 42px; transition: background .2s, box-shadow .2s; }
html body .ch-filtro:focus { outline: none; background: #fff; box-shadow: var(--t-sombra2); }
html body .ch-canales h4 { font-weight: 600; color: var(--t-txt2); margin: 14px 12px 6px; }
html body .ch-canales button { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 9px 12px; border-radius: 999px; gap: 10px; transition: background .15s; }
html body .ch-canales button:hover { background: rgb(60 64 67 / .07); }
html body .ch-canales button.on { background: color-mix(in srgb, var(--t-p) 16%, #fff); }
html body .ch-canales button.on strong { color: color-mix(in srgb, var(--t-p) 85%, #0f172a); }
html body .ch-canales .ico { width: 38px; height: 38px; background: #fff; box-shadow: var(--t-sombra1); color: var(--t-p); font-size: .9rem; overflow: hidden; }
html body .ch-canales strong { font-weight: 600; font-size: .9rem; }
html body .ch-canales .nl { background: var(--t-p); }
html body .ch-panel { background: #fff; }
html body .ch-cab { padding: 14px 20px; border-bottom: 1px solid #eef0f4; gap: 10px; min-height: 66px; }
html body .ch-cab h2 { font-size: 1.08rem; font-weight: 650; letter-spacing: -.015em; }
html body .ch-cab .ui-btn { border-radius: 50%; width: 38px; height: 38px; min-height: 38px; padding: 0; }
html body .ch-msgs { padding: 18px 22px; gap: 4px; background: #fff; }
html body .ch-dia { position: sticky; top: 0; z-index: 1; margin: 10px auto; padding: 4px 12px; border-radius: 999px; background: #fff; box-shadow: var(--t-sombra1); width: fit-content; font-weight: 600; }
html body .ch-m { padding: 3px 4px; gap: 10px; grid-template-columns: 36px minmax(0, 1fr); }
html body .ch-m:hover { background: transparent; }
html body .ch-m > div:not(.ch-acc) { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(78%, 720px); }
html body .ch-av { width: 36px; height: 36px; }
html body .ch-m .quien { font-weight: 600; font-size: .8rem; color: #3c4043; margin: 0 0 3px 4px; }
html body .ch-m .txt { background: #f1f3f4; padding: 9px 15px; border-radius: 6px 20px 20px 20px; line-height: 1.45; max-width: 100%; }
html body .ch-m.seguido .txt { border-radius: 20px; }
html body .ch-m.mio { grid-template-columns: minmax(0, 1fr); justify-items: end; }
html body .ch-m.mio .ch-av { display: none; }
html body .ch-m.mio > div:not(.ch-acc) { align-items: flex-end; }
html body .ch-m.mio .quien { margin: 0 4px 3px 0; }
html body .ch-m.mio .txt { background: color-mix(in srgb, var(--t-p) 15%, #fff); border-radius: 20px 6px 20px 20px; }
html body .ch-m.mio.seguido .txt { border-radius: 20px; }
html body .ch-m.mio .ch-acc { right: auto; left: 6px; }
html body .ch-acc { border-radius: 999px; border: 0; box-shadow: var(--t-sombra2); padding: 2px; top: -14px; }
html body .ch-acc button { border-radius: 50%; }
html body .ch-adj, html body .ch-ref { border-radius: 16px; border-color: #e3e7ee; padding: 8px 12px; margin-top: 4px; background: #fff; box-shadow: var(--t-sombra1); }
html body .ch-adj:has(img) { padding: 4px; }
html body .ch-adj img { max-width: 320px; max-height: 240px; border-radius: 12px; object-fit: cover; }
html body .ch-hilo-btn { margin: 3px 6px 0; }
html body .ch-form { border-top: 0; padding: 10px 18px 16px; }
html body .ch-form textarea { border: 1px solid transparent; background: #f1f4f9; border-radius: 26px; padding: 13px 20px; min-height: 50px; transition: background .2s, box-shadow .2s; }
html body .ch-form textarea:focus { outline: none; background: #fff; box-shadow: 0 0 0 1px var(--t-borde), var(--t-sombra2); }
html body .ch-form .fila .ui-btn-t { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; }
html body .ch-form [type=submit] { border-radius: 999px; padding-inline: 20px; }
html body .ch-hilo { background: var(--t-fondo); border-left: 1px solid #eef0f4; }
html body .ch-bienvenida i { font-size: 3rem; background: var(--t-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html body .ch-lateral { border-radius: 24px 0 0 24px; box-shadow: -18px 0 60px rgb(15 23 42 / .22); }
@media (max-width: 760px) { html body .ch-app { border-radius: 18px; height: calc(100dvh - 130px); } html body .ch-m > div:not(.ch-acc) { max-width: 88%; } html body .ch-msgs { padding: 12px; } }
html body .bj-detalle .fc-kpi strong { font-size: 1.08rem; line-height: 1.25; }
html body:has(.ch-app) .ia-w:not(.abierto) { --ia-abajo: 200px; } /* en Mensajes no tapa el boton Enviar; abierto vuelve abajo */

/* ---------------- Mensajes: caja de escritura y notas de voz ---------------- */
html body .ch-compo { background: #f1f4f9; border-radius: 28px; padding: 6px 8px 6px 6px; border: 1px solid transparent; transition: background .2s, box-shadow .2s, border-color .2s; }
html body .ch-compo:focus-within { background: #fff; border-color: var(--t-borde); box-shadow: var(--t-sombra2); }
html body .ch-compo textarea, html body .ch-compo textarea:focus { background: transparent; border: 0; box-shadow: none; min-height: 40px; padding: 10px 14px 4px; }
html body .ch-compo-acc { display: flex; align-items: center; gap: 2px; padding: 0 2px 0 4px; }
html body .ch-compo-acc .adjn { flex: 1; min-width: 0; font-size: .78rem; color: var(--t-txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
html body .ch-ic { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: #5f6368; display: inline-grid; place-items: center; cursor: pointer; font-size: .98rem; transition: background .15s, color .15s; flex: none; }
html body .ch-ic:hover { background: rgb(60 64 67 / .08); color: var(--t-p); }
html body .ch-ic[data-voz]:hover { color: #d93025; }
html body .ch-enviar { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--t-p); color: #fff; display: inline-grid; place-items: center; cursor: pointer; flex: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--t-p) 40%, transparent); transition: transform .12s, box-shadow .15s; margin-left: auto; }
html body .ch-enviar:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--t-p) 50%, transparent); }
html body .ch-enviar:active { transform: scale(.94); }
html body .ch-enviar[disabled] { opacity: .5; }
html body .ch-grabando { display: none; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; min-height: 50px; color: #3c4043; font-weight: 600; font-size: .88rem; }
html body .ch-form.grabando .ch-grabando { display: flex; }
html body .ch-form.grabando .ch-compo textarea, html body .ch-form.grabando .ch-compo-acc { display: none; }
html body .ch-form.grabando .ch-compo { background: #fce8e6; border-color: #f6aea9; }
html body .ch-grabando .pto { width: 10px; height: 10px; border-radius: 50%; background: #d93025; animation: chPto 1s infinite; }
html body .ch-grabando b { font-variant-numeric: tabular-nums; color: #d93025; }
html body .ch-onda { display: inline-flex; gap: 3px; align-items: center; height: 22px; flex: 1; }
html body .ch-onda i { width: 4px; border-radius: 4px; background: #d93025; opacity: .7; animation: chOnda 1s ease-in-out infinite; }
html body .ch-onda i:nth-child(2) { animation-delay: .15s; } html body .ch-onda i:nth-child(3) { animation-delay: .3s; } html body .ch-onda i:nth-child(4) { animation-delay: .45s; } html body .ch-onda i:nth-child(5) { animation-delay: .6s; }
@keyframes chPto { 50% { opacity: .25; } }
@keyframes chOnda { 0%, 100% { height: 5px; } 50% { height: 20px; } }
html body .ch-voz { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; border-radius: 26px; background: #f1f3f4; margin-top: 2px; max-width: 100%; }
html body .ch-m.mio .ch-voz { background: color-mix(in srgb, var(--t-p) 15%, #fff); }
html body .ch-voz > i { color: var(--t-p); }
html body .ch-voz audio { height: 36px; max-width: 260px; }
@media (prefers-reduced-motion: reduce) { html body .ch-onda i, html body .ch-grabando .pto { animation: none; } }

/* ---------------- Bandeja compacta (tipo Gmail) ---------------- */
html body .bj-app { padding: 10px 16px 24px; }
html body .bj-cabecera { align-items: center; margin-bottom: 10px; gap: 10px; }
html body .bj-cabecera h1 { font-size: 1.3rem; font-weight: 700; }
html body .bj-layout { gap: 10px; }
html body .bj-nav { padding: 6px; border-radius: 18px; border-color: rgb(15 23 42 / .06); box-shadow: var(--t-sombra1); }
html body .bj-nav-tit { padding: 8px 10px 2px; font-size: .64rem; }
html body .bj-nav-item { padding: 6px 12px; font-size: .84rem; min-height: 34px; }
html body .bj-lista { padding: 8px 10px; border-radius: 18px; border-color: rgb(15 23 42 / .06); box-shadow: var(--t-sombra1); }
html body .bj-tabla th { padding: 6px 8px; }
html body .bj-tabla td { padding: 7px 8px; vertical-align: middle; }
html body .bj-tabla .bj-sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html body .bj-tipo-ico { width: 30px; height: 30px; border-radius: 50%; font-size: .8rem; }
html body .bj-fila td { transition: background .12s; }
html body .bj-maestra td:first-child { width: 40px; }
html body .bj-maestra td.opc { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
html body .bj-maestra .bj-num { font-size: .74rem; white-space: nowrap; }
html body .bj-maestra .bj-carp { font-size: .6rem; padding: 1px 5px; margin-left: 2px; }
html body .bj-maestra .bj-abrir { display: block; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 330px; }
html body .pt-form, html body .pt-form label { min-width: 0; } html body .pt-form :is(input, select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } /* el area de texto no ensancha la tarjeta en celular */

/* ---------------- Ventanilla: tablero del mostrador ---------------- */
html body .vt-mostrador { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
html body .vt-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 20px; background: #fff;
  border: 1px solid rgb(15 23 42 / .06); box-shadow: var(--t-sombra1); text-decoration: none; color: var(--t-txt); transition: box-shadow .2s, transform .2s; }
html body .vt-kpi:hover { box-shadow: var(--t-sombra2); transform: translateY(-1px); }
html body .vt-kpi i { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--t-p) 12%, #fff); color: var(--t-p); font-size: 1.1rem; }
html body .vt-kpi strong { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
html body .vt-kpi span { font-size: .8rem; color: var(--t-txt2); }
html body .vt-kpi.alerta i { background: #fce8e6; color: #d93025; } html body .vt-kpi.alerta strong { color: #d93025; }
html body .vt-rapidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
html body .vt-rapidos > * { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; border: 1px dashed #c9ced8; background: var(--t-sup2); color: var(--t-txt);
  text-decoration: none; font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
html body .vt-rapidos > *:hover { background: color-mix(in srgb, var(--t-p) 7%, #fff); border-color: var(--t-p); border-style: solid; }
html body .vt-rapidos i { font-size: 1.15rem; color: var(--t-p); width: 26px; text-align: center; }
html body .vt-rapidos span { display: grid; } html body .vt-rapidos strong { font-size: .9rem; } html body .vt-rapidos small { color: var(--t-txt2); font-size: .76rem; }
html body .vt-recientes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: .82rem; color: var(--t-txt2); }
html body .vt-recientes a { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--t-borde); color: var(--t-txt); text-decoration: none; }
html body .vt-recientes a:hover { border-color: var(--t-p); color: var(--t-p); }
/* Ventanilla: proceso dentro del modal de tramite presencial */
html body .vt-proceso { margin-top: 14px; padding: 14px; border-radius: 14px; background: #f5f3ff; border: 1px solid #ddd6fe; }
html body .vt-proceso-tit { font-weight: 700; font-size: .86rem; color: #4c1d95; margin-bottom: 6px; }
html body .vt-proceso-ayuda { font-size: .78rem; color: #5b21b6; margin: 0 0 10px; }
html body .vt-parte { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1.2fr auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
html body .vt-parte .bl-input { min-height: 38px; padding: 6px 10px; font-size: .84rem; }
html body .vt-check { display: flex; align-items: center; gap: 6px; font-size: .8rem; white-space: nowrap; cursor: pointer; }
html body .vt-quitar { border: 0; background: none; font-size: 1.2rem; color: #94a3b8; cursor: pointer; }
@media (max-width: 760px) { html body .vt-parte { grid-template-columns: 1fr 1fr; } }

/* ---------------- Roles, permisos y menu ---------------- */
html body .ro-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
html body .ro-rol { background: #fff; border: 1px solid rgb(15 23 42 / .06); border-radius: 20px; padding: 16px 18px; box-shadow: var(--t-sombra1); display: grid; gap: 8px; }
html body .ro-rol-cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
html body .ro-rol p { margin: 0; color: var(--t-txt2); font-size: .86rem; }
html body .ro-rol-pie { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--t-txt2); }
html body .ro-sel { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
html body .ro-ayuda { color: var(--t-txt2); font-size: .85rem; margin: 0 0 12px; }
html body .ro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
html body .ro-perm { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid #eef0f4; cursor: pointer; }
html body .ro-perm span:last-child { display: grid; } html body .ro-perm small { color: var(--t-txt2); font-size: .74rem; }
html body .ro-perm.no { opacity: .5; cursor: not-allowed; }
html body .ro-menu input:not([type=checkbox]), html body .ro-menu select { min-height: 36px; padding: 6px 10px; font-size: .84rem; width: 100%; }
html body .ro-menu td small { display: block; color: var(--t-txt2); font-size: .72rem; margin-top: 2px; }
html body .ro-menu .ro-grupo td { background: var(--t-sup2); font-weight: 600; }
html body .ro-menu .ro-ico { width: 28px; text-align: center; color: var(--t-p); font-size: 1.05rem; }
html body .ro-menu .ro-ico-in { max-width: 150px; } html body .ro-menu .ro-orden { max-width: 80px; }
html body .ro-menu .ro-gr { font-size: .74rem; color: var(--t-txt2); }
html body .ro-paquetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 18px; }
html body .ro-paq { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: #fff; border: 1px solid #eef0f4; box-shadow: var(--t-sombra1); }
html body .ro-paq > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--t-p) 12%, #fff); color: var(--t-p); }
html body .ro-paq > div { flex: 1; display: grid; } html body .ro-paq small { color: var(--t-txt2); font-size: .76rem; }
html body .ro-h3 { font-size: .95rem; margin: 6px 0 10px; }
html body .ro-leg td.ro-legc { white-space: nowrap; } html body .ro-leg td.ro-legc input { margin: 0 3px; }
html body .ro-mods { list-style: none; margin: 0 0 12px; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid #eef0f4; border-radius: 14px; }
html body .ro-mods button { display: grid; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; font: inherit; cursor: pointer; border-bottom: 1px solid #f4f5f8; }
html body .ro-mods button:hover, html body .ro-mods button.on { background: color-mix(in srgb, var(--t-p) 8%, #fff); }
html body .ro-mods small { color: var(--t-txt2); font-size: .74rem; }
html body .bl-nav-ext { font-size: .62rem; opacity: .55; margin-left: auto; }

/* ---------------- Selectores de personas y buscadores (en todo el sistema) ---------------- */
html body .bl-chips { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 10px; cursor: text;
  background: var(--t-campo); border: 1px solid var(--t-borde); border-radius: var(--t-r-campo); transition: background .18s, border-color .18s, box-shadow .18s; }
html body .bl-chips:focus-within { background: #fff; border-color: var(--t-p); box-shadow: var(--t-anillo); }
html body .bl-chips-lista { display: contents; }
html body .bl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--t-borde); font-size: .84rem; font-weight: 600; box-shadow: var(--t-sombra1); }
html body .bl-chip img, html body .bl-chip .bl-av { width: 22px; height: 22px; border-radius: 50%; }
html body .bl-chip button { border: 0; background: rgb(60 64 67 / .08); width: 20px; height: 20px; border-radius: 50%; line-height: 1; cursor: pointer; color: var(--t-txt2); display: grid; place-items: center; padding: 0; }
html body .bl-chip button:hover { background: #fce8e6; color: #d93025; }
html body .bl-chips-input, html body .bl-chips .bl-chips-input:focus { flex: 1; min-width: 160px; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 6px 4px !important; min-height: 0 !important; font: inherit; font-size: .92rem; }
html body :is(.bl-chips-res, .bl-bus-lista) { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2000; margin: 0; padding: 6px; list-style: none; background: #fff;
  border: 1px solid var(--t-borde); border-radius: 18px; box-shadow: var(--t-sombra3); max-height: 340px; overflow-y: auto; }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option], html body .bl-chips-res li[data-i] {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; cursor: pointer; list-style: none; text-align: left; color: var(--t-txt); }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option]::marker { content: none; }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option] > :first-child { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option] > i { background: color-mix(in srgb, var(--t-p) 10%, #fff); color: var(--t-p); font-size: .85rem; }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option] span { display: grid; gap: 1px; min-width: 0; }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option] strong { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option] small { font-size: .76rem; color: var(--t-txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body :is(.bl-chips-res, .bl-bus-lista) li[role=option]:hover, html body :is(.bl-chips-res, .bl-bus-lista) li.act { background: color-mix(in srgb, var(--t-p) 10%, #fff); box-shadow: inset 3px 0 0 var(--t-p); }
html body :is(.bl-chips-res, .bl-bus-lista, .bl-search-res) mark { background: color-mix(in srgb, #fbbc04 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
html body .bl-chips-grupo { list-style: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--t-txt2); padding: 8px 12px 2px; }
html body :is(.bl-chips-vacio, .bl-bus-msg) { list-style: none; padding: 12px 14px; color: var(--t-txt2); font-size: .84rem; line-height: 1.45; }
html body .bl-chips-vacio i { margin-right: 6px; opacity: .6; }
html body .ed-app .bl-chips, html body .ed-app .bl-chips:focus-within { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 34px; } /* en el editor los destinatarios van en la linea, sin recuadro */
/* Selector visual de iconos (Roles, permisos y menu) */
html body .ro-ico-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--t-borde); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .8rem; cursor: pointer; color: var(--t-txt2); }
html body .ro-ico-btn:hover { border-color: var(--t-p); color: var(--t-p); }
html body .ro-menu tr .ro-ico { cursor: pointer; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--t-p) 10%, #fff); }
html body .ro-menu tr.ro-cambio td { background: #fffbe6; }
html body .ro-ic-todos { max-height: 56vh; overflow-y: auto; }
html body .ro-ic-grupo h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--t-txt2); margin: 12px 0 6px; }
html body .ro-ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
html body .ro-ic { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 1px solid #eef0f4; border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--t-txt); transition: background .12s, border-color .12s, transform .12s; }
html body .ro-ic i { font-size: 1.25rem; color: var(--t-p); }
html body .ro-ic span { font-size: .68rem; color: var(--t-txt2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .ro-ic:hover { background: color-mix(in srgb, var(--t-p) 8%, #fff); border-color: var(--t-p); transform: translateY(-1px); }
html body .ro-ic.on { background: color-mix(in srgb, var(--t-p) 14%, #fff); border-color: var(--t-p); }
html body .ro-ic-campo { display: flex; align-items: center; gap: 10px; }
html body .ro-ic-campo i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--t-p) 10%, #fff); color: var(--t-p); font-size: 1.1rem; }
/* Sistema de gestion: areas > opciones y modulos > submodulos */
html body .ro-mod-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 14px; }
html body .ro-mod-barra input[type=search] { flex: 1 1 260px; max-width: 420px; }
html body .ro-mod { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
html body .ro-areas { display: grid; gap: 4px; max-height: 70vh; overflow-y: auto; padding: 6px; background: #fff; border-radius: 20px; box-shadow: var(--t-sombra1, 0 1px 3px rgb(15 23 42 / .08)); position: sticky; top: 76px; }
html body .ro-areas button.ro-area { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--t-txt); }
html body .ro-areas button.ro-area > i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--t-p) 10%, #fff); color: var(--t-p); }
html body .ro-areas button.ro-area strong { display: block; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .ro-areas button.ro-area small { color: var(--t-txt2); font-size: .74rem; }
html body .ro-areas button.ro-area em { font-style: normal; font-size: .68rem; }
html body .ro-areas button.ro-area:hover { background: #f1f3f8; }
html body .ro-areas button.ro-area.on { background: color-mix(in srgb, var(--t-p) 12%, #fff); box-shadow: inset 3px 0 0 var(--t-p); }
html body .ro-areas button.ro-area.off { opacity: .6; }
html body div.ro-area { background: #fff; border-radius: 20px; box-shadow: var(--t-sombra1, 0 1px 3px rgb(15 23 42 / .08)); padding: 16px 18px; min-height: 240px; }
html body .ro-area-vacia { display: grid; place-items: center; gap: 8px; padding: 48px 12px; color: var(--t-txt2); text-align: center; }
html body .ro-area-vacia i { font-size: 2rem; color: var(--t-p); opacity: .6; }
html body .ro-area-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #eef0f4; margin-bottom: 8px; }
html body .ro-area-cab > i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--t-p) 12%, #fff); color: var(--t-p); font-size: 1.2rem; }
html body .ro-area-cab h3 { margin: 0; font-size: 1.1rem; font-weight: 650; }
html body .ro-area-cab small { color: var(--t-txt2); }
html body .ro-area-acc { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
html body .ro-arbol { list-style: none; margin: 0; padding: 0; }
html body .ro-nodo { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 8px 8px calc(8px + var(--n, 0) * 28px); border-radius: 12px; position: relative; }
html body .ro-nodo + .ro-nodo { border-top: 1px solid #f2f4f7; }
html body .ro-nodo:hover { background: #f8f9fc; }
html body .ro-nodo[style*="--n:1"]::before, html body .ro-nodo[style*="--n:2"]::before, html body .ro-nodo[style*="--n:3"]::before { content: ""; position: absolute; left: calc(var(--n) * 28px - 8px); top: 0; bottom: 0; border-left: 2px solid color-mix(in srgb, var(--t-p) 18%, #fff); }
html body .ro-nodo.off { opacity: .55; }
html body .ro-nodo-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #f1f3f8; color: var(--t-p); font-size: .85rem; }
html body .ro-nodo-t strong { display: block; font-size: .9rem; font-weight: 600; }
html body .ro-nodo-t small { display: block; color: var(--t-txt2); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
html body .ro-nodo-t small b { color: var(--t-p); font-weight: 600; }
html body .ro-alerta { color: #b45309; }
html body .ro-nodo-acc { display: flex; gap: 2px; align-items: center; }
html body .ro-pub { display: inline-flex; gap: 4px; align-items: center; font-size: .74rem; color: var(--t-txt2); margin-right: 6px; cursor: pointer; }
html body .ro-sep { grid-template-columns: minmax(0, 1fr) auto; }
html body .ro-sep-t { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-txt2); }
html body .ro-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html body .ro-tipo { display: grid; gap: 2px; padding: 10px 12px; border: 1.5px solid #e6e8ee; border-radius: 14px; cursor: pointer; position: relative; }
html body .ro-tipo input { position: absolute; opacity: 0; }
html body .ro-tipo i { color: var(--t-p); }
html body .ro-tipo strong { font-size: .84rem; }
html body .ro-tipo small { font-size: .72rem; color: var(--t-txt2); font-weight: 400; }
html body .ro-tipo:has(input:checked) { border-color: var(--t-p); background: color-mix(in srgb, var(--t-p) 8%, #fff); }
html body .ro-dos { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
html body [data-ruta] { position: relative; }
html body .ro-rutas { list-style: none; margin: 4px 0 0; padding: 4px; max-height: 220px; overflow-y: auto; border: 1px solid #e6e8ee; border-radius: 14px; background: #fff; box-shadow: var(--t-sombra2, 0 8px 24px rgb(15 23 42 / .12)); }
html body .ro-rutas button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 10px; font: inherit; font-size: .84rem; cursor: pointer; font-family: ui-monospace, monospace; }
html body .ro-rutas button:hover { background: color-mix(in srgb, var(--t-p) 10%, #fff); }
html body .ro-rutas button i { color: #e8a317; }
html body .ro-rutas em { font-family: inherit; font-style: normal; font-size: .7rem; color: var(--t-txt2); margin-left: 6px; }
html body .ro-permn td, html body .ro-permn th { text-align: center; }
html body .ro-permn td:first-child, html body .ro-permn th:first-child { text-align: left; }
@media (max-width: 860px) {
  html body .ro-mod { grid-template-columns: 1fr; }
  html body .ro-areas { position: static; max-height: 260px; }
  html body .ro-tipos { grid-template-columns: 1fr; }
  html body .ro-nodo { grid-template-columns: 30px minmax(0, 1fr); }
  html body .ro-nodo-acc { grid-column: 2; flex-wrap: wrap; }
}
html body .ro-mod-barra input[type=search] { height: 42px; border: 1px solid transparent; border-radius: 999px; background-color: #eef1f6; padding: 0 18px 0 40px; font: inherit; font-size: .9rem; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235f6368' d='M505 442.7 405.3 343c28.4-34.9 45.4-79.4 45.4-127.9C450.7 96.5 354.2 0 235.4 0S20 96.5 20 215.1s96.5 215.1 215.4 215.1c48.5 0 93-17 127.9-45.4l99.7 99.7c4.7 4.7 12.3 4.7 17 0l25-25c4.7-4.7 4.7-12.3 0-17zM235.4 360c-80 0-144.9-64.9-144.9-144.9S155.4 70.2 235.4 70.2s144.9 64.9 144.9 144.9S315.5 360 235.4 360z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 15px center; background-size: 15px; }
html body .ro-mod-barra input[type=search]:focus { background-color: #fff; border-color: var(--t-p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-p) 18%, transparent); }

/* Roles: acceso por unidad (bal_acceso_unidades) */
html body .ro-unid-btn { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; border: 1px solid var(--t-borde); background: var(--t-sup); color: var(--t-txt2);
  border-radius: 999px; padding: 2px 9px; font: inherit; font-size: .72rem; cursor: pointer; }
html body .ro-unid-btn.on { border-color: color-mix(in srgb, var(--t-p) 45%, transparent); color: var(--t-p); background: color-mix(in srgb, var(--t-p) 8%, transparent); font-weight: 600; }
html body .ro-unid-tag { color: var(--t-p); font-weight: 600; }
html body .ro-unid-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--t-borde); }
html body .ro-unid-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
html body .ro-unid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 260px; overflow: auto; }