/* =====================================================================
   Asistente virtual — glassmorphism blanco
   Todo va bajo .ilx para no chocar con los estilos de la portada ni del panel.
   ===================================================================== */

.ilx {
    --ilx-ink: #0f172a;
    --ilx-ink-2: #334155;
    --ilx-ink-3: #64748b;
    --ilx-ink-4: #94a3b8;
    --ilx-line: rgba(148, 163, 184, .28);
    --ilx-glass: rgba(255, 255, 255, .56);
    --ilx-glass-2: rgba(255, 255, 255, .74);
    --ilx-glass-3: rgba(255, 255, 255, .9);
    --ilx-edge: rgba(255, 255, 255, .85);
    --ilx-blue: #3b82f6;
    --ilx-indigo: #6366f1;
    --ilx-violet: #8b5cf6;
    --ilx-grad: linear-gradient(135deg, #3b82f6 0%, #6366f1 55%, #8b5cf6 100%);
    --ilx-ok: #059669;
    --ilx-ok-bg: rgba(16, 185, 129, .12);
    --ilx-warn: #b45309;
    --ilx-warn-bg: rgba(245, 158, 11, .14);
    --ilx-bad: #dc2626;
    --ilx-bad-bg: rgba(239, 68, 68, .11);
    --ilx-mute-bg: rgba(100, 116, 139, .1);
    --ilx-shadow: 0 30px 80px -20px rgba(30, 41, 90, .35), 0 12px 32px -12px rgba(30, 41, 90, .18);
    --ilx-r: 22px;
    --ilx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Debajo de los modales de las páginas (z-index >= 1000), encima del contenido */
    z-index: 900;
    font-family: var(--ilx-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ilx-ink);
    -webkit-font-smoothing: antialiased;
}

.ilx,
.ilx *,
.ilx *::before,
.ilx *::after {
    box-sizing: border-box;
}

.ilx :where(h2, h3, p, ul, ol, li, button, textarea, a, strong, span, i, em) {
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.ilx :where(button) {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.ilx svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.ilx [hidden] {
    display: none !important;
}

/* Abierto, el chat pasa al frente (sobre avisos y menús desplegables de la página) */
.ilx.is-open {
    z-index: 2100;
}

/* ---------------------------------------------------------------------
   Botón flotante
   --------------------------------------------------------------------- */
.ilx-launcher {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.ilx-launcher:hover {
    transform: translateY(-3px) scale(1.04);
}

.ilx-launcher:active {
    transform: scale(.96);
}

.ilx-launcher:focus-visible {
    outline: 3px solid rgba(99, 102, 241, .45);
    outline-offset: 4px;
}

/* Anillo con gradiente que gira */
.ilx-launcher-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #60a5fa, #818cf8, #c4b5fd, #fdba74, #60a5fa);
    animation: ilx-giro 6s linear infinite;
    box-shadow: 0 14px 34px -8px rgba(79, 70, 229, .55), 0 4px 12px rgba(79, 70, 229, .25);
}

.ilx-launcher-ring::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(129, 140, 248, .45);
    animation: ilx-pulso 2.8s ease-out infinite;
}

.ilx-launcher-core {
    position: absolute;
    inset: 3px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    color: var(--ilx-indigo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -8px 16px rgba(99, 102, 241, .08);
}

.ilx-launcher-core svg {
    position: absolute;
    width: 22px;
    height: 22px;
    transition: transform .35s ease, opacity .25s ease;
}

/* Logo del asistente: llena el círculo (el original trae margen blanco) */
.ilx-launcher-core img.ilx-ico-chat {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.ilx-ico-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

.ilx.is-open .ilx-ico-chat {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}

.ilx.is-open .ilx-ico-close {
    opacity: 1;
    transform: none;
}

.ilx.is-open .ilx-launcher-ring::after {
    animation: none;
    opacity: 0;
}

.ilx-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #f43f5e, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(239, 68, 68, .4);
    animation: ilx-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

/* Burbuja de invitación */
.ilx-nudge {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 220px;
    padding: 11px 30px 11px 13px;
    border-radius: 20px 20px 6px 20px;
    background: var(--ilx-glass-2);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--ilx-edge);
    box-shadow: 0 18px 40px -14px rgba(30, 41, 90, .35);
    cursor: pointer;
    animation: ilx-entrar .5s cubic-bezier(.22, 1, .36, 1);
}

.ilx-nudge strong {
    display: block;
    font-weight: 700;
    font-size: 11.5px;
    color: var(--ilx-ink);
}

.ilx-nudge span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ilx-ink-2);
}

.ilx-nudge-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ilx-ink-3);
}

.ilx-nudge-x:hover {
    background: rgba(15, 23, 42, .06);
}

.ilx-nudge-x svg {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------------
   Panel
   --------------------------------------------------------------------- */
.ilx-panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 350px;
    height: min(560px, calc(100vh - 160px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--ilx-r);
    background: var(--ilx-glass);
    -webkit-backdrop-filter: blur(30px) saturate(175%);
    backdrop-filter: blur(30px) saturate(175%);
    border: 1px solid var(--ilx-edge);
    box-shadow: var(--ilx-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
    transform-origin: bottom right;
    animation: ilx-abrir .42s cubic-bezier(.22, 1, .36, 1);
}

.ilx-panel.is-closing {
    animation: ilx-cerrar .22s ease-in forwards;
}

.ilx.is-wide .ilx-panel {
    width: 480px;
    height: min(700px, calc(100vh - 160px));
}

/* Luces difuminadas detrás del vidrio */
.ilx-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ilx-aurora i {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .55;
    animation: ilx-flotar 18s ease-in-out infinite alternate;
}

.ilx-aurora i:nth-child(1) {
    width: 260px;
    height: 260px;
    top: -90px;
    left: -70px;
    background: #bfdbfe;
}

.ilx-aurora i:nth-child(2) {
    width: 240px;
    height: 240px;
    top: 30%;
    right: -110px;
    background: #ddd6fe;
    animation-duration: 22s;
}

.ilx-aurora i:nth-child(3) {
    width: 280px;
    height: 220px;
    bottom: -100px;
    left: 10%;
    background: #fed7aa;
    opacity: .45;
    animation-duration: 26s;
}

.ilx-head,
.ilx-body,
.ilx-sugs,
.ilx-form {
    position: relative;
    z-index: 1;
}

/* Encabezado */
.ilx-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px 10px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 1px 0 rgba(148, 163, 184, .15);
}

.ilx-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 8px 18px -6px rgba(99, 102, 241, .6);
}

.ilx-avatar img {
    width: 34px;
    height: 34px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .25);
}

.ilx-avatar svg {
    width: 34px;
    height: 34px;
    stroke: none;
}

.ilx-online {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
}

.ilx-head-txt {
    flex: 1;
    min-width: 0;
}

.ilx-head-txt h2 {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ilx-ink);
}

.ilx-head-txt p {
    font-size: 10px;
    color: var(--ilx-ink-3);
    transition: color .2s;
}

.ilx-head-txt p.is-typing {
    color: var(--ilx-indigo);
    font-weight: 500;
}

.ilx-head-btns {
    display: flex;
    gap: 2px;
}

.ilx-hbtn {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--ilx-ink-3);
    transition: background .2s, color .2s;
}

.ilx-hbtn:hover {
    background: rgba(255, 255, 255, .8);
    color: var(--ilx-ink);
}

.ilx-hbtn:focus-visible {
    outline: 2px solid rgba(99, 102, 241, .5);
}

.ilx-hbtn svg {
    width: 15px;
    height: 15px;
}

/* ---------------------------------------------------------------------
   Mensajes
   --------------------------------------------------------------------- */
.ilx-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 12px 6px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .45) transparent;
}

.ilx-body::-webkit-scrollbar {
    width: 6px;
}

.ilx-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .45);
    border-radius: 6px;
}

.ilx-day {
    width: max-content;
    margin: 0 auto 14px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .8);
    font-size: 10px;
    font-weight: 600;
    color: var(--ilx-ink-3);
    letter-spacing: .02em;
}

.ilx-msg {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    animation: ilx-entrar .38s cubic-bezier(.22, 1, .36, 1) both;
}

.ilx-msg.is-bot {
    align-items: flex-end;
}

.ilx-msg.is-user {
    justify-content: flex-end;
}

.ilx-msg-av {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
}

.ilx-msg-av img {
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .25);
}

.ilx-msg-av svg {
    width: 22px;
    height: 22px;
    stroke: none;
}

.ilx-msg-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: calc(100% - 30px);
}

/* El bot usa todo el ancho: tablas, alertas y tarjetas nunca se salen del panel */
.ilx-msg.is-bot .ilx-msg-col {
    flex: 1;
}

.ilx-msg-col > * {
    max-width: 100%;
    min-width: 0;
}

.ilx-msg.is-user .ilx-msg-col {
    align-items: flex-end;
    max-width: 82%;
}

.ilx-bubble {
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.is-bot .ilx-bubble {
    background: var(--ilx-glass-3);
    border: 1px solid rgba(255, 255, 255, .95);
    color: var(--ilx-ink);
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 10px -4px rgba(30, 41, 90, .12);
}

.is-user .ilx-bubble {
    background: var(--ilx-grad);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .7);
}

.ilx-bubble strong {
    font-weight: 700;
}

.ilx-bubble em {
    font-style: italic;
}

.ilx-bubble a {
    color: var(--ilx-indigo);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(99, 102, 241, .35);
    text-underline-offset: 2px;
}

.is-user .ilx-bubble a {
    color: #fff;
}

.ilx-bubble ul {
    margin: 4px 0 2px 18px;
}

.ilx-bubble li {
    list-style: disc;
    margin: 2px 0;
}

.ilx-time {
    font-size: 10px;
    color: var(--ilx-ink-4);
    padding: 0 4px;
}

/* Escribiendo… */
.ilx-typing {
    display: inline-flex;
    gap: 4px;
    padding: 14px 16px;
}

.ilx-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ilx-indigo);
    opacity: .35;
    animation: ilx-punto 1.2s ease-in-out infinite;
}

.ilx-typing i:nth-child(2) {
    animation-delay: .15s;
}

.ilx-typing i:nth-child(3) {
    animation-delay: .3s;
}

/* ---------------------------------------------------------------------
   Bloques enriquecidos
   --------------------------------------------------------------------- */
.ilx-card {
    background: var(--ilx-glass-2);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 18px;
    box-shadow: 0 6px 18px -10px rgba(30, 41, 90, .22);
}

/* Carrusel de convocatorias */
.ilx-carousel {
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .4) transparent;
}

.ilx-carousel.is-single {
    overflow: visible;
}

.ilx-conv {
    flex: 0 0 228px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px;
    scroll-snap-align: start;
    transition: transform .25s ease, box-shadow .25s ease;
}

.ilx-carousel.is-single .ilx-conv {
    flex-basis: 100%;
}

.ilx-conv:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px rgba(30, 41, 90, .35);
}

.ilx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ilx-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: var(--ilx-mute-bg);
    color: var(--ilx-ink-2);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ilx-tag.is-abierta,
.ilx-tag.is-ok {
    background: var(--ilx-ok-bg);
    color: var(--ilx-ok);
}

.ilx-tag.is-abierta::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ilx-latido 1.6s ease-in-out infinite;
}

.ilx-tag.is-proxima,
.ilx-tag.is-warn {
    background: var(--ilx-warn-bg);
    color: var(--ilx-warn);
}

.ilx-tag.is-bad {
    background: var(--ilx-bad-bg);
    color: var(--ilx-bad);
}

.ilx-tag.is-info {
    background: rgba(99, 102, 241, .1);
    color: var(--ilx-indigo);
}

.ilx-conv h3 {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ilx-ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ilx-meta {
    display: grid;
    gap: 4px;
    font-size: 10.5px;
    color: var(--ilx-ink-2);
}

.ilx-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ilx-meta span b {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ilx-meta svg {
    width: 14px;
    height: 14px;
    color: var(--ilx-ink-4);
}

.ilx-deadline {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 12px;
    background: rgba(99, 102, 241, .07);
    color: var(--ilx-indigo);
    font-size: 10.5px;
    font-weight: 600;
}

.ilx-deadline svg {
    width: 15px;
    height: 15px;
}

.ilx-deadline small {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.ilx-deadline.is-urgent {
    background: var(--ilx-bad-bg);
    color: var(--ilx-bad);
}

.ilx-deadline.is-muted {
    background: var(--ilx-mute-bg);
    color: var(--ilx-ink-3);
}

.ilx-conv-btns {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

/* Botones */
.ilx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(148, 163, 184, .3);
    color: var(--ilx-ink-2) !important;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}

.ilx-btn:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, .45);
    color: var(--ilx-indigo) !important;
    transform: translateY(-1px);
}

.ilx-btn.is-primary {
    background: var(--ilx-grad);
    border-color: transparent;
    color: #fff !important;
    box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .8);
}

.ilx-btn.is-primary:hover {
    color: #fff !important;
    box-shadow: 0 12px 22px -10px rgba(79, 70, 229, .9);
}

.ilx-btn svg {
    width: 15px;
    height: 15px;
}

.ilx-btn.is-grow {
    flex: 1;
}

.ilx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Filas (cargos, listas, documentos) */
.ilx-rows {
    width: 100%;
    overflow: hidden;
    padding: 4px;
}

.ilx-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px;
    border-radius: 13px;
    color: inherit;
    text-decoration: none !important;
    transition: background .2s;
}

.ilx-row+.ilx-row {
    border-top: 1px solid var(--ilx-line);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

a.ilx-row:hover {
    background: rgba(255, 255, 255, .9);
}

.ilx-row-ico {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(99, 102, 241, .1);
    color: var(--ilx-indigo);
}

.ilx-row-ico svg {
    width: 16px;
    height: 16px;
}

.ilx-row-ico.is-pdf {
    background: var(--ilx-bad-bg);
    color: var(--ilx-bad);
}

.ilx-row-main {
    flex: 1;
    min-width: 0;
}

.ilx-row-main strong {
    display: block;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--ilx-ink);
}

.ilx-row-main p {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--ilx-ink-3);
}

.ilx-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
}

.ilx-money {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ilx-ok);
    white-space: nowrap;
}

.ilx-row-go {
    align-self: center;
    color: var(--ilx-ink-4);
}

.ilx-row-go svg {
    width: 16px;
    height: 16px;
}

a.ilx-row:hover .ilx-row-go {
    color: var(--ilx-indigo);
    transform: translateX(2px);
}

.ilx-new-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--ilx-indigo);
    vertical-align: middle;
}

/* Pasos */
.ilx-steps {
    width: 100%;
    padding: 14px 14px 6px;
    counter-reset: ilx-paso;
}

.ilx-step {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
}

.ilx-step::before {
    counter-increment: ilx-paso;
    content: counter(ilx-paso);
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ilx-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .7);
    position: relative;
    z-index: 1;
}

.ilx-step.is-done::before {
    content: "";
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat,
        linear-gradient(135deg, #10b981, #059669);
}

.ilx-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 12.5px;
    top: 28px;
    bottom: 2px;
    width: 1.5px;
    background: linear-gradient(rgba(99, 102, 241, .4), rgba(99, 102, 241, .08));
}

.ilx-step strong {
    display: block;
    font-size: 11.5px;
    font-weight: 650;
    color: var(--ilx-ink);
    padding-top: 3px;
}

.ilx-step p {
    font-size: 10.5px;
    color: var(--ilx-ink-3);
    line-height: 1.45;
}

/* Cronograma */
.ilx-timeline {
    width: 100%;
    padding: 12px 14px 4px;
}

.ilx-tl {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
}

.ilx-tl:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: rgba(148, 163, 184, .3);
}

.ilx-tl.is-finalizado:not(:last-child)::after {
    background: rgba(16, 185, 129, .45);
}

.ilx-tl-dot {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, .6);
    background: #fff;
}

.ilx-tl.is-finalizado .ilx-tl-dot {
    border-color: #10b981;
    background: #10b981;
    box-shadow: inset 0 0 0 3px #fff;
}

.ilx-tl.is-en_curso .ilx-tl-dot {
    border-color: var(--ilx-indigo);
    background: var(--ilx-indigo);
    box-shadow: 0 0 0 5px rgba(99, 102, 241, .18);
    animation: ilx-latido 1.8s ease-in-out infinite;
}

.ilx-tl.is-cancelado .ilx-tl-dot {
    border-color: var(--ilx-bad);
}

.ilx-tl-main {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.ilx-tl-main strong {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ilx-ink);
    line-height: 1.35;
}

.ilx-tl.is-finalizado .ilx-tl-main strong {
    color: var(--ilx-ink-3);
}

.ilx-tl.is-en_curso .ilx-tl-main strong {
    color: var(--ilx-indigo);
}

.ilx-tl-main small {
    font-size: 10.5px;
    color: var(--ilx-ink-3);
    white-space: nowrap;
    text-align: right;
}

.ilx-now {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .12);
    color: var(--ilx-indigo);
    font-size: 10px;
    font-weight: 700;
    vertical-align: 1px;
}

/* Postulaciones */
.ilx-post {
    width: 100%;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.ilx-post-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.ilx-post-head strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.ilx-post-head p {
    margin-top: 2px;
    font-size: 11px;
    color: var(--ilx-ink-3);
    line-height: 1.4;
}

.ilx-progress {
    display: grid;
    gap: 5px;
}

.ilx-progress-top {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--ilx-ink-2);
}

.ilx-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .22);
    overflow: hidden;
}

.ilx-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--ilx-grad);
    transition: width 1s cubic-bezier(.22, 1, .36, 1);
}

.ilx-bar.is-full i {
    background: linear-gradient(90deg, #10b981, #059669);
}

.ilx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ilx-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--ilx-ink-2);
}

.ilx-note svg {
    width: 14px;
    height: 14px;
    color: var(--ilx-indigo);
}

/* Reclamos */
.ilx-rec {
    width: 100%;
    padding: 14px;
    display: grid;
    gap: 10px;
}

.ilx-code {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ilx-indigo);
}

.ilx-stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ilx-stepper div {
    display: grid;
    gap: 5px;
    font-size: 10px;
    color: var(--ilx-ink-3);
    line-height: 1.3;
}

.ilx-stepper div::before {
    content: "";
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .28);
}

.ilx-stepper .is-done::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.ilx-stepper .is-current::before {
    background: var(--ilx-grad);
    animation: ilx-latido 1.8s ease-in-out infinite;
}

.ilx-stepper b {
    font-weight: 650;
    color: var(--ilx-ink-2);
}

/* KPIs: tarjetas con icono, tono y enlace opcional */
.ilx-kpis {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.ilx.is-wide .ilx-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ilx-kpi {
    position: relative;
    display: block;
    padding: 10px 11px 9px;
    color: inherit;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}

a.ilx-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -14px rgba(30, 41, 90, .4);
}

.ilx-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ilx-grad);
}

.ilx-kpi.is-ok::before { background: linear-gradient(#10b981, #059669); }
.ilx-kpi.is-warn::before { background: linear-gradient(#f59e0b, #d97706); }
.ilx-kpi.is-bad::before { background: linear-gradient(#f43f5e, #dc2626); }

.ilx-kpi-ico {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(99, 102, 241, .09);
    color: var(--ilx-indigo);
}

.ilx-kpi.is-ok .ilx-kpi-ico { background: var(--ilx-ok-bg); color: var(--ilx-ok); }
.ilx-kpi.is-warn .ilx-kpi-ico { background: var(--ilx-warn-bg); color: var(--ilx-warn); }
.ilx-kpi.is-bad .ilx-kpi-ico { background: var(--ilx-bad-bg); color: var(--ilx-bad); }

.ilx-kpi-ico svg {
    width: 13px;
    height: 13px;
}

.ilx-kpi b {
    display: block;
    font-size: 18.5px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ilx-ink);
    font-variant-numeric: tabular-nums;
}

.ilx-kpi span:not(.ilx-kpi-ico) {
    display: block;
    margin-top: 1px;
    padding-right: 20px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--ilx-ink-3);
}

/* Insignias compactas (tablas, fases, perfil) */
.ilx-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: rgba(99, 102, 241, .1);
    color: var(--ilx-indigo);
    font-variant-numeric: tabular-nums;
}

.ilx-pill svg { width: 10px; height: 10px; }
.ilx-pill.is-ok { background: var(--ilx-ok-bg); color: var(--ilx-ok); }
.ilx-pill.is-warn { background: var(--ilx-warn-bg); color: var(--ilx-warn); }
.ilx-pill.is-bad { background: var(--ilx-bad-bg); color: var(--ilx-bad); }
.ilx-pill.is-mute { background: var(--ilx-mute-bg); color: var(--ilx-ink-3); }

/* Tabla */
.ilx-table-wrap {
    width: 100%;
    overflow: hidden;
    padding: 2px;
}

.ilx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.ilx-table th {
    padding: 7px 8px 6px;
    text-align: left;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ilx-ink-4);
    border-bottom: 1px solid var(--ilx-line);
    white-space: nowrap;
}

.ilx-table td {
    padding: 7px 8px;
    vertical-align: middle;
    color: var(--ilx-ink);
    line-height: 1.35;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.ilx-table tbody tr:last-child td {
    border-bottom: 0;
}

.ilx-table td small {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    color: var(--ilx-ink-3);
}

.ilx-table .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ilx-table tr[data-href] {
    cursor: pointer;
    transition: background .15s;
}

.ilx-table tr[data-href]:hover,
.ilx-table tr[data-href]:focus-visible {
    background: rgba(255, 255, 255, .95);
    outline: none;
}

.ilx-td-go {
    width: 18px;
    padding-left: 0 !important;
    color: var(--ilx-ink-4);
}

.ilx-td-go svg { width: 13px; height: 13px; }

.ilx-table tr[data-href]:hover .ilx-td-go {
    color: var(--ilx-indigo);
}

/* Barras horizontales */
.ilx-bars {
    width: 100%;
    display: grid;
    gap: 9px;
    padding: 11px 12px 12px;
}

.ilx-bars h4,
.ilx-perfil-sec h4,
.ilx-persona-posts h4 {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ilx-ink-4);
}

.ilx-bars {
    grid-template-columns: minmax(0, 1fr);
}

.ilx-hbar {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.ilx-hbar-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--ilx-ink-2);
}

.ilx-hbar-top span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ilx-hbar-top b {
    font-weight: 700;
    color: var(--ilx-ink);
    font-variant-numeric: tabular-nums;
}

.ilx-bar.is-violeta i { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.ilx-bar.is-rojo i { background: linear-gradient(90deg, #fb7185, #dc2626); }
.ilx-bar.is-mute i { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
.ilx-bars .ilx-bar,
.ilx-fase .ilx-bar { height: 6px; }

/* Avance por fase */
.ilx-fases {
    width: 100%;
    display: grid;
    gap: 10px;
    padding: 11px 12px 12px;
}

.ilx-fases-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ilx-fases-head strong {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}

.ilx-fases-head small {
    display: block;
    font-size: 10px;
    color: var(--ilx-indigo);
    font-weight: 600;
}

.ilx-fases-head .ilx-btn {
    min-height: 26px;
    padding: 4px 9px;
    font-size: 10.5px;
}

.ilx-fases-aviso {
    font-size: 11px;
    color: var(--ilx-ink-3);
}

.ilx-fase {
    display: grid;
    gap: 4px;
}

.ilx-fase-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ilx-ink-2);
}

.ilx-fase small {
    font-size: 10px;
    color: var(--ilx-ink-3);
}

/* Alertas */
.ilx-alerts {
    width: 100%;
    display: grid;
    gap: 6px;
}

.ilx-alert {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 13px;
    background: var(--ilx-glass-2);
    border: 1px solid rgba(255, 255, 255, .95);
    border-left: 3px solid var(--ilx-indigo);
    box-shadow: 0 4px 14px -10px rgba(30, 41, 90, .3);
    color: inherit;
    text-decoration: none !important;
    transition: transform .2s, background .2s;
}

a.ilx-alert:hover {
    background: #fff;
    transform: translateX(2px);
}

.ilx-alert.is-bad { border-left-color: #ef4444; }
.ilx-alert.is-warn { border-left-color: #f59e0b; }
.ilx-alert.is-ok { border-left-color: #10b981; }
.ilx-alert.is-mute { border-left-color: #94a3b8; }

.ilx-alert-ico {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(99, 102, 241, .1);
    color: var(--ilx-indigo);
}

.ilx-alert.is-bad .ilx-alert-ico { background: var(--ilx-bad-bg); color: var(--ilx-bad); }
.ilx-alert.is-warn .ilx-alert-ico { background: var(--ilx-warn-bg); color: var(--ilx-warn); }
.ilx-alert.is-ok .ilx-alert-ico { background: var(--ilx-ok-bg); color: var(--ilx-ok); }
.ilx-alert.is-mute .ilx-alert-ico { background: var(--ilx-mute-bg); color: var(--ilx-ink-3); }

.ilx-alert-ico svg { width: 14px; height: 14px; }

.ilx-alert-txt {
    flex: 1;
    min-width: 0;
}

.ilx-alert-txt strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.ilx-alert-txt small {
    display: block;
    font-size: 10px;
    line-height: 1.35;
    color: var(--ilx-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Perfil y personas */
.ilx-perfil,
.ilx-persona {
    width: 100%;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.ilx-perfil-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ilx-perfil-head strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
}

.ilx-perfil-av {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--ilx-grad);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .7);
}

.ilx-perfil-sec {
    display: grid;
    gap: 5px;
    padding-top: 9px;
    border-top: 1px solid var(--ilx-line);
}

details.ilx-perfil-sec summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
}

details.ilx-perfil-sec summary::-webkit-details-marker { display: none; }

details.ilx-perfil-sec summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 1.6px solid var(--ilx-ink-4);
    border-bottom: 1.6px solid var(--ilx-ink-4);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
}

details.ilx-perfil-sec[open] summary::after {
    transform: rotate(-135deg);
}

details.ilx-perfil-sec summary h4 {
    flex: 1;
}

.ilx-perm {
    display: flex;
    gap: 7px;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--ilx-ink-3);
}

.ilx-perm svg {
    width: 13px;
    height: 13px;
    margin-top: 1px;
    color: var(--ilx-ok);
}

.ilx-perm.is-critico svg { color: var(--ilx-bad); }

.ilx-perm b {
    display: block;
    font-weight: 650;
    color: var(--ilx-ink);
}

.ilx-perfil-com {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    transition: background .15s;
}

.ilx-perfil-com:hover { background: rgba(255, 255, 255, .9); }
.ilx-perfil-com svg { width: 15px; height: 15px; color: var(--ilx-indigo); }

.ilx-perfil-com small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--ilx-ink-3);
}

.ilx-persona-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    font-size: 10px;
    color: var(--ilx-ink-3);
}

.ilx-persona-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ilx-persona-meta svg { width: 11px; height: 11px; }

.ilx-persona-posts {
    display: grid;
    gap: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--ilx-line);
}

.ilx-persona-post {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none !important;
    font-size: 11px;
    transition: background .15s;
}

a.ilx-persona-post:hover { background: rgba(255, 255, 255, .9); }

.ilx-persona-post b {
    display: block;
    font-weight: 650;
    line-height: 1.3;
}

.ilx-persona-post small {
    display: block;
    font-size: 10px;
    color: var(--ilx-ink-3);
}


/* Textos del asistente justificados (con guiones para evitar huecos) */
.is-bot .ilx-bubble.is-largo,
.ilx-step p,
.ilx-row-main p,
.ilx-fases-aviso {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* "Te llevo a..." */
.ilx-go {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-left: 3px solid var(--ilx-indigo);
}

.ilx-go-ico {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ilx-grad);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .7);
}

.ilx-go-ico svg { width: 16px; height: 16px; }

.ilx-go-txt {
    flex: 1;
    min-width: 0;
}

.ilx-go-txt strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.ilx-go-txt small {
    display: block;
    font-size: 10.5px;
    color: var(--ilx-ink-3);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ilx-go-cuenta {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    color: var(--ilx-indigo);
}

.ilx-go-cuenta:empty { display: none; }

.ilx-go-btns {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.ilx-go-btns .ilx-btn {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 11px;
}

/* Elegir convocatoria */
.ilx-pick {
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: transparent;
}

.ilx-pick:hover { background: rgba(255, 255, 255, .9); }
.ilx-pick:hover .ilx-row-go { color: var(--ilx-indigo); }

/* Documentos del CV y su revisión */
.ilx-docs {
    width: 100%;
    display: grid;
    padding: 4px;
}

.ilx-doc {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 12px;
}

.ilx-doc + .ilx-doc {
    border-top: 1px solid var(--ilx-line);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ilx-doc.is-observado {
    background: linear-gradient(90deg, rgba(239, 68, 68, .06), transparent 70%);
}

.ilx-doc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ilx-doc-sec {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ilx-ink-4);
}

.ilx-doc strong {
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
}

.ilx-doc small {
    font-size: 10.5px;
    color: var(--ilx-ink-3);
}

.ilx-doc-obs {
    display: flex;
    gap: 6px;
    margin-top: 3px;
    padding: 6px 8px;
    border-radius: 9px;
    background: var(--ilx-bad-bg);
    color: #991b1b;
    font-size: 11px;
    line-height: 1.45;
    text-align: justify;
    hyphens: auto;
}

.ilx-doc-obs svg {
    width: 13px;
    height: 13px;
    margin-top: 1px;
}

.ilx-doc-obs b { font-weight: 700; }

.ilx-doc-file {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ilx-indigo) !important;
    text-decoration: none !important;
}

.ilx-doc-file:hover { text-decoration: underline !important; }
.ilx-doc-file svg { width: 13px; height: 13px; }

/* Debajo de cada respuesta: escuchar y "¿te sirvió?" */
.ilx-extra {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-size: 10.5px;
    color: var(--ilx-ink-4);
}

.ilx-feedback {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.ilx-mini {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--ilx-ink-4);
    transition: background .15s, color .15s;
}

.ilx-mini:hover,
.ilx-mini.is-on {
    background: rgba(99, 102, 241, .1);
    color: var(--ilx-indigo);
}

.ilx-mini svg {
    width: 13px;
    height: 13px;
}

/* Acción con confirmación */
.ilx-confirm {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-left: 3px solid var(--ilx-indigo);
}

.ilx-confirm-ico {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(99, 102, 241, .1);
    color: var(--ilx-indigo);
}

.ilx-confirm-ico svg { width: 14px; height: 14px; }

.ilx-confirm.is-hecho {
    opacity: .6;
    border-left-color: var(--ilx-ink-4);
}

.ilx-confirm .ilx-btn:disabled {
    opacity: .5;
    cursor: default;
    transform: none;
}

.ilx-confirm-nota {
    font-size: 11.5px;
    color: var(--ilx-ink-3);
}

/* Alto contraste: fondos sólidos, texto oscuro y bordes marcados */
.ilx.is-contraste {
    --ilx-ink: #000;
    --ilx-ink-2: #111827;
    --ilx-ink-3: #1f2937;
    --ilx-ink-4: #374151;
    --ilx-line: rgba(0, 0, 0, .35);
    --ilx-indigo: #3730a3;
}

.ilx.is-contraste .ilx-panel {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 2px solid #111827;
}

.ilx.is-contraste .ilx-aurora { display: none; }

.ilx.is-contraste .is-bot .ilx-bubble,
.ilx.is-contraste .ilx-card,
.ilx.is-contraste .ilx-alert {
    background: #fff;
    border: 1.5px solid #111827;
    box-shadow: none;
}

.ilx.is-contraste .is-user .ilx-bubble {
    background: #1e1b4b;
}

.ilx.is-contraste .ilx-bubble {
    font-size: 13.5px;
}

.ilx.is-contraste #ilxContraste {
    background: #111827;
    color: #fff;
}

/* Ajustes de voz */
.ilx-voz-panel {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 10px 12px 12px;
    border-radius: 14px;
    background: var(--ilx-glass-3);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 12px 28px -14px rgba(30, 41, 90, .4);
    animation: ilx-entrar .3s cubic-bezier(.22, 1, .36, 1);
}

.ilx-voz-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ilx-voz-cab strong { font-size: 12.5px; font-weight: 700; }

.ilx-voz-campo {
    display: grid;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ilx-ink-3);
}

.ilx-voz-campo select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--ilx-line);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-weight: 500;
    color: var(--ilx-ink);
}

.ilx-voz-campo input[type=range] { width: 100%; accent-color: var(--ilx-indigo); }

.ilx-voz-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--ilx-ink-2);
}

.ilx-voz-check input { accent-color: var(--ilx-indigo); }

.ilx-voz-nota {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--ilx-ink-3);
    text-align: justify;
}

/* ---------------------------------------------------------------------
   Sugerencias y entrada
   --------------------------------------------------------------------- */
.ilx-sugs {
    display: flex;
    gap: 7px;
    padding: 4px 12px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
}

.ilx-sugs::-webkit-scrollbar {
    display: none;
}

.ilx-sugs:empty {
    display: none;
}

.ilx-sug {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(99, 102, 241, .22);
    color: var(--ilx-indigo);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .2s, transform .2s, box-shadow .2s;
    animation: ilx-entrar .4s cubic-bezier(.22, 1, .36, 1) both;
}

.ilx-sug:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .6);
}

.ilx-form {
    padding: 2px 10px 9px;
}

.ilx-input {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px 4px 4px 13px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 24px -14px rgba(30, 41, 90, .35), inset 0 0 0 1px rgba(148, 163, 184, .18);
    transition: box-shadow .2s;
}

.ilx-input:focus-within {
    box-shadow: 0 8px 24px -14px rgba(30, 41, 90, .35), inset 0 0 0 1.5px rgba(99, 102, 241, .55), 0 0 0 4px rgba(99, 102, 241, .1);
}

.ilx-input textarea {
    flex: 1;
    min-width: 0;
    max-height: 100px;
    padding: 6px 0;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: var(--ilx-ink);
    font-size: 12px;
    line-height: 1.45;
    box-shadow: none;
}

.ilx-input textarea::placeholder {
    color: var(--ilx-ink-4);
}

.ilx-mic,
.ilx-send {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: transform .2s, background .2s, opacity .2s, box-shadow .2s;
}

.ilx-mic {
    color: var(--ilx-ink-3);
}

.ilx-mic:hover {
    background: rgba(99, 102, 241, .08);
    color: var(--ilx-indigo);
}

.ilx-mic.is-on {
    background: var(--ilx-bad-bg);
    color: var(--ilx-bad);
    animation: ilx-latido 1.2s ease-in-out infinite;
}

.ilx-send {
    background: var(--ilx-grad);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .8);
}

.ilx-send:hover:not(:disabled) {
    transform: scale(1.06);
}

.ilx-send:disabled {
    opacity: .38;
    cursor: default;
    box-shadow: none;
}

.ilx-send svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.ilx-legal {
    margin-top: 5px;
    text-align: center;
    font-size: 9.5px;
    color: var(--ilx-ink-4);
    line-height: 1.35;
}

/* ---------------------------------------------------------------------
   Móvil: panel a pantalla completa
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
    .ilx {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .ilx-launcher {
        width: 52px;
        height: 52px;
    }

    .ilx-bubble {
        font-size: 14px;
    }

    .ilx.is-open {
        z-index: 10050;
    }

    .ilx.is-open .ilx-launcher {
        display: none;
    }

    .ilx-panel,
    .ilx.is-wide .ilx-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        background: rgba(255, 255, 255, .7);
        transform-origin: bottom center;
    }

    .ilx-head {
        padding-top: calc(14px + env(safe-area-inset-top));
    }

    .ilx-form {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .ilx-only-desk {
        display: none;
    }

    .ilx-nudge {
        width: 220px;
        bottom: 70px;
    }

    .ilx-input textarea {
        font-size: 16px;
    }
}

/* Navegadores sin desenfoque: vidrio más opaco para mantener la legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ilx-panel {
        background: rgba(248, 250, 255, .97);
    }

    .ilx-nudge,
    .ilx-launcher-core {
        background: rgba(255, 255, 255, .97);
    }
}

/* ---------------------------------------------------------------------
   Animaciones
   --------------------------------------------------------------------- */
@keyframes ilx-giro {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ilx-pulso {
    0% {
        transform: scale(.92);
        opacity: .9;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

@keyframes ilx-pop {
    from {
        transform: scale(0);
    }
}

@keyframes ilx-abrir {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.94);
    }
}

@keyframes ilx-cerrar {
    to {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }
}

@keyframes ilx-entrar {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes ilx-flotar {
    to {
        transform: translate(40px, 30px) scale(1.15);
    }
}

@keyframes ilx-punto {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------
   Voz: barra "Edu está hablando", resaltado de lo que se lee, voz natural
   --------------------------------------------------------------------- */
.ilx-hablando {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 6px;
    padding: 5px 6px 5px 11px;
    border-radius: 999px;
    background: var(--ilx-glass-3);
    border: 1px solid rgba(99, 102, 241, .22);
    box-shadow: 0 8px 20px -14px rgba(79, 70, 229, .6);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ilx-indigo);
    animation: ilx-entrar .3s cubic-bezier(.22, 1, .36, 1);
}

.ilx-hablando[hidden] { display: none; }
.ilx-hablando-txt { flex: 1; }
.ilx-hablando .ilx-mini { color: var(--ilx-indigo); }
.ilx-hablando .ilx-i-seguir,
.ilx-hablando.is-pausado .ilx-i-pausa { display: none; }
.ilx-hablando.is-pausado .ilx-i-seguir { display: block; fill: currentColor; }
#ilxCallar svg { fill: currentColor; }

.ilx-ondas {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 14px;
}

.ilx-ondas i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--ilx-grad);
    transform-origin: center;
    animation: ilx-onda 1s ease-in-out infinite;
}

.ilx-ondas i:nth-child(2) { animation-delay: -.25s; }
.ilx-ondas i:nth-child(3) { animation-delay: -.5s; }
.ilx-ondas i:nth-child(4) { animation-delay: -.75s; }
.ilx-hablando.is-pausado .ilx-ondas i { animation-play-state: paused; opacity: .45; }

@keyframes ilx-onda {
    0%, 100% { transform: scaleY(.3); }
    50% { transform: scaleY(1); }
}

/* Lo que Edu está leyendo en este momento */
.ilx-msg-col > .is-leyendo {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .45), 0 10px 26px -14px rgba(79, 70, 229, .55);
    transition: box-shadow .25s;
}

/* Escuchando (dictado) */
.ilx.is-escuchando .ilx-input {
    border-color: rgba(220, 38, 38, .35);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

/* Voz natural en el panel de ajustes */
.ilx-voz-hd {
    display: grid;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(99, 102, 241, .06);
    border: 1px solid rgba(99, 102, 241, .16);
}

.ilx-voz-hd strong { font-size: 11.5px; font-weight: 700; color: var(--ilx-ink-2); }
.ilx-voz-hd.is-on { background: var(--ilx-ok-bg); border-color: rgba(5, 150, 105, .25); }
.ilx-voz-hd .ilx-btn { justify-self: start; }

.ilx-voz-barra {
    height: 6px;
    border-radius: 999px;
    background: rgba(99, 102, 241, .14);
    overflow: hidden;
}

.ilx-voz-barra i {
    display: block;
    height: 100%;
    background: var(--ilx-grad);
    transition: width .3s;
}

/* Modo accesible: letra más grande y respuestas más espaciadas */
.ilx.is-accesible .ilx-body,
.ilx.is-accesible .ilx-sugs,
.ilx.is-accesible .ilx-input textarea {
    zoom: 1.16;
}

.ilx.is-accesible .ilx-bubble { line-height: 1.6; }
.ilx.is-accesible :focus-visible { outline: 3px solid var(--ilx-indigo); outline-offset: 2px; }

/* Botón "Escuchar" que se puede poner en cualquier página (data-edu-escuchar / data-edu-leer) */
.edu-escuchar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(99, 102, 241, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    color: #4338ca;
    font: 600 12px/1.2 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}

.edu-escuchar:hover { background: #eef2ff; box-shadow: 0 6px 16px -10px rgba(79, 70, 229, .7); }
.edu-escuchar.is-leyendo { background: #eef2ff; }
/* Botón "Escuchar resumen" de las tarjetas mientras Edu habla de esa convocatoria (tocar otra vez lo calla) */
[data-edu-escuchar].is-leyendo { color: #4f46e5; background: #eef2ff; box-shadow: 0 0 0 2px rgba(79, 70, 229, .35); animation: edu-hablando 1.4s ease-in-out infinite; }
@keyframes edu-hablando { 50% { box-shadow: 0 0 0 5px rgba(79, 70, 229, .12); } }
@media (prefers-reduced-motion: reduce) { [data-edu-escuchar].is-leyendo { animation: none; } }
.edu-escuchar-mini { padding: 3px 6px; margin-left: 4px; vertical-align: middle; }
.edu-escuchar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes ilx-latido {
    50% {
        opacity: .5;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ilx *,
    .ilx *::before,
    .ilx *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .ilx-body {
        scroll-behavior: auto;
    }
}

@media print {
    .ilx {
        display: none !important;
    }
}

/* =====================================================================
   Listado de convocatorias: Edu fuera del chat
   ===================================================================== */

/* Tarjeta de la que está hablando Edu (se resalta y se lleva a la vista) */
.edu-foco {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(99, 102, 241, .14), 0 18px 40px -22px rgba(79, 70, 229, .55) !important;
    transition: outline-color .25s ease, box-shadow .25s ease;
    scroll-margin: 90px 0 110px;
}

/* Fila de la tabla de la que habla Edu (en una tabla el contorno se pinta en las celdas) */
tr.edu-foco { outline: none; box-shadow: none !important; }
tr.edu-foco > td { background: #eef2ff !important; box-shadow: inset 0 2px 0 #6366f1, inset 0 -2px 0 #6366f1; }
tr.edu-foco > td:first-child { box-shadow: inset 2px 0 0 #6366f1, inset 0 2px 0 #6366f1, inset 0 -2px 0 #6366f1; }
tr.edu-foco > td:last-child { box-shadow: inset -2px 0 0 #6366f1, inset 0 2px 0 #6366f1, inset 0 -2px 0 #6366f1; }

/* ---------------------------------------------------------------------
   "Léeme las abiertas" (solo si el navegador puede hablar: clase que pone asistente.js)
   --------------------------------------------------------------------- */
.edu-lectura-bar { display: none; }
html.edu-voz-ok .edu-lectura-bar { display: flex; }

.edu-lectura-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(99, 102, 241, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #4338ca;
    font: 600 12px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.edu-lectura-btn:hover { background: #eef2ff; }
.edu-lectura-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.edu-lectura-btn svg { width: 14px; height: 14px; flex: none; }
.edu-lectura-btn.is-leyendo { background: #eef2ff; box-shadow: 0 0 0 2px rgba(99, 102, 241, .35); }
.edu-lectura-num {
    min-width: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

/* Vista tarjetas, escritorio: botón cuadrado gemelo de la lupa de filtros (.filters-minimal, fija en
   top 90px / right 15px), a su izquierda. Debajo de la lupa no: ahí empieza el panel de recomendaciones. */
@media (min-width: 769px) {
    #convocatoriasContainer > .edu-lectura-bar {
        position: fixed;
        top: 90px;
        right: 63px;
        /* Debajo del panel de filtros (1005): si se abre, lo tapa */
        z-index: 1004;
    }
    #convocatoriasContainer .edu-lectura-btn {
        position: relative;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--c-line, #e2e8f0);
        border-radius: var(--r-md, 10px);
        background: var(--c-surface, #fff);
        color: var(--c-ink-3, #64748b);
        box-shadow: var(--sh-1, 0 1px 2px rgba(15, 23, 42, .08));
    }
    #convocatoriasContainer .edu-lectura-btn:hover { color: #4338ca; border-color: rgba(99, 102, 241, .45); }
    #convocatoriasContainer .edu-lectura-btn.is-leyendo { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: none; }
    #convocatoriasContainer .edu-lectura-btn svg { width: 18px; height: 18px; }
    /* El texto queda para lectores de pantalla y en la pista; la cifra, como la de filtros */
    #convocatoriasContainer .edu-lectura-txt {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    #convocatoriasContainer .edu-lectura-num {
        position: absolute;
        top: -5px;
        right: -5px;
        box-sizing: content-box;
        min-width: 14px;
        padding: 0 3px;
        border: 2px solid var(--c-surface-2, #fff);
        line-height: 14px;
    }
}

/* Vista tarjetas, celular: en el listado, a la derecha y compacto */
@media (max-width: 768px) {
    #convocatoriasContainer > .edu-lectura-bar {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-bottom: -8px;
    }
}

/* Vista tabla: en la fila del resumen de filtros, a la derecha junto a "Limpiar" y con su mismo tamaño */
.edu-lectura-inline { align-items: center; margin-left: auto; }
html.edu-voz-ok .edu-lectura-inline + .filter-clear-btn { margin-left: 0; }
.edu-lectura-inline .edu-lectura-btn {
    padding: 0.25rem 0.6rem;
    font-family: 'Oswald', sans-serif;
    font-size: var(--fs-xs, 12px);
    font-weight: 500;
}
.edu-lectura-inline .edu-lectura-btn svg { width: 13px; height: 13px; }

/* Control flotante mientras Edu habla con el chat cerrado */
.edu-oyente {
    position: fixed;
    right: 20px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    /* Como el chat: encima del contenido y debajo de los modales */
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: min(290px, calc(100vw - 32px));
    padding: 4px 4px 4px 10px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .45);
    color: #0f172a;
    font: 11px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}
.edu-oyente.is-on { opacity: 1; transform: none; }
.edu-oyente[hidden] { display: none; }
.edu-oyente-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; margin: 0 2px; }
.edu-oyente-txt small { color: #64748b; font-size: 9.5px; line-height: 1.1; }
.edu-oyente-txt strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.edu-oyente button {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: #eef2ff;
    color: #4338ca;
    cursor: pointer;
}
.edu-oyente button[hidden] { display: none; }
.edu-oyente button:hover { background: #e0e7ff; }
.edu-oyente button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.edu-oyente button[data-a="detener"] { background: #fef2f2; color: #b91c1c; }
.edu-oyente svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.edu-oyente svg path[d^="M7 4.5"] { fill: currentColor; } /* triángulo de "Seguir" relleno */

/* Ondas que se mueven mientras habla (quietas en pausa) */
.edu-oyente-ondas { display: inline-flex; align-items: center; gap: 2px; height: 12px; flex: none; }
.edu-oyente-ondas i { width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(#6366f1, #8b5cf6); animation: edu-onda 1s ease-in-out infinite; }
.edu-oyente-ondas i:nth-child(2) { animation-delay: .15s; }
.edu-oyente-ondas i:nth-child(3) { animation-delay: .3s; }
.edu-oyente.is-pausado .edu-oyente-ondas i { animation-play-state: paused; transform: scaleY(.35); }
@keyframes edu-onda { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

@media (max-width: 560px) {
    .edu-oyente { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .edu-oyente, .edu-foco { transition: none; }
    .edu-oyente-ondas i { animation: none; transform: scaleY(.6); }
}

/* =====================================================================
   Listado de convocatorias (tarjetas y tabla): sus botones flotantes vivían en la misma esquina
   que Edu (abajo a la derecha) y lo tapaban. Edu se queda en su esquina, como en todo el sistema,
   y ellos pasan a su izquierda (Edu: 50 px + 20 px de margen → right: 82px), centrados con él.
   ===================================================================== */

/* Cambiar vista (tarjetas / tabla): 36 px de alto → bottom 27px lo centra con el botón de Edu */
html.ilx-presente .view-toggle-container { right: 82px; bottom: 27px; }

/* Vista tarjetas en tablet: avisos y cambio de vista en una sola fila, a la izquierda de Edu */
@media (min-width: 769px) and (max-width: 1024px) {
    html.ilx-presente .filters-minimal ~ .recommendations-capsule { right: 82px; bottom: 25px; }
    /* Vista tarjetas (la única con la lupa flotante): :has porque el cambio de vista no es hermano de la lupa */
    html.ilx-presente:has(.filters-minimal) .view-toggle-container { right: 130px; bottom: 27px; }
}

/* ---------------------------------------------------------------------
   Listado en celular (tarjetas y tabla): abajo había hasta cinco botones sueltos (avisos, reclamos,
   lupa, cambio de vista y Edu). Los de la página se agrupan en UNA barra abajo a la izquierda, solo
   con iconos, y Edu queda solo en su esquina. La barra es el fondo (body::after) y cada botón se
   ubica encima en su casilla; así no se mueve nada del HTML ni se rompen sus paneles.
     casillas de 38 px, separadas 4 px:
       tarjetas: avisos 18 · reclamos 60 · lupa 102 · vista 144 (68 px)
       tabla:    avisos 18 · reclamos 60 · vista 102 (68 px)   (sus filtros van dentro de la página)
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Las casillas se calculan según los botones que haya: la portada (welcome) no tiene cambio de
       vista y "reclamos" solo sale con sesión iniciada; con posiciones fijas quedaban huecos.
       Orden: avisos · reclamos · lupa · vista. Casilla k → left 18 + 42·k. Ancho de la barra:
       6 px de margen a cada lado + n casillas (38 + 4 de separación) → 8 + 42·n, y +32 si está el
       cambio de vista (mide 68 px en lugar de 38; así el panel queda en sus 208 / 166 px de siempre). */
    html.ilx-presente { --bb-rec: 0; --bb-lupa: 0; --bb-vista: 0; }
    html.ilx-presente:has(.reclamos-flotante-compacto) { --bb-rec: 1; }
    html.ilx-presente:has(.filters-minimal) { --bb-lupa: 1; }
    html.ilx-presente:has(.view-toggle-container) { --bb-vista: 1; }

    /* Se detecta por la cápsula de avisos (está al inicio del HTML en las dos vistas): así el fondo
       aparece junto con los botones mientras la página carga, y no recién al llegar a la tabla */
    html.ilx-presente:has(.recommendations-capsule) body::after {
        content: '';
        position: fixed;
        left: 12px;
        bottom: 16px;
        z-index: 996;
        width: calc(8px + 42px * (1 + var(--bb-rec) + var(--bb-lupa) + var(--bb-vista)) + 32px * var(--bb-vista));
        height: 50px;
        border: 1px solid rgba(226, 232, 240, .9);
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 26px -14px rgba(15, 23, 42, .4);
        pointer-events: none;
    }
    /* Botones planos dentro de la barra (la barra ya tiene el borde y la sombra) */
    html.ilx-presente .recommendations-trigger,
    html.ilx-presente .filters-minimal .filters-trigger {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
    }
    html.ilx-presente .filters-minimal .filters-trigger.active { background: var(--c-ink, #0f172a); }

    html.ilx-presente .recommendations-capsule { left: 18px !important; right: auto !important; bottom: 22px !important; top: auto !important; }

    html.ilx-presente .reclamos-flotante-compacto {
        left: 60px !important;
        bottom: 22px !important;
        transform: none !important;
        max-width: none;
    }
    html.ilx-presente .reclamos-flotante-btn-compacto {
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html.ilx-presente .reclamos-flotante-btn-compacto .btn-text {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }

    html.ilx-presente .filters-minimal {
        left: calc(18px + 42px * (1 + var(--bb-rec)));
        right: auto; bottom: 22px; top: auto;
    }

    html.ilx-presente .view-toggle-container {
        left: calc(18px + 42px * (1 + var(--bb-rec) + var(--bb-lupa)));
        right: auto; bottom: 24px;
    }
    html.ilx-presente .view-toggle-btn { border: 0; background: transparent; box-shadow: none; }

    /* Los paneles de filtros y de avisos se abren a lo ancho, justo encima de la barra */
    html.ilx-presente .filters-minimal .filters-panel,
    html.ilx-presente .recommendations-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 76px;
        top: auto;
        width: auto;
        max-width: none;
        margin: 0;
    }

    /* El control "Edu te cuenta" va encima de la barra */
    html.ilx-presente .edu-oyente { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Tabla en pantallas angostas: "Léeme las abiertas" solo con icono y número, para que "Limpiar"
   siga en la misma línea (el texto queda para lectores de pantalla y en la pista del botón) */
@media (max-width: 480px) {
    .edu-lectura-inline .edu-lectura-txt {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* Listado: los botones flotantes de abajo tapaban el pie de página ("Manual", "Términos"...). Antes se
   dejaba un espacio libre al final del body en celular, pero el pie quedaba flotando con una franja
   vacía debajo. Ahora el pie se asienta al fondo como en el resto del sistema y los botones suben
   justo lo que el pie asoma en pantalla (--ft-alza, calculado en partials/vista-toggle).
   margin-bottom y no transform: un transform haría que los paneles fijos de adentro (filtros,
   avisos) se ubicaran respecto al botón y no a la pantalla. */
.view-toggle-container,
.reclamos-flotante-compacto,
.recommendations-capsule,
.filters-minimal {
    margin-bottom: var(--ft-alza, 0px);
}

/* Al subir, los botones quedan justo encima del pie: se deja ese alto libre al final del listado
   (antes del pie, no debajo) para que no tapen la paginación */
html:has(.view-toggle-container) .page-body {
    padding-bottom: 76px;
}

@media (max-width: 768px) {
    html.ilx-presente:has(.recommendations-capsule) body::after,
    html.ilx-presente .filters-minimal .filters-panel,
    html.ilx-presente .recommendations-panel {
        margin-bottom: var(--ft-alza, 0px);
    }
}

/* ---------- Documentos: fila con "Ver" (visor emergente) y "Descargar" ---------- */
.ilx-docrow {
    align-items: center;
    padding: 6px 6px 6px 8px;
}

.ilx-docrow:hover {
    background: rgba(255, 255, 255, .9);
}

.ilx-doc-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ilx-doc-main:focus-visible,
.ilx-doc-btn:focus-visible {
    outline: 2px solid var(--ilx-indigo);
    outline-offset: 2px;
    border-radius: 10px;
}

.ilx-doc-sub {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--ilx-ink-3);
}

.ilx-doc-acc {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ilx-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    min-width: 28px;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid var(--ilx-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .7);
    color: var(--ilx-ink-2);
    font: 600 10.5px/1 var(--ilx-font);
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.ilx-doc-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ilx-doc-btn.is-ver {
    background: rgba(99, 102, 241, .1);
    border-color: rgba(99, 102, 241, .25);
    color: var(--ilx-indigo);
}

.ilx-doc-btn:hover {
    background: var(--ilx-indigo);
    border-color: var(--ilx-indigo);
    color: #fff;
}

/* ---------- Visor emergente (fuera de .ilx: el <dialog> va en el body) ---------- */
.ilx-visor {
    --v-ink: #0f172a;
    --v-ink-3: #64748b;
    --v-line: rgba(148, 163, 184, .35);
    --v-bg: #ffffff;
    --v-body: #f1f5f9;
    --v-accent: #6366f1;

    /* Centrado explícito: los estilos base de algunas páginas quitan el margin auto del <dialog> */
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(960px, calc(100vw - 32px));
    height: min(88vh, 1100px);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 1px solid var(--v-line);
    border-radius: 18px;
    background: var(--v-bg);
    color: var(--v-ink);
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .45);
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.ilx-visor[open] {
    display: flex;
    flex-direction: column;
    animation: ilx-visor-in .18s ease-out;
}

.ilx-visor::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}

@keyframes ilx-visor-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.ilx-visor-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--v-line);
}

.ilx-visor-head strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 650;
}

.ilx-visor-ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(239, 68, 68, .11);
    color: #dc2626;
}

.ilx-visor-ico svg,
.ilx-visor-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ilx-visor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border: 1px solid var(--v-line);
    border-radius: 10px;
    background: var(--v-bg);
    color: var(--v-ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    flex-shrink: 0;
}

.ilx-visor-btn:hover {
    border-color: var(--v-accent);
    color: var(--v-accent);
}

.ilx-visor-btn.is-x {
    padding: 0;
}

.ilx-visor-body {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--v-body);
    display: flex;
    flex-direction: column;
}

.ilx-visor-body iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

.ilx-visor-body img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
}

.ilx-visor-docx {
    flex: 1;
    overflow: auto;
}

.ilx-visor-msg {
    margin: 0;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--v-ink-3);
    text-align: center;
}

@media (max-width: 640px) {
    .ilx-visor {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }

    .ilx-visor-btn span {
        display: none;
    }

    .ilx-visor-btn {
        padding: 0;
    }
}

/* Título opcional de un bloque de filas (p. ej. el cargo en "perfil mínimo") */
.ilx-rows-tit {
    padding: 6px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ilx-indigo);
}

/* ---------- Texto flotante de la respuesta con voz (data-edu-subtitulos) ---------- */
.edu-sub {
    position: fixed;
    right: 20px;
    bottom: calc(140px + env(safe-area-inset-bottom));
    z-index: 951;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    max-height: min(52vh, 460px);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 22px 48px -18px rgba(30, 41, 90, .45);
    color: #0f172a;
    font: 13px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}
.edu-sub.is-on { opacity: 1; transform: none; }
.edu-sub[hidden] { display: none; }
.edu-sub-cab { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 12px; border-bottom: 1px solid #eef2ff; }
.edu-sub-av img { display: block; width: 26px; height: 26px; border-radius: 50%; }
.edu-sub-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.edu-sub-tit small { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6366f1; }
.edu-sub-tit strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edu-sub-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; cursor: pointer; }
.edu-sub-x svg, .edu-sub-pie svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.edu-sub-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 14px 10px; overscroll-behavior: contain; }
.edu-sub-p { margin: 0 0 8px; }
.edu-sub-p p, .edu-sub-p ul { margin: 0 0 6px; }
.edu-sub-st { margin: 8px 0 2px; font-weight: 700; color: #3730a3; }
.edu-sub-l { margin: 0 0 8px; padding-left: 18px; }
.edu-sub-l li { margin: 3px 0; }
.edu-sub-l li.is-ok::marker { color: #10b981; }
.edu-sub-l li.is-warn::marker { color: #f59e0b; }
.edu-sub-l li.is-bad::marker { color: #ef4444; }
.edu-sub-l li.is-bad b { color: #b91c1c; }
.edu-sub-l li.is-warn b { color: #b45309; }
.edu-sub-l li.is-ok b { color: #047857; }
.edu-sub-acc { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.edu-sub-acc a { padding: 5px 10px; border-radius: 8px; background: #4f46e5; color: #fff !important; font-weight: 600; font-size: 12px; text-decoration: none !important; }
.edu-sub-pie { display: flex; justify-content: flex-end; padding: 6px 10px 10px; border-top: 1px solid #eef2ff; }
.edu-sub-pie button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 600; line-height: 1.2; font-family: inherit; cursor: pointer; }
.edu-sub-x:focus-visible, .edu-sub-pie button:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.edu-sub-cargando { display: flex; gap: 5px; padding: 10px 0; }
.edu-sub-cargando span { width: 7px; height: 7px; border-radius: 50%; background: #a5b4fc; animation: edu-sub-p 1s infinite ease-in-out; }
.edu-sub-cargando span:nth-child(2) { animation-delay: .15s; }
.edu-sub-cargando span:nth-child(3) { animation-delay: .3s; }
@keyframes edu-sub-p { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 640px) {
    .edu-sub { right: 16px; left: 16px; width: auto; bottom: calc(124px + env(safe-area-inset-bottom)); max-height: 48vh; }
}
@media (prefers-reduced-motion: reduce) {
    .edu-sub { transition: none; }
    .edu-sub-cargando span { animation: none; }
}
/* Textos flotantes justificados (como las respuestas del chat) */
.edu-sub-p,
.edu-sub-p p,
.edu-sub-l li {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}