:root {
    /* paleta TI */
    --ti-bg:           #f6f8f5;
    --ti-surface:      #ffffff;
    --ti-surface-2:    #fbfcfa;
    --ti-border:       rgba(20,83,45,0.08);
    --ti-border-2:     rgba(20,83,45,0.14);
    --ti-text:         #1a2e1f;
    --ti-text-2:       #485a4f;
    --ti-text-3:       #7a8c80;

    --ti-sage:         #4d7c0f;
    --ti-sage-2:       #65a30d;
    --ti-sage-soft:    #d4e7c5;
    --ti-sage-tint:    #ebf3df;

    --ti-blue:         #0a84ff;       /* iOS systemBlue */
    --ti-green:        #34c759;       /* iOS systemGreen */
    --ti-orange:       #ff9500;       /* iOS systemOrange */
    --ti-red:          #ff3b30;       /* iOS systemRed */
    --ti-purple:       #af52de;       /* iOS systemPurple */
    --ti-gray:         #8e8e93;       /* iOS systemGray */

    /* radios iOS */
    --ti-r-sm:  10px;
    --ti-r-md:  14px;
    --ti-r-lg:  20px;
    --ti-r-xl:  24px;
    --ti-r-2xl: 28px;
    --ti-r-pill: 999px;

    /* sombras (multicapa, suaves) */
    --ti-shadow-1: 0 1px 2px rgba(15,30,20,0.04), 0 1px 1px rgba(15,30,20,0.03);
    --ti-shadow-2: 0 2px 6px rgba(15,30,20,0.05), 0 4px 16px rgba(15,30,20,0.04);
    --ti-shadow-3: 0 4px 14px rgba(15,30,20,0.07), 0 16px 32px rgba(15,30,20,0.06);
    --ti-shadow-glow: 0 0 0 4px rgba(101,163,13,0.12);
}

/* ═══════════════════════════════════════════════════════════════
   Sólo aplica en páginas Soporte TI. El body recibe la clase
   `ti-premium` via JS según pathname.
   ═══════════════════════════════════════════════════════════════ */

body.ti-premium {
    background: var(--ti-bg) !important;
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.ti-premium .fi-main,
body.ti-premium .fi-page {
    background: var(--ti-bg) !important;
}
body.ti-premium .fi-main-ctn {
    padding-inline: clamp(12px, 3vw, 32px) !important;
}

/* ── Header de página ──────────────────────────────────────── */
body.ti-premium .fi-header {
    background: transparent;
    padding-top: 8px;
    padding-bottom: 8px;
    /* Que las acciones bajen de línea en vez de desbordar: un header con
       muchos botones empujaba el título a una columna finísima (se partía
       palabra por palabra) y el scroll horizontal corría hasta el topbar.
       NO usar overflow:hidden acá — recorta los desplegables. */
    flex-wrap: wrap;
    gap: 10px;
}
body.ti-premium .fi-header-actions {
    flex-wrap: wrap;
}
body.ti-premium .fi-header-heading {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--ti-text) !important;
    line-height: 1.15;
}
body.ti-premium .fi-header-subheading {
    color: var(--ti-text-3) !important;
    font-size: 0.92rem !important;
}

/* ── Sections (forms) iOS-card ─────────────────────────────── */
/*
 * OJO: NADA de `overflow: hidden` acá.
 *
 * Estaba puesto para redondear las esquinas, pero recortaba TODO lo que
 * se saliera de la sección: los desplegables de los select, los
 * calendarios de las fechas, los autocompletados. Como `.ti-premium`
 * aplica a toda ruta /admin/ti-*, rompía los formularios del módulo
 * entero — el select quedaba abierto pero cortado a la altura de la caja.
 *
 * El fondo y el borde YA respetan border-radius por sí solos; overflow
 * solo hacía falta por si un hijo con fondo propio asomaba en las
 * esquinas. Eso se resuelve dándole el radio a los hijos extremos, sin
 * encerrar a nadie.
 */
body.ti-premium .fi-section {
    background: var(--ti-surface) !important;
    border: 1px solid var(--ti-border) !important;
    border-radius: var(--ti-r-xl) !important;
    box-shadow: var(--ti-shadow-2) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
body.ti-premium .fi-section > :first-child {
    border-top-left-radius: var(--ti-r-xl);
    border-top-right-radius: var(--ti-r-xl);
}
body.ti-premium .fi-section > :last-child {
    border-bottom-left-radius: var(--ti-r-xl);
    border-bottom-right-radius: var(--ti-r-xl);
}
body.ti-premium .fi-section:hover {
    box-shadow: var(--ti-shadow-3) !important;
}
body.ti-premium .fi-section-header {
    padding: 18px 22px 10px !important;
    border-bottom: 1px solid var(--ti-border) !important;
}
body.ti-premium .fi-section-header-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--ti-text) !important;
}
body.ti-premium .fi-section-header-description {
    font-size: 0.825rem !important;
    color: var(--ti-text-3) !important;
    margin-top: 2px;
}
body.ti-premium .fi-section-content {
    padding: 18px 22px 22px !important;
}

/* ── Inputs iOS-like ───────────────────────────────────────── */
body.ti-premium .fi-input,
body.ti-premium .fi-input-wrp,
body.ti-premium .fi-select-input,
body.ti-premium .fi-textarea {
    background: var(--ti-surface-2) !important;
    border: 1px solid var(--ti-border-2) !important;
    border-radius: var(--ti-r-md) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.ti-premium .fi-input:focus-within,
body.ti-premium .fi-input-wrp:focus-within,
body.ti-premium .fi-textarea:focus-within {
    border-color: var(--ti-sage-2) !important;
    box-shadow: var(--ti-shadow-glow);
    background: #fff !important;
}
body.ti-premium .fi-fo-field-wrp-label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--ti-text-2) !important;
    letter-spacing: -0.005em;
    margin-bottom: 6px;
}

/* ── Botones iOS pill ──────────────────────────────────────── */
body.ti-premium .fi-btn {
    border-radius: var(--ti-r-pill) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
body.ti-premium .fi-btn:active {
    transform: scale(0.97);
}
body.ti-premium .fi-btn-color-primary {
    background: linear-gradient(180deg, var(--ti-sage-2) 0%, var(--ti-sage) 100%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 10px rgba(77,124,15,0.25);
    color: #fff !important;
}
body.ti-premium .fi-btn-color-primary:hover {
    filter: brightness(1.05);
}

/* ── Tablas: estilo card-grid ──────────────────────────────── */
/*
 * Sin `overflow: hidden`, por el mismo motivo que en .fi-section: recorta
 * los desplegables de los filtros, del selector de columnas y de las
 * acciones de fila. Acá el header SÍ tiene fondo propio, así que se le da
 * el radio explícitamente para que no asome por las esquinas.
 */
body.ti-premium .fi-ta {
    background: var(--ti-surface) !important;
    border: 1px solid var(--ti-border) !important;
    border-radius: var(--ti-r-xl) !important;
    box-shadow: var(--ti-shadow-2) !important;
}
body.ti-premium .fi-ta > :first-child,
body.ti-premium .fi-ta-header-ctn,
body.ti-premium .fi-ta-header {
    border-top-left-radius: var(--ti-r-xl);
    border-top-right-radius: var(--ti-r-xl);
}
body.ti-premium .fi-ta > :last-child {
    border-bottom-left-radius: var(--ti-r-xl);
    border-bottom-right-radius: var(--ti-r-xl);
}
body.ti-premium .fi-ta-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--ti-border) !important;
    background: var(--ti-surface-2) !important;
}
body.ti-premium .fi-ta-content {
    background: var(--ti-surface) !important;
}
body.ti-premium .fi-ta-table thead th {
    background: var(--ti-surface-2) !important;
    color: var(--ti-text-3) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--ti-border) !important;
}
body.ti-premium .fi-ta-table tbody tr {
    transition: background .12s ease;
}
body.ti-premium .fi-ta-table tbody tr:hover {
    background: var(--ti-sage-tint) !important;
}
body.ti-premium .fi-ta-table tbody td {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--ti-border) !important;
    color: var(--ti-text-2) !important;
}
body.ti-premium .fi-ta-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── Badges como pills iOS ─────────────────────────────────── */
body.ti-premium .fi-badge {
    border-radius: var(--ti-r-pill) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: -0.005em !important;
    padding: 3px 10px !important;
    border: 1px solid currentColor;
    background: color-mix(in oklab, currentColor 8%, transparent) !important;
}

/* ── Filter dropdowns / select pills ───────────────────────── */
body.ti-premium .fi-ta-filters-form .fi-fo-field-wrp {
    background: var(--ti-surface-2) !important;
    border-radius: var(--ti-r-md);
}

/* ── Pagination ────────────────────────────────────────────── */
body.ti-premium .fi-pagination {
    padding: 14px 18px !important;
    border-top: 1px solid var(--ti-border) !important;
    background: var(--ti-surface-2) !important;
}
body.ti-premium .fi-pagination-item {
    border-radius: var(--ti-r-md) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: <768px → tablas se reorganizan como lista de cards
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    body.ti-premium .fi-main-ctn {
        padding-inline: 12px !important;
    }
    body.ti-premium .fi-section {
        border-radius: var(--ti-r-lg) !important;
    }
    body.ti-premium .fi-section-header {
        padding: 14px 16px 8px !important;
    }
    body.ti-premium .fi-section-content {
        padding: 14px 16px 16px !important;
    }
    body.ti-premium .fi-ta {
        border-radius: var(--ti-r-lg) !important;
    }
    body.ti-premium .fi-ta-table {
        display: block;
    }
    body.ti-premium .fi-ta-table thead {
        display: none;
    }
    body.ti-premium .fi-ta-table tbody,
    body.ti-premium .fi-ta-table tr,
    body.ti-premium .fi-ta-table td {
        display: block;
        width: 100%;
    }
    /* Cada fila es una TARJETA: borde, radio y sombra suaves. */
    body.ti-premium .fi-ta-table tbody {
        padding: 10px 10px 4px;
        background: var(--ti-bg);
    }
    body.ti-premium .fi-ta-table tbody tr {
        background: var(--ti-surface) !important;
        border: 1px solid rgba(20, 83, 45, 0.09) !important;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(15, 40, 25, 0.05);
        margin-bottom: 10px;
        padding: 8px 2px;
        overflow: hidden;
    }
    body.ti-premium .fi-ta-table tbody td {
        padding: 5px 14px !important;
        border-bottom: none !important;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        min-height: 0;
    }
    /* Los paddings internos de Filament inflaban cada renglón. */
    body.ti-premium .fi-ta-table tbody td > div,
    body.ti-premium .fi-ta-table tbody td .fi-ta-col-wrp {
        padding: 0 !important;
    }
    body.ti-premium .fi-ta-table tbody td::before {
        content: attr(data-label);
        color: var(--ti-text-3);
        font-weight: 700;
        font-size: 0.66rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        flex-shrink: 0;
    }
    /* La primera celda con dato actúa de título de la tarjeta. */
    body.ti-premium .fi-ta-table tbody td.ti-td-first {
        padding-top: 9px !important;
        font-weight: 700;
    }
    /* Checkbox de selección y campos vacíos («—») no ocupan renglón. */
    body.ti-premium .fi-ta-table tbody td.ti-td-checkbox,
    body.ti-premium .fi-ta-table thead,
    body.ti-premium .fi-ta-table tbody td.ti-td-empty {
        display: none !important;
    }
    /* Las acciones (Ficha / Ver QR / ⋮) alineadas al pie de la tarjeta. */
    body.ti-premium .fi-ta-table tbody td.ti-td-actions {
        justify-content: flex-end;
        border-top: 1px solid rgba(20, 83, 45, 0.07) !important;
        margin-top: 4px;
        padding-top: 8px !important;
    }
    body.ti-premium .fi-ta-table tbody td.ti-td-actions::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Dashboard TI custom view (clase .ti-dash)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Full-width en TODAS las rutas del módulo TI ───
   El <main class="fi-main"> de Filament tiene `mx-auto max-w-7xl` por
   default. En el módulo TI queremos usar todo el ancho disponible
   (tablas, dashboards, fichas y formularios). Aplica a body.ti-premium
   (todas las rutas /admin/ti-* y /admin/soporte-ti). */
body.ti-premium main.fi-main {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: clamp(12px, 1.2vw, 20px) !important;
}
body.ti-premium [class*="max-w-"]:not(.fi-sidebar):not(.fi-sidebar *):not(.fi-modal-window):not(.fi-header-subheading):not(.fi-dropdown-panel) {
    max-width: 100% !important;
}
/* El panel de los dropdowns (menú «⋮» de acciones) es `w-screen` acotado
   por `!max-w-xs`. Sin la exclusión de arriba, el max-width:100% lo pisaba
   y el menú se estiraba a toda la pantalla. */
body.ti-premium .fi-main > .mx-auto,
body.ti-premium main.fi-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* En el Dashboard TI y la Hoja del directorio reducimos AÚN más el
   padding lateral para densidad máxima */
body.ti-dash-page main.fi-main {
    padding-inline: clamp(8px, 0.8vw, 14px) !important;
    padding-top: 8px !important;
}
/* El header (h1 "Soporte TI") y el page-content también van full-width
   sin padding propio agregado por Filament */
body.ti-dash-page .fi-header,
body.ti-dash-page .fi-page-content,
body.ti-dash-page main > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Ocultar el h1 del header de Filament SOLO donde hay un hero propio que
   ya hace de encabezado (Dashboard TI y Hoja del directorio).
   (Mantiene el title en <title> del browser y en breadcrumbs).

   OJO — esto vivía en `.ti-dash-page`, que además marca "ancho completo" y
   se aplica a TODOS los listados /admin/ti-*. Resultado: se ocultaba el
   header en cada listado del módulo… y con él los BOTONES DE ACCIÓN, que
   Filament pinta ahí. No había forma de crear un proveedor, una categoría
   ni una plantilla desde la interfaz.

   Son dos cosas distintas y ahora son dos clases distintas:
     · ti-dash-page → ancho completo (listados + dashboard)
     · ti-hero-page → esta página trae su propio encabezado */
body.ti-hero-page .fi-header {
    display: none !important;
}
/* El contenido principal del dashboard también full-width */
body.ti-dash-page .ti-dash {
    width: 100%;
    max-width: 100%;
}

.ti-dash {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Hero saludo */
.ti-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    background:
        radial-gradient(circle at top right, var(--ti-sage-tint) 0%, transparent 60%),
        linear-gradient(135deg, var(--ti-surface) 0%, var(--ti-surface-2) 100%);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-xl);
    box-shadow: var(--ti-shadow-2);
}
.ti-hero-title {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ti-text);
    margin: 0;
}
.ti-hero-sub {
    color: var(--ti-text-3);
    font-size: 0.92rem;
    margin-top: 4px;
}

/* Quick actions pills */
.ti-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ti-quick a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: var(--ti-surface);
    border: 1px solid var(--ti-border-2);
    border-radius: var(--ti-r-pill);
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ti-text-2);
    text-decoration: none;
    box-shadow: var(--ti-shadow-1);
    transition: transform .12s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}
.ti-quick a:hover {
    transform: translateY(-1px);
    box-shadow: var(--ti-shadow-2);
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
    border-color: var(--ti-sage-soft);
}
.ti-quick svg {
    width: 16px;
    height: 16px;
}

/* KPI grid base — autosize. Variantes ti-kpis-6 / ti-kpis-4 abajo. */
.ti-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 14px;
}
/* Fila de 6 KPIs operativos — escala según ancho */
.ti-kpis-6 {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .ti-kpis-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .ti-kpis-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ti-kpis-6 { grid-template-columns: repeat(6, 1fr); } }
/* Fila de 4 KPIs inventario */
.ti-kpis-4 {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px)  { .ti-kpis-4 { grid-template-columns: repeat(4, 1fr); } }
.ti-kpi {
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-xl);
    box-shadow: var(--ti-shadow-2);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .2s ease;
}
.ti-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--ti-shadow-3);
}
.ti-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ti-text-3);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ti-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ti-r-md);
    display: grid;
    place-items: center;
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
}
.ti-kpi-icon svg {
    width: 19px;
    height: 19px;
}
.ti-kpi-icon.blue   { background: rgba(10,132,255,0.10);  color: var(--ti-blue); }
.ti-kpi-icon.green  { background: rgba(52,199,89,0.12);   color: var(--ti-green); }
.ti-kpi-icon.orange { background: rgba(255,149,0,0.12);   color: var(--ti-orange); }
.ti-kpi-icon.red    { background: rgba(255,59,48,0.10);   color: var(--ti-red); }
.ti-kpi-icon.purple { background: rgba(175,82,222,0.10);  color: var(--ti-purple); }

.ti-kpi-value {
    font-size: clamp(1.7rem, 3.5vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ti-text);
    margin-top: 10px;
    line-height: 1;
}
.ti-kpi-foot {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--ti-text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ti-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--ti-r-pill);
    font-size: 0.72rem;
    font-weight: 700;
}
.ti-kpi-delta.up   { background: rgba(255,59,48,0.10);  color: var(--ti-red); }
.ti-kpi-delta.down { background: rgba(52,199,89,0.12);  color: var(--ti-green); }
.ti-kpi-delta.flat { background: rgba(142,142,147,0.12); color: var(--ti-gray); }

/* Grid 2 columnas (50/50) */
.ti-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 1100px) {
    .ti-grid-2 { grid-template-columns: 1fr; }
}

/* Grid 3 columnas: izq doble ancho que las otras dos */
.ti-grid-3 {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 18px;
}
@media (max-width: 1400px) {
    .ti-grid-3 { grid-template-columns: 1fr 1fr; }
    .ti-grid-3 > article:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .ti-grid-3 { grid-template-columns: 1fr; }
    .ti-grid-3 > article:first-child { grid-column: auto; }
}

/* Link del card-head */
.ti-card-link {
    color: var(--ti-sage);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
}
.ti-card-link:hover { text-decoration: underline; }

/* Card genérico */
.ti-card {
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-xl);
    box-shadow: var(--ti-shadow-2);
    overflow: hidden;
}
.ti-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ti-border);
}
.ti-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ti-text);
    letter-spacing: -0.01em;
    margin: 0;
}
.ti-card-sub {
    font-size: 0.78rem;
    color: var(--ti-text-3);
}
.ti-card-body {
    padding: 8px 0;
}

/* Lista de actividad estilo iOS */
.ti-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ti-feed-item {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    align-items: flex-start;
    border-top: 1px solid rgba(20,83,45,0.05);
    transition: background .12s ease;
}
.ti-feed-item:first-child { border-top: none; }
.ti-feed-item:hover { background: var(--ti-sage-tint); }
.ti-feed-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ti-sage);
    margin-top: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(101,163,13,0.12);
}
.ti-feed-dot.red    { background: var(--ti-red);    box-shadow: 0 0 0 4px rgba(255,59,48,0.15); }
.ti-feed-dot.orange { background: var(--ti-orange); box-shadow: 0 0 0 4px rgba(255,149,0,0.15); }
.ti-feed-dot.blue   { background: var(--ti-blue);   box-shadow: 0 0 0 4px rgba(10,132,255,0.15); }
.ti-feed-body { flex: 1; min-width: 0; }
.ti-feed-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ti-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ti-feed-meta {
    font-size: 0.75rem;
    color: var(--ti-text-3);
    margin-top: 2px;
}
.ti-feed-link {
    color: var(--ti-text);
    text-decoration: none;
}
.ti-feed-link:hover .ti-feed-title { color: var(--ti-sage); }

/* Chip de cuenta al lado derecho de un feed item */
.ti-feed-count {
    flex-shrink: 0;
    background: rgba(255,59,48,0.10);
    color: var(--ti-red);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: var(--ti-r-pill);
    font-variant-numeric: tabular-nums;
    align-self: center;
}

/* Segmented control iOS */
.ti-segmented {
    display: inline-flex;
    background: var(--ti-sage-tint);
    padding: 3px;
    border-radius: var(--ti-r-pill);
    gap: 2px;
}
.ti-segmented a {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ti-text-2);
    text-decoration: none;
    border-radius: var(--ti-r-pill);
    transition: background .15s ease, color .15s ease;
}
.ti-segmented a.active {
    background: var(--ti-surface);
    color: var(--ti-sage);
    box-shadow: var(--ti-shadow-1);
}

/* Distribución por categoría / chart container */
.ti-stack {
    padding: 14px 20px 18px;
}
.ti-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.ti-bar-label {
    font-size: 0.84rem;
    color: var(--ti-text-2);
    min-width: 130px;
    font-weight: 500;
}
.ti-bar-track {
    flex: 1;
    height: 8px;
    background: var(--ti-sage-tint);
    border-radius: var(--ti-r-pill);
    overflow: hidden;
    position: relative;
}
.ti-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ti-sage-2), var(--ti-sage));
    border-radius: var(--ti-r-pill);
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.ti-bar-fill.orange { background: linear-gradient(90deg, #ffb74d, var(--ti-orange)); }
.ti-bar-fill.purple { background: linear-gradient(90deg, #c990ec, var(--ti-purple)); }
.ti-bar-fill.red    { background: linear-gradient(90deg, #ff7a6e, var(--ti-red)); }
.ti-bar-fill.blue   { background: linear-gradient(90deg, #5ba8ff, var(--ti-blue)); }
.ti-bar-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ti-bar-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ti-text);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Empty state */
.ti-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--ti-text-3);
    font-size: 0.88rem;
}
.ti-empty svg {
    width: 36px;
    height: 36px;
    opacity: 0.4;
    margin-bottom: 10px;
}

/* Mobile dashboard tweaks */
@media (max-width: 767px) {
    .ti-hero { padding: 18px 18px; border-radius: var(--ti-r-lg); }
    .ti-kpi { padding: 14px 16px; border-radius: var(--ti-r-lg); }
    .ti-kpi-value { font-size: 1.7rem; }
    .ti-card { border-radius: var(--ti-r-lg); }
    .ti-card-head { padding: 14px 16px; }
    .ti-feed-item { padding: 11px 16px; }
    .ti-quick a { padding: 8px 12px; font-size: 0.8rem; }
}

/* ═══════════════════════════════════════════════════════════════
   DIRECTORIO TI · "Hoja del usuario con todo al lado"
   ═══════════════════════════════════════════════════════════════ */
.ti-dir-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.ti-dir-search {
    position: relative;
    background: var(--ti-surface);
    border: 1px solid var(--ti-border-2);
    border-radius: var(--ti-r-pill);
    padding: 8px 14px 8px 36px;
    min-width: 260px;
    box-shadow: var(--ti-shadow-1);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ti-dir-search:focus-within {
    border-color: var(--ti-sage-2);
    box-shadow: var(--ti-shadow-glow);
}
.ti-dir-search svg {
    width: 16px; height: 16px;
    position: absolute;
    left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--ti-text-3);
}
.ti-dir-search input {
    background: transparent; border: none; outline: none;
    font-size: 0.86rem; width: 100%;
    color: var(--ti-text);
}
.ti-dir-search input::placeholder { color: var(--ti-text-3); }
.ti-dir-select {
    background: var(--ti-surface);
    border: 1px solid var(--ti-border-2);
    border-radius: var(--ti-r-pill);
    padding: 8px 36px 8px 16px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ti-text-2);
    cursor: pointer;
    box-shadow: var(--ti-shadow-1);
    /* Quitar el chevron nativo del browser y dibujar uno propio */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
}
.ti-dir-select:hover { border-color: var(--ti-sage-soft); }
.ti-dir-select::-ms-expand { display: none; }
.ti-dir-clear {
    background: var(--ti-sage-tint);
    border: none;
    color: var(--ti-sage);
    border-radius: var(--ti-r-pill);
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ti-dir-clear:hover { background: var(--ti-sage-soft); }

/* Botón "+ Nuevo usuario" — accent verde */
.ti-dir-btn-new {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, var(--ti-sage-2) 0%, var(--ti-sage) 100%);
    color: #fff;
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--ti-r-pill);
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 10px rgba(77,124,15,0.25);
    transition: transform .08s ease, filter .15s ease;
}
.ti-dir-btn-new:hover { filter: brightness(1.08); }
.ti-dir-btn-new:active { transform: scale(0.97); }
.ti-dir-btn-new svg { width: 14px; height: 14px; }

.ti-dir-btn-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ti-surface);
    color: var(--ti-sage);
    border: 1px solid var(--ti-border);
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: var(--ti-r-pill);
    transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.ti-dir-btn-export:hover { border-color: var(--ti-sage); background: var(--ti-sage-tint); }
.ti-dir-btn-export:active { transform: scale(0.97); }
.ti-dir-btn-export svg { width: 14px; height: 14px; }
.ti-dir-btn-export:disabled { opacity: .6; cursor: progress; }
/* CSV: variante secundaria, angosta, sin ícono. */
.ti-dir-btn-csv { padding-inline: 12px; font-size: 0.74rem; letter-spacing: .04em; opacity: .82; }

/* Link "Editar" / "Ver ficha" dentro de cada fila */
.ti-dir-row-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.ti-dir-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--ti-r-pill);
    text-decoration: none;
    width: fit-content;
    transition: background .15s ease;
}
.ti-dir-edit-link:hover { background: var(--ti-sage-soft); }
.ti-dir-edit-link svg { width: 11px; height: 11px; }

/* Avatar como link a la ficha */
.ti-dir-avatar-link {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
    transition: transform .12s ease;
}
.ti-dir-avatar-link:hover { transform: scale(1.05); }
.ti-dir-avatar-img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(15,30,20,0.12);
    display: block;
}

/* Pill de status (en row del directorio) */
.ti-status-pill {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--ti-r-pill);
    margin-left: 6px;
    vertical-align: middle;
}
.ti-status-pill.unlinked {
    background: rgba(255,59,48,0.10);
    color: var(--ti-red);
}

/* Fila desvinculada: opacidad reducida */
.ti-dir-row.unlinked {
    opacity: 0.70;
    background: repeating-linear-gradient(
        45deg,
        var(--ti-surface),
        var(--ti-surface) 10px,
        var(--ti-surface-2) 10px,
        var(--ti-surface-2) 20px
    ) !important;
}
.ti-dir-row.unlinked:hover { opacity: 1; }

/* Counter dentro del segmented control */
.ti-seg-count {
    background: rgba(255,255,255,0.7);
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: var(--ti-r-pill);
    margin-left: 4px;
    font-weight: 700;
    color: var(--ti-text-2);
}
.ti-segmented a.active .ti-seg-count {
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
}

/* Toolbar inferior: segmented status + toggle vista alineados */
.ti-dir-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

/* Toggle de vista (Tarjetas / Tabla) — segmented control */
.ti-view-toggle {
    display: inline-flex;
    background: var(--ti-surface-2);
    border: 1px solid var(--ti-border);
    padding: 3px;
    border-radius: var(--ti-r-pill);
    gap: 2px;
}
.ti-view-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ti-text-3);
    cursor: pointer;
    border-radius: var(--ti-r-pill);
    transition: background .15s ease, color .15s ease;
}
.ti-view-toggle button svg { width: 13px; height: 13px; }
.ti-view-toggle button:hover { color: var(--ti-text); }
.ti-view-toggle button.active {
    background: var(--ti-surface);
    color: var(--ti-sage);
    box-shadow: var(--ti-shadow-1);
}

/* ─── VISTA TABLA ─── */
.ti-dir-table-wrap {
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-xl);
    box-shadow: var(--ti-shadow-2);
    overflow: hidden;
    overflow-x: auto;
}
.ti-dir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.ti-dir-table thead th {
    background: var(--ti-surface-2);
    color: var(--ti-text-3);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--ti-border);
    white-space: nowrap;
}
.ti-dir-table thead th.cell-icon,
.ti-dir-table tbody td.cell-icon { text-align: center; }

/* Encabezado con icono + label en columna (svg arriba, texto abajo) */
.ti-tbl-th {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.ti-tbl-th svg {
    width: 15px;
    height: 15px;
    color: var(--ti-sage);
    opacity: 0.85;
}
.ti-tbl-th {
    color: var(--ti-text-3);
}
.ti-dir-table thead th.cell-actions,
.ti-dir-table tbody td.cell-actions { text-align: right; }

/* Cabeceras ordenables: click para ordenar, con flecha en la activa. */
.ti-dir-table thead th.ti-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.ti-dir-table thead th.ti-th-sort:hover { color: var(--ti-sage); background: var(--ti-surface-3, var(--ti-surface-2)); }
.ti-dir-table thead th.ti-th-sort.sorted { color: var(--ti-sage); }
.ti-th-arrow { font-size: 0.62rem; margin-left: 5px; opacity: 0.9; }

/* Columna de numeración (#): angosta, tenue, cifras alineadas. */
.ti-dir-table th.ti-th-num,
.ti-dir-table td.ti-td-num {
    width: 42px;
    text-align: right;
    padding-right: 12px;
    color: var(--ti-text-3);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
}

/* ── Vista CONSOLIDADO (el Excel de mantención tal cual) ──────── */
.ti-cons-head { padding: 2px 2px 14px; }
.ti-cons-head h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ti-text); }
.ti-cons-head p { font-size: 0.82rem; color: var(--ti-text-3); margin-top: 3px; }

.ti-cons-scroll {
    overflow-x: auto;
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-lg);
    background: var(--ti-surface);
    box-shadow: var(--ti-shadow-2);
}
.ti-cons-table { border-collapse: collapse; font-size: 0.72rem; white-space: nowrap; }
.ti-cons-table th, .ti-cons-table td {
    border: 1px solid var(--ti-border);
    padding: 5px 9px;
}

/* Fila de grupos */
.ti-cons-groups th.grp {
    background: var(--ti-surface-2);
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    text-align: center; font-size: 0.66rem; color: var(--ti-text-2);
}
.ti-cons-groups th.grp-mant { background: #F0872E; color: #fff; }

/* Fila de columnas */
.ti-cons-cols th.simple {
    background: var(--ti-surface-2);
    font-weight: 700; text-align: left; color: var(--ti-text-2);
    vertical-align: middle;
}
/* Checklist en DIAGONAL (45°): mucho más bajo que vertical y más moderno.
   La etiqueta corta va acá; el texto completo, en el title (tooltip). */
/* Color por sección en la fila de grupos (moderno, delimita las áreas). */
.ti-cons-groups th.grp-datos-del-usuario { color: var(--ti-text-2); }
.ti-cons-groups th.grp-equipo    { color: #B45309; border-top: 2px solid #F0A860; }
.ti-cons-groups th.grp-hardware  { color: #1F6FEB; border-top: 2px solid #7CA9F5; }
.ti-cons-groups th.grp-software  { color: #7C3AED; border-top: 2px solid #B98DF0; }
.ti-cons-groups th.grp-extras    { color: #15803D; border-top: 2px solid #7CCB96; }

/* Columna de numeración (#) */
.ti-cons-table th.num, .ti-cons-table td.num {
    width: 42px; text-align: right; padding-right: 10px;
    color: var(--ti-text-3); font-variant-numeric: tabular-nums;
}

/* Celdas */
.ti-cons-table tbody td {
    color: var(--ti-text-2);
    max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.ti-cons-table tbody td.fuerte {
    font-weight: 700; color: var(--ti-text);
    white-space: normal; min-width: 150px;
}
.ti-cons-table tbody tr:hover td { background: color-mix(in oklab, var(--ti-sage) 6%, transparent); }

/* Celdas de la tabla completa */
.ti-dir-table td.ti-tbl-mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8rem;
    color: var(--ti-text-2);
    white-space: nowrap;
}
.ti-dir-table td.ti-tbl-soft {
    color: var(--ti-text-3);
    font-size: 0.82rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ti-dir-table tbody tr {
    transition: background .12s ease;
}
.ti-dir-table tbody tr:hover {
    background: var(--ti-sage-tint);
}
.ti-dir-table tbody tr.unlinked {
    opacity: 0.55;
    background: repeating-linear-gradient(
        45deg,
        var(--ti-surface),
        var(--ti-surface) 8px,
        var(--ti-surface-2) 8px,
        var(--ti-surface-2) 16px
    );
}
.ti-dir-table tbody tr.unlinked:hover { opacity: 1; }
.ti-dir-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ti-border);
    color: var(--ti-text-2);
    vertical-align: middle;
}
.ti-dir-table tbody tr:last-child td { border-bottom: none; }

/* Usuario en tabla: avatar + nombre */
.ti-dir-tbl-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.ti-dir-tbl-user .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(15,30,20,0.10);
    flex-shrink: 0;
}
.ti-dir-tbl-user .avatar.initials {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ti-sage-2), var(--ti-sage));
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
}
.ti-dir-tbl-user .name {
    font-weight: 600;
    color: var(--ti-text);
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.ti-dir-tbl-user .name small {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ti-text-3);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    margin-top: 1px;
}
.ti-dir-tbl-user:hover .name { color: var(--ti-sage); }

/* Iconos de status en celdas */
.ti-tbl-yes {
    color: #0d8c3f;
    font-weight: 800;
    font-size: 1rem;
}
.ti-tbl-no {
    color: var(--ti-text-3);
    font-size: 0.9rem;
}
.ti-tbl-badge {
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 2px 9px;
    border-radius: var(--ti-r-pill);
    display: inline-block;
    min-width: 24px;
}

/* Mini-pill activo (verde sutil) */
.ti-status-pill.active-mini {
    background: rgba(52,199,89,0.10);
    color: #0d8c3f;
}

/* Botones de acción en celda */
.ti-tbl-act {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    background: var(--ti-surface-2);
    color: var(--ti-text-2);
    border-radius: var(--ti-r-md);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
    margin-left: 4px;
}
.ti-tbl-act svg { width: 14px; height: 14px; }
.ti-tbl-act:hover {
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
}

@media (max-width: 767px) {
    .ti-dir-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .ti-view-toggle {
        justify-content: center;
    }
    .ti-dir-table thead th:nth-child(2),
    .ti-dir-table tbody td:nth-child(2),
    .ti-dir-table thead th:nth-child(3),
    .ti-dir-table tbody td:nth-child(3) {
        display: none;
    }
}

/* Chips de stats */
.ti-dir-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ti-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--ti-r-pill);
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--ti-surface);
    border: 1px solid var(--ti-border-2);
    color: var(--ti-text-2);
    box-shadow: var(--ti-shadow-1);
}
.ti-chip strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.ti-chip.blue   { background: rgba(10,132,255,0.08); color: var(--ti-blue);   border-color: rgba(10,132,255,0.20); }
.ti-chip.green  { background: rgba(52,199,89,0.10);  color: #0d8c3f;          border-color: rgba(52,199,89,0.22); }
.ti-chip.orange { background: rgba(255,149,0,0.10);  color: #c46a00;          border-color: rgba(255,149,0,0.22); }
.ti-chip.purple { background: rgba(175,82,222,0.08); color: var(--ti-purple); border-color: rgba(175,82,222,0.22); }

/* ─── Lista de filas ─── */
.ti-dir-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ti-dir-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) 1fr 1fr 1fr 1fr;
    gap: 0;
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-lg);
    box-shadow: var(--ti-shadow-1);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .12s ease;
}
.ti-dir-row:hover {
    box-shadow: var(--ti-shadow-2);
    transform: translateY(-1px);
}
/* Toda la fila clickeable → abre la ficha del usuario (stretched link).
   El overlay cubre la tarjeta; los enlaces internos (email, licencias,
   editar, toggle clave) quedan por encima para seguir funcionando. */
.ti-dir-row { position: relative; cursor: pointer; }
.ti-dir-row:hover { border-color: var(--ti-sage); }
.ti-dir-row-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.ti-dir-row a:not(.ti-dir-row-overlay),
.ti-dir-row button {
    position: relative;
    z-index: 2;
}
/* Fila de la vista Tabla también clickeable */
.ti-dir-tbl-row:hover { background: var(--ti-sage-tint); }
.ti-dir-cell {
    padding: 14px 16px;
    border-right: 1px solid var(--ti-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ti-dir-cell:last-child { border-right: none; }
.ti-dir-cell.ti-dir-off { opacity: 0.55; }

/* Identidad / avatar */
.ti-dir-id {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: linear-gradient(180deg, var(--ti-surface-2) 0%, var(--ti-surface) 80%);
}
.ti-dir-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ti-sage-2), var(--ti-sage));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(77,124,15,0.25);
}
.ti-dir-id-text { min-width: 0; flex: 1; }
.ti-dir-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ti-text);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.ti-dir-sub {
    font-size: 0.78rem;
    color: var(--ti-text-2);
    margin: 2px 0 0;
    line-height: 1.3;
}
.ti-dir-rut {
    font-variant-numeric: tabular-nums;
    color: var(--ti-text-3);
}
.ti-dir-agr {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.74rem;
    color: var(--ti-text-3);
    margin: 4px 0 0;
    font-weight: 500;
}
.ti-dir-agr svg { width: 11px; height: 11px; opacity: 0.7; }

/* Cabecera de cada cell */
.ti-dir-cell-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ti-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.ti-dir-cell-head svg {
    width: 12px; height: 12px;
    color: var(--ti-text-3);
}
.ti-dir-cell.ti-dir-on .ti-dir-cell-head svg {
    color: var(--ti-sage);
}
.ti-dir-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ti-text);
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
}
.ti-dir-value a {
    color: var(--ti-blue);
    text-decoration: none;
}
.ti-dir-value a:hover { text-decoration: underline; }
.ti-dir-value-empty {
    font-size: 0.78rem;
    color: var(--ti-text-3);
    margin: 0;
    font-style: italic;
}
.ti-dir-meta {
    font-size: 0.72rem;
    color: var(--ti-text-3);
    margin: 2px 0 0;
    line-height: 1.3;
}
.ti-dir-pw-btn {
    background: var(--ti-sage-tint);
    border: none;
    color: var(--ti-sage);
    padding: 2px 8px;
    border-radius: var(--ti-r-pill);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ti-dir-pw-btn:hover { background: var(--ti-sage-soft); }

/* Licencias como pills */
.ti-dir-licenses {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ti-lic-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: var(--ti-r-pill);
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(142,142,147,0.10);
    color: var(--ti-text-3);
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: transform .08s ease, filter .12s ease;
}
a.ti-lic-pill:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.ti-lic-pill.on {
    background: rgba(52,199,89,0.12);
    color: #0d8c3f;
    border-color: rgba(52,199,89,0.22);
}
.ti-lic-pill.on svg {
    width: 10px; height: 10px;
}
.ti-lic-pill.off {
    text-decoration: line-through;
    opacity: 0.55;
}
/* Colores por tipo de licencia (cuando .on) */
.ti-lic-pill.on.ti-lic-blue   { background: rgba(10,132,255,0.10);  color: var(--ti-blue);   border-color: rgba(10,132,255,0.22); }
.ti-lic-pill.on.ti-lic-orange { background: rgba(255,149,0,0.12);   color: #c46a00;          border-color: rgba(255,149,0,0.24); }
.ti-lic-pill.on.ti-lic-yellow { background: rgba(255,193,7,0.15);   color: #a17400;          border-color: rgba(255,193,7,0.30); }
.ti-lic-pill.on.ti-lic-purple { background: rgba(175,82,222,0.10);  color: var(--ti-purple); border-color: rgba(175,82,222,0.22); }
.ti-lic-pill.on.ti-lic-red    { background: rgba(255,59,48,0.10);   color: var(--ti-red);    border-color: rgba(255,59,48,0.22); }
.ti-lic-pill.on.ti-lic-green  { background: rgba(52,199,89,0.12);   color: #0d8c3f;          border-color: rgba(52,199,89,0.22); }

/* Chip que indica vínculo a un activo TI (aparece en cabecera de cell PC/celular) */
.ti-dir-asset-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    padding: 2px 7px;
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
    border-radius: var(--ti-r-pill);
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Línea meta monospace (para serial/IMEI/modelo) */
.ti-dir-meta-mono {
    font-size: 0.72rem;
    color: var(--ti-text-3);
    margin: 2px 0 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    line-height: 1.3;
    word-break: break-all;
}

/* Chips pequeños dentro de una cell (plan, valor mensual, línea) */
.ti-dir-phone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.ti-mini-chip {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--ti-r-pill);
    background: rgba(142,142,147,0.10);
    color: var(--ti-text-3);
    border: 1px solid rgba(142,142,147,0.15);
    white-space: nowrap;
}
.ti-mini-chip.green {
    background: rgba(52,199,89,0.10); color: #0d8c3f; border-color: rgba(52,199,89,0.22);
}
.ti-mini-chip.blue {
    background: rgba(10,132,255,0.08); color: var(--ti-blue); border-color: rgba(10,132,255,0.20);
}
.ti-mini-chip.orange {
    background: rgba(255,149,0,0.10); color: #c46a00; border-color: rgba(255,149,0,0.22);
}

/* ─── Mobile: stackeo de filas ─── */
@media (max-width: 1100px) {
    .ti-dir-row {
        grid-template-columns: minmax(220px, 1.4fr) 1fr 1fr;
    }
    .ti-dir-cell:nth-child(4),
    .ti-dir-cell:nth-child(5) {
        border-top: 1px solid var(--ti-border);
    }
    .ti-dir-cell:nth-child(3) { border-right: none; }
}
@media (max-width: 767px) {
    .ti-dir-row {
        grid-template-columns: 1fr;
    }
    .ti-dir-cell {
        border-right: none;
        border-bottom: 1px solid var(--ti-border);
    }
    .ti-dir-cell:last-child { border-bottom: none; }
    .ti-dir-toolbar { width: 100%; }
    .ti-dir-search { min-width: 0; flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   FICHA PERSONAL · UserProfilePage
   ═══════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

.ti-profile {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

/* ─── SIDEBAR ─── */
.ti-profile-sidebar {
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-xl);
    box-shadow: var(--ti-shadow-2);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 12px;
}

.ti-profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.ti-profile-avatar-img,
.ti-profile-avatar-initials {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(15,30,20,0.10), 0 0 0 4px rgba(101,163,13,0.08);
}
.ti-profile-avatar-initials {
    background: linear-gradient(135deg, var(--ti-sage-2), var(--ti-sage));
    color: #fff;
    font-weight: 800;
    font-size: 2.5rem;
    display: grid;
    place-items: center;
    letter-spacing: -0.02em;
}

.ti-profile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: var(--ti-r-pill);
}
.ti-profile-status.active   { background: rgba(52,199,89,0.12);  color: #0d8c3f; }
.ti-profile-status.unlinked { background: rgba(255,59,48,0.10);  color: var(--ti-red); }
.ti-profile-status .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent);
}

.ti-profile-id { text-align: center; }
.ti-profile-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ti-text);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.ti-profile-position {
    font-size: 0.85rem;
    color: var(--ti-text-3);
    margin: 4px 0 0;
}

/* Mini cards de datos clave */
.ti-profile-mini-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ti-profile-mini-card {
    background: var(--ti-surface-2);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-md);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ti-profile-mini-card .label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ti-text-3);
    font-weight: 700;
}
.ti-profile-mini-card .value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ti-text);
}
.ti-profile-mini-card .value.mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
}

/* Menú de navegación */
.ti-profile-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--ti-border);
    padding-top: 12px;
}
.ti-profile-menu-btn {
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ti-text-2);
    border-radius: var(--ti-r-md);
    transition: background .12s ease, color .12s ease;
}
.ti-profile-menu-btn .ico {
    font-size: 1.05rem;
    line-height: 1;
    width: 22px;
    text-align: center;
}
.ti-profile-menu-btn .lbl { flex: 1; }
.ti-profile-menu-btn .badge {
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--ti-r-pill);
    min-width: 22px;
    text-align: center;
}
.ti-profile-menu-btn:hover {
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
}
.ti-profile-menu-btn.active {
    background: linear-gradient(180deg, var(--ti-sage-2) 0%, var(--ti-sage) 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(77,124,15,0.25);
}
.ti-profile-menu-btn.active .badge {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Acciones del sidebar */
.ti-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--ti-border);
    padding-top: 12px;
}
.ti-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--ti-r-pill);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter .12s ease, transform .08s ease;
    border: none;
    cursor: pointer;
}
.ti-profile-btn svg { width: 14px; height: 14px; }
.ti-profile-btn.primary {
    background: linear-gradient(180deg, var(--ti-sage-2) 0%, var(--ti-sage) 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(77,124,15,0.25);
}
.ti-profile-btn.primary:hover { filter: brightness(1.07); }
.ti-profile-btn.ghost {
    background: var(--ti-surface-2);
    color: var(--ti-text-2);
    border: 1px solid var(--ti-border-2);
}
.ti-profile-btn.ghost:hover { background: var(--ti-sage-tint); color: var(--ti-sage); }

/* ─── CONTENT ─── */
.ti-profile-content {
    min-width: 0;
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-xl);
    box-shadow: var(--ti-shadow-2);
    padding: 28px 32px;
}
.ti-profile-section { min-height: 200px; }
.ti-profile-section-head {
    border-bottom: 1px solid var(--ti-border);
    padding-bottom: 14px;
    margin-bottom: 22px;
}
.ti-profile-section-head h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ti-text);
    margin: 0;
    letter-spacing: -0.02em;
}
.ti-profile-section-head p {
    font-size: 0.88rem;
    color: var(--ti-text-3);
    margin: 4px 0 0;
}

/* Grid de campos */
.ti-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 16px;
}
.ti-profile-field {
    background: var(--ti-surface-2);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-md);
    padding: 12px 14px;
}
.ti-profile-field.full { grid-column: 1 / -1; }
.ti-profile-field .lbl {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ti-text-3);
    margin-bottom: 4px;
}
.ti-profile-field .val {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ti-text);
    line-height: 1.35;
    word-break: break-word;
}
.ti-profile-field .val.mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.86rem;
}
.ti-profile-field .val.link {
    color: var(--ti-blue);
    text-decoration: none;
}
.ti-profile-field .val.link:hover { text-decoration: underline; }
.ti-profile-field .val.empty {
    color: var(--ti-text-3);
    font-weight: 500;
    font-style: italic;
}
.ti-profile-field .meta {
    font-size: 0.75rem;
    color: var(--ti-text-3);
    margin-top: 4px;
}

/* Card del activo vinculado */
.ti-profile-asset-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ti-sage-tint);
    border: 1px solid var(--ti-sage-soft);
    border-radius: var(--ti-r-md);
    padding: 14px 18px;
    margin-bottom: 22px;
    text-decoration: none;
    color: var(--ti-text);
    transition: transform .12s ease, box-shadow .15s ease;
}
.ti-profile-asset-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--ti-shadow-2);
}
.ti-profile-asset-card svg {
    width: 22px; height: 22px;
    color: var(--ti-sage);
    flex-shrink: 0;
}
.ti-profile-asset-card .title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ti-text);
    margin: 0;
}
.ti-profile-asset-card .sub {
    font-size: 0.78rem;
    color: var(--ti-sage);
    margin: 2px 0 0;
    font-weight: 600;
}

/* Licencias del banco · cards */
.ti-profile-license-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 12px;
}
.ti-profile-license-card {
    background: var(--ti-surface-2);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-md);
    padding: 14px 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.ti-profile-license-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ti-shadow-2);
    border-color: var(--ti-sage-soft);
}
.ti-profile-license-card .title {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--ti-text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ti-profile-license-card .plan {
    background: rgba(255,193,7,0.15);
    color: #a17400;
    font-size: 0.66rem;
    padding: 2px 8px;
    border-radius: var(--ti-r-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ti-profile-license-card .meta {
    font-size: 0.78rem;
    color: var(--ti-text-3);
}
.ti-profile-license-card .exp {
    font-size: 0.72rem;
    color: var(--ti-orange);
    font-weight: 600;
    margin-top: 6px;
}

/* Empty state */
.ti-profile-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ti-text-3);
    font-size: 0.92rem;
}

/* Notas */
.ti-profile-notes {
    background: var(--ti-surface-2);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-md);
    padding: 16px 18px;
    font-size: 0.92rem;
    color: var(--ti-text);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Warning de desvinculación */
.ti-profile-warn {
    background: rgba(255,59,48,0.07);
    border: 1px solid rgba(255,59,48,0.20);
    border-radius: var(--ti-r-md);
    padding: 14px 18px;
    color: var(--ti-red);
    font-size: 0.88rem;
    margin-top: 18px;
}
.ti-profile-warn strong { font-weight: 700; }

/* Hint info (azul suave, ej. "asociá al inventario") */
.ti-profile-hint {
    background: rgba(10,132,255,0.07);
    border: 1px solid rgba(10,132,255,0.18);
    border-radius: var(--ti-r-md);
    padding: 12px 16px;
    color: var(--ti-blue);
    font-size: 0.85rem;
    margin-top: 18px;
    line-height: 1.5;
}
.ti-profile-hint strong { font-weight: 700; }

/* Filament Actions montados como botones del sidebar */
.ti-profile-fa {
    display: flex;
}
.ti-profile-fa > * {
    width: 100% !important;
}
.ti-profile-fa .fi-btn,
.ti-profile-fa button[type="button"] {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Lista de actas (tab Documentos)
   ═══════════════════════════════════════════════════════════════ */
.ti-handover-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ti-handover-card {
    background: var(--ti-surface-2);
    border: 1px solid var(--ti-border);
    border-radius: var(--ti-r-md);
    padding: 16px 18px;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.ti-handover-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--ti-shadow-2);
    border-color: var(--ti-sage-soft);
}
.ti-handover-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.ti-handover-type {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--ti-r-pill);
}
.ti-handover-type.green  { background: rgba(52,199,89,0.12);  color: #0d8c3f; }
.ti-handover-type.orange { background: rgba(255,149,0,0.12);  color: #c46a00; }
.ti-handover-type.red    { background: rgba(255,59,48,0.10);  color: var(--ti-red); }
.ti-handover-type.gray   { background: rgba(142,142,147,0.12); color: var(--ti-text-3); }
.ti-handover-doc {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ti-sage);
    background: var(--ti-sage-tint);
    padding: 2px 9px;
    border-radius: var(--ti-r-pill);
}
.ti-handover-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ti-text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.ti-handover-meta {
    font-size: 0.78rem;
    color: var(--ti-text-3);
    margin: 0 0 8px;
}
.ti-handover-desc {
    font-size: 0.83rem;
    color: var(--ti-text-2);
    margin: 0 0 10px;
    line-height: 1.45;
    white-space: pre-wrap;
}
.ti-handover-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ti-handover-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ti-sage-tint);
    color: var(--ti-sage);
    border: none;
    padding: 7px 14px;
    border-radius: var(--ti-r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.ti-handover-btn:hover { background: var(--ti-sage-soft); }
.ti-handover-btn svg { width: 13px; height: 13px; }
.ti-handover-signed {
    background: rgba(52,199,89,0.10);
    color: #0d8c3f;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--ti-r-pill);
}

/* ─── Mobile ─── */
@media (max-width: 1024px) {
    .ti-profile {
        grid-template-columns: 1fr;
    }
    .ti-profile-sidebar {
        position: static;
    }
    .ti-profile-content {
        padding: 22px 18px;
    }
}
@media (max-width: 640px) {
    .ti-profile-avatar-img,
    .ti-profile-avatar-initials {
        width: 96px; height: 96px;
    }
    .ti-profile-avatar-initials { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Kanban iOS premium
   ═══════════════════════════════════════════════════════════════ */
body.ti-premium .fi-ti-kanban > .flex {
    gap: 16px !important;
    padding-bottom: 8px;
}
/* Columna */
body.ti-premium .fi-ti-kanban > .flex > div {
    background: var(--ti-surface) !important;
    border: 1px solid var(--ti-border) !important;
    border-radius: var(--ti-r-xl) !important;
    box-shadow: var(--ti-shadow-2) !important;
    padding: 14px !important;
}
body.ti-premium .fi-ti-kanban > .flex > div > .flex {
    border-bottom: 1px solid var(--ti-border) !important;
    padding-bottom: 10px !important;
}
/* Card de task */
body.ti-premium .fi-ti-kanban [data-task-id] {
    background: var(--ti-surface) !important;
    border: 1px solid var(--ti-border) !important;
    border-radius: var(--ti-r-md) !important;
    box-shadow: var(--ti-shadow-1) !important;
    padding: 12px !important;
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
body.ti-premium .fi-ti-kanban [data-task-id]:hover {
    transform: translateY(-1px);
    box-shadow: var(--ti-shadow-2) !important;
    border-color: var(--ti-sage-soft) !important;
}
body.ti-premium .fi-ti-kanban [data-empty-placeholder] {
    border-radius: var(--ti-r-md) !important;
    background: var(--ti-surface-2);
    border-color: var(--ti-border-2) !important;
}
/* Drag states */
body.ti-premium .ti-kanban-ghost {
    background: var(--ti-sage-tint) !important;
    border-color: var(--ti-sage-soft) !important;
}
body.ti-premium .ti-kanban-chosen {
    background: var(--ti-sage-tint) !important;
    border-color: var(--ti-sage) !important;
    box-shadow: var(--ti-shadow-glow) !important;
}

/* En mobile el kanban se vuelve scroll horizontal con columnas más
   angostas para que entren cómodas */
@media (max-width: 767px) {
    body.ti-premium .fi-ti-kanban > .flex > div {
        width: 270px !important;
        border-radius: var(--ti-r-lg) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   View detail (Ticket/Asset) — Infolist iOS card
   ═══════════════════════════════════════════════════════════════ */
body.ti-premium .fi-in {
    background: transparent;
}
body.ti-premium .fi-in-entry {
    padding: 10px 0 !important;
}
body.ti-premium .fi-in-entry-label {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ti-text-3) !important;
}
body.ti-premium .fi-in-entry-value {
    font-size: 0.92rem !important;
    color: var(--ti-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Tabs (Filament tabs) — segmented control iOS
   ═══════════════════════════════════════════════════════════════ */
body.ti-premium .fi-tabs {
    background: var(--ti-sage-tint) !important;
    padding: 4px !important;
    border-radius: var(--ti-r-pill) !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex;
}
body.ti-premium .fi-tabs-item {
    border-radius: var(--ti-r-pill) !important;
    border: none !important;
    padding: 7px 16px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: var(--ti-text-2) !important;
    background: transparent !important;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.ti-premium .fi-tabs-item[aria-selected="true"],
body.ti-premium .fi-tabs-item.fi-active {
    background: var(--ti-surface) !important;
    color: var(--ti-sage) !important;
    box-shadow: var(--ti-shadow-1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Modales con look iOS sheet
   ═══════════════════════════════════════════════════════════════ */
body.ti-premium .fi-modal-window {
    border-radius: var(--ti-r-xl) !important;
    box-shadow: 0 12px 48px rgba(15,30,20,0.18), 0 4px 16px rgba(15,30,20,0.10) !important;
    border: 1px solid var(--ti-border-2) !important;
}
body.ti-premium .fi-modal-header {
    padding: 18px 22px 6px !important;
}
body.ti-premium .fi-modal-heading {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}
@media (max-width: 767px) {
    body.ti-premium .fi-modal-window {
        border-radius: var(--ti-r-xl) var(--ti-r-xl) 0 0 !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
    }
}