/*
 * ============================================================
 *  INOTEK DESIGN SYSTEM — inotek-ds.css
 *  Prefijo: ids-
 *  Versión: 1.0.0
 *  Nota: Completamente aislado de Bootstrap 4 y estilos actuales.
 *        Importar Google Fonts Inter antes de este archivo.
 * ============================================================
 */

/* Unifica la tipografía en toda la app (tablas viejas, modales Bootstrap
   legacy, formularios) heredando de body en vez de depender de que cada
   vista use clases .ids-*. Los elementos con .ids-* ya fijan su propio
   font-family y no se ven afectados. */
html, body {
    font-family: var(--ids-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ============================================================
   1. TOKENS — Variables CSS
   ============================================================ */
:root {
    /* --- Paleta Principal (Azul Rebranding) --- */
    --ids-primary-50:  #eff6ff;
    --ids-primary-100: #dbeafe;
    --ids-primary-200: #bfdbfe;
    --ids-primary-400: #60a5fa;
    --ids-primary-500: #3b82f6;
    --ids-primary-600: #2563eb;
    --ids-primary-700: #1d4ed8;
    --ids-primary-glow: rgba(59, 130, 246, 0.25);

    /* --- Superficie / Fondos (Modo Claro) --- */
    --ids-bg-page:       #f8fafc;
    --ids-bg-surface:    #ffffff;
    --ids-bg-card:       #ffffff;
    --ids-bg-card-hover: #f1f5f9;
    --ids-bg-elevated:   #ffffff;
    --ids-bg-overlay:    rgba(15, 23, 42, 0.4);
    --ids-bg-input:      #f8fafc;

    /* --- Bordes --- */
    --ids-border:        rgba(15, 23, 42, 0.12);
    --ids-border-focus:  rgba(59, 130, 246, 0.6);
    --ids-border-card:   rgba(15, 23, 42, 0.08);

    /* --- Texto --- */
    --ids-text-primary:   #0f172a;
    --ids-text-secondary: #475569;
    --ids-text-muted:     #64748b;
    --ids-text-on-primary: #ffffff;

    /* --- Semánticos --- */
    --ids-success-bg:     rgba(16, 185, 129, 0.12);
    --ids-success-text:   #059669;
    --ids-success-border: rgba(16, 185, 129, 0.3);
    --ids-warning-bg:     rgba(245, 158, 11, 0.12);
    --ids-warning-text:   #d97706;
    --ids-warning-border: rgba(245, 158, 11, 0.3);
    --ids-danger-bg:      rgba(239, 68, 68, 0.12);
    --ids-danger-text:    #dc2626;
    --ids-danger-border:  rgba(239, 68, 68, 0.3);

    /* --- Prioridades --- */
    --ids-priority-urgent-bg:     rgba(236, 72, 153, 0.15);
    --ids-priority-urgent-text:   #db2777;
    --ids-priority-urgent-dot:    #ec4899;
    --ids-priority-urgent-border: rgba(236, 72, 153, 0.35);

    --ids-priority-high-bg:     rgba(239, 68, 68, 0.15);
    --ids-priority-high-text:   #dc2626;
    --ids-priority-high-dot:    #ef4444;
    --ids-priority-high-border: rgba(239, 68, 68, 0.35);

    --ids-priority-normal-bg:     rgba(59, 130, 246, 0.15);
    --ids-priority-normal-text:   #2563eb;
    --ids-priority-normal-dot:    #3b82f6;
    --ids-priority-normal-border: rgba(59, 130, 246, 0.35);

    --ids-priority-low-bg:     rgba(100, 116, 139, 0.15);
    --ids-priority-low-text:   #475569;
    --ids-priority-low-dot:    #64748b;
    --ids-priority-low-border: rgba(100, 116, 139, 0.35);

    /* --- Tipografía --- */
    --ids-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ids-text-xs:   11px;
    --ids-text-sm:   13px;
    --ids-text-base: 14px;
    --ids-text-md:   15px;
    --ids-text-lg:   17px;
    --ids-text-xl:   20px;
    --ids-text-2xl:  24px;
    --ids-text-3xl:  30px;

    --ids-weight-normal:   400;
    --ids-weight-medium:   500;
    --ids-weight-semibold: 600;
    --ids-weight-bold:     700;
    --ids-letter-tight: -0.4px;

    /* --- Radios --- */
    --ids-radius-xs:   4px;
    --ids-radius-sm:   8px;
    --ids-radius-md:   12px;
    --ids-radius-lg:   16px;
    --ids-radius-xl:   20px;
    --ids-radius-2xl:  24px;
    --ids-radius-full: 9999px;

    /* --- Sombras (Light Mode) --- */
    --ids-shadow-sm:        0 1px 2px rgba(15, 23, 42, 0.05);
    --ids-shadow-md:        0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --ids-shadow-lg:        0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --ids-shadow-glow:      0 0 15px var(--ids-primary-glow);
    --ids-shadow-card:      0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --ids-shadow-card-hover: 0 10px 20px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--ids-border-focus);

    /* --- Superficies traslúcidas (Dynamic Island) --- */
    /* Cristal claro y neutro. El contraste con el campo no lo da el tinte de la
       superficie grande, sino el propio campo hundido en gris: así se evita el
       tono azulado sobre áreas amplias. */
    --ids-island:        rgba(255, 255, 255, 0.72);
    --ids-island-strong: rgba(255, 255, 255, 0.88);
    --ids-island-border: rgba(255, 255, 255, 0.85);
    --ids-blur:          blur(24px) saturate(150%);
    --ids-shadow-island:       0 10px 30px rgba(24, 24, 27, 0.07);
    --ids-shadow-island-hover: 0 18px 40px -12px rgba(24, 24, 27, 0.14);

    /* --- Campos: grises neutros, sin componente azul --- */
    --ids-field:        #f4f4f5;
    --ids-field-hover:  #ececee;
    --ids-field-border: rgba(24, 24, 27, 0.12);
    --ids-field-read:   #e8e8ea;

    /* --- Transiciones --- */
    --ids-transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --ids-transition-base:   all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --ids-transition-slow:   all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --ids-transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    --ids-popup-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --ids-popup-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);

    /* --- Espaciado --- */
    --ids-space-1:  4px;
    --ids-space-2:  8px;
    --ids-space-3:  12px;
    --ids-space-4:  16px;
    --ids-space-5:  20px;
    --ids-space-6:  24px;
    --ids-space-8:  32px;
    --ids-space-10: 40px;
}


/* ============================================================
   2. LAYOUT
   ============================================================ */
.ids-page-wrapper {
    display: flex;
    flex-direction: column;
    background: transparent;
    font-family: var(--ids-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
}

.ids-main-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Glassmorphism Utilities */
.ids-glass-panel {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: var(--ids-space-4);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ids-glass-panel:hover {
    box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.12), 0 3px 8px -2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Sidebar */
.ids-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: transparent;
    border-right: none;
    padding: var(--ids-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-4);
    min-height: calc(100vh - 60px);
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow-y: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ids-sidebar-header {
    padding: 0 var(--ids-space-2) var(--ids-space-2);
}

.ids-sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ids-space-2);
    margin-bottom: var(--ids-space-2);
    gap: var(--ids-space-2);
}

.ids-sidebar-section-header .ids-sidebar-section-title {
    padding: 0;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.ids-sidebar-section-header .ids-flex-row {
    flex-shrink: 0;
}

.ids-sidebar-section-title {
    font-size: 11px;
    font-weight: var(--ids-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ids-text-muted);
    padding: 0 var(--ids-space-2);
    margin-bottom: var(--ids-space-2);
    display: block;
}

.ids-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ids-content {
    flex: 1;
    padding: var(--ids-space-6);
    min-width: 0;
    background: transparent;
}

.ids-content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--ids-space-6);
    gap: var(--ids-space-4);
    flex-wrap: wrap;
}

.ids-content-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ids-page-title {
    font-size: var(--ids-text-2xl);
    font-weight: var(--ids-weight-bold);
    color: var(--ids-text-primary);
    letter-spacing: var(--ids-letter-tight);
    margin: 0;
}

.ids-page-subtitle {
    font-size: var(--ids-text-sm);
    color: var(--ids-text-muted);
    margin: 0;
}

/* Grid de cards */
.ids-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ids-space-4);
    align-content: start;
}

/* Utilidades de visibilidad */
.ids-mobile-only {
    display: none !important;
}

.ids-mobile-close-panel {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: auto;
}

.ids-btn-mobile-close {
    width: 100%;
    border: 1px solid var(--ids-border);
    background: var(--ids-bg-surface);
}

@media (max-width: 900px) {
    .ids-mobile-only {
        display: block !important;
    }
    .ids-sidebar {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 200;
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        visibility: hidden;
        box-shadow: var(--ids-shadow-lg);
        min-height: unset;
        height: auto;
        max-height: 90vh;
        width: 90%;
        max-width: 400px;
        border-radius: var(--ids-radius-xl);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ids-sidebar.ids-sidebar--open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
    }
    .ids-content {
        padding: var(--ids-space-4);
    }
}

@media (max-width: 600px) {
    .ids-card-grid {
        grid-template-columns: 1fr;
        gap: var(--ids-space-3);
    }
}


/* ============================================================
   3. TOPBAR MÓVIL
   ============================================================ */
.ids-mobile-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--ids-space-3) var(--ids-space-4);
    background: var(--ids-bg-surface);
    border-bottom: 1px solid var(--ids-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ids-mobile-topbar__title {
    font-size: var(--ids-text-md);
    font-weight: var(--ids-weight-semibold);
    color: var(--ids-text-primary);
    margin: 0;
    font-family: var(--ids-font-family);
}

.ids-mobile-topbar__actions {
    display: flex;
    gap: var(--ids-space-2);
}

.ids-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--ids-bg-overlay);
    z-index: 199;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 900px) {
    .ids-mobile-topbar { display: flex; }
    .ids-sidebar-overlay.ids-sidebar-overlay--visible { display: block; }
}


/* ============================================================
   4. CARDS DE TICKET
   ============================================================ */
.ids-ticket-card {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 40px rgba(0,0,0,0.09);
    cursor: default;
    animation: ids-fade-in 0.4s ease backwards;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease,
                height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                min-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.ids-ticket-card:hover {
    transform: scale(1.02) translateY(-6px);
}

.ids-ticket-card--urgent:hover { box-shadow: 0 20px 40px -10px rgba(236, 72, 153, 0.4); border-color: rgba(236, 72, 153, 0.4); }
.ids-ticket-card--high:hover   { box-shadow: 0 20px 40px -10px rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 0.4); }
.ids-ticket-card--normal:hover { box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.4); border-color: rgba(59, 130, 246, 0.4); }
.ids-ticket-card--low:hover    { box-shadow: 0 20px 40px -10px rgba(100, 116, 139, 0.4); border-color: rgba(100, 116, 139, 0.4); }

.ids-ticket-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 6px;
    min-width: 0;
}

.ids-ticket-card--urgent .ids-ticket-card__header {
    background: linear-gradient(180deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.25));
    border-bottom: 1px solid rgba(236, 72, 153, 0.1);
}
.ids-ticket-card--high .ids-ticket-card__header {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    border-bottom: 1px solid rgba(239, 68, 68, 0.1);
}
.ids-ticket-card--normal .ids-ticket-card__header {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.25));
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}
.ids-ticket-card--low .ids-ticket-card__header {
    background: linear-gradient(180deg, rgba(100, 116, 139, 0.15), rgba(100, 116, 139, 0.25));
    border-bottom: 1px solid rgba(100, 116, 139, 0.1);
}

/* Glossy Badges for Ticket Card Header (Status, Role & Priority) */
.ids-ticket-card__header .ids-badge {
    border-radius: 9999px;
    padding: 3px 8px;
    border: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.15px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ids-ticket-card__header .ids-badge svg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
}

/* Glossy styles for Status Badges */
.ids-ticket-card__header .ids-badge--status-pending {
    background: linear-gradient(180deg, #94a3b8, #64748b);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(100, 116, 139, 0.3);
}
.ids-ticket-card__header .ids-badge--status-in-progress,
.ids-ticket-card__header .ids-badge--status-in_progress {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(14, 165, 233, 0.3);
}
.ids-ticket-card__header .ids-badge--status-testing {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(245, 158, 11, 0.3);
}
.ids-ticket-card__header .ids-badge--status-review {
    background: linear-gradient(180deg, #a78bfa, #8b5cf6);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(139, 92, 246, 0.3);
}
.ids-ticket-card__header .ids-badge--status-done {
    background: linear-gradient(180deg, #34d399, #10b981);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(16, 185, 129, 0.3);
}
.ids-ticket-card__header .ids-badge--role {
    background: linear-gradient(180deg, #818cf8, #6366f1);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(99, 102, 241, 0.3);
    max-width: 95px;
    min-width: 0;
    flex-shrink: 1;
}
.ids-ticket-card__header .ids-badge--role .ids-badge__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Priority Pill inside Card Header: Always visible in expanded mode, compact glowing dot in collapsed mode (expands on hover) */
.ids-ticket-card__header .ids-badge--priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 120px;
    padding: 3px 8px;
    margin: 0 1px;
    border-radius: 9999px;
    border: none;
    overflow: hidden;
    cursor: default;
    user-select: none;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                transform 0.3s ease;
}

.ids-ticket-card__header .ids-badge--priority .ids-badge__line {
    display: none !important;
}

.ids-ticket-card__header .ids-badge--priority .ids-badge__text {
    max-width: 80px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
    margin: 0;
}

/* Estilos Glossy Cristalizado Sólido por nivel de urgencia */
.ids-ticket-card__header .ids-badge--priority.ids-badge--urgent {
    background: linear-gradient(180deg, #ec4899, #be185d);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(236, 72, 153, 0.35);
}

.ids-ticket-card__header .ids-badge--priority.ids-badge--high {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(239, 68, 68, 0.35);
}

.ids-ticket-card__header .ids-badge--priority.ids-badge--normal {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(59, 130, 246, 0.35);
}

.ids-ticket-card__header .ids-badge--priority.ids-badge--low {
    background: linear-gradient(180deg, #64748b, #334155);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(100, 116, 139, 0.35);
}

/* Modo colapsado: Puntito compacto por defecto */
.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--priority {
    width: 12px;
    height: 12px;
    min-width: 8px;
    min-height: 8px;
    max-width: 12px;
    padding: 0;
}

.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--priority .ids-badge__text {
    max-width: 0;
    opacity: 0;
}

.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--priority.ids-badge--urgent {
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}
.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--priority.ids-badge--high {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--priority.ids-badge--normal {
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}
.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--priority.ids-badge--low {
    box-shadow: 0 0 8px rgba(100, 116, 139, 0.6);
}

/* Hover en modo colapsado: se transforma en la pill cristalizada sólida con label */
.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--priority {
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 120px;
    padding: 3px 8px;
}

.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--priority .ids-badge__text {
    max-width: 80px;
    opacity: 1;
}

.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--priority.ids-badge--urgent {
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(236, 72, 153, 0.35);
}
.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--priority.ids-badge--high {
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(239, 68, 68, 0.35);
}
.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--priority.ids-badge--normal {
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(59, 130, 246, 0.35);
}
.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--priority.ids-badge--low {
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(100, 116, 139, 0.35);
}

/* Badges informativos del header (progreso de subtareas / total de comentarios):
   Diseño de cápsula de cristal oscuro sólido-translúcido (Dark Glassmorphism)
   neutro y de alto contraste con texto e íconos en blanco (#fff), ideal para
   cualquier fondo de color de tarjeta. Mismo mecanismo de colapso con hover fluido. */
.ids-ticket-card__header .ids-badge--info-pill {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    padding: 3px 8px;
    margin: 0 1px;
    border-radius: 9999px;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.82) 0%, rgba(15, 23, 42, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 11px;
    font-weight: var(--ids-weight-semibold, 600);
    line-height: 1.3;
    letter-spacing: -0.15px;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.2s ease,
                color 0.2s ease;
}

.ids-ticket-card__header .ids-badge--info-pill:hover {
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.92) 0%, rgba(30, 41, 59, 0.98) 100%);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.26);
    color: #ffffff;
    transform: translateY(-0.5px);
}

.ids-ticket-card__header .ids-badge--info-pill svg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    stroke: currentColor;
    opacity: 0.95;
    stroke-width: 2.2;
}

.ids-ticket-card__header .ids-badge--info-pill .ids-badge__text {
    max-width: 50px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    color: #ffffff;
    transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
}

.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--info-pill {
    padding: 3px 6px;
}

.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--info-pill .ids-badge__text {
    max-width: 0;
    opacity: 0;
}

.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--info-pill {
    padding: 3px 8px;
}

.ids-ticket-card--collapsed:hover .ids-ticket-card__header .ids-badge--info-pill .ids-badge__text {
    max-width: 50px;
    opacity: 1;
}

/* Badge de Comentarios (Dark Glass Neutro) */
.ids-ticket-card__header .ids-badge--comments-count {
    color: #ffffff;
}

/* Badge de Tareas / Subtareas (Dark Glass Neutro) */
.ids-ticket-card__header .ids-badge--tasks {
    color: #ffffff;
}

/* Badge de Tareas cuando están 100% completadas: Dark Emerald Glass */
.ids-ticket-card__header .ids-badge--tasks.ids-badge--tasks-completed {
    background: linear-gradient(180deg, rgba(6, 95, 70, 0.88) 0%, rgba(4, 78, 58, 0.96) 100%);
    border: 1px solid rgba(52, 211, 153, 0.4);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(5, 150, 105, 0.3);
    color: #ffffff;
}

.ids-ticket-card__header .ids-badge--tasks.ids-badge--tasks-completed:hover {
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.95) 0%, rgba(4, 120, 87, 0.98) 100%);
    border-color: rgba(110, 231, 183, 0.6);
    box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.45), 0 4px 10px rgba(5, 150, 105, 0.4);
}

.ids-ticket-card__badges {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ids-ticket-card__badges .ids-badge-shortcut {
    min-width: 0;
    flex-shrink: 0;
    user-select: none;
}

.ids-ticket-card__body {
    padding: var(--ids-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-3);
    flex: 1;
    background: transparent;
}

.ids-ticket-card__title {
    font-size: var(--ids-text-md);
    font-weight: var(--ids-weight-semibold);
    color: var(--ids-text-primary);
    line-height: 1.4;
    letter-spacing: var(--ids-letter-tight);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-ticket-card__desc {
    font-size: var(--ids-text-sm);
    color: var(--ids-text-secondary);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ids-ticket-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: var(--ids-space-3) var(--ids-space-5);
    background: rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(0,0,0,0.03);
    gap: var(--ids-space-2);
    transition: padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.35s ease;
}

.ids-ticket-card__meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--ids-space-3);
    font-size: var(--ids-text-xs);
    color: var(--ids-text-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ids-ticket-card__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-radius: var(--ids-radius-xs);
    transition: var(--ids-transition-fast);
    flex-shrink: 0;
}

.ids-ticket-card__meta-item:hover {
    color: var(--ids-text-primary);
}

.ids-ticket-card__meta-item--due-overdue {
    color: var(--ids-danger-text, #dc2626);
    font-weight: var(--ids-weight-semibold);
}

.ids-ticket-card__meta-item--due-today {
    color: #b45309;
    font-weight: var(--ids-weight-semibold);
}

/* Ícono "creado / última actualización": el menos prioritario del footer — es el
   primero en encogerse a nada si no cabe todo en una sola línea (el footer nunca
   debe saltar a una segunda fila; si hay espacio se queda visible normalmente). */
.ids-ticket-card__meta-item--dates {
    flex-shrink: 1;
    min-width: 0;
    opacity: 0.55;
}

.ids-ticket-card__meta-item--dates:hover {
    opacity: 0.9;
}

/* Kanban: menos aire entre descripción y footer que en Inotek — el body/footer
   base comparten padding vertical simétrico (--ids-space-5/--ids-space-4), acá se
   recorta solo el borde que colinda entre ambos. */
.ids-kanban-card .ids-ticket-card__body {
    padding-bottom: var(--ids-space-2);
}

.ids-ticket-card__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-ticket-card__actions .ids-btn {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: ids-island-btn-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ids-island-btn-pop {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(4px);
    }
    70% {
        transform: scale(1.06);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Stagger de animación para cards */
.ids-ticket-card:nth-child(1)  { animation-delay: 0.04s; }
.ids-ticket-card:nth-child(2)  { animation-delay: 0.09s; }
.ids-ticket-card:nth-child(3)  { animation-delay: 0.14s; }
.ids-ticket-card:nth-child(4)  { animation-delay: 0.19s; }
.ids-ticket-card:nth-child(5)  { animation-delay: 0.24s; }
.ids-ticket-card:nth-child(6)  { animation-delay: 0.29s; }
.ids-ticket-card:nth-child(7)  { animation-delay: 0.34s; }
.ids-ticket-card:nth-child(8)  { animation-delay: 0.39s; }
.ids-ticket-card:nth-child(9)  { animation-delay: 0.44s; }
.ids-ticket-card:nth-child(n+10) { animation-delay: 0.48s; }

.ids-ticket-card--deleting {
    animation: ids-card-exit 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
    overflow: hidden;
}

/* ============================================================
   4.1 CARDS DE TICKET COLAPSABLES (MODO MINIMIZADO)
   ============================================================ */
.ids-ticket-card__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ids-ticket-card__header .ids-btn.ids-btn--icon,
.ids-kanban-card__collapse-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ids-text-muted);
    transition: color 0.2s ease, background 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: transparent;
    border: none;
    border-radius: var(--ids-radius-full);
}

/* Glyph de estado rápido (reemplaza el grip de "arrastrar" — sigue siendo el
   mismo elemento/clase para no romper el drag de SortableJS, que arrastra la
   card completa y no depende de este handle en particular). Prioridad visual:
   vencida > mensaje sin ver > vence hoy > todo en orden. */
.ids-kanban-card__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ids-text-muted);
    opacity: 0.55;
    flex-shrink: 0;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.ids-kanban-card__drag-handle--overdue { color: var(--ids-danger-text, #dc2626); opacity: 1; }
.ids-kanban-card__drag-handle--today   { color: #b45309; opacity: 1; }
.ids-kanban-card__drag-handle--unseen  {
    color: #7c3aed;
    opacity: 1;
    animation: ids-status-glyph-pulse 1.4s ease-in-out infinite;
}
.ids-kanban-card__drag-handle--ok {
    color: #0f172a;
    opacity: 0.85;
}

.ids-kanban-card__drag-handle--ok:hover {
    color: #000000;
    opacity: 1;
}

@keyframes ids-status-glyph-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.18); }
}

.ids-kanban-card__collapse-btn:hover {
    color: var(--ids-text-primary);
    background: rgba(255, 255, 255, 0.4);
}

.ids-card-collapse-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
}

.ids-ticket-card--collapsed .ids-card-collapse-icon {
    transform: rotate(180deg);
}

/* Header Pills en estado Colapsado */
.ids-ticket-card__header .ids-badge--project-pill,
.ids-ticket-card__header .ids-badge--date-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--ids-text-xs);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--ids-radius-full);
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transform: scale(0.85);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.ids-ticket-card__header .ids-badge--project-pill {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--ids-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.ids-ticket-card__header .ids-badge--date-pill {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ids-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--project-pill,
.ids-ticket-card--collapsed .ids-ticket-card__header .ids-badge--date-pill {
    opacity: 1;
    max-width: 180px;
    padding: 4px 10px;
    transform: scale(1);
    pointer-events: auto;
}

/* Transiciones de Colapso para Body, Descripción y Footer */
.ids-ticket-card__body {
    transition: padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                gap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-ticket-card__desc {
    max-height: 120px;
    opacity: 1;
    transition: max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease,
                margin 0.35s ease,
                padding 0.35s ease;
    overflow: hidden;
}

.ids-ticket-card--collapsed .ids-ticket-card__body {
    padding: var(--ids-space-3) var(--ids-space-5);
    gap: 0;
}

.ids-ticket-card--collapsed .ids-ticket-card__desc {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.ids-ticket-card__footer {
    max-height: 80px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.35s ease;
}

.ids-ticket-card--collapsed .ids-ticket-card__footer {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    pointer-events: none;
}


/* ============================================================
   5. BADGES
   ============================================================ */
.ids-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--ids-radius-full);
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-semibold);
    font-family: var(--ids-font-family);
    border: 1px solid transparent;
    cursor: default;
    line-height: 1.6;
    white-space: nowrap;
    transition: var(--ids-transition-fast);
}

.ids-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Priority Badges in Assigned Items - Compact Lateral Line + Smooth Expandable Hover Text */
.ids-assigned-item .ids-badge--priority {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px 7px;
    border-radius: var(--ids-radius-full);
    border: 1px solid transparent;
    font-size: var(--ids-text-xs);
    font-weight: 600;
    line-height: 1.2;
    cursor: default;
    position: relative;
    user-select: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ids-assigned-item .ids-badge--priority .ids-badge__line {
    width: 3px;
    height: 13px;
    border-radius: var(--ids-radius-full);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.ids-assigned-item .ids-badge--priority .ids-badge__text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    transition: max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease,
                margin-left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Transición al hacer Hover en ítems asignados */
.ids-assigned-item:hover .ids-badge--priority {
    padding: 4px 11px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ids-assigned-item:hover .ids-badge--priority .ids-badge__text {
    max-width: 80px;
    opacity: 1;
    margin-left: 6px;
}

.ids-assigned-item:hover .ids-badge--priority .ids-badge__line {
    transform: scaleY(1.15);
}

/* Prioridades (Colores con fondo traslúcido y línea sólida) */
.ids-badge--urgent {
    background: var(--ids-priority-urgent-bg);
    color: var(--ids-priority-urgent-text);
    border-color: var(--ids-priority-urgent-border);
}
.ids-badge--urgent .ids-badge__line,
.ids-badge--urgent .ids-badge__dot {
    background: var(--ids-priority-urgent-dot);
}

.ids-badge--high {
    background: var(--ids-priority-high-bg);
    color: var(--ids-priority-high-text);
    border-color: var(--ids-priority-high-border);
}
.ids-badge--high .ids-badge__line,
.ids-badge--high .ids-badge__dot {
    background: var(--ids-priority-high-dot);
}

.ids-badge--normal {
    background: var(--ids-priority-normal-bg);
    color: var(--ids-priority-normal-text);
    border-color: var(--ids-priority-normal-border);
}
.ids-badge--normal .ids-badge__line,
.ids-badge--normal .ids-badge__dot {
    background: var(--ids-priority-normal-dot);
}

.ids-badge--low {
    background: var(--ids-priority-low-bg);
    color: var(--ids-priority-low-text);
    border-color: var(--ids-priority-low-border);
}
.ids-badge--low .ids-badge__line,
.ids-badge--low .ids-badge__dot {
    background: var(--ids-priority-low-dot);
}

/* Estados */
.ids-badge--status-pending     { background: rgba(100, 116, 139, 0.15); color: #475569; border-color: rgba(100, 116, 139, 0.35); }
.ids-badge--status-pending .ids-badge__dot { background: #64748b; }

.ids-badge--status-in-progress,
.ids-badge--status-in_progress { background: rgba(14, 165, 233, 0.15); color: #0284c7; border-color: rgba(14, 165, 233, 0.35); }
.ids-badge--status-in-progress .ids-badge__dot,
.ids-badge--status-in_progress .ids-badge__dot { background: #0ea5e9; }

.ids-badge--status-testing     { background: rgba(245, 158, 11, 0.15); color: #d97706; border-color: rgba(245, 158, 11, 0.35); }
.ids-badge--status-testing .ids-badge__dot { background: #f59e0b; }

.ids-badge--status-review      { background: rgba(139, 92, 246, 0.15); color: #7c3aed; border-color: rgba(139, 92, 246, 0.35); }
.ids-badge--status-review .ids-badge__dot { background: #8b5cf6; }

.ids-badge--status-done        { background: rgba(16, 185, 129, 0.15); color: #059669; border-color: rgba(16, 185, 129, 0.35); }
.ids-badge--status-done .ids-badge__dot { background: #10b981; }

.ids-badge--status-rejected    { background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.35); }
.ids-badge--status-rejected .ids-badge__dot { background: #ef4444; }

.ids-badge--role               { background: rgba(99, 102, 241, 0.15); color: #4f46e5; border-color: rgba(99, 102, 241, 0.35); }

.ids-badge--clickable { cursor: pointer; }
.ids-badge--clickable:hover { filter: brightness(1.15); transform: scale(1.04); }

/* Rango de fecha activo del dashboard: Dynamic Island iOS Pill & Popover */
.ids-date-scope {
    position: relative;
    flex-shrink: 0;
}

.ids-badge--date-scope {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 5px;
    border-radius: var(--ids-radius-full);
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-semibold);
    letter-spacing: -0.2px;
    color: var(--ids-primary-700);
    background: rgba(37, 99, 235, 0.09);
    border: 1px solid rgba(37, 99, 235, 0.25);
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(37, 99, 235, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.25s ease;
    flex-shrink: 0;
}

.ids-badge--date-scope:hover {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 1), 0 4px 12px rgba(37, 99, 235, 0.16);
    transform: translateY(-1px) scale(1.02);
}

.ids-badge--date-scope:active {
    transform: scale(0.96);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

#ids-date-scope-btn[aria-expanded="true"] {
    background: rgba(37, 99, 235, 0.18);
    border-color: var(--ids-primary-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), inset 0 1px 0.5px rgba(255, 255, 255, 1);
}

.ids-date-scope-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.15);
    color: var(--ids-primary-600);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                color 0.2s ease;
    flex-shrink: 0;
}

.ids-badge--date-scope:hover .ids-date-scope-icon-box,
#ids-date-scope-btn[aria-expanded="true"] .ids-date-scope-icon-box {
    transform: scale(1.1) rotate(-6deg);
    background: var(--ids-primary-600);
    color: #ffffff;
}

.ids-date-scope-label {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.ids-date-scope-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--ids-primary-500);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease;
    flex-shrink: 0;
}

#ids-date-scope-btn[aria-expanded="true"] .ids-date-scope-chevron {
    transform: rotate(180deg);
    color: var(--ids-primary-700);
}

/* Menu popover Dynamic Island iOS */
.ids-date-scope-menu {
    position: fixed;
    min-width: 250px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--ids-radius-xl);
    box-shadow: 0 20px 40px -6px rgba(15, 23, 42, 0.14),
                0 4px 12px -2px rgba(15, 23, 42, 0.06),
                0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: var(--ids-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transform-origin: top left;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                visibility 0.2s;
    pointer-events: none;
}

.ids-date-scope-menu--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ids-date-scope-menu__header {
    padding: 6px 10px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ids-date-scope-menu__title {
    font-size: 10.5px;
    font-weight: var(--ids-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ids-text-muted);
}

.ids-date-scope-menu__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ids-date-scope-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--ids-radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--ids-text-sm);
    font-family: var(--ids-font-family);
    font-weight: var(--ids-weight-medium);
    color: var(--ids-text-primary);
    transition: background-color 0.15s ease,
                transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.15s ease;
    position: relative;
}

.ids-date-scope-option:hover {
    background: rgba(15, 23, 42, 0.05);
    transform: translateX(3px);
}

.ids-date-scope-option:active {
    transform: scale(0.98) translateX(3px);
}

.ids-date-scope-option--active {
    background: rgba(37, 99, 235, 0.1) !important;
    color: var(--ids-primary-700) !important;
    font-weight: var(--ids-weight-semibold);
}

.ids-date-scope-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--ids-radius-sm);
    background: rgba(15, 23, 42, 0.04);
    color: var(--ids-text-muted);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ids-date-scope-option--active .ids-date-scope-option__icon {
    background: rgba(37, 99, 235, 0.16);
    color: var(--ids-primary-600);
}

.ids-date-scope-option__label {
    flex: 1;
    text-align: left;
}

.ids-date-scope-option__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ids-primary-600);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.ids-date-scope-option--active .ids-date-scope-option__check {
    opacity: 1;
    transform: scale(1);
}

.ids-date-scope-custom {
    padding: 10px 6px 4px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    margin-top: 4px;
    animation: idsScopeCustomFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes idsScopeCustomFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ids-date-scope-custom__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ids-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ids-date-field__label {
    font-size: 10.5px;
    font-weight: var(--ids-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ids-text-muted);
    padding-left: 2px;
}

.ids-date-input {
    padding: 6px 8px;
    font-size: 12px;
    border-radius: var(--ids-radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: rgba(255, 255, 255, 0.95);
    font-family: var(--ids-font-family);
    color: var(--ids-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ids-date-input:focus {
    outline: none;
    border-color: var(--ids-primary-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}


/* ============================================================
   6. BOTONES
   ============================================================ */
.ids-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ids-space-2);
    padding: 9px 18px;
    border-radius: var(--ids-radius-sm);
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-semibold);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--ids-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    outline: none;
}

.ids-btn:focus-visible {
    outline: 2px solid var(--ids-primary-500);
    outline-offset: 2px;
}

.ids-btn--primary {
    background: var(--ids-primary-500);
    color: white;
    border-color: var(--ids-primary-500);
}
.ids-btn--primary:hover {
    background: var(--ids-primary-600);
    border-color: var(--ids-primary-600);
    box-shadow: 0 4px 14px var(--ids-primary-glow);
    transform: translateY(-1px);
}
.ids-btn--primary:active { transform: translateY(0); box-shadow: none; }

.ids-btn--ghost {
    background: transparent;
    color: var(--ids-text-secondary);
    border-color: var(--ids-border);
}
.ids-btn--ghost:hover {
    background: var(--ids-bg-elevated);
    color: var(--ids-text-primary);
    border-color: rgba(148,163,184,0.25);
}

.ids-btn--danger {
    background: var(--ids-danger-bg);
    color: var(--ids-danger-text);
    border-color: var(--ids-danger-border);
}
.ids-btn--danger:hover {
    background: rgba(239,68,68,0.22);
    border-color: rgba(248,113,113,0.5);
}

.ids-btn--take-action {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
    font-weight: 500;
    transition: all var(--ids-trans-fast);
}
.ids-btn--take-action:hover {
    background: rgba(56, 189, 248, 0.22);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.6);
    transform: translateY(-1px);
}

.ids-btn--taken-by {
    background: rgba(148, 163, 184, 0.08) !important;
    color: var(--ids-text-muted) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    cursor: not-allowed !important;
    opacity: 0.85;
}
.ids-btn--taken-self {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    cursor: default;
}

.ids-btn--icon {
    padding: 7px;
    background: transparent;
    border-color: transparent;
    color: var(--ids-text-muted);
    border-radius: var(--ids-radius-sm);
}
.ids-btn--icon:hover {
    background: var(--ids-bg-elevated);
    color: var(--ids-text-primary);
}

.ids-btn--xs {
    padding: 3px 8px;
    font-size: var(--ids-text-xs);
    border-radius: var(--ids-radius-sm);
    gap: 4px;
    line-height: 1.2;
}

.ids-btn--xs.ids-btn--icon {
    padding: 4px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ids-btn--sm { padding: 6px 12px; font-size: var(--ids-text-xs); }
.ids-btn--lg { padding: 12px 24px; font-size: var(--ids-text-md); border-radius: var(--ids-radius-md); }
/* Un <a> no entiende `disabled`: IdsAction le pone esta clase para apagarlo. */
.ids-btn--disabled,
.ids-btn[disabled]{
    opacity: .45;
    pointer-events: none;
}


/* ============================================================
   7. INPUTS / FORMS
   ============================================================ */
.ids-grid-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ids-space-4);
}
@media (max-width: 600px) {
    .ids-grid-2-cols {
        grid-template-columns: 1fr;
    }
}

.ids-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-2);
}

.ids-label {
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
    color: var(--ids-text-secondary);
    font-family: var(--ids-font-family);
}

.ids-label--required::after {
    content: ' *';
    color: var(--ids-priority-urgent-text);
}

.ids-input,
.ids-textarea,
.ids-select {
    width: 100%;
    background: var(--ids-bg-input);
    border: 1px solid var(--ids-border);
    border-radius: var(--ids-radius-sm);
    padding: 10px 14px;
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-base);
    color: var(--ids-text-primary);
    outline: none;
    transition: var(--ids-transition-fast);
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.ids-input::placeholder,
.ids-textarea::placeholder { color: var(--ids-text-muted); }

.ids-input:focus,
.ids-textarea:focus,
.ids-select:focus {
    border-color: var(--ids-primary-500);
    box-shadow: 0 0 0 3px var(--ids-primary-glow);
}

/* `<input type="file">`: el navegador no deja personalizar el control por
   completo, pero sí su botón nativo — así el "Elegir archivo" gris del
   sistema pasa a ser una píldora azul, igual que el resto de los botones. */
input.ids-input[type="file"] {
    padding: 7px 12px;
    cursor: pointer;
}
input.ids-input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--ids-radius-full);
    background: var(--ids-primary-600);
    color: #fff;
    font-family: inherit;
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-semibold);
    cursor: pointer;
    transition: background .15s ease;
}
input.ids-input[type="file"]::file-selector-button:hover { background: var(--ids-primary-700); }

.ids-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.ids-select-wrapper {
    position: relative;
}

.ids-select-wrapper::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--ids-text-muted);
    pointer-events: none;
}

/* --- Field Presence & Lock State --- */
.ids-input-locked {
    background-color: rgba(245, 158, 11, 0.06) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.9;
}

.ids-field-presence-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ids-space-2, 6px);
    margin-top: 4px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--ids-radius-sm, 6px);
    font-size: 0.78rem;
    font-weight: 500;
    color: #d97706;
    animation: idsBadgeFadeIn 0.25s ease-out;
    width: fit-content;
}

.ids-presence-dot {
    width: 8px;
    height: 8px;
    background-color: #f59e0b;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: idsPresencePulse 1.4s infinite cubic-bezier(0.66, 0, 0, 1);
    flex-shrink: 0;
}

.ids-presence-text {
    line-height: 1.2;
}

@keyframes idsPresencePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

@keyframes idsBadgeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Badge de presencia solo-avatar (reemplaza el texto "X está escribiendo...") --- */
.ids-field-presence-badge--avatar-only {
    display: inline-flex;
    padding: 0;
    margin-top: 4px;
    background: transparent;
    border: none;
    width: fit-content;
    animation: idsPresencePopIn var(--ids-transition-spring);
}

.ids-field-presence-badge--leaving {
    animation: idsPresencePopOut var(--ids-transition-spring) forwards;
}

.ids-presence-avatar {
    position: relative;
    box-shadow: 0 0 0 2px var(--ids-bg-surface, #fff), 0 0 0 3.5px rgba(245, 158, 11, 0.55);
}

.ids-presence-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
    animation: idsPresencePulse 1.4s infinite cubic-bezier(0.66, 0, 0, 1);
    pointer-events: none;
}

@keyframes idsPresencePopIn {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes idsPresencePopOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.4);
    }
}

/* --- Flash de "bloque pegado" (Ctrl+V), distinto de la animación de tecleo letra a letra --- */
.ids-input-pasted {
    animation: idsPasteFlash var(--ids-transition-spring);
}

@keyframes idsPasteFlash {
    0% {
        background-color: rgba(59, 130, 246, 0.16);
        transform: scale(0.994);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* Pill selector de prioridad */
.ids-pill-selector {
    display: flex;
    gap: var(--ids-space-2);
    flex-wrap: wrap;
}

.ids-pill-option {
    flex: 1;
    min-width: 64px;
    padding: 8px 10px;
    border-radius: var(--ids-radius-sm);
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-semibold);
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--ids-border);
    background: var(--ids-bg-input);
    color: var(--ids-text-muted);
    transition: var(--ids-transition-fast);
}

.ids-pill-option:hover {
    border-color: rgba(148,163,184,0.3);
    color: var(--ids-text-secondary);
}

.ids-pill-option.ids-selected--urgent {
    background: var(--ids-priority-urgent-bg);
    color: var(--ids-priority-urgent-text);
    border-color: var(--ids-priority-urgent-border);
}
.ids-pill-option.ids-selected--high {
    background: var(--ids-priority-high-bg);
    color: var(--ids-priority-high-text);
    border-color: var(--ids-priority-high-border);
}
.ids-pill-option.ids-selected--normal {
    background: var(--ids-priority-normal-bg);
    color: var(--ids-priority-normal-text);
    border-color: var(--ids-priority-normal-border);
}
.ids-pill-option.ids-selected--low {
    background: var(--ids-priority-low-bg);
    color: var(--ids-priority-low-text);
    border-color: var(--ids-priority-low-border);
}

/* Buscador */
.ids-search {
    position: relative;
}

.ids-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ids-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.ids-search .ids-input {
    padding-left: 38px;
}


/* ============================================================
   8. CHIPS / FILTROS SIDEBAR
   ============================================================ */
.ids-chip {
    display: flex;
    align-items: center;
    gap: var(--ids-space-2);
    padding: 8px 10px;
    border-radius: var(--ids-radius-sm);
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
    color: var(--ids-text-secondary);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: var(--ids-transition-fast);
    outline: none;
}

.ids-chip:hover {
    background: var(--ids-bg-elevated);
    color: var(--ids-text-primary);
}

/* Base active style with solid glassy background */
.ids-btn.ids-btn--active {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #d97706 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Projects List Edit Mode Styling */
.ids-projects-sidebar-section.ids-projects-list--edit-mode .ids-chip[data-filter-project]:not([data-filter-project="0"]) {
    border: 1px dashed rgba(245, 158, 11, 0.6);
    background: rgba(254, 243, 199, 0.35);
    color: #b45309;
}

.ids-projects-sidebar-section.ids-projects-list--edit-mode .ids-chip[data-filter-project]:not([data-filter-project="0"]):hover {
    background: rgba(254, 243, 199, 0.75);
    border-color: #f59e0b;
    color: #92400e;
    transform: translateX(3px);
}

.ids-chip.ids-chip--active {
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(59, 130, 246, 0.3);
    position: relative;
    padding-left: 17px;
    border: none;
}

.ids-chip.ids-chip--active::before {
    content: '';
    position: absolute;
    left: 6px;
    width: 3px;
    height: 14px;
    background: #ffffff;
    border-radius: var(--ids-radius-full);
}

.ids-chip.ids-chip--active .ids-chip__count {
    color: #3b82f6;
    background: #ffffff;
}

/* Badges inside active chips become frosted glass for contrast */
.ids-chip.ids-chip--active .ids-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.ids-chip.ids-chip--active .ids-badge .ids-badge__dot {
    background: #ffffff !important;
}

/* Priority: Urgent */
.ids-chip.ids-chip--priority-urgent.ids-chip--active {
    background: linear-gradient(180deg, #f472b6, #ec4899);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(236, 72, 153, 0.3);
}
.ids-chip.ids-chip--priority-urgent.ids-chip--active .ids-chip__count { color: #ec4899; }

/* Priority: High */
.ids-chip.ids-chip--priority-high.ids-chip--active {
    background: linear-gradient(180deg, #f87171, #ef4444);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(239, 68, 68, 0.3);
}
.ids-chip.ids-chip--priority-high.ids-chip--active .ids-chip__count { color: #ef4444; }

/* Priority: Low */
.ids-chip.ids-chip--priority-low.ids-chip--active {
    background: linear-gradient(180deg, #94a3b8, #64748b);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(100, 116, 139, 0.3);
}
.ids-chip.ids-chip--priority-low.ids-chip--active .ids-chip__count { color: #64748b; }

/* Status: Assigned */
.ids-chip.ids-chip--status-assigned.ids-chip--active {
    background: linear-gradient(180deg, #fb923c, #f97316);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(249, 115, 22, 0.3);
}
.ids-chip.ids-chip--status-assigned.ids-chip--active .ids-chip__count { color: #f97316; }

/* Status: Pending */
.ids-chip.ids-chip--status-pending.ids-chip--active {
    background: linear-gradient(180deg, #94a3b8, #64748b);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(100, 116, 139, 0.3);
}
.ids-chip.ids-chip--status-pending.ids-chip--active .ids-chip__count { color: #64748b; }

/* Status: In Progress */
.ids-chip.ids-chip--status-in_progress.ids-chip--active,
.ids-chip.ids-chip--status-in-progress.ids-chip--active {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(14, 165, 233, 0.3);
}
.ids-chip.ids-chip--status-in_progress.ids-chip--active .ids-chip__count,
.ids-chip.ids-chip--status-in-progress.ids-chip--active .ids-chip__count { color: #0ea5e9; }

/* Status: Testing */
.ids-chip.ids-chip--status-testing.ids-chip--active {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(245, 158, 11, 0.3);
}
.ids-chip.ids-chip--status-testing.ids-chip--active .ids-chip__count { color: #f59e0b; }

/* Status: Review */
.ids-chip.ids-chip--status-review.ids-chip--active {
    background: linear-gradient(180deg, #a78bfa, #8b5cf6);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(139, 92, 246, 0.3);
}
.ids-chip.ids-chip--status-review.ids-chip--active .ids-chip__count { color: #8b5cf6; }

/* Status: Done */
.ids-chip.ids-chip--status-done.ids-chip--active {
    background: linear-gradient(180deg, #34d399, #10b981);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(16, 185, 129, 0.3);
}
.ids-chip.ids-chip--status-done.ids-chip--active .ids-chip__count { color: #10b981; }

.ids-chip__count {
    margin-left: auto;
    font-size: var(--ids-text-xs);
    color: var(--ids-text-muted);
    background: var(--ids-bg-elevated);
    padding: 1px 7px;
    border-radius: var(--ids-radius-full);
    flex-shrink: 0;
}

/* Botón nueva tarea (sidebar) */
.ids-new-ticket-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ids-space-2);
    width: 100%;
    padding: 11px var(--ids-space-4);
    background: var(--ids-primary-500);
    color: white;
    border: none;
    border-radius: var(--ids-radius-md);
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-semibold);
    cursor: pointer;
    transition: var(--ids-transition-fast);
    box-shadow: 0 4px 14px var(--ids-primary-glow);
}

.ids-new-ticket-btn:hover {
    background: var(--ids-primary-600);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--ids-primary-glow);
}

.ids-new-ticket-btn:active { transform: translateY(0); }


/* ============================================================
   9. DYNAMIC ISLAND MODAL
   ============================================================ */
.ids-island-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ids-island-overlay.ids-island-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

.ids-island-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 95vw;
    max-width: 900px;
    max-height: 90vh;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--ids-radius-3xl, 24px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    z-index: 301;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    /* Efecto Glassmorphism */
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    
    /* Animación desde el origen */
    transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
    transform: translate(-50%, -50%) scale(0.9) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.ids-island-modal.ids-island--open {
    transform: translate(-50%, -50%) scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
}

/*
 * El drawer del Kanban necesita una altura DEFINIDA, no `fit-content`.
 * `.ids-island-modal` es un <dialog>: sin `height` propia hereda `height: fit-content` del
 * stylesheet del navegador, con lo que su altura queda indefinida y todo `height: 100%` de los
 * descendientes (.ids-drawer-step, .ids-drawer-tab-content) resolvía a `auto`. Resultado: el
 * contenedor con `overflow-y: auto` crecía hasta el alto del contenido, nunca generaba scroll,
 * y el recorte lo terminaba haciendo el `overflow: hidden` + `max-height` del modal — dejando
 * el final del formulario inalcanzable.
 * El alto fijo va en este modificador y NO en la clase base, porque los modales cortos
 * (proyectos, confirmación, --sm/--md/--lg) sí deben seguir midiéndose por contenido.
 */
.ids-island-modal--drawer {
    width: min(96vw, 1200px);
    max-width: 1200px;
    height: min(88vh, 900px);
    max-height: 88vh;
}

.ids-island__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: var(--ids-space-2);
    padding: var(--ids-space-5) var(--ids-space-6);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    background: rgba(255, 255, 255, 0.4);
}

/* Grupo izquierdo del header (breadcrumb + título + slider de pestañas): envuelve por su
   cuenta cuando no cabe, y el breadcrumb (cuando está visible, ver applySubtaskMode) se
   fuerza a su propia línea completa en vez de competir por espacio con el slider — evitar
   que el header de una sub-tarea se desborde/apriete con el breadcrumb + título + tabs. */
.ids-drawer-header-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: var(--ids-space-2);
    min-width: 0;
    flex: 1 1 auto;
}
.ids-drawer-header-main .ids-drawer-breadcrumb {
    flex: 1 0 100%;
}

.ids-island__title {
    font-size: var(--ids-text-xl);
    font-weight: var(--ids-weight-bold);
    color: var(--ids-text-primary);
    margin: 0;
}

.ids-island__layout {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.ids-island__main {
    flex: 3;
    min-height: 0;
    padding: var(--ids-space-6);
    overflow-y: auto;
    border-right: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
}

.ids-island__main--full {
    flex: 1;
    border-right: none;
}

.ids-island__widgets {
    flex: 2;
    min-height: 0;
    padding: var(--ids-space-5);
    /* background: rgba(248, 250, 252, 0.5); */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-5);
}

.ids-island-widget {
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--ids-radius-xl, 16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: var(--ids-space-4);
    box-shadow: var(--ids-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Para contener los sliders internos */
}

.ids-island-widget--attachments {
    flex: 1;
    min-height: 0; /* La lista scrollea adentro; el dropzone queda fijo abajo */
}

.ids-island-widget--comments {
    flex: 1;
    min-height: 0; /* Permite scroll interno fluido */
}

.ids-timeline--island {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
    padding-right: var(--ids-space-2);
}

.ids-timeline--island::-webkit-scrollbar,
.ids-attachment-grid--island::-webkit-scrollbar {
    width: 6px;
}
.ids-timeline--island::-webkit-scrollbar-track,
.ids-attachment-grid--island::-webkit-scrollbar-track {
    background: transparent;
}
.ids-timeline--island::-webkit-scrollbar-thumb,
.ids-attachment-grid--island::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
    border-radius: var(--ids-radius-full);
}

/* Selector compuesto (no solo `.ids-attachment-grid--island`) a propósito: `.ids-attachment-grid`
   (sin --island, usada en otro contexto con `display: grid`) se define más abajo en este mismo
   archivo — con la misma especificidad, ganaría por orden y el modo lista volvería a comportarse
   como grid (celdas que se estiran a ocupar todo el alto disponible). Compuesto = más específico,
   gana siempre sin depender del orden. */
.ids-attachment-grid.ids-attachment-grid--island {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-3);
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* Usa el alto real de la columna en vez de un tope fijo de 200px */
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
    padding-right: var(--ids-space-2);
}

/* El dropzone no debe comprimirse cuando la lista de adjuntos crece. */
.ids-dropzone--island {
    flex-shrink: 0;
    margin-top: var(--ids-space-3);
}

/* Modificar items para modo lista dentro del island */
.ids-attachment-grid--island .ids-attachment {
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    padding: var(--ids-space-2);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

.ids-attachment-grid--island .ids-attachment__preview {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--ids-radius-sm);
    background: var(--ids-primary-100);
    color: var(--ids-primary-600);
    margin-right: var(--ids-space-3);
}

.ids-attachment-grid--island .ids-attachment__info {
    flex: 1;
    border-top: none;
    background: transparent;
    padding: 0;
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
}

.ids-attachment__actions {
    display: flex;
    gap: var(--ids-space-2);
}

/* Animación para nuevos items */
@keyframes ids-slide-up-fade {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ids-animate-slide-up {
    animation: ids-slide-up-fade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.ids-island-widget__title {
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-semibold);
    color: var(--ids-text-secondary);
    margin: 0 0 var(--ids-space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modificadores para el modo Island (Inputs estilo Widget) */
.ids-input--island, .ids-textarea--island {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--ids-radius-xl, 16px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03), inset 0 2px 4px rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: var(--ids-space-3) var(--ids-space-4);
    font-size: var(--ids-text-md);
    color: var(--ids-text-primary);
}

.ids-input--island:hover, .ids-textarea--island:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05), inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

.ids-input--island:focus, .ids-textarea--island:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--ids-primary-400);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15), 0 0 0 3px var(--ids-primary-glow);
    transform: translateY(-1px);
    outline: none;
}
.ids-btn--glow {
    box-shadow: 0 4px 14px var(--ids-primary-glow);
}

.ids-island__footer {
    padding: var(--ids-space-4) var(--ids-space-6);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    background: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ids-space-3);
}

/* Responsive Island */
@media (max-width: 768px) {
    /* No es de pantalla completa: queda como una hoja centrada, un poco más
       chica que la pantalla, con esquinas redondeadas — no pegada a los
       bordes. Y ya no es semitransparente: al ser tan grande, el vidriado
       (fondo blanco al 85% + blur) dejaba pasar el scrim oscuro de detrás
       y se veía gris apagado en vez de blanco; ahora es opaco. */
    .ids-island-modal {
        width: 92vw;
        max-width: 92vw;
        height: 88vh;
        max-height: 88vh;
        border-radius: 20px;
        top: 50%;
        left: 50%;
        background: var(--ids-bg-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translate(-50%, -50%) scale(0.9);
        transform-origin: center center !important;
    }

    .ids-island__header,
    .ids-island__footer {
        background: var(--ids-bg-surface);
    }

    .ids-island-modal.ids-island--open {
        transform: translate(-50%, -50%) scale(1);
    }

    /* El drawer del Kanban sí sigue de pantalla completa (necesita todo el
       alto para sus columnas/pestañas). */
    .ids-island-modal--drawer {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: translate(0, 0) scale(0.9) translateY(20px);
    }
    .ids-island-modal--drawer.ids-island--open {
        transform: translate(0, 0) scale(1) translateY(0);
    }

    .ids-island__layout {
        flex-direction: column;
        overflow-y: auto;
    }

    .ids-island__main {
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.05);
        overflow-y: visible;
        flex: none;
    }

    .ids-island__widgets {
        overflow-y: visible;
        flex: none;
    }
}


/* ============================================================
   10. MENÚ CONTEXTUAL (···)
   ============================================================ */
.ids-ctx-wrapper {
    position: relative;
}

.ids-ctx-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--ids-bg-elevated);
    border: 1px solid var(--ids-border);
    border-radius: var(--ids-radius-md);
    box-shadow: var(--ids-shadow-lg);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
    animation: ids-fade-in 0.15s ease;
    padding: 4px;
    display: none;
}

.ids-ctx-menu.ids-ctx-menu--open {
    display: block;
}

.ids-ctx-menu__item {
    display: flex;
    align-items: center;
    gap: var(--ids-space-2);
    padding: 9px 12px;
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
    color: var(--ids-text-secondary);
    cursor: pointer;
    border-radius: var(--ids-radius-xs);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: var(--ids-transition-fast);
}

.ids-ctx-menu__item:hover {
    background: var(--ids-bg-surface);
    color: var(--ids-text-primary);
}

.ids-ctx-menu__item--danger { color: var(--ids-danger-text); }
.ids-ctx-menu__item--active {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-weight: 700;
}
.ids-ctx-menu__item--danger:hover {
    background: var(--ids-danger-bg);
    color: var(--ids-danger-text);
}

.ids-ctx-menu__divider {
    height: 1px;
    background: var(--ids-border);
    margin: 4px 0;
}

/* ---------------------------------------------------------------
   Shortcuts de card: badges/elementos clicleables que abren un
   popover de edición rápida (cambiar prioridad/estado/proyecto/
   fecha/colaborador) sin abrir el drawer completo.
   --------------------------------------------------------------- */
.ids-badge-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: var(--ids-radius-full);
    transition: var(--ids-transition-fast);
}

.ids-badge-shortcut:hover {
    filter: brightness(1.08);
}

.ids-badge-shortcut > svg {
    opacity: 0.55;
    flex-shrink: 0;
}

.ids-ticket-card__meta-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.55;
    flex-shrink: 0;
    transition: var(--ids-transition-fast);
}

.ids-ticket-card__meta-icon-btn:hover {
    opacity: 0.9;
}

.ids-ticket-card__avatar-btn {
    display: inline-flex;
    cursor: pointer;
    transition: var(--ids-transition-fast);
}

.ids-ticket-card__avatar-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.06);
}

/* Popover flotante compartido (un único nodo reusado, posicionado por JS) para
   todos los shortcuts de card. Reusa el look de .ids-ctx-menu pero con
   position:fixed porque no vive dentro de un .ids-ctx-wrapper posicionado. */
.ids-quick-menu {
    position: fixed;
    background: var(--ids-bg-elevated);
    border: 1px solid var(--ids-border);
    border-radius: var(--ids-radius-md);
    box-shadow: var(--ids-shadow-lg);
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 500;
    animation: ids-fade-in 0.15s ease;
    padding: 4px;
    display: none;
}

.ids-quick-menu.ids-quick-menu--open {
    display: block;
}

.ids-quick-menu__date-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.ids-typing-indicator {
    /* flex-shrink:0 — el timeline (flex:1 + min-height:0) es el único que debe
       ceder espacio; el indicador y el input siempre deben verse completos. */
    flex-shrink: 0;
    padding: 2px var(--ids-space-2);
    font-size: 11px;
    font-style: italic;
    color: var(--ids-text-muted);
    min-height: 16px;
}

.ids-quick-menu__group-title {
    padding: 8px 10px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ids-text-muted);
}


/* ============================================================
   11. CONFIRMACIÓN INLINE
   ============================================================ */
.ids-confirm-inline {
    background: var(--ids-danger-bg);
    border: 1px solid var(--ids-danger-border);
    border-radius: var(--ids-radius-sm);
    padding: var(--ids-space-3) var(--ids-space-4);
    display: flex;
    align-items: center;
    gap: var(--ids-space-3);
    font-size: var(--ids-text-sm);
    color: var(--ids-danger-text);
    animation: ids-fade-in 0.2s ease;
}

.ids-confirm-inline p { flex: 1; margin: 0; font-weight: var(--ids-weight-medium); }

.ids-confirm-inline__actions {
    display: flex;
    gap: var(--ids-space-2);
    flex-shrink: 0;
}


/* ============================================================
   12. EMPTY STATE
   ============================================================ */
.ids-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ids-space-10) var(--ids-space-6);
    text-align: center;
    gap: var(--ids-space-4);
    animation: ids-fade-in 0.4s ease;
    grid-column: 1 / -1;
}

.ids-empty-state__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--ids-radius-2xl);
    background: var(--ids-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ids-text-muted);
    border: 1px solid var(--ids-border);
}

.ids-empty-state__title {
    font-size: var(--ids-text-xl);
    font-weight: var(--ids-weight-semibold);
    color: var(--ids-text-primary);
    letter-spacing: var(--ids-letter-tight);
    font-family: var(--ids-font-family);
    margin: 0;
}

.ids-empty-state__desc {
    font-size: var(--ids-text-base);
    color: var(--ids-text-muted);
    max-width: 340px;
    margin: 0;
    line-height: 1.6;
    font-family: var(--ids-font-family);
}


/* ============================================================
   13. LOADING / SPINNER
   ============================================================ */
.ids-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ids-spinner__ring {
    width: 20px; height: 20px;
    border: 2px solid var(--ids-border);
    border-top-color: var(--ids-primary-500);
    border-radius: 50%;
    animation: ids-spin 0.7s linear infinite;
}

.ids-spinner--sm .ids-spinner__ring { width: 14px; height: 14px; }
.ids-spinner--lg .ids-spinner__ring { width: 32px; height: 32px; border-width: 3px; }

.ids-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ids-space-3);
    padding: var(--ids-space-10);
    grid-column: 1 / -1;
    color: var(--ids-text-muted);
    font-size: var(--ids-text-sm);
    font-family: var(--ids-font-family);
    animation: ids-fade-in 0.2s ease;
}


/* ============================================================
   14. TOAST (Dynamic Island iOS Style)
   ============================================================ */
.ids-toast-container {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 100vw;
}

/* Cardinal Locations */
.ids-toast-container--top-center,
.ids-toast-container--top {
    top: calc(18px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

.ids-toast-container--top-left {
    top: calc(18px + env(safe-area-inset-top, 0px));
    left: 20px;
    align-items: flex-start;
}

.ids-toast-container--top-right {
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: 20px;
    align-items: flex-end;
}

.ids-toast-container--bottom-center,
.ids-toast-container--bottom {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    flex-direction: column-reverse;
}

.ids-toast-container--bottom-left {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 20px;
    align-items: flex-start;
    flex-direction: column-reverse;
}

.ids-toast-container--bottom-right {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    align-items: flex-end;
    flex-direction: column-reverse;
}

.ids-toast-container--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}

/* Toast Capsule (Dynamic Island - White Acrylic Glassmorphism) */
.ids-toast {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    min-width: 220px;
    max-width: min(92vw, 440px);
    padding: 9px 16px 9px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
    color: #0f172a;
    font-family: var(--ids-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    pointer-events: auto;
    user-select: none;
    cursor: default;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.3s ease, border-color 0.3s ease;
}

.ids-toast:hover {
    box-shadow: 0 18px 40px -4px rgba(15, 23, 42, 0.16), 0 6px 16px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform: scale(1.015);
}

/* Animaciones de Entrada y Salida según Cardinalidad */
.ids-toast--show {
    opacity: 1;
}

.ids-toast--top-center.ids-toast--show,
.ids-toast--top.ids-toast--show,
.ids-toast--top-left.ids-toast--show,
.ids-toast--top-right.ids-toast--show,
.ids-toast--center.ids-toast--show {
    animation: ids-island-in-top 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.ids-toast--top-center.ids-toast--exit,
.ids-toast--top.ids-toast--exit,
.ids-toast--top-left.ids-toast--exit,
.ids-toast--top-right.ids-toast--exit,
.ids-toast--center.ids-toast--exit {
    animation: ids-island-out-top 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.ids-toast--bottom-center.ids-toast--show,
.ids-toast--bottom.ids-toast--show,
.ids-toast--bottom-left.ids-toast--show,
.ids-toast--bottom-right.ids-toast--show {
    animation: ids-island-in-bottom 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.ids-toast--bottom-center.ids-toast--exit,
.ids-toast--bottom.ids-toast--exit,
.ids-toast--bottom-left.ids-toast--exit,
.ids-toast--bottom-right.ids-toast--exit {
    animation: ids-island-out-bottom 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Morphing en vivo */
.ids-toast--morphing {
    animation: ids-island-morph 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Island Badge & Pulse */
.ids-toast__island-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.05);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-toast__pulse-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: ids-island-pulse 2s infinite ease-in-out;
}

.ids-toast__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    transition: transform 0.25s ease;
}

.ids-toast__icon-svg--spin {
    animation: ids-island-spin 0.9s linear infinite;
}

/* Content Body */
.ids-toast__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    justify-content: center;
    gap: 1px;
}

.ids-toast__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.65;
    color: #475569;
    line-height: 1.2;
}

.ids-toast__msg {
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
    color: #0f172a;
    line-height: 1.35;
}

/* Action Button */
.ids-toast__action {
    appearance: none;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    outline: none;
}

.ids-toast__action:hover {
    background: rgba(15, 23, 42, 0.12);
    color: #000000;
    transform: scale(1.04);
}

.ids-toast__action:active {
    transform: scale(0.96);
}

/* Close Button */
.ids-toast__close {
    appearance: none;
    background: transparent;
    border: none;
    color: #64748b;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 2px;
    flex-shrink: 0;
    padding: 0;
    outline: none;
}

.ids-toast__close:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
}

/* Progress Bar */
.ids-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: 0.35;
    border-radius: 9999px;
}

/* Dynamic Island Type Variants (White Acrylic Glows & Badges) */
.ids-toast--success {
    color: #059669;
    box-shadow: 0 12px 32px -4px rgba(5, 150, 105, 0.18), 0 4px 12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(16, 185, 129, 0.35);
}
.ids-toast--success .ids-toast__island-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.ids-toast--error {
    color: #dc2626;
    box-shadow: 0 12px 32px -4px rgba(220, 38, 38, 0.18), 0 4px 12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(239, 68, 68, 0.35);
}
.ids-toast--error .ids-toast__island-badge {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.ids-toast--warning {
    color: #d97706;
    box-shadow: 0 12px 32px -4px rgba(217, 119, 6, 0.18), 0 4px 12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(245, 158, 11, 0.35);
}
.ids-toast--warning .ids-toast__island-badge {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.ids-toast--info {
    color: #2563eb;
    box-shadow: 0 12px 32px -4px rgba(37, 99, 235, 0.18), 0 4px 12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(59, 130, 246, 0.35);
}
.ids-toast--info .ids-toast__island-badge {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.ids-toast--loading {
    color: #7c3aed;
    box-shadow: 0 12px 32px -4px rgba(124, 58, 237, 0.18), 0 4px 12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(139, 92, 246, 0.35);
}
.ids-toast--loading .ids-toast__island-badge {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

@media (max-width: 600px) {
    .ids-toast-container--top-center,
    .ids-toast-container--top,
    .ids-toast-container--top-left,
    .ids-toast-container--top-right {
        top: calc(12px + env(safe-area-inset-top, 0px));
        left: 12px;
        right: 12px;
        transform: none;
        align-items: center;
    }
    .ids-toast-container--bottom-center,
    .ids-toast-container--bottom,
    .ids-toast-container--bottom-left,
    .ids-toast-container--bottom-right {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        transform: none;
        align-items: center;
    }
    /* Angostos: se ajustan al contenido y no pasan de ~300px, centrados. */
    .ids-toast {
        min-width: unset;
        width: auto;
        max-width: min(300px, calc(100vw - 48px));
    }
}


/* ============================================================
   14b. POPUP (Dynamic Island iOS Centrado — Ventana de Aviso & Acciones)
   ============================================================ */

.ids-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    opacity: 0;
    transition: background 0.28s ease-out, backdrop-filter 0.28s ease-out, opacity 0.28s ease-out;
    overflow-y: auto;
}

.ids-popup-overlay--show {
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.ids-popup-lock-scroll {
    overflow: hidden !important;
}

/* Ventana emergente centrada: vidrio esmerilado sutil — suficiente
   translucidez para insinuar lo que hay detrás y sumar profundidad
   (lenguaje Dynamic Island), sin que el contenido pierda nitidez. Una
   sola transición limpia de escala + opacidad, sin rebote elástico ni
   desfases por elemento: un movimiento, no una coreografía. */
.ids-popup-window {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 26px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03),
                0 4px 10px -2px rgba(15, 23, 42, 0.06),
                0 20px 48px -12px rgba(15, 23, 42, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                inset 0 0 0 1px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto;
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    will-change: transform, opacity;
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.22s ease-out;
}

.ids-popup-window--show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Salida: se contrae hacia el punto donde vive el icono (arriba de la
   ventana) en vez de "hundirse" hacia abajo — un colapso rápido y
   decidido de vuelta a la cápsula, distinto del gesto de entrada. */
.ids-popup-window--exit {
    transform-origin: 50% 18%;
    transition: transform 0.22s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.18s ease-in 0.03s;
    opacity: 0;
    transform: scale(0.8);
}

/* Halos ambientales por tipo: un tinte de sombra muy discreto que
   refuerza la urgencia sin recurrir a animación. */
.ids-popup-window:has(.ids-popup-pill-island--urgent),
.ids-popup-window:has(.ids-popup-pill-island--error) {
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03),
                0 4px 10px -2px rgba(220, 38, 38, 0.08),
                0 20px 48px -12px rgba(220, 38, 38, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}
.ids-popup-window:has(.ids-popup-pill-island--warning) {
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03),
                0 4px 10px -2px rgba(217, 119, 6, 0.07),
                0 20px 48px -12px rgba(217, 119, 6, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}
.ids-popup-window:has(.ids-popup-pill-island--success) {
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03),
                0 4px 10px -2px rgba(5, 150, 105, 0.06),
                0 20px 48px -12px rgba(5, 150, 105, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}
.ids-popup-window:has(.ids-popup-pill-island--info) {
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03),
                0 4px 10px -2px rgba(37, 99, 235, 0.06),
                0 20px 48px -12px rgba(37, 99, 235, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}
.ids-popup-window:has(.ids-popup-pill-island--question) {
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03),
                0 4px 10px -2px rgba(124, 58, 237, 0.06),
                0 20px 48px -12px rgba(124, 58, 237, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.55),
                inset 0 0 0 1px rgba(15, 23, 42, 0.03);
}

/* Modificadores de ancho */
.ids-popup-window--sm { max-width: 400px; }
.ids-popup-window--md { max-width: 500px; }
.ids-popup-window--lg { max-width: 620px; }
.ids-popup-window--xl { max-width: 780px; }

/* Botón cerrar minimalista iOS */
.ids-popup-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.05);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.ids-popup-close-btn:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
}
.ids-popup-close-btn:active {
    background: rgba(15, 23, 42, 0.12);
}

/* Header */
.ids-popup-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 28px 6px;
    background: transparent;
    position: relative;
}

/* Medallón del icono: relleno sólido en degradado (no un tinte pastel
   translúcido) — se lee como un glifo de sistema (macOS/iOS alert icon),
   no como una caja de color diluido. Sin halo ni pulso: la saturación y
   el contraste ya comunican la urgencia. */
.ids-popup-pill-island {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    margin-bottom: 14px;
    flex-shrink: 0;
    color: #ffffff;
    box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ids-popup-pill-island svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.1;
}

.ids-popup-pill-island--urgent,
.ids-popup-pill-island--error {
    background: linear-gradient(155deg, #f87171, #dc2626);
    box-shadow: 0 6px 14px -4px rgba(220, 38, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ids-popup-pill-island--warning {
    background: linear-gradient(155deg, #fbbf24, #d97706);
    box-shadow: 0 6px 14px -4px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ids-popup-pill-island--success {
    background: linear-gradient(155deg, #34d399, #059669);
    box-shadow: 0 6px 14px -4px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ids-popup-pill-island--info {
    background: linear-gradient(155deg, #60a5fa, #2563eb);
    box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ids-popup-pill-island--question {
    background: linear-gradient(155deg, #a78bfa, #7c3aed);
    box-shadow: 0 6px 14px -4px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ids-popup-title {
    font-family: var(--ids-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}

.ids-popup-subtitle {
    font-family: var(--ids-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

.ids-popup-badge-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: 0.1px;
}

/* Cuerpo del PopUp: Scrollable & Flexible, fondo transparente unificado */
.ids-popup-body {
    padding: 6px 28px 20px;
    background: transparent;
    color: #334155;
    font-family: var(--ids-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 14.5px;
    line-height: 1.55;
    max-height: calc(85vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

.ids-popup-body::-webkit-scrollbar {
    width: 5px;
}
.ids-popup-body::-webkit-scrollbar-track {
    background: transparent;
}
.ids-popup-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.12);
    border-radius: 9999px;
}

/* Stack de tarjetas internas: una sola superficie agrupada (estilo lista
   agrupada iOS), no tarjetas sueltas apiladas. Cada aviso es una fila
   dentro del mismo panel, separada por una línea divisoria — así el
   modo agregador se lee como parte de la misma ventana en vez de un
   componente distinto pegado encima. */
.ids-popup-cards-stack {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.ids-popup-card {
    position: relative;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 0;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.2s ease-out,
                max-height 0.22s ease-in, padding 0.22s ease-in;
    cursor: pointer;
    overflow: hidden;
    max-height: 160px;
}

.ids-popup-card:last-child {
    border-bottom: none;
}

/* El tinte de hover toma el color de la propia prioridad de la card
   (el mismo tono que su medallón) para que el contraste sea siempre
   perceptible, sin depender de capas de blanco translúcido apiladas. */
.ids-popup-card:hover {
    transform: translateX(3px);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.ids-popup-card--urgent:hover { background: rgba(220, 38, 38, 0.08); }
.ids-popup-card--high:hover   { background: rgba(217, 119, 6, 0.08); }
.ids-popup-card--normal:hover { background: rgba(37, 99, 235, 0.08); }
.ids-popup-card--low:hover    { background: rgba(100, 116, 139, 0.08); }

.ids-popup-card--urgent:active { background: rgba(220, 38, 38, 0.13); }
.ids-popup-card--high:active   { background: rgba(217, 119, 6, 0.13); }
.ids-popup-card--normal:active { background: rgba(37, 99, 235, 0.13); }
.ids-popup-card--low:active    { background: rgba(100, 116, 139, 0.13); }

.ids-popup-card--exit {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.ids-popup-card__badge {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ids-popup-card__badge svg { width: 15px; height: 15px; }

.ids-popup-card:hover .ids-popup-card__badge {
    transform: scale(1.08);
}

.ids-popup-card--urgent .ids-popup-card__badge { background: linear-gradient(155deg, #f87171, #dc2626); }
.ids-popup-card--high .ids-popup-card__badge   { background: linear-gradient(155deg, #fbbf24, #d97706); }
.ids-popup-card--normal .ids-popup-card__badge { background: linear-gradient(155deg, #60a5fa, #2563eb); }
.ids-popup-card--low .ids-popup-card__badge    { background: linear-gradient(155deg, #94a3b8, #64748b); }

.ids-popup-card__body {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.ids-popup-card__title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 2px;
}

.ids-popup-card__msg {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.4;
    white-space: pre-line;
    word-break: break-word;
}

.ids-popup-card__close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.ids-popup-card:hover .ids-popup-card__close {
    opacity: 1;
}
.ids-popup-card__close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
}

/* Footer compaginado: Fondo transparente continuo con división sutil */
.ids-popup-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 28px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #eeeeee;
}

.ids-popup-footer--right {
    justify-content: flex-end;
}

.ids-popup-footer--fill > * {
    flex: 1;
}

.ids-popup-footer .ids-btn {
    border-radius: 9999px !important;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 38px;
    box-shadow: none;
    transition: transform 0.12s ease-out, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ids-popup-footer .ids-btn:active {
    transform: scale(0.97);
}

/* Estado Loading con Spinner SVG */
.ids-popup-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ids-island-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .ids-popup-overlay {
        padding: 24px;
        align-items: center;
    }
    .ids-popup-window {
        max-width: 340px;
        border-radius: 24px;
    }
    .ids-popup-footer {
        flex-direction: column;
    }
    .ids-popup-footer > * {
        width: 100%;
    }
}


/* ============================================================
   14c. NOTIFICATION CENTER (Campana, overlay de últimas 5, modal historial)
   ============================================================ */
.ids-notif-bell-wrapper {
    position: relative;
}

.ids-notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ids-notif-bell:hover { background: rgba(0, 0, 0, 0.06); }
.ids-notif-bell--ringing { animation: ids-notif-bell-ring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

.ids-notif-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #dc2626;
    color: #fff;
    font-family: var(--ids-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.ids-notif-badge.ids-d-none { display: none; }

/* Overlay flotante (últimas 5) anclado a la campana */
.ids-notif-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 360px;
    max-width: 92vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.32), 0 8px 24px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    transform-origin: top right;
    opacity: 0;
    transform: scale(0.85) translateY(-12px);
    filter: blur(3px);
    pointer-events: none;
    z-index: 99998;
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.22s ease;
    font-family: var(--ids-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: #0f172a;
}
.ids-notif-dropdown--show {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

.ids-notif-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ids-notif-dropdown__title { font-size: 13.5px; font-weight: 700; }
.ids-notif-dropdown__mark-all {
    appearance: none;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.ids-notif-dropdown__mark-all:hover { text-decoration: underline; }

.ids-notif-dropdown__list {
    overflow-y: auto;
    flex: 1;
}

.ids-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    transition: background 0.15s ease;
}
.ids-notif-item:last-child { border-bottom: none; }
.ids-notif-item:hover { background: rgba(15, 23, 42, 0.045); }
.ids-notif-item--unread { background: rgba(37, 99, 235, 0.055); }
.ids-notif-item--unread:hover { background: rgba(37, 99, 235, 0.09); }

.ids-notif-item__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
    margin-top: 5px;
}
.ids-notif-item__dot--hidden { visibility: hidden; }

.ids-notif-item__body { flex: 1; min-width: 0; }
.ids-notif-item__title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.ids-notif-item__msg {
    font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ids-notif-item__time { font-size: 11px; color: #94a3b8; margin-top: 4px; }

.ids-notif-item--urgent .ids-notif-item__dot { background: #dc2626; }
.ids-notif-item--high .ids-notif-item__dot { background: #d97706; }

.ids-notif-dropdown__footer {
    padding: 10px 16px;
    text-align: center;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.ids-notif-dropdown__see-more {
    appearance: none;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.ids-notif-dropdown__see-more:hover { text-decoration: underline; }

.ids-notif-empty {
    padding: 34px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
}

/* Modal de historial completo */
.ids-notif-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999997;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}
.ids-notif-modal-overlay--show {
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ids-notif-modal {
    width: 480px;
    max-width: 100%;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px -12px rgba(15, 23, 42, 0.45);
    transform: scale(0.9) translateY(24px);
    transition: transform 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: var(--ids-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.ids-notif-modal-overlay--show .ids-notif-modal {
    transform: scale(1) translateY(0);
}

.ids-notif-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
}
.ids-notif-modal__title { font-size: 16px; font-weight: 700; color: #0f172a; }
.ids-notif-modal__close {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: none; background: rgba(15, 23, 42, 0.06); color: #64748b; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.ids-notif-modal__close:hover { background: rgba(15, 23, 42, 0.12); color: #0f172a; }

.ids-notif-modal__body {
    flex: 1;
    overflow-y: auto;
}

.ids-notif-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
    font-size: 12.5px;
    color: #64748b;
}
.ids-notif-modal__footer button {
    appearance: none;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: #0f172a;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ids-notif-modal__footer button:disabled { opacity: 0.4; cursor: default; }
.ids-notif-modal__footer button:not(:disabled):hover { background: rgba(15, 23, 42, 0.1); }

@keyframes ids-notif-bell-ring {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-16deg); }
    40% { transform: rotate(14deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(6deg); }
}

@media (max-width: 600px) {
    .ids-notif-dropdown { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; }
}


/* ============================================================
   15. AVATAR
   ============================================================ */
.ids-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ids-primary-500), var(--ids-primary-700));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-bold);
    color: white;
    flex-shrink: 0;
    letter-spacing: 0;
}

.ids-avatar--sm { width: 22px; height: 22px; font-size: 10px; }
.ids-avatar--lg { width: 36px; height: 36px; font-size: var(--ids-text-sm); }
.ids-avatar--xs { width: 18px; height: 18px; font-size: 8px; }


/* ============================================================
   16. DIVIDER
   ============================================================ */
.ids-divider {
    height: 1px;
    background: var(--ids-border);
    border: none;
    margin: 0;
    width: 100%;
}


/* ============================================================
   17. FILTROS ACTIVOS (topbar)
   ============================================================ */
.ids-active-filters {
    display: flex;
    align-items: center;
    gap: var(--ids-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--ids-space-4);
}

.ids-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.25);
    color: var(--ids-primary-400);
    border-radius: var(--ids-radius-full);
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-medium);
    font-family: var(--ids-font-family);
    cursor: pointer;
    transition: var(--ids-transition-fast);
}

.ids-filter-tag:hover { background: rgba(99,102,241,0.18); }

.ids-results-count {
    font-size: var(--ids-text-sm);
    color: var(--ids-text-muted);
    font-family: var(--ids-font-family);
    margin-left: auto;
}


/* ============================================================
   18. ANIMACIONES
   ============================================================ */
@keyframes ids-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ids-card-enter {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ids-card-exit {
    0%   { opacity: 1; transform: scale(1); max-height: 500px; margin-bottom: 16px; padding: 20px; }
    100% { opacity: 0; transform: scale(0.92) translateY(-8px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}

@keyframes ids-spin {
    to { transform: rotate(360deg); }
}

@keyframes ids-island-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ids-island-in-top {
    from {
        opacity: 0;
        transform: translateY(-26px) scale(0.78);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ids-island-out-top {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        max-height: 120px;
        margin-bottom: 0px;
    }
    to {
        opacity: 0;
        transform: translateY(-22px) scale(0.8);
        filter: blur(3px);
        max-height: 0px;
        margin-bottom: -10px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

@keyframes ids-island-in-bottom {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.78);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ids-island-out-bottom {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        max-height: 120px;
        margin-bottom: 0px;
    }
    to {
        opacity: 0;
        transform: translateY(22px) scale(0.8);
        filter: blur(3px);
        max-height: 0px;
        margin-bottom: -10px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

@keyframes ids-island-morph {
    0% { transform: scale(1); }
    40% { transform: scale(1.045); }
    100% { transform: scale(1); }
}

@keyframes ids-island-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.35); opacity: 0.4; }
}

@keyframes ids-island-spin {
    to { transform: rotate(360deg); }
}

@keyframes ids-toast-in {
    from { opacity: 0; transform: translateY(-20px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ids-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-16px) scale(0.85); }
}

/* ============================================================
   12. TOGGLE (SWITCH)
   ============================================================ */
.ids-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--ids-space-2);
    cursor: pointer;
    user-select: none;
}

.ids-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    background-color: var(--ids-border);
    border-radius: var(--ids-radius-full);
    transition: background-color 0.2s ease;
}

.ids-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
}

.ids-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--ids-shadow-sm);
}

.ids-toggle__input:checked + .ids-toggle {
    background-color: var(--ids-primary-600);
}

.ids-toggle__input:checked + .ids-toggle .ids-toggle__thumb {
    transform: translateX(16px);
}

.ids-toggle__input:focus-visible + .ids-toggle {
    outline: 2px solid var(--ids-primary-400);
    outline-offset: 2px;
}

.ids-toggle__label {
    font-size: var(--ids-text-sm);
    color: var(--ids-text-primary);
}

/* ============================================================
/* ============================================================
   10. DYNAMIC ISLAND & COMPANION NOTIFICATION PILL (iOS Style)
   ============================================================ */
.ids-island-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 92%;
    max-width: 1040px;
    margin: 5px auto var(--ids-space-5);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: var(--ids-transition-spring);
}

.ids-island-wrapper .ids-dynamic-island {
    margin: 0 !important;
    flex: 1 1 auto;
    max-width: 860px;
    position: relative;
    top: auto;
    z-index: 2;
}

.ids-island-pill--notify {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 16px 0 12px;
    background: var(--ids-bg-surface);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: var(--ids-radius-full);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 16px rgba(56, 189, 248, 0.18);
    color: var(--ids-text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    flex-shrink: 0;
    outline: none;
}

.ids-island-pill--notify:hover {
    background: var(--ids-bg-elevated);
    border-color: rgba(56, 189, 248, 0.75);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 0 22px rgba(56, 189, 248, 0.35);
    transform: translateY(-1px) scale(1.03);
    color: #38bdf8;
}

.ids-island-pill--notify:active {
    transform: scale(0.96);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ids-island-pill__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(56, 189, 248, 0.14);
    border-radius: 50%;
    color: #38bdf8;
    position: relative;
    transition: transform 0.25s ease;
}

.ids-island-pill--notify:hover .ids-island-pill__icon-wrap {
    transform: rotate(15deg) scale(1.05);
    background: rgba(56, 189, 248, 0.22);
}

.ids-island-pill__pulse {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 8px #38bdf8;
    animation: ids-pulse-glow 2.2s infinite ease-in-out;
}

@keyframes ids-pulse-glow {
    0% {
        transform: scale(0.9);
        opacity: 0.9;
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.75);
    }
    70% {
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 0 0 8px rgba(56, 189, 248, 0);
    }
    100% {
        transform: scale(0.9);
        opacity: 0.9;
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    }
}

.ids-dynamic-island {
    background: var(--ids-bg-surface);
    border: 1px solid var(--ids-border);
    border-radius: var(--ids-radius-2xl);
    box-shadow: var(--ids-shadow-lg);
    margin: 5px auto var(--ids-space-5);
    width: 92%;
    max-width: 860px;
    overflow: hidden;
    transition: var(--ids-transition-spring);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 50;
}

@media (max-width: 900px) {
    .ids-island-wrapper {
        position: relative !important;
        top: auto !important;
        flex-direction: column;
        width: 92%;
    }
    .ids-island-pill--notify {
        width: 100%;
        max-width: 860px;
        justify-content: center;
        height: 40px;
    }
    .ids-dynamic-island {
        position: relative !important;
        top: auto !important;
        z-index: 10 !important;
    }
}

.ids-island-header {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    grid-template-areas: "summary search arrow";
    align-items: center;
    gap: 16px;
    padding: var(--ids-space-3) var(--ids-space-4);
    user-select: none;
}

.ids-island-summary {
    grid-area: summary;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--ids-space-4);
    flex-wrap: wrap;
}

.ids-search-wrapper {
    grid-area: search;
    width: 100%;
}

.ids-island-toggle-wrapper {
    grid-area: arrow;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .ids-island-header {
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "summary arrow"
            "search search";
        gap: 12px;
    }
    .ids-island-toggle-wrapper {
        align-self: center;
    }
}

.ids-island-summary-item {
    display: flex;
    align-items: center;
    gap: var(--ids-space-2);
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
    color: var(--ids-text-primary);
}

.ids-island-summary-item__val {
    background: var(--ids-primary-50);
    color: var(--ids-primary-600);
    padding: 2px 8px;
    border-radius: var(--ids-radius-full);
    font-weight: var(--ids-weight-bold);
}

.ids-island-toggle {
    color: var(--ids-text-muted);
    transition: transform 0.3s ease;
}

.ids-dynamic-island--expanded .ids-island-toggle {
    transform: rotate(180deg);
}

.ids-island-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    border-top: 1px solid transparent;
}

.ids-dynamic-island--expanded .ids-island-details {
    max-height: 500px;
    opacity: 1;
    border-top-color: var(--ids-border);
}

.ids-island-details-inner {
    padding: var(--ids-space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ids-space-3);
    background: var(--ids-bg-page);
}

.ids-island-details-inner .ids-stat-card {
    flex: 1 1 170px;
    min-width: 150px;
}

.ids-stat-card {
    background: var(--ids-bg-surface);
    border: 1px solid var(--ids-border);
    border-radius: var(--ids-radius-md);
    padding: var(--ids-space-3);
    text-align: center;
}

.ids-stat-card__title {
    font-size: var(--ids-text-xs);
    color: var(--ids-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--ids-space-1);
}

.ids-stat-card__val {
    font-size: var(--ids-text-2xl);
    font-weight: var(--ids-weight-bold);
    color: var(--ids-text-primary);
}

/* ============================================================
   11. DRAWER TABS & TIMELINE
   ============================================================ */
.ids-tabs {
    display: flex;
    gap: var(--ids-space-4);
    border-bottom: 1px solid var(--ids-border);
    padding: 0 var(--ids-space-6);
    background: var(--ids-bg-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.ids-tab {
    padding: var(--ids-space-3) 0;
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
    color: var(--ids-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--ids-transition-fast);
}

.ids-tab:hover {
    color: var(--ids-text-primary);
}

.ids-tab--active {
    color: var(--ids-primary-600);
    border-bottom-color: var(--ids-primary-600);
}

.ids-tab-panel {
    display: none;
    padding: var(--ids-space-6);
    flex: 1;
    overflow-y: auto;
}

.ids-tab-panel--active {
    display: block;
    animation: ids-fade-in 0.3s ease;
}

/* Timeline */
.ids-timeline {
    position: relative;
    padding-left: var(--ids-space-6);
    margin-bottom: var(--ids-space-6);
}

.ids-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 11px;
    width: 2px;
    background: var(--ids-border);
}

.ids-timeline-item {
    position: relative;
    margin-bottom: var(--ids-space-5);
}

.ids-timeline-item__avatar {
    position: absolute;
    left: calc(-1 * var(--ids-space-6));
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ids-primary-100);
    color: var(--ids-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid var(--ids-bg-surface);
}

.ids-timeline-item__content {
    background: var(--ids-bg-page);
    border: 1px solid var(--ids-border);
    border-radius: var(--ids-radius-md);
    padding: var(--ids-space-3);
}

.ids-timeline-item__meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--ids-text-xs);
    color: var(--ids-text-muted);
    margin-bottom: var(--ids-space-1);
}

.ids-timeline-item__author {
    font-weight: var(--ids-weight-semibold);
    color: var(--ids-text-primary);
}

.ids-timeline-item__text {
    font-size: var(--ids-text-sm);
    color: var(--ids-text-secondary);
    line-height: 1.5;
}

/* Comentario del usuario logueado: mismo acento que el avatar, para distinguirlo
   de un vistazo del resto del hilo (que ya usa el fondo/borde neutro por defecto). */
.ids-timeline-item--own .ids-timeline-item__avatar {
    background: var(--ids-primary-600);
    color: #ffffff;
}

.ids-timeline-item--own .ids-timeline-item__content {
    background: var(--ids-primary-50);
    border-color: var(--ids-primary-200);
}

.ids-timeline-item--own .ids-timeline-item__author {
    color: var(--ids-primary-600);
}

.ids-chat-input-wrapper {
    /* Antes `position: sticky; bottom: 0`: el timeline ya scrollea internamente
       (overflow-y:auto propio), así que el widget nunca necesita que ESTO se
       pegue al fondo — y al calcular su "bottom" contra el ancestro con
       overflow:hidden, terminaba pintándose encima del indicador de "escribiendo"
       en vez de debajo, tapándolo con este fondo sólido. */
    position: relative;
    flex-shrink: 0;
    background: var(--ids-bg-surface);
    padding-top: var(--ids-space-3);
    border-top: 1px solid var(--ids-border);
    margin: 0 calc(-1 * var(--ids-space-6)) calc(-1 * var(--ids-space-6));
    padding: var(--ids-space-4) var(--ids-space-6);
    display: flex;
    gap: var(--ids-space-2);
}

/* Attachments */
.ids-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--ids-space-3);
    margin-bottom: var(--ids-space-5);
}

.ids-attachment {
    border: 1px solid var(--ids-border);
    border-radius: var(--ids-radius-sm);
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
}

.ids-attachment__preview {
    flex: 1;
    min-height: 0;
    background: var(--ids-bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ids-text-muted);
    text-decoration: none;
}

/* Sin esto la imagen se muestra a su tamaño intrínseco (un preview completo del
   archivo) en vez de recortada al tamaño de su contenedor — miniatura 32x32 en
   modo lista (--island) o cuadro completo en el grid normal. */
.ids-attachment__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ids-attachment__actions {
    position: absolute;
    top: 50%;
    right: var(--ids-space-1);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ids-attachment:hover .ids-attachment__actions,
.ids-attachment:focus-within .ids-attachment__actions {
    opacity: 1;
}

.ids-attachment__actions .ids-btn {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    color: var(--ids-danger-600, #dc2626);
}

.ids-confirm-inline--attachment {
    position: absolute;
    inset: 0;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    gap: var(--ids-space-2);
    padding: var(--ids-space-2);
    text-align: center;
    border-radius: 0;
}

.ids-confirm-inline--attachment p {
    flex: 0 0 auto;
    font-size: var(--ids-text-xs);
}

.ids-attachment__info {
    padding: var(--ids-space-2);
    font-size: var(--ids-text-xs);
    background: var(--ids-bg-surface);
    border-top: 1px solid var(--ids-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-dropzone {
    border: 2px dashed var(--ids-border);
    border-radius: var(--ids-radius-md);
    padding: var(--ids-space-6);
    text-align: center;
    color: var(--ids-text-muted);
    transition: var(--ids-transition-fast);
    cursor: pointer;
}

.ids-dropzone:hover {
    border-color: var(--ids-primary-400);
    color: var(--ids-primary-600);
    background: var(--ids-primary-50);
}

/* Mientras se arrastra un archivo encima (ver js/Dropzone.js). */
.ids-dropzone--over {
    border-color: var(--ids-primary-500);
    color: var(--ids-primary-600);
    background: var(--ids-primary-50);
}

.ids-dropzone__files {
    display: block;
    margin-top: var(--ids-space-2);
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-semibold);
    color: var(--ids-text-primary);
    overflow-wrap: anywhere;
}
.ids-dropzone__files:empty { display: none; }

@keyframes ids-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   13. UTILITIES
   ============================================================ */
.ids-d-none { display: none !important; }
.ids-flex { display: flex; }
.ids-flex-row { display: flex; flex-direction: row; }
.ids-flex-col { display: flex; flex-direction: column; }
.ids-flex-col-center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ids-flex-1 { flex: 1; }
.ids-items-center { align-items: center; }
.ids-justify-center { justify-content: center; }
.ids-justify-between { justify-content: space-between; }
.ids-justify-end { justify-content: flex-end; }
.ids-gap-1 { gap: 4px; }
.ids-gap-2 { gap: 8px; }
.ids-gap-3 { gap: 12px; }
.ids-gap-4 { gap: var(--ids-space-4); }

.ids-mt-2 { margin-top: 8px; }
.ids-mr-1 { margin-right: 4px; }
.ids-mr-2 { margin-right: 8px; }
.ids-mb-1 { margin-bottom: 4px; }
.ids-mb-2 { margin-bottom: 8px; }

.ids-p-0 { padding: 0 !important; }
.ids-p-6 { padding: var(--ids-space-6); }

.ids-opacity-50 { opacity: 0.5; }
.ids-opacity-60 { opacity: 0.6; }

.ids-text-primary { color: var(--ids-primary-500); }
.ids-text-danger { color: var(--ids-danger-text); }
.ids-bg-danger-subtle { background: var(--ids-danger-bg); }
.ids-text-muted { color: var(--ids-text-muted); }

.ids-text-sm { font-size: var(--ids-text-sm); }
.ids-text-xs { font-size: var(--ids-text-xs); }

.ids-overflow-y-auto { overflow-y: auto; }
.ids-rounded-xl { border-radius: 20px; }
.ids-rounded-full { border-radius: 9999px; }
.ids-bg-white-80 { background: rgba(255, 255, 255, 0.8); }

/* ============================================================
   KANBAN BOARD EXTENSIONS (REBRANDING: DYNAMIC ISLAND & GLASS)
   ============================================================ */

/* Contenedor del tablero limpio con animación de transición fluida */
#ids-kanban-container {
    position: relative;
    width: 100%;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform, filter;
}

#ids-kanban-container.ids-board-leaving {
    opacity: 0.25;
    transform: scale(0.985) translateY(6px);
    filter: blur(6px);
    pointer-events: none;
}

#ids-kanban-container.ids-board-entering {
    animation: ids-board-spring-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#ids-kanban-container.ids-board-entering .ids-kanban-column {
    animation: ids-column-cascade-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

#ids-kanban-container.ids-board-entering .ids-kanban-column:nth-child(1) { animation-delay: 0.03s; }
#ids-kanban-container.ids-board-entering .ids-kanban-column:nth-child(2) { animation-delay: 0.07s; }
#ids-kanban-container.ids-board-entering .ids-kanban-column:nth-child(3) { animation-delay: 0.11s; }
#ids-kanban-container.ids-board-entering .ids-kanban-column:nth-child(4) { animation-delay: 0.15s; }
#ids-kanban-container.ids-board-entering .ids-kanban-column:nth-child(5) { animation-delay: 0.19s; }

@keyframes ids-board-spring-pop {
    0% {
        opacity: 0;
        transform: scale(0.97) translateY(12px);
        filter: blur(8px);
    }
    60% {
        opacity: 1;
        transform: scale(1.005) translateY(-2px);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

@keyframes ids-column-cascade-in {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ids-kanban-board {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 6px 6px 24px 6px;
    height: calc(100vh - 210px);
    min-height: 540px;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--ids-space-4);
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
    background: radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 85% 75%, rgba(236, 72, 153, 0.07) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
    border-radius: 24px;
}

.ids-kanban-board::-webkit-scrollbar {
    height: 6px;
}
.ids-kanban-board::-webkit-scrollbar-track {
    background: transparent;
}
.ids-kanban-board::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.14);
    border-radius: 9999px;
}

/* COLUMNA KANBAN PRINCIPAL (ISLA DE CRISTAL LIGERA) */
.ids-kanban-column {
    flex: 0 0 350px;
    width: 350px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: rgba(248, 250, 252, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    box-shadow: 0 10px 32px -6px rgba(15, 23, 42, 0.04),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    height: 100%;
    scroll-snap-align: start;
    overflow: hidden;
    transition: width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                min-width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                flex 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease,
                background 0.3s ease;
}

/* Aura de luz ambiental cromática sutil */
.ids-kanban-column__aura {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 90px;
    border-radius: 50%;
    background: var(--status-color, var(--ids-primary-500));
    opacity: 0.12;
    filter: blur(32px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 0;
}

.ids-kanban-column:hover .ids-kanban-column__aura {
    opacity: 0.18;
    transform: translateX(-50%) scale(1.05);
}

.ids-kanban-column:hover {
    box-shadow: 0 16px 40px -8px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 18%, rgba(15, 23, 42, 0.06)),
                0 0 0 1px rgba(255, 255, 255, 0.95) inset;
    border-color: rgba(255, 255, 255, 0.95);
}

/* CABECERA FLOTANTE CÁPSULA DYNAMIC ISLAND */
.ids-kanban-column__header {
    position: relative;
    z-index: 2;
    margin: 6px 12px 6px 12px;
    padding: 10px 14px 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04),
                0 1px 0 rgba(255, 255, 255, 0.8) inset;
    cursor: pointer;
    user-select: none;
    transition: background 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Transición tipo iOS Dynamic Island con relleno de cristal teñido en hover */
.ids-kanban-column__header:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 15%, rgba(255, 255, 255, 0.85)), color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 25%, rgba(255, 255, 255, 0.72)));
    border-color: color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 35%, rgba(255, 255, 255, 0.9));
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 7px 20px -4px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 28%, rgba(15, 23, 42, 0.08)),
                0 0 0 1px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 30%, transparent) inset;
}

.ids-kanban-column__header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Anillo y Dot de Estado Brillante */
.ids-kanban-column__dot-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 22%, transparent);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-kanban-column__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-color, var(--ids-primary-500));
    box-shadow: 0 0 10px var(--status-color, var(--ids-primary-500));
}

.ids-kanban-column__header:hover .ids-kanban-column__dot-ring {
    transform: scale(1.18);
}

.ids-kanban-column__title-box {
    display: flex;
    flex-direction: column;
}

.ids-kanban-column__name {
    font-weight: 800;
    font-size: 0.92rem;
    color: #0f172a;
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.2;
}

/* Insignia de conteo con color de acento vibrante */
.ids-kanban-column__count {
    background: var(--status-color, var(--ids-primary-500));
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 45%, transparent);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

.ids-kanban-column__count--bump {
    animation: ids-count-bump 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ids-count-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.ids-kanban-column__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Botón de Quick Add (+) en Header */
.ids-kanban-column__add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.85);
    color: var(--ids-text-secondary);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-kanban-column__add-btn:hover {
    background: var(--status-color, var(--ids-primary-500));
    color: #ffffff;
    border-color: transparent;
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 50%, transparent);
}

/* Botón "ver historial completo" (ojo) — solo columna 'done'. Mismo estilo
   base que el Quick Add, pero sin la rotación (es un switch, no una acción). */
.ids-kanban-column__history-btn:hover {
    background: var(--status-color, var(--ids-primary-500));
    color: #ffffff;
    border-color: transparent;
    transform: scale(1.1);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 50%, transparent);
}

.ids-kanban-column__history-btn--active {
    background: var(--status-color, var(--ids-primary-500));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 40%, transparent);
}

.ids-kanban-column__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--ids-text-muted);
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease,
                background 0.2s ease;
}

.ids-kanban-column__header:hover .ids-kanban-column__toggle {
    color: var(--ids-text-primary);
    background: rgba(15, 23, 42, 0.05);
}

/* ESTADO COLAPSADO: CÁPSULA VERTICAL GLASS BLANCO CON AURA AMBIENTAL */
.ids-kanban-column--collapsed {
    flex: 0 0 74px;
    min-width: 74px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 10px 32px -6px rgba(15, 23, 42, 0.05),
                0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}

.ids-kanban-column--collapsed .ids-kanban-column__aura {
    width: 160px;
    height: 160px;
    top: -20px;
    opacity: 0.28;
}

.ids-kanban-column--collapsed .ids-kanban-column__header,
.ids-kanban-column--collapsed .ids-kanban-column__body,
.ids-kanban-column--collapsed .ids-kanban-pagination {
    display: none !important;
}

.ids-kanban-column__collapsed-view {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px 8px;
    height: 100%;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-kanban-column--collapsed .ids-kanban-column__collapsed-view {
    display: flex;
}

.ids-kanban-column__collapsed-view:hover {
    transform: scale(1.06);
}

.ids-kanban-column__collapsed-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ids-text-primary);
    white-space: nowrap;
    opacity: 0.85;
    margin: 16px 0;
}

.ids-kanban-column__count--collapsed {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--status-color, var(--ids-primary-500));
    color: #ffffff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 45%, transparent);
}

/* DROPZONE Y PISTA DE TARJETAS (CARDS TRACK) */
.ids-kanban-column__body {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 200px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
    transition: padding 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                gap 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-kanban-column__body::-webkit-scrollbar {
    width: 5px;
}
.ids-kanban-column__body::-webkit-scrollbar-track {
    background: transparent;
}
.ids-kanban-column__body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 9999px;
}

/* Esconder empty state cuando hay tarjetas con animación Spring */
.ids-kanban-column__body:has(.ids-ticket-card) .ids-kanban-empty {
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    transform: scale(0.9) translateY(-12px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-color: transparent !important;
    pointer-events: none !important;
}

/* CARDS KANBAN (INTEGRACIÓN Y EFECTOS HOVER RESTAURADOS CON GLOW DE URGENCIA) */
.ids-ticket-card.ids-kanban-card {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease,
                opacity 0.3s ease,
                background 0.3s ease;
}

.ids-ticket-card.ids-kanban-card:hover {
    transform: translateY(-4px) scale(1.015);
}

/* RESTAURACIÓN Y POTENCIACIÓN DE RESPLANDORES POR PRIORIDAD */
.ids-ticket-card--urgent.ids-kanban-card:hover {
    box-shadow: 0 20px 42px -8px rgba(236, 72, 153, 0.42),
                0 0 0 1.5px rgba(236, 72, 153, 0.6) !important;
    border-color: rgba(236, 72, 153, 0.5) !important;
}

.ids-ticket-card--high.ids-kanban-card:hover {
    box-shadow: 0 20px 42px -8px rgba(239, 68, 68, 0.42),
                0 0 0 1.5px rgba(239, 68, 68, 0.6) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

.ids-ticket-card--normal.ids-kanban-card:hover {
    box-shadow: 0 20px 42px -8px rgba(59, 130, 246, 0.42),
                0 0 0 1.5px rgba(59, 130, 246, 0.6) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.ids-ticket-card--low.ids-kanban-card:hover {
    box-shadow: 0 20px 42px -8px rgba(100, 116, 139, 0.38),
                0 0 0 1.5px rgba(100, 116, 139, 0.5) !important;
    border-color: rgba(100, 116, 139, 0.5) !important;
}

.ids-ticket-card.ids-kanban-card:active {
    cursor: grabbing;
}

/* SortableJS Ghost & Dragging con muelle iOS */
.ids-kanban-card--ghost {
    opacity: 0.45 !important;
    background: rgba(255, 255, 255, 0.45) !important;
    border: 2px dashed var(--status-color, var(--ids-primary-400)) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--status-color, var(--ids-primary-400)) 25%, transparent) !important;
    transform: scale(0.97) !important;
    border-radius: 20px !important;
    transition: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.ids-kanban-card--dragging {
    opacity: 0.98 !important;
    box-shadow: 0 24px 48px -4px rgba(15, 23, 42, 0.22) !important;
    transform: scale(1.05) rotate(2deg) !important;
    z-index: 9999 !important;
}

/* ESTADO VACÍO DYNAMIC DROP TARGET */
.ids-kanban-empty {
    flex: 0 0 auto;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--ids-space-4);
    border: 2px dashed color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 35%, rgba(15, 23, 42, 0.12));
    border-radius: 22px;
    min-height: 140px;
    max-height: 300px;
    background: color-mix(in srgb, var(--status-color, var(--ids-primary-500)) 5%, rgba(255, 255, 255, 0.3));
    backdrop-filter: blur(12px);
    pointer-events: none;
    opacity: 1;
    transform: scale(1) translateY(0);
    overflow: hidden;
    transition: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: ids-island-empty-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-kanban-empty__icon {
    color: var(--status-color, var(--ids-primary-500));
    opacity: 0.75;
    transition: transform 0.3s ease;
}

.ids-kanban-empty__title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ids-text-primary);
}

.ids-kanban-empty__text {
    color: var(--ids-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    max-width: 85%;
}

@keyframes ids-island-empty-pop {
    0% {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
        max-height: 0;
        min-height: 0;
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        max-height: 300px;
        min-height: 140px;
    }
}

/* PAGINACIÓN CRISTALINA 'DONE' */
.ids-kanban-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 12px 12px 12px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.ids-kanban-pagination__info {
    font-size: 11px;
    color: var(--ids-text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ids-kanban-pagination__badge {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ids-text-primary);
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-weight: 800;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.ids-kanban-pagination__total {
    opacity: 0.8;
}

.ids-kanban-pagination__btn {
    border-radius: 10px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease !important;
}

.ids-kanban-pagination__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* PRIORITY CHIPS EN DYNAMIC ISLAND HEADER */
.ids-priority-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ids-priority-chip {
    background: var(--ids-bg-surface);
    border: 1px solid var(--ids-border);
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: var(--ids-text-xs);
    font-weight: 600;
    color: var(--ids-text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none !important;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ids-priority-chip:hover {
    background: var(--ids-bg-card-hover);
    border-color: rgba(15, 23, 42, 0.2);
    transform: translateY(-1px);
}

.ids-priority-chip--active {
    background: var(--ids-primary-500) !important;
    color: #ffffff !important;
    border-color: var(--ids-primary-600) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
}

.ids-priority-chip--urgent.ids-priority-chip--active {
    background: linear-gradient(180deg, #f472b6, #ec4899) !important;
    border-color: #ec4899 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(236, 72, 153, 0.35) !important;
}

.ids-priority-chip--high.ids-priority-chip--active {
    background: linear-gradient(180deg, #f87171, #ef4444) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

.ids-priority-chip--normal.ids-priority-chip--active {
    background: linear-gradient(180deg, #60a5fa, #3b82f6) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(59, 130, 246, 0.35) !important;
}

.ids-priority-chip--low.ids-priority-chip--active {
    background: linear-gradient(180deg, #94a3b8, #64748b) !important;
    border-color: #64748b !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(100, 116, 139, 0.35) !important;
}

/* ============================================================
   15. SECCIÓN DE TAREAS ASIGNADAS EN SIDEBAR
   ============================================================ */
.ids-assigned-panel {
    margin-bottom: var(--ids-space-4);
}

.ids-badge-count-pill {
    font-size: 11px !important;
    padding: 2px 8px !important;
    background: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 9999px !important;
}

/* Tabs Rol | Directo del panel "Tareas Asignadas" y del modal "Ver más". */
.ids-scope-tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
    margin-bottom: 10px;
    padding: 3px;
    background: rgba(226, 232, 240, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.75);
    border-radius: 9999px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Glider deslizante estilo Android / iOS Segmented Control */
.ids-scope-glider {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 9999px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.28s cubic-bezier(0.34, 1.25, 0.64, 1);
    pointer-events: none;
    z-index: 1;
}

.ids-scope-tabs[data-active-scope="role"] .ids-scope-glider,
.ids-scope-tabs:not([data-active-scope="direct"]) .ids-scope-glider {
    transform: translate3d(0, 0, 0);
}

.ids-scope-tabs[data-active-scope="direct"] .ids-scope-glider {
    transform: translate3d(100%, 0, 0);
}

.ids-scope-tab {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
    padding: 5px 8px;
    border: none;
    border-radius: 9999px;
    background: transparent !important;
    color: var(--ids-text-secondary, #475569);
    font-family: var(--ids-font-family);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    outline: none;
    box-sizing: border-box;
}

.ids-scope-tab:hover:not(.ids-scope-tab--active) {
    color: var(--ids-text-primary, #0f172a);
}

.ids-scope-tab:focus-visible {
    outline: 2px solid var(--ids-primary-500, #3b82f6);
    outline-offset: 1px;
}

.ids-scope-tab--active {
    color: #ffffff !important;
}

.ids-scope-tab .ids-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: rgba(148, 163, 184, 0.25);
    color: #475569;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease;
}

.ids-scope-tab--active .ids-chip__count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* En el modal / drawer de tareas asignadas */
.ids-assigned-modal-body .ids-scope-tabs {
    margin-top: 0;
    margin-bottom: 16px;
    width: 100%;
    max-width: 260px;
}

/* ============================================================
   ANIMACIONES VIEWPAGER (SIDEBAR Y MODAL)
   ============================================================ */

@keyframes ids-viewpager-enter-right {
    0% {
        opacity: 0;
        transform: translate3d(28px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ids-viewpager-enter-left {
    0% {
        opacity: 0;
        transform: translate3d(-28px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ids-viewpager-exit-left {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(-28px, 0, 0);
    }
}

@keyframes ids-viewpager-exit-right {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(28px, 0, 0);
    }
}

.ids-viewpager-slide-in-right {
    animation: ids-viewpager-enter-right 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ids-viewpager-slide-in-left {
    animation: ids-viewpager-enter-left 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ids-viewpager-slide-out-left {
    animation: ids-viewpager-exit-left 0.12s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.ids-viewpager-slide-out-right {
    animation: ids-viewpager-exit-right 0.12s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.ids-assigned-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    /* Sin scroll ni max-height: el truncado real lo calcula JS (_fitAssignedList)
       según el espacio disponible en pantalla; los items que no caben se ocultan
       (no se destruyen) y "Ver más" abre el modal paginado con el resto. */
    overflow: hidden;
}

.ids-assigned-item--hidden-overflow {
    display: none !important;
}

.ids-btn-ver-mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--ids-primary-600, #4f46e5);
    background: rgba(99, 102, 241, 0.08);
    border: 1px dashed rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ids-btn-ver-mas:hover {
    background: rgba(99, 102, 241, 0.14);
    border-style: solid;
    transform: translateY(-1px);
}

.ids-assigned-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--ids-text-tertiary);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px dashed var(--ids-border);
}

.ids-assigned-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    user-select: none;
    margin: 2px 0 0 0;
}

.ids-assigned-item__content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.ids-assigned-item__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ids-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-btn-take-ticket {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--ids-text-primary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    margin-left: 6px;
}

.ids-btn-take-ticket:hover {
    background: var(--ids-primary-500);
    color: #ffffff;
    border-color: var(--ids-primary-400);
    transform: scale(1.12) translateX(2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Transiciones cristalizadas dinámicas según urgencia al hacer Hover */
.ids-assigned-item--urgent:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

.ids-assigned-item--high:hover {
    background: rgba(249, 115, 22, 0.12) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

.ids-assigned-item--normal:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

.ids-assigned-item--low:hover {
    background: rgba(100, 116, 139, 0.12) !important;
    border-color: rgba(100, 116, 139, 0.5) !important;
    box-shadow: 0 4px 16px rgba(100, 116, 139, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

/* Animación de entrada de tarjeta pop */
@keyframes cardPopEnter {
    0% {
        opacity: 0;
        transform: scale(0.88) translateY(-14px);
    }
    60% {
        opacity: 1;
        transform: scale(1.03) translateY(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ids-card-pop-enter {
    animation: cardPopEnter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* ==========================================================================
   Inotek Design System - Reusable Island Modal Component Extensions
   ========================================================================== */

/* Sizes */
.ids-island-modal--sm {
    max-width: 440px;
}

.ids-island-modal--md {
    max-width: 560px;
}

.ids-island-modal--lg {
    max-width: 720px;
}

/* Stacking / Elevation for nested overlays & modals */
.ids-island-overlay--top {
    z-index: 310;
}

.ids-island-modal--top {
    z-index: 311;
}

/* Modal Content & Layout */
.ids-island__body {
    padding: var(--ids-space-6, 24px);
    display: block;
    overflow-y: auto;
    max-height: calc(85vh - 70px);
}

.ids-island__subtitle {
    font-size: var(--ids-text-xs, 0.75rem);
    color: var(--ids-text-muted, #64748b);
    margin-top: 2px;
}

/* Reusable Icon Badges */
.ids-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--ids-radius-md, 12px);
    flex-shrink: 0;
}

.ids-icon-badge--primary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.25));
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.ids-icon-badge--danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.25));
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ==========================================================================
   Kanban Drawer Tab Slider & Sliding Pill Switch
   ========================================================================== */

.ids-drawer-slider-wrapper {
    display: inline-flex;
    align-items: center;
}

.ids-drawer-slider {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 3px;
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    user-select: none;
    gap: 2px;
}

.ids-drawer-slider__pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35), 
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1),
                width 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, width;
}

.ids-drawer-slider__tab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ids-text-muted, #64748b);
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    outline: none;
    text-align: center;
    transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.15s ease;
}

.ids-drawer-slider__tab:hover {
    color: var(--ids-text-primary, #0f172a);
}

.ids-drawer-slider__tab:active {
    transform: scale(0.95);
}

.ids-drawer-slider__tab--active {
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.ids-drawer-slider__tab svg {
    display: inline-block;
    flex-shrink: 0;
    opacity: 0.75;
    transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease;
}

.ids-drawer-slider__tab span {
    display: inline-block;
    line-height: 1;
}

.ids-drawer-slider__tab--active svg {
    opacity: 1;
    transform: scale(1.1);
    color: #ffffff;
}

@keyframes ids-tab-typing-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* Tab Panels Container */
.ids-drawer-tabs-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Sin `height: 100%`: el alto lo da el stretch dentro de .ids-drawer-tabs-body (display:flex),
   que sí tiene altura definida. Un porcentaje aquí se rompía en cuanto el ancestro era `auto`. */
.ids-drawer-tab-content {
    display: none;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.ids-drawer-tab-content--active {
    display: flex;
    flex: 1 1 100%;
    animation: ids-drawer-tab-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ids-drawer-tab-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   Kanban Drawer: Pasos deslizantes (Lista de Asignadas <-> Editor de Ticket)
   ========================================================================== */

.ids-drawer-steps {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    width: 200%;
    transform: translateX(0%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Paso activo: Editor de ticket (desliza -50% de los 200% del contenedor,
   es decir, exactamente el ancho de un paso = el ancho del diálogo). */
.ids-drawer-steps--edit {
    transform: translateX(-50%);
}

/* Usado solo momentáneamente por TicketsUI.goToDrawerStep(step, {animate:false})
   para saltar de paso sin animar (reset al cerrar / apertura de edición directa). */
.ids-drawer-steps--no-transition {
    transition: none !important;
}

.ids-drawer-step {
    flex: 0 0 50%;
    width: 50%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Overlay de carga sobre el paso "Editor" mientras el fetch granular
   (TicketsApi.getTicket) está en curso, al llegar desde el paso "Lista". */
.ids-drawer-edit-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    animation: ids-fade-in 0.15s ease;
}

/* Transición de contenido al navegar entre tarea principal <-> sub-tarea dentro del mismo
   drawer (mismo <dialog>, ver openSubtask/goToParentTicket): un fade + leve desplazamiento
   para que el cambio de datos se sienta como una navegación, no como un parpadeo. */
@keyframes ids-drawer-content-swap {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}
.ids-drawer-content-swap {
    animation: ids-drawer-content-swap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ids-drawer-back-btn {
    flex-shrink: 0;
}

.ids-drawer-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-xs);
    font-weight: 600;
    cursor: pointer;
    max-width: 220px;
    flex-shrink: 0;
    transition: var(--ids-transition-fast);
}
.ids-drawer-breadcrumb:hover { background: rgba(99, 102, 241, 0.16); }
.ids-drawer-breadcrumb span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Rail de sub-tareas / adjuntos: paneles comprimidos deslizables dentro del
   drawer. #ids-drawer-step-edit pasa de column (.ids-drawer-step) a row para
   alojar, de izquierda a derecha: el riel de pestañas fijo (.ids-rail-tabs),
   los rieles deslizables (width 0 -> 260px, solo uno abierto a la vez) y
   .ids-drawer-edit-content (recrea el layout column original del paso "edit").
   ========================================================================== */
#ids-drawer-step-edit {
    flex-direction: row;
    position: relative;
}

.ids-drawer-edit-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Riel de pestañas: franja angosta fija (no flota, no se desliza) pegada al
   borde del contenido — estilo "activity bar" (VSCode/Slack). Agrupa los
   botones que abren cada panel lateral en un único control integrado en vez
   de círculos flotando sueltos sobre el contenido. */
.ids-rail-tabs {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ids-space-2);
    padding: var(--ids-space-3) 0;
    background: rgba(248, 250, 252, 0.6);
    border-right: 1px solid rgba(226, 232, 240, 0.8);
}

.ids-rail-tab {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--ids-radius-md, 10px);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ids-text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ids-rail-tab:hover { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.ids-rail-tab--active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}

/* Aviso de "hay novedades" (comentario/typing remoto) mientras el riel de
   Comentarios está cerrado — mismo criterio que usaba el tab de antes (ver
   .ids-drawer-slider__tab.ids-tab-has-comment más abajo), aplicado ahora al
   botón del riel de pestañas. */
.ids-rail-tab.ids-tab-has-comment::after,
.ids-rail-tab.ids-tab-has-typing::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ids-bg-surface, #fff);
}
.ids-rail-tab.ids-tab-has-comment::after {
    background: var(--ids-danger-text, #dc2626);
}
.ids-rail-tab.ids-tab-has-typing::after {
    background: var(--ids-primary-600, #2563eb);
    animation: ids-tab-typing-blink 1s ease-in-out infinite;
}

.ids-subtask-rail {
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(248, 250, 252, 0.75);
    transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
.ids-subtask-rail--open {
    width: 260px;
    opacity: 1;
}

.ids-subtask-rail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ids-space-2);
    padding: var(--ids-space-4) var(--ids-space-4) var(--ids-space-3);
    font-size: var(--ids-text-sm);
    font-weight: 600;
    color: var(--ids-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.ids-subtask-rail__header span { display: inline-flex; align-items: center; gap: 6px; }

.ids-subtask-rail__list {
    list-style: none;
    margin: 0;
    padding: 0 var(--ids-space-3) var(--ids-space-2);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ids-subtask-rail__empty {
    padding: var(--ids-space-3);
    font-size: var(--ids-text-xs);
    color: var(--ids-text-muted);
    text-align: center;
}

.ids-subtask-rail__item {
    display: flex;
    align-items: center;
    gap: var(--ids-space-2);
    padding: 7px var(--ids-space-2);
    border-radius: var(--ids-radius-sm);
    cursor: pointer;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    transition: var(--ids-transition-fast);
}
.ids-subtask-rail__item:hover { background: rgba(99, 102, 241, 0.08); }
.ids-subtask-rail__item--active {
    background: rgba(99, 102, 241, 0.12);
    border-left-color: #6366f1;
}
.ids-subtask-rail__item-title {
    flex: 1;
    min-width: 0;
    font-size: var(--ids-text-xs);
    color: var(--ids-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}
.ids-subtask-rail__item--done .ids-subtask-rail__item-title {
    text-decoration: line-through;
    color: var(--ids-text-muted);
}

.ids-subtask-rail__quick-add {
    padding: var(--ids-space-3);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    flex-shrink: 0;
}
.ids-subtask-rail__quick-add input { font-size: var(--ids-text-xs); padding: 8px 10px; }

/* ==========================================================================
   Riel de Adjuntos: mismo mecanismo que el riel de sub-tareas (arriba),
   comparte el mismo lado izquierdo y el mismo .ids-rail-tabs — solo uno de
   los dos puede estar abierto a la vez (TicketsUI mantiene la exclusión
   mutua). Homologado con Inotek — ver .ids-drawer-body-row/.ids-rail-tabs
   ahí, que replican este mismo mecanismo sin tocar el <dialog> directamente.
   ========================================================================== */
.ids-attachments-rail {
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(248, 250, 252, 0.75);
    transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
.ids-attachments-rail--open {
    width: 260px;
    opacity: 1;
}

.ids-attachments-rail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ids-space-2);
    padding: var(--ids-space-4) var(--ids-space-4) var(--ids-space-3);
    font-size: var(--ids-text-sm);
    font-weight: 600;
    color: var(--ids-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.ids-attachments-rail__header span { display: inline-flex; align-items: center; gap: 6px; }

.ids-attachments-rail .ids-attachment-grid--island {
    padding: 0 var(--ids-space-3) var(--ids-space-2) var(--ids-space-3);
}
.ids-attachments-rail .ids-dropzone--island {
    margin: 0 var(--ids-space-3) var(--ids-space-3);
}

/* ==========================================================================
   Riel de Comentarios: mismo mecanismo que Sub-tareas/Adjuntos (arriba),
   tercer inquilino del mismo .ids-rail-tabs — solo uno de los tres puede
   estar abierto a la vez. Más ancho que los otros dos: un hilo de chat
   necesita más aire horizontal que una lista de archivos. El chat en sí
   (timeline/input/typing) no cambia — sigue siendo el mismo markup por id
   que usaba la pestaña "Comentarios" de antes, solo cambia dónde vive.
   ========================================================================== */
.ids-comments-rail {
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(248, 250, 252, 0.75);
    transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
.ids-comments-rail--open {
    width: 340px;
    opacity: 1;
}

.ids-comments-rail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ids-space-2);
    padding: var(--ids-space-4) var(--ids-space-4) var(--ids-space-3);
    font-size: var(--ids-text-sm);
    font-weight: 600;
    color: var(--ids-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.ids-comments-rail__header span { display: inline-flex; align-items: center; gap: 6px; }

/* Ojo: solo padding-right/bottom, NUNCA el shorthand `padding` — .ids-timeline
   (base) trae `padding-left: var(--ids-space-6)` a propósito, es el gutter donde
   .ids-timeline-item__avatar se posiciona con `left: calc(-1 * var(--ids-space-6))`.
   Pisarlo con el shorthand saca el avatar del gutter y el `overflow:hidden` del
   riel lo recorta por la izquierda. */
.ids-comments-rail .ids-timeline--island {
    padding-right: var(--ids-space-3);
    padding-bottom: var(--ids-space-2);
}
.ids-comments-rail .ids-typing-indicator,
.ids-comments-rail .ids-chat-input-wrapper--island {
    margin-left: var(--ids-space-6);
    margin-right: var(--ids-space-3);
    margin-bottom: var(--ids-space-3);
}

/* Collaborator & Task Tab Custom Aesthetics */
.ids-collaborator-hero,
.ids-task-hero {
    display: flex;
    align-items: center;
    gap: var(--ids-space-4);
    padding: var(--ids-space-4) var(--ids-space-5);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.06) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--ids-radius-xl, 16px);
    margin-bottom: var(--ids-space-5);
}

.ids-collaborator-hero__icon,
.ids-task-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ids-radius-lg, 12px);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    flex-shrink: 0;
}

.ids-collaborator-hero__text,
.ids-task-hero__text {
    flex: 1;
}

.ids-collaborator-hero__title,
.ids-task-hero__title {
    font-size: var(--ids-text-base, 1rem);
    font-weight: 600;
    color: var(--ids-text-primary, #0f172a);
    margin: 0 0 2px 0;
}

.ids-collaborator-hero__desc,
.ids-task-hero__desc {
    font-size: 0.8125rem;
    color: var(--ids-text-muted, #64748b);
    margin: 0;
    line-height: 1.4;
}

.ids-collaborator-hero__badge,
.ids-task-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 0.75rem;
    font-weight: 600;
}

.ids-collaborator-section,
.ids-task-section {
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--ids-radius-xl, 16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: var(--ids-space-5);
    margin-bottom: var(--ids-space-5);
    box-shadow: var(--ids-shadow-sm);
}

.ids-collaborator-section__title,
.ids-task-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ids-text-primary);
    margin: 0;
}

/* Franja de estadísticas del tab Colaborar (reemplaza el hero "Espacio Colaborativo"). */
.ids-collaborator-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ids-space-3);
    margin-bottom: var(--ids-space-5);
}

.ids-collaborator-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--ids-space-3) var(--ids-space-2);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--ids-radius-lg, 12px);
    text-align: center;
}

.ids-collaborator-stat__value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ids-text-primary);
    line-height: 1.1;
}

.ids-collaborator-stat__label {
    font-size: 0.6875rem;
    color: var(--ids-text-muted);
    font-weight: 500;
}

.ids-collaborator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ids-space-3);
}

.ids-collaborator-card--enter {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
}

.ids-collaborator-card {
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease;
}

.ids-collaborator-card--leaving {
    opacity: 0;
    transform: scale(0.9);
}

/* Card "Añadir colaborador": grilla de candidatos + buscador, revelada de abajo
   hacia arriba (mismo mecanismo que .ids-dynamic-island / .ids-island-details:
   max-height + opacity, aquí sumando un translateY para el efecto de "asenso"). */
.ids-collaborator-add-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(14px);
    transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ids-collaborator-add-panel--open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    margin-top: var(--ids-space-3);
}

.ids-collaborator-add-panel__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: var(--ids-space-2);
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--ids-radius-md, 10px);
    color: var(--ids-text-muted);
}

.ids-collaborator-add-panel__search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--ids-text-primary);
}

.ids-collaborator-add-grid {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}

.ids-collaborator-candidate-group {
    transition: opacity 0.2s ease, max-height 0.2s ease;
}

.ids-collaborator-candidate-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ids-collaborator-candidate {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--ids-radius-md, 8px);
    background: transparent;
    color: var(--ids-text-primary);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.22s ease;
}

.ids-collaborator-candidate:hover {
    background: rgba(99, 102, 241, 0.08);
}

.ids-collaborator-candidate__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ids-collaborator-candidate--enter {
    opacity: 0;
    transform: translateY(8px);
}

.ids-collaborator-candidate--leaving {
    opacity: 0;
    transform: translateX(8px) scale(0.96);
    pointer-events: none;
}

.ids-collaborator-candidate--loading {
    opacity: 0.5;
    pointer-events: none;
}

.ids-collaborator-avatar--xs {
    width: 22px;
    height: 22px;
    font-size: 0.625rem;
    flex-shrink: 0;
}

.ids-collaborator-card {
    display: flex;
    align-items: center;
    gap: var(--ids-space-3);
    padding: var(--ids-space-3) var(--ids-space-4);
    background: #ffffff;
    border-radius: var(--ids-radius-lg, 12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: var(--ids-shadow-xs);
}

.ids-collaborator-card--placeholder {
    border-style: dashed;
    background: rgba(248, 250, 252, 0.5);
}

.ids-collaborator-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ids-collaborator-avatar--ghost {
    background: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.ids-collaborator-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ids-collaborator-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ids-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-collaborator-role {
    font-size: 0.75rem;
    color: var(--ids-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-collaborator-card--placeholder .ids-collaborator-role {
    white-space: normal;
}

.ids-collaborator-card__remove-btn,
.ids-collaborator-card__responsible-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--ids-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ids-collaborator-card__remove-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.ids-collaborator-card__responsible-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

/* Punto "en línea" del selector de colaboradores (presencia global vía socket). */
.ids-online-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 9999px;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    vertical-align: middle;
}

.ids-ctx-menu__item--user {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ids-collaborator-empty-feed,
.ids-task-empty-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ids-space-6) var(--ids-space-4);
    text-align: center;
}

.ids-collaborator-empty-feed__icon,
.ids-task-empty-list__icon {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ids-space-3);
}

.ids-collaborator-empty-feed__text,
.ids-task-empty-list__text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ids-text-primary);
    margin: 0 0 4px 0;
}

.ids-task-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(226, 232, 240, 0.8);
    border-radius: 9999px;
    overflow: hidden;
}

.ids-task-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Resumen accionable de la pestaña Tareas: reemplaza el hero decorativo original
   por progreso + alta rápida (solo título, se auto-asigna al creador). */
.ids-task-summary-bar {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--ids-radius-xl, 16px);
    padding: var(--ids-space-4) var(--ids-space-5);
    margin-bottom: var(--ids-space-4);
    box-shadow: var(--ids-shadow-sm);
}
.ids-task-summary-bar__progress { margin-bottom: var(--ids-space-3); }

.ids-task-quick-add {
    display: flex;
    gap: var(--ids-space-2);
}
.ids-task-quick-add .ids-input { flex: 1; }

.ids-task-list {
    list-style: none;
    margin: 0 0 var(--ids-space-4) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-2);
}

.ids-task-list-item {
    display: flex;
    align-items: center;
    gap: var(--ids-space-3);
    padding: var(--ids-space-2) var(--ids-space-3);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--ids-radius-md, 12px);
    cursor: pointer;
    transition: var(--ids-transition-fast);
}
.ids-task-list-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(2px);
}

.ids-task-list-item__checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid rgba(148, 163, 184, 0.5);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ids-transition-fast);
    color: transparent;
    padding: 0;
}
.ids-task-list-item__checkbox:hover { border-color: #6366f1; }
.ids-task-list-item__checkbox--sm { width: 16px; height: 16px; border-radius: 4px; }

.ids-task-list-item--done .ids-task-list-item__checkbox {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: #ffffff;
}

.ids-task-list-item__title {
    flex: 1;
    min-width: 0;
    font-size: var(--ids-text-sm);
    font-weight: 500;
    color: var(--ids-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ids-task-list-item--done .ids-task-list-item__title {
    text-decoration: line-through;
    color: var(--ids-text-muted);
    opacity: 0.75;
}

.ids-task-list-item__meta {
    display: flex;
    align-items: center;
    gap: var(--ids-space-2);
    flex-shrink: 0;
}
.ids-task-list-item__avatar { flex-shrink: 0; }

.ids-task-list-item__due,
.ids-task-list-item__start {
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-xs);
    color: var(--ids-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    background: transparent;
    padding: 2px 4px;
    border-radius: var(--ids-radius-sm);
    cursor: pointer;
    transition: var(--ids-transition-fast);
}
.ids-task-list-item__due:hover,
.ids-task-list-item__start:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
}
.ids-task-list-item__due--overdue { color: var(--ids-danger-text); font-weight: 600; }
.ids-task-list-item__due--overdue:hover { color: var(--ids-danger-text); }
.ids-task-list-item__due--empty,
.ids-task-list-item__start--empty {
    opacity: 0;
    width: 20px;
    justify-content: center;
}
.ids-task-list-item:hover .ids-task-list-item__due--empty,
.ids-task-list-item:hover .ids-task-list-item__start--empty {
    opacity: 0.55;
}
.ids-task-list-item__due--empty:hover,
.ids-task-list-item__start--empty:hover {
    opacity: 1 !important;
}

/* Shortcut de prioridad: pill completo (ícono + etiqueta), mismos colores que los badges
   de prioridad de la card — junto al avatar de asignación al final de la fila. */
.ids-task-priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-family: var(--ids-font-family);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
    transition: var(--ids-transition-fast);
}
.ids-task-priority-pill svg { flex-shrink: 0; }
.ids-task-priority-pill:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ids-task-priority-pill--low    { background: #94a3b8; }
.ids-task-priority-pill--normal { background: #3b82f6; }
.ids-task-priority-pill--high   { background: #ef4444; }
.ids-task-priority-pill--urgent { background: #ec4899; }

.ids-task-list-item__delete {
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.ids-task-list-item:hover .ids-task-list-item__delete { opacity: 1; }

/* ==========================================================================
   16. FORMULARIO DE TICKET: SECCIONES (Fechas / Detalles / Asignación / Avanzado)
   ========================================================================== */

/*
 * Layout de la pestaña Info: columna principal ancha (título + descripción, el contenido que
 * de verdad necesita espacio) y riel lateral con los metadatos compactos. Un ÚNICO contenedor
 * con scroll (.ids-info-grid) para que la cadena de alturas sea inequívoca: header y footer del
 * drawer quedan fijos y solo el formulario se desplaza.
 */
.ids-info-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

#ids-ticket-form {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* El scroller de la pestaña. */
.ids-info-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    /* `1fr` con piso en min-content: la fila llena el alto disponible cuando sobra espacio
       (la descripción crece en vez de dejar un hueco muerto) y crece más allá — activando el
       scroll del propio grid — cuando el contenido no cabe. */
    grid-template-rows: minmax(min-content, 1fr);
    align-items: stretch;
    gap: var(--ids-space-5, 20px);
    padding: var(--ids-space-6, 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}

.ids-info-grid::-webkit-scrollbar { width: 6px; }
.ids-info-grid::-webkit-scrollbar-track { background: transparent; }
.ids-info-grid::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
    border-radius: var(--ids-radius-full, 9999px);
}

.ids-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-4, 16px);
    min-width: 0;
}

/* Cada sección es una tarjeta: las divisiones se leen sin líneas horizontales largas
   y el riel lateral no se confunde con la columna principal. */
.ids-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-3, 12px);
    padding: var(--ids-space-4, 16px);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--ids-radius-xl, 16px);
    box-shadow: var(--ids-shadow-sm);
}

/* La sección de resolución es hermana de Detalles: no compite por el alto sobrante. */
.ids-info-col--main > .ids-form-section--success {
    flex: none;
}

.ids-form-section--success {
    background: rgba(240, 253, 244, 0.7);
    border-color: rgba(34, 197, 94, 0.25);
}

/* Estas dos ya se usaban en el markup de resolución pero nunca tuvieron declaración. */
.ids-text-success {
    color: var(--ids-success-600, #16a34a);
}

.ids-textarea--success:focus {
    border-color: var(--ids-success-500, #22c55e);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.15), 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.ids-form-section__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ids-text-muted, #64748b);
    margin: 0;
}

.ids-form-section__title svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Dos campos por renglón. Sin esto el riel lateral crece más que el propio drawer
   en pantallas de 768px de alto y obliga a hacer scroll siempre. */
.ids-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ids-space-3, 12px);
}

/* Chrome más compacto en el riel: es información de apoyo, no el contenido principal. */
.ids-info-col--side .ids-form-section {
    padding: var(--ids-space-3, 12px) var(--ids-space-4, 16px);
    gap: var(--ids-space-2, 8px);
}

.ids-info-col--side .ids-input--island,
.ids-info-col--side .ids-select {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: var(--ids-text-sm);
}

/* La descripción absorbe el alto sobrante de la columna principal. `min-height` es el piso
   real que alimenta el `min-content` de la fila del grid: por debajo de eso ya no se comprime,
   se activa el scroll. */
.ids-info-col--main > .ids-form-section:first-child {
    flex: 1;
    min-height: 0;
}

.ids-info-col--main > .ids-form-section:first-child > .ids-form-group:last-child {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ids-textarea--grow {
    flex: 1 1 auto;
    min-height: 150px;
    resize: vertical;
}

.ids-date-field-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
}

/* Dentro de una fila emparejada la columna mide ~200px: date + time lado a lado deja el
   campo de fecha ilegible (se recorta a "mm/d..."), así que se apilan. */
.ids-form-row .ids-date-field-group {
    grid-template-columns: minmax(0, 1fr);
}

/* --- Responsive de la pestaña Info --- */

@media (max-width: 1180px) {
    .ids-info-grid {
        gap: var(--ids-space-4, 16px);
        padding: var(--ids-space-4, 16px);
    }
}

/* Sin ancho para dos columnas: se apilan y el riel se reparte en dos para no crecer a lo largo. */
@media (max-width: 980px) {
    .ids-info-grid { grid-template-columns: minmax(0, 1fr); }

    .ids-info-col--side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    /* Las secciones ya están a media pantalla: emparejar de nuevo adentro las apretaría. */
    .ids-form-row { grid-template-columns: minmax(0, 1fr); }

    /* ...pero al no estar en el riel angosto vuelve a haber ancho para fecha + hora juntas. */
    .ids-form-row .ids-date-field-group { grid-template-columns: minmax(0, 1fr) 104px; }
}

@media (max-width: 560px) {
    .ids-info-col--side { grid-template-columns: 1fr; }
    .ids-date-field-group { grid-template-columns: 1fr; }
    .ids-textarea--grow { min-height: 130px; }
}

/* ==========================================================================
   17. PESTAÑA ACTIVIDAD: Comentarios + Adjuntos lado a lado
   ========================================================================== */

/* Igual que en Info: nada de `height: 100%` (el ancestro puede ser `auto`), la altura la da
   el flex del panel de pestaña. En desktop cada columna scrollea por dentro; el grid completo
   solo scrollea cuando se apila en móvil. */
.ids-activity-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--ids-space-5, 20px);
    padding: var(--ids-space-6, 24px);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .ids-activity-layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
}

/* Pestaña Actividad (timeline de auditoría): una sola columna a todo lo ancho. */
.ids-activity-layout--single {
    grid-template-columns: 1fr;
}

.ids-timeline-item__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--ids-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: var(--ids-radius-full, 999px);
    background: var(--ids-primary-100);
    color: var(--ids-primary-600);
    margin-left: var(--ids-space-2);
}

.ids-activity-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    gap: var(--ids-space-3, 12px);
}

/* ==========================================================================
   18. MODAL "VER MÁS" DE ASIGNADAS
   ========================================================================== */

.ids-assigned-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--ids-space-6, 24px);
}

.ids-assigned-modal-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.ids-assigned-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-assigned-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.12);
}

.ids-assigned-row--urgent:hover { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.4) !important; }
.ids-assigned-row--high:hover   { background: rgba(249, 115, 22, 0.1) !important; border-color: rgba(249, 115, 22, 0.4) !important; }

.ids-assigned-row__main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.ids-assigned-row__badges {
    display: flex;
    gap: 6px;
}

.ids-assigned-row__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ids-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ids-assigned-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: var(--ids-text-muted, #64748b);
}

.ids-assigned-row__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ids-assigned-row__meta-item--due {
    color: #dc2626;
    font-weight: 600;
}

/* Fila en tránsito hacia el editor real (recicla KanbanDrawerView) */

.ids-assigned-row--loading {
    position: relative;
    pointer-events: none;
}

.ids-assigned-row--loading .ids-assigned-row__main,
.ids-assigned-row--loading .ids-btn-take-ticket {
    opacity: 0.35;
}

.ids-assigned-row__loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

/* ==========================================================================
   SHORTCUT DE ASIGNACIÓN RÁPIDA (colaboradores clicables por fila de sub-tarea)
   Mismo componente en Tools e Inotek — popover multi-selección con los colaboradores
   del ticket padre (solo quien ya colabora ahí puede tomar una sub-tarea; una
   sub-tarea puede tener varios colaboradores a la vez, ver ticket_collaborators).
   ========================================================================== */

.ids-subtask-assignee {
    flex-shrink: 0;
    display: inline-flex;
}

/* Estado "sin nadie asignado": círculo punteado con ícono de "+persona". */
.ids-subtask-assignee__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 9999px;
    border: 2px dashed rgba(148, 163, 184, 0.6);
    background: transparent;
    color: var(--ids-text-muted);
    padding: 0;
    transition: var(--ids-transition-fast);
}
.ids-subtask-assignee__trigger:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}
.ids-subtask-assignee__trigger--sm { width: 18px; height: 18px; }

/* Estado "con colaboradores": pila de avatares superpuestos, ancho automático. */
.ids-subtask-assignee__trigger--assigned {
    width: auto;
    height: auto;
    min-width: 22px;
    border: none;
    border-radius: 9999px;
    padding: 2px;
}
.ids-subtask-assignee__trigger--assigned:hover {
    background: rgba(99, 102, 241, 0.08);
}
.ids-subtask-assignee__avatar {
    border: 2px solid var(--ids-bg-surface, #fff);
    box-sizing: content-box;
    margin-left: -8px;
}
.ids-subtask-assignee__avatar:first-child { margin-left: 0; }
.ids-subtask-assignee__overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -8px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.35);
    color: var(--ids-text-secondary);
    font-size: 9px;
    font-weight: 700;
    border: 2px solid var(--ids-bg-surface, #fff);
    box-sizing: content-box;
}

/* Popover multi-selección: reutiliza el menú flotante compartido #ids-quick-menu
   (mismo mecanismo que toggleQuickEdit/openCollaboratorMenu) y .ids-ctx-menu__item
   como botón de cada candidato — el check a la izquierda indica "ya asignado". */
.ids-ctx-menu__item--toggle {
    justify-content: flex-start;
}
.ids-ctx-menu__item-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #6366f1;
}

/* ============================================================
   IDS DROPDOWN SYSTEM (Dynamic Island iOS Glassmorphism)
   ============================================================ */
.ids-dropdown {
    position: fixed;
    z-index: 9999;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--ids-radius-xl, 18px);
    box-shadow: 0 24px 48px -8px rgba(15, 23, 42, 0.18),
                0 8px 18px -4px rgba(15, 23, 42, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.76);
    filter: blur(8px);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.36s cubic-bezier(0.175, 0.885, 0.32, 1.175),
                filter 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.ids-dropdown--open {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: blur(0px) !important;
    pointer-events: auto !important;
}

.ids-dropdown--closing {
    opacity: 0 !important;
    transform: scale(0.85) !important;
    filter: blur(5px) !important;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 1, 1),
                transform 0.20s cubic-bezier(0.4, 0, 1, 1),
                filter 0.18s ease !important;
    pointer-events: none !important;
}

.ids-dropdown--morphing {
    overflow: hidden !important;
    will-change: width, height, top, left;
}

/* Ocultar cualquier barra de desplazamiento mientras el menú se anima de entrada, salida o morphing */
.ids-dropdown:not(.ids-dropdown--ready) .ids-dropdown__content,
.ids-dropdown--closing .ids-dropdown__content,
.ids-dropdown--morphing .ids-dropdown__content {
    overflow-y: hidden !important;
}

.ids-dropdown--open .ids-dropdown__content > * {
    animation: idsDropdownItemReveal 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ids-dropdown--open .ids-dropdown__content > *:nth-child(1) { animation-delay: 0.015s; }
.ids-dropdown--open .ids-dropdown__content > *:nth-child(2) { animation-delay: 0.03s; }
.ids-dropdown--open .ids-dropdown__content > *:nth-child(3) { animation-delay: 0.045s; }
.ids-dropdown--open .ids-dropdown__content > *:nth-child(4) { animation-delay: 0.06s; }
.ids-dropdown--open .ids-dropdown__content > *:nth-child(5) { animation-delay: 0.075s; }
.ids-dropdown--open .ids-dropdown__content > *:nth-child(6) { animation-delay: 0.09s; }
.ids-dropdown--open .ids-dropdown__content > *:nth-child(n+7) { animation-delay: 0.105s; }

@keyframes idsDropdownItemReveal {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.ids-dropdown-custom-date {
    animation: idsDropdownCustomReveal 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes idsDropdownCustomReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ids-dropdown__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: inherit;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

.ids-dropdown__content::-webkit-scrollbar {
    width: 5px;
}
.ids-dropdown__content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
}

.ids-dropdown__header {
    padding: 6px 10px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ids-dropdown__header-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ids-dropdown__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ids-primary, #6366f1);
}

.ids-dropdown__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ids-text-muted, #64748b);
    font-family: var(--ids-font-family, system-ui, -apple-system, sans-serif);
}

.ids-dropdown__header-subtitle {
    font-size: 12px;
    color: var(--ids-text-secondary, #475569);
    font-weight: 400;
}

.ids-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--ids-radius-md, 10px);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--ids-font-family, system-ui, -apple-system, sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ids-text-primary, #0f172a);
    text-align: left;
    text-decoration: none;
    user-select: none;
    box-sizing: border-box;
    transition: background-color 0.14s ease,
                color 0.14s ease,
                transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ids-dropdown__item:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--ids-text-primary, #0f172a);
    transform: translateX(1.5px);
}

.ids-dropdown__item:active:not(:disabled) {
    transform: scale(0.98);
}

.ids-dropdown__item--active {
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--ids-primary, #6366f1) !important;
    font-weight: 600;
}

.ids-dropdown__item--danger {
    color: #ef4444 !important;
}

.ids-dropdown__item--danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
}

.ids-dropdown__item--disabled,
.ids-dropdown__item:disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
    pointer-events: none;
}

.ids-dropdown__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}

.ids-dropdown__item-label-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.ids-dropdown__item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.ids-dropdown__item-desc {
    font-size: 11.5px;
    color: var(--ids-text-muted, #64748b);
    font-weight: 400;
    line-height: 1.25;
}

.ids-dropdown__item-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--ids-text-secondary, #475569);
    margin-left: auto;
    flex-shrink: 0;
}

.ids-dropdown__item-check {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ids-primary, #6366f1);
    flex-shrink: 0;
}

.ids-dropdown__divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 4px 6px;
}

.ids-dropdown__group {
    padding: 6px 10px 2px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ids-text-muted, #94a3b8);
    font-family: var(--ids-font-family, system-ui, -apple-system, sans-serif);
}

.ids-dropdown__custom-item {
    padding: 4px 6px;
}

.ids-dropdown__empty {
    padding: 12px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--ids-text-muted, #94a3b8);
}

.ids-dropdown__loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.ids-dropdown__skeleton {
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
    animation: ids-dropdown-shimmer 1.5s infinite;
}
.ids-dropdown__skeleton--1 { width: 85%; }
.ids-dropdown__skeleton--2 { width: 100%; }
.ids-dropdown__skeleton--3 { width: 70%; }

.ids-dropdown__loading-text {
    font-size: 11.5px;
    color: var(--ids-text-muted, #64748b);
    text-align: center;
    margin-top: 2px;
}

.ids-dropdown__error {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #ef4444;
}

.ids-dropdown__retry-btn {
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
.ids-dropdown__retry-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

@keyframes ids-dropdown-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Modo oscuro */
.dark .ids-dropdown,
[data-theme="dark"] .ids-dropdown {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(51, 65, 85, 0.85);
    box-shadow: 0 20px 40px -6px rgba(0, 0, 0, 0.5),
                0 4px 12px -2px rgba(0, 0, 0, 0.2),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dark .ids-dropdown__item,
[data-theme="dark"] .ids-dropdown__item {
    color: #f1f5f9;
}

.dark .ids-dropdown__item:hover:not(:disabled),
[data-theme="dark"] .ids-dropdown__item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.dark .ids-dropdown__divider,
[data-theme="dark"] .ids-dropdown__divider {
    background: rgba(255, 255, 255, 0.08);
}

.dark .ids-dropdown__header,
[data-theme="dark"] .ids-dropdown__header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark .ids-dropdown__item-badge,
[data-theme="dark"] .ids-dropdown__item-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.dark .ids-dropdown__skeleton,
[data-theme="dark"] .ids-dropdown__skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
}



/* ═══════════════════════════════════════════════════════════════════════════
   TABLA (IdsTable)
   La genera `includes/views/components/table/IdsTable.php`. La tabla vive
   dentro de una island; cada fila tiene superficie propia y en pantallas
   estrechas la rejilla se convierte en tarjetas apiladas sin cambiar el
   marcado (sigue siendo una <table>).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Island contenedora ──────────────────────────────────────────────── */
.ids-table__island{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .35em;
    padding: .9em 1.1em 1.1em;
    background: var(--ids-island);
    backdrop-filter: var(--ids-blur);
    -webkit-backdrop-filter: var(--ids-blur);
    border: 1px solid var(--ids-island-border);
    border-radius: 24px;
    box-shadow: var(--ids-shadow-island);
    transition: var(--ids-transition-spring);
}
.ids-table__island:hover{
    box-shadow: var(--ids-shadow-island-hover);
}

/* Cabecera: qué se está viendo (izquierda) y las cifras agregadas de lo que
   se está viendo (derecha). */
.ids-table__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    padding: 0 .3em .35em;
}
.ids-table__head-left{
    display: flex;
    align-items: center;
    gap: .55em;
    min-width: 0;
}
.ids-table__head-right{
    display: flex;
    align-items: baseline;
    gap: .5em;
}
.ids-table__title{
    font-size: var(--ids-text-base, 15px);
    font-weight: var(--ids-weight-bold, 700);
    letter-spacing: var(--ids-letter-tight, -0.3px);
    color: var(--ids-text-primary, #0f172a);
}
.ids-table__chip{
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--ids-radius-full, 9999px);
    background: var(--ids-field);
    border: 1px solid var(--ids-field-border);
    font-size: var(--ids-text-xs, 11px);
    font-weight: var(--ids-weight-semibold, 600);
    color: var(--ids-text-secondary, #475569);
    white-space: nowrap;
}
.ids-table__sum-label{
    font-size: var(--ids-text-xs, 11px);
    font-weight: var(--ids-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ids-text-secondary, #475569);
}
.ids-table__sum{
    font-size: var(--ids-text-base, 15px);
    font-weight: var(--ids-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--ids-text-primary, #0f172a);
}

/* Una tabla ancha hace scroll dentro de su island, nunca en la página. */
.ids-table__scroll{
    width: 100%;
    overflow-x: auto;
    /* Aire para que la sombra de las filas no se recorte al hacer scroll. */
    padding-bottom: 2px;
}
.ids-table__scroll::-webkit-scrollbar{ height: 6px; }
.ids-table__scroll::-webkit-scrollbar-track{ background: transparent; }
.ids-table__scroll::-webkit-scrollbar-thumb{
    background: rgba(15, 23, 42, 0.15);
    border-radius: var(--ids-radius-full, 9999px);
}

/* ── Tabla ───────────────────────────────────────────────────────────── */
/* `table-layout: fixed` + el <colgroup> que emite el renderer: los anchos no
   bailan entre una consulta y la siguiente. `--ids-table-min-width` lo fija
   la vista con `IdsTable::minWidth()`; sin él la tabla se adapta sola. */
.ids-table{
    width: 100%;
    min-width: var(--ids-table-min-width, 0px);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 7px;
    font-family: var(--ids-font-family, 'Inter', sans-serif);
    font-size: var(--ids-text-sm, 13px);
    color: var(--ids-text-primary, #0f172a);
}
.ids-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 7px 12px 9px;
    text-align: left;
    white-space: nowrap;
    border: none;
    /* Superficie propia: si no, las filas se leen a través del encabezado
       cuando la lista hace scroll. */
    background: var(--ids-island-strong);
    backdrop-filter: var(--ids-blur);
    -webkit-backdrop-filter: var(--ids-blur);
    font-size: var(--ids-text-xs, 11px);
    font-weight: var(--ids-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ids-text-secondary, #475569);
}
.ids-table thead th:first-child{ border-radius: 12px 0 0 12px; }
.ids-table thead th:last-child { border-radius: 0 12px 12px 0; }
/* El encabezado hereda la alineación de su columna: el rótulo cae justo
   encima del dato. */
.ids-table thead th.ids-table__col--num{ text-align: right; }
.ids-table thead th.ids-table__col--center{ text-align: center; }
.ids-table thead th.ids-table__col--actions{ text-align: right; }

/* Cada fila es una island: superficie propia, esquinas redondeadas y
   elevación al pasar el cursor. */
.ids-table__row > td{
    padding: 10px 12px;
    vertical-align: middle;
    background: var(--ids-island-strong);
    border-top: 1px solid var(--ids-field-border);
    border-bottom: 1px solid var(--ids-field-border);
    transition: var(--ids-transition-spring);
}
.ids-table__row > td:first-child{
    border-left: 1px solid var(--ids-field-border);
    border-radius: 16px 0 0 16px;
}
.ids-table__row > td:last-child{
    border-right: 1px solid var(--ids-field-border);
    border-radius: 0 16px 16px 0;
}
/* Fila de una sola columna: :first-child y :last-child caen en la misma
   celda y la segunda regla pisaba el radio completo, dejando el lado
   izquierdo cuadrado. */
.ids-table__row > td:first-child:last-child{
    border-radius: 16px;
}
.ids-table__row:hover > td{
    background: #ffffff;
    box-shadow: 0 8px 20px -12px rgba(24, 24, 27, 0.45);
}
/* El hover repinta la sombra de la celda: se reponen los separadores de la
   banda de importes para que no desaparezcan al pasar el cursor. */
.ids-table__row:hover > td.ids-table__col--money-start{
    box-shadow: inset 1px 0 0 var(--ids-field-border), 0 8px 20px -12px rgba(24, 24, 27, 0.45);
}
.ids-table__row:hover > td.ids-table__col--money-end{
    box-shadow: inset -1px 0 0 var(--ids-field-border), 0 8px 20px -12px rgba(24, 24, 27, 0.45);
}
/* Fila atenuada (cancelada, archivada, inactiva) sin perder legibilidad. */
.ids-table__row--muted > td{
    background: var(--ids-field-read);
    color: var(--ids-text-secondary, #475569);
}
.ids-table__row--muted .ids-table__pill,
.ids-table__row--muted .ids-table__col--strong{
    color: var(--ids-text-secondary, #475569);
}

/* ── Modificadores de columna ────────────────────────────────────────── */
.ids-table__col--num{
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ids-table__col--center{ text-align: center; }
.ids-table__col--strong{ font-weight: var(--ids-weight-bold, 700); }
.ids-table__col--nowrap{ white-space: nowrap; }
.ids-table__col--mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* Columna que cede espacio: su contenido se recorta con puntos suspensivos
   en vez de empujar al resto. */
.ids-table__col--truncate{
    min-width: 0;
}
/* Sin `nowrap`: con `table-layout: fixed` un botón que no cabe se salía de la
   celda y se encimaba con la columna vecina; así baja de renglón. */
.ids-table__col--actions{
    white-space: normal;
    text-align: right;
}
.ids-table__col--center .ids-table__actions{ justify-content: center; }
.ids-table__col--actions-left{ text-align: left; }
.ids-table__col--actions-left .ids-table__actions{ justify-content: flex-start; }

/* Las columnas de dinero forman un bloque: una banda tenue las agrupa y las
   separa del resto de los datos. */
.ids-table__row > td.ids-table__col--money{
    background-image: linear-gradient(rgba(15, 23, 42, 0.035), rgba(15, 23, 42, 0.035));
}
.ids-table__row > td.ids-table__col--money-start{
    box-shadow: inset 1px 0 0 var(--ids-field-border);
}
.ids-table__row > td.ids-table__col--money-end{
    box-shadow: inset -1px 0 0 var(--ids-field-border);
}

/* ── Contenido de celda ──────────────────────────────────────────────── */
/* Píldora para un identificador corto (folio, número, clave). */
.ids-table__pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 8px;
    border-radius: 9px;
    background: var(--ids-field);
    font-weight: var(--ids-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}
/* Dato principal de una celda de dos renglones. */
.ids-table__primary{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--ids-weight-medium, 500);
}
/* Dato de apoyo bajo el principal (un identificador largo, una referencia). */
.ids-table__secondary{
    display: block;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--ids-text-tertiary, #94a3b8);
}
.ids-table__muted{
    color: var(--ids-text-secondary, #475569);
    white-space: nowrap;
}
.ids-table__actions{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35em;
}
.ids-table__actions .ids-btn{ white-space: nowrap; }

/* ── Pie de paginación ───────────────────────────────────────────────── */
.ids-table__footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    padding: .55em .3em 0;
    border-top: 1px solid var(--ids-field-border);
}
.ids-table__range{
    font-size: var(--ids-text-xs, 11px);
    font-weight: var(--ids-weight-semibold, 600);
    color: var(--ids-text-secondary, #475569);
    font-variant-numeric: tabular-nums;
}
.ids-table__pager{
    display: flex;
    align-items: center;
    gap: .25em;
    flex-wrap: wrap;
}
.ids-table__pager-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .5em;
    border: 1px solid var(--ids-field-border);
    border-radius: 10px;
    background: var(--ids-island-strong);
    color: var(--ids-text-secondary, #475569);
    font-family: inherit;
    font-size: var(--ids-text-xs, 11px);
    font-weight: var(--ids-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: var(--ids-transition-base);
}
.ids-table__pager-btn:hover{
    background: var(--ids-field-hover);
    color: var(--ids-text-primary, #0f172a);
}
.ids-table__pager-btn--active,
.ids-table__pager-btn--active:hover{
    background: var(--ids-primary-600, #2563eb);
    border-color: var(--ids-primary-600, #2563eb);
    color: #ffffff;
    cursor: default;
}
.ids-table__pager-btn[disabled],
.ids-table__pager-btn[aria-disabled="true"]{
    opacity: .4;
    pointer-events: none;
}
.ids-table__pager-gap{
    padding: 0 .2em;
    color: var(--ids-text-tertiary, #94a3b8);
}

/* ── Estado vacío ────────────────────────────────────────────────────── */
.ids-table__empty{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 3em 2em;
    text-align: center;
    background: var(--ids-island);
    backdrop-filter: var(--ids-blur);
    -webkit-backdrop-filter: var(--ids-blur);
    border: 1px solid var(--ids-island-border);
    border-radius: 24px;
    box-shadow: var(--ids-shadow-island);
    animation: ids-fade-in .5s;
}
.ids-table__empty-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--ids-field);
    color: var(--ids-text-secondary, #475569);
}
.ids-table__empty-title{
    margin: 0;
    font-size: var(--ids-text-lg, 17px);
    font-weight: var(--ids-weight-semibold, 600);
    color: var(--ids-text-primary, #0f172a);
}
.ids-table__empty-text{
    margin: 0;
    max-width: 420px;
    font-size: var(--ids-text-sm, 13px);
    color: var(--ids-text-secondary, #475569);
}
.ids-table__empty-actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    flex-wrap: wrap;
    margin-top: .4em;
}

/* ── Pantallas intermedias ───────────────────────────────────────────── */
/* El texto de los botones estorba antes que los datos: las acciones se
   quedan en iconos con su tooltip, y la tabla puede encogerse un poco más
   de lo que pidió la vista (nunca crecer: `min()` respeta a quien no fijó
   ancho mínimo). */
@media screen and (max-width: 1600px) and (min-width: 901px){
    .ids-table{ min-width: min(var(--ids-table-min-width, 0px), 980px); }
    .ids-table__btn-text{
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap; border: 0;
    }
    .ids-table__actions .ids-btn{ padding-left: .55em; padding-right: .55em; }
}

/* ── Tablet y móvil: la rejilla se vuelve tarjetas ───────────────────── */
/* Mismo marcado, otra presentación: cada fila pasa a ser su propia island
   apilada y el rótulo de la columna se convierte en la etiqueta del renglón. */
@media screen and (max-width: 900px){
    .ids-table__island{
        padding: .9em .7em 1em;
    }
    .ids-table__scroll{
        overflow-x: visible;
    }
    .ids-table{
        display: block;
        min-width: 0;
        table-layout: auto;
        border-spacing: 0;
    }
    .ids-table colgroup,
    .ids-table thead{
        display: none;
    }
    .ids-table tbody{ display: block; }
    .ids-table__row{
        display: block;
        margin-bottom: 10px;
        padding: .35em 0;
        background: var(--ids-island-strong);
        border: 1px solid var(--ids-field-border);
        border-radius: 18px;
        box-shadow: 0 6px 18px -14px rgba(24, 24, 27, 0.5);
    }
    .ids-table__row--muted{
        background: var(--ids-field-read);
    }
    .ids-table__row > td,
    .ids-table__row > td:first-child,
    .ids-table__row > td:last-child{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        padding: 7px 14px;
        background: transparent;
        background-image: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        text-align: right;
        white-space: normal;
    }
    .ids-table__row > td::before{
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--ids-text-xs, 11px);
        font-weight: var(--ids-weight-semibold, 600);
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ids-text-secondary, #475569);
    }
    .ids-table__row > td.ids-table__col--money{
        background-image: none;
    }
    /* Columnas que solo tienen sentido en la rejilla ancha. */
    .ids-table__row > td.ids-table__col--hide-sm{
        display: none;
    }
    /* La columna que se trunca encabeza la tarjeta y cierra el bloque de
       identificación. */
    .ids-table__col--truncate{
        align-items: flex-start;
        border-bottom: 1px solid var(--ids-field-border);
        padding-bottom: 10px;
    }
    .ids-table__primary,
    .ids-table__secondary{
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
    }
    .ids-table__col--money-end{
        border-top: 1px solid var(--ids-field-border);
        padding-top: 10px;
        font-size: var(--ids-text-base, 15px);
    }
    .ids-table__col--actions{
        padding-bottom: 10px;
    }
    .ids-table__actions{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 600px){
    .ids-table__head{
        gap: .35em;
    }
    .ids-table__head-right{
        width: 100%;
        justify-content: space-between;
    }
    .ids-table__row > td{
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        text-align: left;
    }
    .ids-table__primary,
    .ids-table__secondary{
        text-align: left;
    }
    .ids-table__actions{
        justify-content: flex-start;
        width: 100%;
    }
    .ids-table__footer{
        justify-content: center;
    }
}

/* ============================================================
   COMPONENTES PORTADOS DE INOTEK (botones y utilidades)
   ============================================================ */
.ids-btn--success {
    background: var(--ids-success-bg);
    color: var(--ids-success-text);
    border-color: var(--ids-success-border);
}
.ids-btn--success:hover {
    background: rgba(16,185,129,0.22);
    border-color: rgba(16,185,129,0.5);
}

.ids-btn--warning {
    background: var(--ids-warning-bg);
    color: var(--ids-warning-text);
    border-color: var(--ids-warning-border);
}
.ids-btn--warning:hover {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.5);
}

.ids-btn--block { width: 100%; justify-content: center; }

.ids-num {
    font-size: var(--ids-text-xs);
    font-weight: var(--ids-weight-normal, 400);
    color: var(--ids-text-muted);
    letter-spacing: 0.02em;
}

/* ==========================================================================
   MODAL REUTILIZABLE (Modal.js)
   Comparte la piel del drawer de tickets (.ids-island-overlay /
   .ids-island-modal / .ids-island__header|__footer): aquí sólo viven el
   contenedor efímero, los tamaños y los estados propios de la utilidad.
   ========================================================================== */

.ids-modal-container {
    position: relative;
    z-index: 300;
}

/* El contenedor se inyecta y se destruye con los modales: nunca debe ocupar
   sitio ni capturar clics por sí mismo. */
.ids-modal-root {
    display: contents;
}

/* Bloqueo de scroll mientras hay al menos un modal abierto. */
body.ids-modal-open {
    overflow: hidden;
}

/* ── Tamaños ─────────────────────────────────────────────────────────────── */
.ids-modal--sm   { max-width: 440px; }
.ids-modal--md   { max-width: 640px; }
.ids-modal--lg   { max-width: 900px; }
.ids-modal--xl   { max-width: 1200px; }
.ids-modal--full {
    width: 96vw;
    max-width: none;
    height: 92vh;
    max-height: 92vh;
}

/* ── Arrastre (ModalDrag) ────────────────────────────────────────────────── */
/* El desplazamiento del arrastre viaja en `--ids-modal-dx/dy` y se suma al
   translate de centrado, para no pisar la animación de apertura. El gancho es
   `.ids-modal--draggable` (la pone ModalDrag al activarse), no `.ids-modal`:
   así sirve igual para los modales de Modal.js y para el drawer de tickets,
   y una tarjeta con `draggable: false` conserva el transform original. */
.ids-island-modal.ids-modal--draggable {
    transform: translate(calc(-50% + var(--ids-modal-dx, 0px)), calc(-50% + var(--ids-modal-dy, 0px))) scale(0.9) translateY(20px);
}

.ids-island-modal.ids-modal--draggable.ids-island--open {
    transform: translate(calc(-50% + var(--ids-modal-dx, 0px)), calc(-50% + var(--ids-modal-dy, 0px))) scale(1) translateY(0);
}

/* La agarradera es la cabecera (`.ids-island__header`, común a modal y drawer)
   o cualquier zona marcada con `data-modal-drag`. */
.ids-modal--draggable .ids-island__header,
.ids-modal--draggable [data-modal-drag] {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Los controles de la cabecera siguen siendo controles, no agarradera. */
.ids-modal--draggable .ids-island__header button,
.ids-modal--draggable .ids-island__header a,
.ids-modal--draggable .ids-island__header input,
.ids-modal--draggable .ids-island__header select,
.ids-modal--draggable .ids-island__header textarea,
.ids-modal--draggable [data-modal-drag] button,
.ids-modal--draggable [data-modal-drag] input {
    cursor: pointer;
    user-select: auto;
    -webkit-user-select: auto;
    touch-action: auto;
}

/* Mientras se arrastra: sin transición (la tarjeta debe seguir al puntero al
   instante) y sin selección de texto ni clics perdidos por el camino. */
.ids-island-modal.ids-modal--dragging {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-user-select: none;
}

.ids-modal--dragging .ids-modal__body,
.ids-modal--dragging .ids-modal__footer {
    pointer-events: none;
}

/* En móvil el modal ocupa la pantalla completa: ni se mueve ni se desplaza. */
@media (max-width: 768px) {
    /* Siguen ancladas a top/left 50%: el -50% las centra (con translate(0,0)
       quedaban con la esquina en el centro, pegadas abajo a la derecha). */
    .ids-island-modal.ids-modal--draggable {
        transform: translate(-50%, -50%) scale(0.9) translateY(20px);
    }

    .ids-island-modal.ids-modal--draggable.ids-island--open {
        transform: translate(-50%, -50%) scale(1) translateY(0);
    }

    /* El drawer de tickets es pantalla completa anclada a 0/0. */
    .ids-island-modal--drawer.ids-modal--draggable {
        transform: translate(0, 0) scale(0.9) translateY(20px);
    }

    .ids-island-modal--drawer.ids-modal--draggable.ids-island--open {
        transform: translate(0, 0) scale(1) translateY(0);
    }

    .ids-modal--draggable .ids-island__header,
    .ids-modal--draggable [data-modal-drag] {
        cursor: default;
        user-select: auto;
        -webkit-user-select: auto;
        touch-action: auto;
    }

    /* La regla general de `.ids-island__main` en móvil (arriba) le quita el
       scroll propio porque el drawer de tickets lo reemplaza por scroll en
       `.ids-island__layout`. Nuestros modales (Modal.js) no tienen ese
       wrapper — sin esto, un modal con mucho contenido se recorta contra el
       `height: 100vh` del modal y el resto queda inalcanzable. */
    .ids-modal__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
/* `.ids-island__header` envuelve (flex-wrap) porque el header del drawer de
   tickets mete un slider de pestañas. Aquí no: el título ocupa lo que necesite
   y la X se queda SIEMPRE anclada en la esquina, sin bajar de línea por muy
   largos que sean el título o el subtítulo. */
.ids-modal__header {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.ids-modal__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* El título envuelve en varias líneas en lugar de empujar a la X.
   `.ids-island__title` hereda el tamaño xl del drawer de tickets; en un
   modal (más angosto) ese tamaño se ve desproporcionado. Inotek usa
   `--ids-text-lg` para el título de sus diálogos, así que igualamos eso. */
.ids-modal__header .ids-island__title {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--ids-text-lg);
}

.ids-modal__subtitle {
    margin: 0;
    font-size: var(--ids-text-sm);
    color: var(--ids-text-secondary);
}

.ids-modal__close {
    flex: 0 0 auto;
    margin-left: var(--ids-space-4);
    /* Alineada con la primera línea del título, no con el centro del bloque. */
    margin-top: -2px;
}

/* ── Cuerpo ──────────────────────────────────────────────────────────────── */
/* `.ids-island__main--full` ya aporta padding y scroll; aquí sólo el mínimo
   para que un cuerpo corto no colapse y uno largo no desborde el modal. */
.ids-modal__body {
    min-height: 60px;
}

.ids-modal__text {
    margin: 0;
    font-size: var(--ids-text-md);
    line-height: 1.55;
    color: var(--ids-text-primary);
}

.ids-modal__json {
    margin: 0;
    padding: var(--ids-space-3);
    border-radius: var(--ids-radius-sm);
    background: rgba(15, 23, 42, 0.05);
    font-size: var(--ids-text-xs);
    overflow-x: auto;
}

/* El footer se oculta solo cuando no hay ni botones ni contenido. */
.ids-modal__footer[hidden] {
    display: none;
}

/* ── Estados de carga y error del contenido remoto ───────────────────────── */
.ids-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ids-space-8) 0;
}

.ids-modal__spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid rgba(15, 23, 42, 0.12);
    border-top-color: var(--ids-primary-500);
    animation: ids-island-spin 0.9s linear infinite;
}

.ids-modal__error {
    padding: var(--ids-space-4);
    border-radius: var(--ids-radius-sm);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #b91c1c;
    font-size: var(--ids-text-sm);
}

/* ── Formulario dentro de un modal ───────────────────────────────────────── */
/* Los modales viven fuera de cualquier contenedor de módulo, así que el estilo
   de campo se declara aquí y no se hereda de la vista que abrió el modal. */
.ids-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-4);
}

.ids-modal__field label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ids-text-sm);
    font-weight: var(--ids-weight-medium);
    color: var(--ids-text-secondary);
}

.ids-modal__field .form-control,
.ids-modal__field .ids-input {
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 9px 14px;
    font-family: var(--ids-font-family);
    font-size: var(--ids-text-sm);
    color: var(--ids-text-primary);
    background: #f4f4f5;
    border: 1px solid rgba(24, 24, 27, 0.12);
    border-radius: var(--ids-radius-sm);
    box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ids-modal__field .form-control:focus,
.ids-modal__field .ids-input:focus {
    outline: none;
    background: #ffffff;
    border-color: rgba(24, 24, 27, 0.45);
    box-shadow: 0 6px 16px rgba(24, 24, 27, 0.08), 0 0 0 3px rgba(24, 24, 27, 0.06);
}

.ids-modal__field .form-control[readonly] {
    background: #e8e8ea;
    border-color: transparent;
    box-shadow: none;
    color: var(--ids-text-secondary);
}

.ids-modal__hint {
    margin: 0;
    font-size: var(--ids-text-xs);
    color: var(--ids-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════

/* ============================================================
   DROPZONE — miniaturas de archivos elegidos y visor (js/Dropzone.js)
   ============================================================ */
.ids-dropzone__previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: 8px;
    margin-top: 10px;
}
.ids-dropzone__previews[hidden] { display: none; }

.ids-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 34px 6px 6px;
    background: var(--ids-bg-surface, #fff);
    border: 1px solid var(--ids-border-card, rgba(15, 23, 42, 0.1));
    border-radius: 14px;
    min-width: 0;
}
.ids-preview__thumb {
    flex: none;
    width: 52px;
    height: 52px;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: var(--ids-primary-50, #eff6ff);
    cursor: default;
}
.ids-preview__thumb.is-viewable { cursor: zoom-in; }
.ids-preview__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ids-preview__ext {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ids-primary-700, #1d4ed8);
}
.ids-preview__meta { display: flex; flex-direction: column; min-width: 0; }
.ids-preview__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ids-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ids-preview__size { font-size: 11.5px; color: var(--ids-text-muted, #64748b); }
.ids-preview__remove {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ids-danger-bg, #fee2e2);
    color: var(--ids-danger-text, #b91c1c);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.ids-preview__remove:hover { filter: brightness(0.95); }

/* Visor de imagen / PDF a pantalla completa */
.ids-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.92);
    animation: ids-viewer-in 0.2s ease-out both;
}
@keyframes ids-viewer-in { from { opacity: 0; } to { opacity: 1; } }
.ids-viewer__bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    color: #fff;
}
.ids-viewer__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ids-viewer__open { flex: none; font-size: 13px; color: #bfdbfe; text-decoration: none; }
.ids-viewer__close {
    flex: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.ids-viewer__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.ids-viewer__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.ids-viewer__frame { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }

/* Selector de orientación dentro de cada miniatura (Dropzone con data-orient) */
.ids-preview__orient {
    margin-top: 4px;
    width: 100%;
    max-width: 130px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--ids-border, rgba(15, 23, 42, 0.15));
    border-radius: 999px;
    background: var(--ids-bg-input, #fff);
    color: var(--ids-text-primary, #0f172a);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   Miniaturas de archivos elegidos como cuadros (igual que la galería de fotos ya guardadas)
   ============================================================ */
.ids-dropzone__previews {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--ids-space-3, 12px);
    align-items: start;
}
.ids-preview {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    background: var(--ids-bg-surface);
    border: 1px solid var(--ids-border-card);
    border-top: 3px solid var(--ids-primary-400);
    border-radius: 14px;
}
.ids-preview__thumb {
    width: 100%;
    height: 120px;
    border-radius: 10px;
}
/* Con orientación elegida, la miniatura toma su forma: vertical (alta) u horizontal (ancha) */
.ids-preview.is-v .ids-preview__thumb { height: auto; aspect-ratio: 3 / 4; }
.ids-preview.is-h .ids-preview__thumb { height: auto; aspect-ratio: 4 / 3; }
.ids-preview__thumb { transition: aspect-ratio 0.2s ease; }
.ids-preview__meta { gap: 2px; }
.ids-preview__orient { max-width: none; margin-top: 6px; }
/* ✕ sobre la esquina de la imagen */
.ids-preview__remove {
    top: 14px;
    right: 14px;
    transform: none;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
}
.ids-preview__remove:hover { background: rgba(185, 28, 28, 0.9); filter: none; }

/* ── Modales en móvil: scroll del cuerpo y fondo sólido ──────────────────────
   En celular .ids-island__main pierde su scroll (overflow visible, flex none)
   porque lo hereda el drawer de tickets, cuyo scroll lo lleva .ids-island__layout.
   Los modales de Modal.js llevan el cuerpo directo (sin layout), así que el
   contenido largo quedaba cortado e inalcanzable. Aquí el cuerpo vuelve a
   desplazarse por sí mismo, el modal respeta la barra del navegador (dvh) y el
   fondo deja de ser el blanco translúcido que sobre el overlay oscuro se veía gris. */
@media (max-width: 768px) {
    .ids-island-modal {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ids-island-modal > .ids-modal__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .ids-island-modal .ids-island__header,
    .ids-island-modal .ids-island__footer {
        background: #ffffff;
        flex-shrink: 0;
    }

    .ids-island-modal .ids-island__footer {
        padding-bottom: calc(var(--ids-space-4) + env(safe-area-inset-bottom, 0px));
    }

    /* Con un modal abierto el botón flotante del menú lateral tapaba el título y la X. */
    body:has(.ids-island-modal.ids-island--open) .ids-sb-toggle { display: none; }
}