.tika-auth-logo {
    max-width: 170px;
}

#box-login {
    height: calc(100vh - 58px);
}

/* Typography */
.tika-body{
    /* Fondo TIKA, pero suave y minimalista */
    background:
            radial-gradient(1200px 600px at 10% 15%, rgba(var(--bs-primary-rgb),.22), transparent 60%),
            radial-gradient(1000px 500px at 90% 80%, rgba(var(--bs-secondary-rgb),.18), transparent 55%),
            var(--bs-body-bg);
}

/* Header glass minimal */
.tika-header{
    background: rgba(11,16,32,.68);
    backdrop-filter: blur(10px);
}

/* Sidebar glass minimal */
.tika-sidebar{
    background: rgba(17,26,51,.55);
    backdrop-filter: blur(10px);
}

/* Offcanvas (mobile sidebar) */
.tika-offcanvas{
    background: rgba(11,16,32,.92);
}

.tika-logo-sidebar {
    max-width: 40px;
}

/* Icon button helper */
.tika-icon-btn{
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Botones: ícono y texto en línea horizontal, centrados */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.btn .material-symbols-rounded {
    display: inline-flex;
    line-height: 1;
}

/* Tarjetas, campos, foco y TomSelect: ahora en myrakosta.css (Myra Kosta UI). */

/* TomSelect single: centrado vertical del item seleccionado */
.ts-wrapper.single .ts-control .item {
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

/* Ocultar flechas del input type=number (paginador) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Card de filtros: z-index mayor para que sus dropdowns queden sobre la card de tabla */
.tika-filter-card {
    position: relative;
    z-index: 10;
}

/* Un dropdown de TomSelect abierto ELEVA su card: sin esto la card siguiente del DOM pinta
   encima del panel de opciones. El resto de TomSelect está en myrakosta.css. */
.card:has(.ts-wrapper.dropdown-active){
    position: relative;
    z-index: 20;
}

/* Sidebar nav style (Material-ish, pero usando Bootstrap) */
.tika-usercard{
    background: rgba(255,255,255,.03);
    border: 1px solid var(--bs-border-color);
}

.tika-navlink{
    border-radius: var(--bs-border-radius);
    color: rgba(234,240,255,.85);
}

.tika-navlink:hover{
    background: rgba(255,255,255,.05);
    color: var(--bs-body-color);
}

.nav-pills .nav-link.active.tika-navlink{
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb) ,0.35), rgba(var(--bs-secondary-rgb) ,0.25));
    border: 1px solid rgba(97,193,235,.25);
    color: var(--bs-body-color);
}

.tika-navlink-sub{
    border-radius: .9rem;
    color: rgba(234,240,255,.75);
    padding: .45rem .75rem;
}

.tika-navlink-sub:hover{
    background: rgba(255,255,255,.04);
    color: var(--bs-body-color);
}

.nav-pills .nav-link.active.tika-navlink-sub{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--bs-body-color);
}

/* User chip in header */
.tika-user-chip{
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

#logo-sidebar {
    max-width: 40px;
}
/* Lo que hizo el soporte en los correos de la persona (paso 6 del spec de la Bandeja). */
.av-soporte { margin: 12px 16px 0; }
.av-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.av-lista li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.av-meta { font-size: 13px; color: var(--ink-muted); }