/* ========================================
   NEO FRAMEWORK - DESIGN TOKENS
======================================== */
:root {
    /* Primary Colors */
    --neo-primary: #987D5F;
    --neo-primary-hover: #816A50;
    --neo-primary-light: rgba(152, 125, 95, 0.1);
    --neo-primary-lighter: rgba(152, 125, 95, 0.05);
    --neo-primary-gradient: linear-gradient(135deg, #987D5F 0%, #B39370 100%);
    
    /* Secondary Colors */
    --neo-secondary: #725D47;
    --neo-info: #3498db;
    --neo-info-light: rgba(52, 152, 219, 0.1);
    --neo-success: #2d6a4f;
    --neo-success-light: rgba(45, 106, 79, 0.1);
    --neo-warning: #f39c12;
    --neo-warning-light: rgba(243, 156, 18, 0.1);
    --neo-danger: #c0392b;
    --neo-danger-light: rgba(192, 57, 43, 0.1);
    
    /* Neutrals */
    --neo-white: #ffffff;
    --neo-gray-50: #fafafa;
    --neo-gray-100: #f5f5f5;
    --neo-gray-150: #efefef;
    --neo-gray-200: #e5e5e5;
    --neo-gray-300: #d4d4d4;
    --neo-gray-400: #a3a3a3;
    --neo-gray-500: #737373;
    --neo-gray-600: #525252;
    --neo-gray-700: #404040;
    --neo-gray-800: #262626;
    --neo-gray-900: #171717;
    
    /* Typography */
    --neo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --neo-font-display: 'Playfair Display', Georgia, serif;
    
    /* Spacing */
    --neo-space-2xs: 2px;
    --neo-space-xs: 4px;
    --neo-space-sm: 6px;
    --neo-space-md: 12px;
    --neo-space-lg: 18px;
    --neo-space-xl: 20px;
    --neo-space-2xl: 48px;
    --neo-space-3xl: 64px;
    
    /* Border Radius */
    --neo-radius-xs: 4px;
    --neo-radius-sm: 6px;
    --neo-radius-md: 8px;
    --neo-radius-lg: 12px;
    --neo-radius-xl: 16px;
    --neo-radius-2xl: 24px;
    --neo-radius-full: 9999px;
    
    /* Shadows */
    --neo-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --neo-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --neo-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --neo-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --neo-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --neo-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.04);
    --neo-shadow-primary: 0 4px 14px rgba(152, 125, 95, 0.25);
    --neo-shadow-focus: 0 0 0 3px rgba(152, 125, 95, 0.15);
    
    /* Transitions */
    --neo-transition-fast: all 0.15s ease;
    --neo-transition: all 0.2s ease;
    --neo-transition-slow: all 0.3s ease;
    --neo-transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Layout */
    --neo-sidebar-width: 228px;
    --neo-sidebar-collapsed: 72px;
    --neo-header-height: 80px;
    --neo-panel-width: 380px;
    
    /* Viewport dinámico para Safari iOS */
    --viewport-height: 100vh;

    /* === Variables adicionales (compatibilidad apps hijas) === */
    --neo-bg-primary: #fafafa;
    --neo-bg-secondary: #ffffff;
    --neo-bg-tertiary: #f5f5f5;
    --neo-bg-hover: #eeeeee;
    --neo-surface: #ffffff;
    --neo-surface-alt: #f5f5f5;
    --neo-surface-hover: #eeeeee;
    --neo-border: #ddd;
    --neo-border-light: #e8e8e8;
    --neo-border-hover: #ccc;
    --neo-border-active: #bbb;
    --neo-text: #555;
    --neo-text-primary: #333;
    --neo-text-secondary: #666;
    --neo-text-muted: #999;
    --neo-primary-dark: #63513E;
    --neo-secondary-light: #8F7459;
    --neo-secondary-dark: #614F3C;
    --neo-z-dropdown: 100;
    --neo-z-sticky: 200;
    --neo-z-modal: 1000;
    --neo-z-toast: 1100;
}

/* ========================================
   RESET & BASE
======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Eliminar resaltado azul táctil en iOS/Android/iPad en TODOS los elementos */
    -webkit-tap-highlight-color: transparent;
}

/* Refuerzo en elementos interactivos específicos */
a, button, [role="button"],
.neo-nav-item, .neo-item-tab, .neo-listado-floating-btn,
.neo-listado-floating, .neo-program-tab {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Prevenir scroll lateral pero PERMITIR scroll vertical */
    overflow-x: hidden;
    overflow-y: auto;
    /* Prevenir bounce elástico */
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    /* Solo permitir scroll vertical (no lateral) */
    touch-action: pan-y;
}

body {
    font-family: var(--neo-font-family);
    font-size: 14px;
    line-height: 1.6;
    color: var(--neo-gray-700);
    background: var(--neo-gray-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Altura mínima para asegurar scroll */
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--neo-gray-300);
    border-radius: var(--neo-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neo-gray-400);
}

/* ========================================
   NEO APP LAYOUT
======================================== */
.neo-app {
    display: flex;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    height: 100dvh; /* Dynamic Viewport Height - excluye barras de navegador */
    overflow: hidden;
    background: var(--neo-gray-100);
}

/* ========================================
   SIDEBAR - DISEÑO NÓRDICO MINIMALISTA
======================================== */
.neo-sidebar {
    width: 76px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    position: relative;
    border-right: 1px solid #e8e8e8;
    overflow: hidden;
    cursor: pointer;
}

/* Expandir con hover (solo si no está forzado a colapsar) */
.neo-sidebar:not(.sidebar-collapsed):hover {
    width: var(--neo-sidebar-width);
}

/* Toggle Button - Oculto */
.neo-sidebar-toggle {
    display: none;
}

/* Elementos móviles - Ocultos por defecto en desktop */
.neo-mobile-menu-btn {
    display: none;
}

.neo-sidebar-overlay {
    display: none;
}

/* Header - logo con recorte y padding simétrico. height FIJO (no min-height)
   para que expandido y colapsado midan igual: sino, el logo colapsado 48x48
   estira el header 4px mas que el expandido 44px y los items del menu de
   abajo se desplazan al hacer toggle. */
.neo-sidebar-header {
    padding: 16px;
    display: flex;
    align-items: center;
    height: 76px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.neo-sidebar-logo {
    display: block;
    text-decoration: none;
    height: 44px;
    width: 44px;
    padding-left: 2px;
    box-sizing: border-box;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.neo-sidebar:not(.sidebar-collapsed):hover .neo-sidebar-logo {
    width: auto;
    max-width: 100%;
}

.neo-logo-full {
    height: 44px;
    width: auto;
    display: block;
    transition: opacity 0.25s ease;
}
/* Marca de agua (logo cuadrado) para el sidebar colapsado. Se posiciona
   encima del .neo-logo-full y se cruza en fade segun el estado del sidebar. */
.neo-sidebar-logo { position: relative; }
.neo-logo-mark {
    /* Cuadrado con esquinas redondeadas, centrada en el .neo-sidebar-logo.
       Ancho del container aumentado a 48px (regla mas abajo) para que la
       marca de 44x44 tenga aire y no quede recortada. Se sube 2px respecto
       al centro para alinear con el .neo-logo-full (que va en flujo normal y
       queda ~2px mas arriba); asi el toggle expand/collapse no salta. */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% - 2px));
    height: 44px;
    width: 44px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
/* En colapsado, el .neo-sidebar-logo se agranda a 48px para acomodar la
   marca 44x44 sin recorte. Selector con extra especificidad para ganar sobre
   la regla !important inyectada desde cem.js que lo forzaba a 41px. */
.neo-sidebar.sidebar-collapsed .neo-sidebar-header .neo-sidebar-logo,
.neo-sidebar.sidebar-collapsed:hover .neo-sidebar-header .neo-sidebar-logo {
    width: 48px !important;
    height: 48px;
}
/* Sidebar COLAPSADO (y sin hover que lo expanda): mostrar marca, ocultar full. */
.neo-sidebar.sidebar-collapsed .neo-logo-full { opacity: 0; }
.neo-sidebar.sidebar-collapsed .neo-logo-mark { opacity: 1; }
/* Al hacer hover en el sidebar colapsado (desktop), vuelve a expandirse:
   full opaca, marca oculta. */
.neo-sidebar.sidebar-collapsed:hover .neo-logo-full { opacity: 1; }
.neo-sidebar.sidebar-collapsed:hover .neo-logo-mark { opacity: 0; }
/* En colapsado el header centra su contenido (el logo-container queda pegado a
   la izquierda si no, y con el .neo-logo-mark absolute top/left:0 se ve
   descentrado respecto al ancho del sidebar). SOLO desktop grande — en
   tablet (768-1024) el CSS del bloque .tablet-expanded se encarga y estas
   reglas producian conflicto visual al entrar/salir de esa media. */
@media (min-width: 1025px) {
    .neo-sidebar.sidebar-collapsed .neo-sidebar-header {
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
    }
    /* Al expandir por hover, restaurar el padding y la alineacion. */
    .neo-sidebar.sidebar-collapsed:hover .neo-sidebar-header {
        justify-content: flex-start;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Navegación */
.neo-sidebar-nav {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Carousel centrado verticalmente: la categoria activa queda al medio del
       sidebar, con la anterior asomando arriba y la siguiente abajo.
       'safe' es clave: si el menu llega a ser mas alto que el sidebar, cae a
       flex-start en vez de recortar la parte de arriba y dejarla inalcanzable
       al scrollear. */
    display: flex;
    flex-direction: column;
    justify-content: safe center;
}
/* En columna, los flex items se encogen por defecto (flex-shrink:1): si el menu
   es mas alto que el sidebar, las categorias se comprimirian en vez de dejar
   scrollear. Cada seccion conserva su alto natural. */
.neo-sidebar-nav > * {
    flex-shrink: 0;
}

/* Prevenir selección de texto en sidebar (especialmente en tablet/iPad touch) */
.neo-sidebar,
.neo-sidebar-nav,
.neo-sidebar-nav * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.neo-nav-section {
    margin-bottom: 8px;
}

.neo-nav-section-title {
    font-size: 10px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 12px 4px;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* ── Secciones colapsables (CRM / CEM) — acordeón por hover ── */
/* Dos strips INDEPENDIENTES: horizontal arriba (siempre presente, slot fijo
   de 32px) y vertical a la izquierda (fondo persistente cuando expande).
   Los iconos NO se mueven horizontal ni verticalmente al expandir/colapsar
   porque el padding del contenedor no cambia. */
.neo-nav-collapsible {
    position: relative;
    margin-bottom: 4px;
    /* padding-top: espacio para el label vertical rotado. "Principal" (9 letras)
       necesita ~90px de altura despues del rotate(-90deg). CRM/CEM podrian usar
       menos pero uniformamos para consistencia visual. */
    padding-top: 90px;
}
.neo-nav-collapsible:not(.collapsed) {
    padding-top: 0;
}

/* Base de ambos strips (sin transiciones). */
.neo-section-toggle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    overflow: hidden;
}

/* Strip HORIZONTAL: OCULTO. Ahora el label vertical es el unico indicador
   (pegado arriba cuando cerrado, centrado cuando abierto). */
.neo-toggle-h {
    display: none;
}

/* Strip VERTICAL: siempre visible con fondo dorado tenue. Click abre la
   categoria. Cerrada: letras GRISES. Abierta: letras DORADAS + fondo mas
   marcado para indicar el estado activo. */
.neo-toggle-v {
    top: 0;
    left: 0;
    width: 14px;
    bottom: 0;
    color: #aaa;
    background: rgba(154, 128, 68, 0.08);
    opacity: 1;
    pointer-events: auto;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.neo-toggle-v:hover {
    background: rgba(154, 128, 68, 0.16);
    color: #888;
}
.neo-nav-collapsible:not(.collapsed) .neo-toggle-v {
    color: #9a8044;
    background: rgba(154, 128, 68, 0.15);
}

/* Labels en cada strip. */
.neo-section-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    pointer-events: none;
    white-space: nowrap;
}
.neo-label-h {
    opacity: 1;
}
.neo-nav-collapsible:not(.collapsed) .neo-label-h {
    opacity: 0;
}
/* Label vertical: siempre en vertical (rotate -90deg). Pegado arriba cuando
   la seccion esta cerrada (top:45px = centro del padding-top de 90); centrado
   cuando la seccion esta abierta (top:50%). */
.neo-label-v {
    opacity: 1;
    top: 45px;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.neo-nav-collapsible:not(.collapsed) .neo-label-v {
    top: 50%;
}

/* Sidebar colapsado (icon-only): tanto el strip horizontal (nombre de
   categoria) como el vertical se mantienen visibles con su fondo dorado. */
/* Hover del header: fondo sutil solo en el toggle, no en toda la fila. */
.neo-section-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #888;
}
/* Seccion actualmente abierta: titulo con tinte dorado tenue. */
.neo-nav-collapsible:not(.collapsed) .neo-section-toggle {
    color: #9a8044;
}
.neo-section-chevron {
    display: flex;
    align-items: center;
    color: currentColor;
    opacity: 0.75;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.neo-section-chevron svg { width: 12px; height: 12px; }
.neo-nav-collapsible.collapsed .neo-section-chevron {
    transform: rotate(-90deg);
    opacity: 0.45;
}
/* Body: usa el "grid trick" para animar la altura REAL del contenido (no un
   max-height fijo). Asi la apertura y el cierre tardan lo mismo, y cuando
   dos secciones se transicionan a la vez (una abre + otra cierra) empiezan
   y terminan en el mismo instante. */
.neo-nav-section-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.4s ease;
}
.neo-nav-collapsible.collapsed .neo-nav-section-body {
    grid-template-rows: 0fr;
}
/* Shade: al scrolear/cambiar de estado, los iconos hacen fade in/out. */
.neo-nav-section-body-inner {
    transition: opacity 0.3s ease;
}
.neo-nav-collapsible.collapsed .neo-nav-section-body-inner {
    opacity: 0;
}
.neo-nav-collapsible.collapsed .neo-nav-section-body {
    grid-template-rows: 0fr;
}
.neo-nav-section-body-inner,
.neo-nav-submenu-inner,
.neo-nav-static-list,
.neo-nav-dropdown-list {
    list-style: none;
    padding: 0;
    /* Reset explicito de la propiedad logica: el user-agent aplica
       padding-inline-start:40px al <ul>, y algunos browsers en ciertos
       breakpoints priorizan la logica por sobre el shorthand padding:0. Con
       esto el <ul> nunca empuja los items 40px a la derecha. */
    padding-inline-start: 0;
    margin: 0;
}
/* Separa las apps de config del logout, al final de la ruedita. */
.neo-dropdown-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--neo-gray-200, #eee);
}
.neo-nav-section-body-inner {
    min-height: 0;
    overflow: hidden;
}

/* Items de las secciones del acordeon: transicion en TRES FASES sincronizadas
   con las de los strips/labels y el FLIP:
   Fase 1 (0-500ms): items de la seccion que se cierra se deslizan a la
     izquierda + fade out (delay 0).
   Fase 2 (500-1000ms): strips/labels crossfade + FLIP reorder (via JS setTimeout).
   Fase 3 (1000-1500ms): items de la seccion que se abre entran desde la
     izquierda + fade in (delay 1s). */
/* Apps del acordeon: sin animacion. Aparecen/desaparecen al vuelo. */

/* ── Dropdown flotante (Config / Admin) ── */
.neo-float-dropdown {
    position: fixed;
    z-index: 1000001;
    min-width: 210px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--neo-white, #fff);
    border: 1px solid var(--neo-gray-200, #eee);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    padding: 6px;
}
.neo-float-dropdown .neo-nav-item { color: #555; background: transparent; }
/* Hover: SIN fondo en el item completo (solo el icono se oscurece) y letra
   mas oscura. Mismo patron que las apps del menu lateral. */
.neo-float-dropdown .neo-nav-item:hover { background: transparent; color: #222; }
.neo-float-dropdown .neo-nav-item:hover .neo-nav-icon {
    background: rgba(0, 0, 0, 0.06);
}
/* Item activo con hover dentro del dropdown: mismo look dorado. */
.neo-float-dropdown .neo-nav-item.active:hover { color: #9a8044; }
.neo-float-dropdown .neo-nav-item.active:hover .neo-nav-icon {
    background: transparent;
    color: #9a8044;
    box-shadow: none;
}
/* Items del dropdown compactos, mismo tamaño que las apps del menú lateral. */
.neo-float-dropdown .neo-nav-item {
    padding: 4px 8px;
    min-height: 30px;
    gap: 8px;
    margin-bottom: 1px;
}
.neo-float-dropdown .neo-nav-icon {
    width: 26px;
    height: 26px;
}
.neo-float-dropdown .neo-nav-icon svg { width: 14px; height: 14px; }
.neo-float-dropdown .neo-nav-icon i { font-size: 13px; }
.neo-float-dropdown .neo-nav-text { font-size: 13px; }
.neo-float-dropdown .neo-nav-arrow { width: 16px; height: 16px; }
.neo-float-dropdown .neo-nav-arrow svg { width: 12px; height: 12px; }

/* Ocultar visualmente pero mantener el espacio */
.neo-sidebar.sidebar-collapsed .neo-nav-section-title {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Items de navegación - ESTILO MINIMALISTA */
.neo-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* padding-left 24px + sidebar-nav padding 8 = 32px del borde. Icono 32px.
       En sidebar-collapsed (76px), el icono ocupa 32-64: centrado en el espacio
       DERECHO al strip vertical (que ocupa 4-18px del borde). Mismo padding en
       ambos estados asi el icono NO se mueve al expandir/colapsar. */
    padding: 5px 24px;
    border-radius: 10px;
    color: #777;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 0;
    position: relative;
    min-height: 26px;
    transition: gap 0.3s ease, padding 0.3s ease;
}

.neo-nav-item:hover {
    color: #444;
}

.neo-nav-item:hover .neo-nav-icon {
    background: rgba(0, 0, 0, 0.04);
}

/* Item activo con hover: preservar el look dorado (no aplicar el hover
   generico al icono ni al color del texto). */
.neo-nav-item.active:hover {
    color: #9a8044;
}
.neo-nav-item.active:hover .neo-nav-icon {
    background: transparent;
    color: #9a8044;
    box-shadow: none;
}

.neo-nav-item.active {
    color: #9a8044;
}

.neo-nav-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.neo-nav-item.active .neo-nav-icon {
    background: transparent;
    color: #9a8044;
    box-shadow: none;
}

.neo-nav-icon svg {
    width: 20px;
    height: 20px;
}
/* Iconos FontAwesome dentro del contenedor: mismo padding visual que SVGs.
   Sobreescribe el font-size:16px inline puesto por renderIcon. */
.neo-nav-icon i {
    font-size: 17px !important;
}

.neo-nav-text {
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    flex: 1;
}

.neo-nav-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.neo-nav-arrow {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

.neo-nav-arrow svg {
    width: 14px;
    height: 14px;
}

.neo-nav-item.expanded .neo-nav-arrow {
    transform: rotate(90deg);
}

/* Sidebar colapsado. Padding IGUAL que en el estado base y SIN justify-content
   center para que los iconos no se reposicionen horizontalmente al colapsar
   (antes iban al centro del item, ahora quedan alineados a la izquierda
   igual que expandido). */
.neo-sidebar.sidebar-collapsed .neo-nav-item {
    padding: 5px 24px;
    gap: 0;
    transition: padding 0.3s ease, gap 0.3s ease;
}

.neo-sidebar.sidebar-collapsed .neo-nav-item:hover .neo-nav-icon {
    background: rgba(0, 0, 0, 0.04);
    color: #444;
}

.neo-sidebar.sidebar-collapsed .neo-nav-item.active .neo-nav-icon {
    background: transparent;
    color: #9a8044;
    box-shadow: none;
}

.neo-nav-text,
.neo-nav-badge,
.neo-nav-arrow {
    transition: opacity 0.25s ease, visibility 0.25s ease, width 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
}

.neo-sidebar.sidebar-collapsed .neo-nav-text,
.neo-sidebar.sidebar-collapsed .neo-nav-badge,
.neo-sidebar.sidebar-collapsed .neo-nav-arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 0;
    padding: 0;
    margin: 0;
}

/* ========================================
   SUBMENÚ
======================================== */
/* Submenu con "grid trick": anima la altura REAL del contenido igual que el
   acordeon de CRM/CEM (revelacion top-to-bottom, misma duracion abrir/cerrar). */
.neo-nav-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}
.neo-nav-submenu-inner {
    min-height: 0;
    overflow: hidden;
    margin-left: 20px;
    padding-left: 16px;
    border-left: 1px solid #e5e5e5;
}

/* Expandido: SOLO por click (clase .expanded en el <a>). Hover ya no abre. */
.neo-nav-item.expanded + .neo-nav-submenu {
    grid-template-rows: 1fr;
}

/* Sidebar colapsado (icon-only): el submenu queda cerrado. */
.neo-sidebar.sidebar-collapsed .neo-nav-submenu,
.neo-sidebar.sidebar-collapsed .neo-nav-item.expanded + .neo-nav-submenu {
    grid-template-rows: 0fr;
}

/* App Store icon: centrado horizontalmente en el sidebar en ambos estados
   (expandido y colapsado). !important porque .neo-sidebar.sidebar-collapsed
   .neo-nav-item tiene mayor especificidad. */
.neo-nav-item[data-app="app-store"],
.neo-sidebar.sidebar-collapsed .neo-nav-item[data-app="app-store"] {
    padding-left: 14px !important;
}

/* ── Categorias que "asoman" alrededor de la activa: pos-1 debajo y pos-prev
   arriba. Mask gradient a nivel de SECCION para que el label vertical (strip)
   tambien se difumine al mismo nivel que las apps.
   Los stops estan anclados al limite entre las 2 apps que asoman: la seccion
   mide 84px (2 x 42px), asi que el 50% cae JUSTO entre la primera y la segunda.
   Queda: 1ra app 0.5 -> 0.22 (se ve un poco), 2da app 0.22 -> 0.03 (casi nada,
   pero se intuye). Antes el degrade moria en 70% (58.8px), o sea a mitad de la
   segunda app: de ahi para abajo no se veia nada. */
.neo-nav-accordion.carousel-pos-1.collapsed {
    padding-top: 0 !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.03) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.03) 100%);
}
/* pos-prev: espejo de pos-1. El degrade va hacia arriba, asi el borde mas
   visible es el que toca a la categoria activa.
   El padding-top va a 0 igual que en pos-1: las secciones colapsadas traen
   padding-top para el label vertical y, si no se anula, mete 90px muertos que
   descentran la categoria activa. */
.neo-nav-accordion.carousel-pos-prev.collapsed {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.03) 100%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.03) 100%);
}
.neo-nav-accordion.carousel-pos-1.collapsed > .neo-nav-section-body,
.neo-nav-accordion.carousel-pos-prev.collapsed > .neo-nav-section-body {
    grid-template-rows: 1fr !important;
}
/* Alto FIJO (no max-height) en las dos que asoman: asoman exactamente 2 apps,
   la que empieza a difuminarse y la que lo termina. 84px = 2 items x 42px
   (.neo-nav-item mide 42px y no lleva margenes).
   Fijo y no max-height por dos razones: recorta a 2 apps aunque la categoria
   tenga mas, y mantiene simetricos los dos lados — con max-height, una de 3
   apps median 210px contra 120px de una de 2, y esa asimetria descentraba la
   categoria activa. */
.neo-nav-accordion.carousel-pos-1.collapsed .neo-nav-section-body-inner,
.neo-nav-accordion.carousel-pos-prev.collapsed .neo-nav-section-body-inner {
    opacity: 1 !important;
    height: 84px;
    max-height: 84px;
    overflow: hidden;
}
/* pos-prev: el contenido se apoya ABAJO, contra la categoria activa, y lo que
   sobra se recorta arriba — justo donde el degrade ya lo desvanece. */
.neo-nav-accordion.carousel-pos-prev.collapsed .neo-nav-section-body-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* pos-2 y demas: no se ven. */
.neo-nav-accordion.carousel-pos-2,
.neo-nav-accordion.carousel-pos-rest {
    display: none;
}
.neo-nav-accordion.carousel-pos-0,
.neo-nav-accordion.carousel-pos-1,
.neo-nav-accordion.carousel-pos-prev {
    opacity: 1;
    transition: opacity 0.5s ease;
}
/* Apps de categorias NO activas: SI clickeables (click => rotar carousel a
   esa categoria y abrir la app), pero SIN hover visual ni resaltado de
   .active. Recuperan hover/active solo cuando su categoria pase a pos-0. */
.neo-nav-accordion.carousel-pos-1 .neo-nav-item,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item,
.neo-nav-accordion.carousel-pos-1 .neo-nav-item:hover,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item:hover,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item:hover,
.neo-nav-accordion.carousel-pos-1 .neo-nav-item.active,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item.active,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item.active,
.neo-nav-accordion.carousel-pos-1 .neo-nav-item.active:hover,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item.active:hover,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item.active:hover {
    color: inherit !important;
    background: transparent !important;
}
.neo-nav-accordion.carousel-pos-1 .neo-nav-item .neo-nav-icon,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item .neo-nav-icon,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item .neo-nav-icon,
.neo-nav-accordion.carousel-pos-1 .neo-nav-item:hover .neo-nav-icon,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item:hover .neo-nav-icon,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item:hover .neo-nav-icon,
.neo-nav-accordion.carousel-pos-1 .neo-nav-item.active .neo-nav-icon,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item.active .neo-nav-icon,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item.active .neo-nav-icon,
.neo-nav-accordion.carousel-pos-1 .neo-nav-item.active:hover .neo-nav-icon,
.neo-nav-accordion.carousel-pos-2 .neo-nav-item.active:hover .neo-nav-icon,
.neo-nav-accordion.carousel-pos-prev .neo-nav-item.active:hover .neo-nav-icon {
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Efecto suave al cambiar de seccion activa: el contenido de la nueva seccion
   se desliza levemente desde arriba con fade. */
@keyframes neo-section-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Animacion del slide-in: se dispara SOLO cuando cem.js agrega la clase
   neo-anim-in en un cambio de seccion iniciado por el usuario (scroll, click,
   tab-change). NO en el load inicial de la pagina — evita el "brinco" visual
   al recargar. */
.neo-nav-section-body-inner.neo-anim-in {
    animation: neo-section-slide-in 0.7s ease;
}

.neo-nav-submenu .neo-nav-item {
    padding: 8px 12px;
    min-height: 38px;
    margin-bottom: 0;
}

.neo-nav-submenu .neo-nav-icon {
    width: 28px;
    height: 28px;
}

.neo-nav-submenu .neo-nav-icon svg {
    width: 14px;
    height: 14px;
}

.neo-nav-submenu .neo-nav-text {
    font-size: 13px;
    font-weight: 400;
}

/* Footer */
.neo-sidebar-footer {
    padding: 12px 8px;
}

.neo-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: gap 0.3s ease;
    position: relative;
}

.neo-user-card:hover {
    background: #f0f0f0;
}

.neo-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #987D5F 0%, #B39370 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.neo-user-info {
    flex: 1;
    min-width: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease, width 0.25s ease;
    overflow: hidden;
}

.neo-user-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-user-role {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.neo-user-status {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
}

.neo-sidebar.sidebar-collapsed .neo-user-info {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

.neo-sidebar.sidebar-collapsed .neo-user-card {
    justify-content: center;
    gap: 0;
}

/* ========================================
   SIDEBAR COLLAPSED - Mayor prioridad (al final)
======================================== */
.neo-sidebar.sidebar-collapsed,
.neo-sidebar.sidebar-collapsed:hover {
    width: 76px !important;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.neo-sidebar.sidebar-collapsed .neo-sidebar-logo,
.neo-sidebar.sidebar-collapsed:hover .neo-sidebar-logo {
    width: 44px;
    overflow: hidden !important;
    /* Al colapsar, el recorte a 44px es INSTANTANEO (sin animar) para que la
       parte larga del logo no quede visible durante el fade del sidebar. Al
       expandir, la animacion se controla desde la regla base .neo-sidebar-logo
       (transition width 0.4s), asi que el hover-expand sigue siendo suave. */
    transition: none !important;
}

.neo-sidebar.sidebar-collapsed .neo-nav-text,
.neo-sidebar.sidebar-collapsed .neo-nav-badge,
.neo-sidebar.sidebar-collapsed .neo-nav-arrow,
.neo-sidebar.sidebar-collapsed .neo-user-info,
.neo-sidebar.sidebar-collapsed:hover .neo-nav-text,
.neo-sidebar.sidebar-collapsed:hover .neo-nav-badge,
.neo-sidebar.sidebar-collapsed:hover .neo-nav-arrow,
.neo-sidebar.sidebar-collapsed:hover .neo-user-info {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Section title - ocultar visualmente pero mantener el espacio */
.neo-sidebar.sidebar-collapsed .neo-nav-section-title,
.neo-sidebar.sidebar-collapsed:hover .neo-nav-section-title {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Submenú colapsado - usar position absolute para no afectar el layout */
.neo-sidebar.sidebar-collapsed .neo-nav-submenu,
.neo-sidebar.sidebar-collapsed:hover .neo-nav-submenu,
.neo-sidebar.sidebar-collapsed .neo-nav-item.expanded + .neo-nav-submenu,
.neo-sidebar.sidebar-collapsed:hover .neo-nav-item.expanded + .neo-nav-submenu {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
}

.neo-sidebar.sidebar-collapsed .neo-nav-item,
.neo-sidebar.sidebar-collapsed:hover .neo-nav-item {
    /* Sin justify-content:center: los iconos quedan alineados a la izquierda
       (padding-left del item) igual que en modo expandido, asi no se mueven
       al pasar de un estado a otro. */
    gap: 0 !important;
    transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.neo-sidebar.sidebar-collapsed .neo-user-card,
.neo-sidebar.sidebar-collapsed:hover .neo-user-card {
    justify-content: center !important;
    gap: 0 !important;
    transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   RECENT SERVICES PANEL (NEW)
======================================== */
/* ========================================
   PROGRAM TABS BAR (Header)
======================================== */
.neo-program-tabs-bar {
    background: var(--neo-gray-100);
    border-bottom: 1px solid var(--neo-gray-150);
    padding: 0 var(--neo-space-lg);
    display: flex;
    align-items: center;
    height: 42px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1001;
}

.neo-program-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
    z-index: 1002;
}

.neo-program-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-400);
    cursor: pointer;
    transition: transform 0.15s ease-out;
    white-space: nowrap;
    position: relative;
    height: 42px;
    box-sizing: border-box;
    z-index: 1002;
    user-select: none;
}

/* Estilos para drag and drop de program tabs */
.neo-program-tab.program-tab-dragging {
    opacity: 0.95;
    background: var(--neo-white);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 1100;
    border-bottom: 2px solid var(--neo-primary);
    transition: none !important;
}

.neo-program-tab:hover {
    color: var(--neo-gray-600);
    background: var(--neo-gray-50);
}

.neo-program-tab.active {
    color: var(--neo-primary);
    font-weight: 600;
    border-bottom-color: var(--neo-primary);
    background: transparent;
}

.neo-program-tab.active::after {
    display: none;
}

.neo-program-tab-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-program-tab-icon svg {
    width: 16px;
    height: 16px;
}

.neo-program-tab-close {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    border-radius: var(--neo-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    cursor: pointer;
    transition: var(--neo-transition);
    margin-left: var(--neo-space-xs);
    opacity: 0;
}

.neo-program-tab:hover .neo-program-tab-close {
    opacity: 1;
}

.neo-program-tab-close:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-program-tab-close svg {
    width: 12px;
    height: 12px;
}

/* Content area with connected tab effect */
.neo-main-content {
    background: var(--neo-white);
    border-top: none;
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

/* ========================================
   ITEMS SIDEBAR (Left Panel) - Colapso Vertical Superpuesto
======================================== */
.neo-items-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: visible;
}

/* Header siempre visible */
.neo-items-sidebar-header {
    border-bottom: none;
}

/* Body oculto por defecto */
.neo-items-sidebar .neo-items-sidebar-body {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

/* Visible con clase expanded O hover en el toggle */
.neo-items-sidebar.expanded .neo-items-sidebar-body {
    display: block !important;
    visibility: visible;
    opacity: 1;
}

.neo-items-sidebar-header {
    padding: var(--neo-space-lg) var(--neo-space-md) var(--neo-space-sm) var(--neo-space-md);
    border-bottom: none;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    gap: var(--neo-space-2xs);
    height: 56px;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    z-index: 101;
}

.neo-sidebar-home-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.neo-sidebar-home-btn:hover {
    background: var(--neo-gray-200);
    color: var(--neo-primary);
}
.neo-sidebar-home-btn svg {
    width: 16px;
    height: 16px;
}

/* Item Tabs Carousel Wrapper */
.neo-item-tabs-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
    margin-left: 8px;
}

.neo-item-tabs-arrow {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: var(--neo-transition);
    flex-shrink: 0;
    z-index: 2;
}

.neo-item-tabs-arrow:hover {
    background: var(--neo-gray-200);
    color: var(--neo-gray-700);
}

.neo-item-tabs-arrow.hidden {
    display: none;
}

.neo-item-tabs-arrow svg {
    width: 14px;
    height: 14px;
}

/* Item Tabs - Items abiertos con estilo de título */
.neo-item-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding-left: 4px;
    margin-left: 0;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.neo-item-tabs::-webkit-scrollbar {
    display: none;
}

.neo-item-tabs:empty {
    display: none;
}

.neo-item-tab {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: 6px;
    margin-left: var(--neo-space-xs);
    margin-right: var(--neo-space-xs);
    border-left: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-500);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    position: relative;
}

/* Separador entre tabs inactivos */
.neo-item-tab:not(.active) + .neo-item-tab:not(.active) {
    border-left-color: var(--neo-gray-200);
}

/* Estilos para drag and drop de tabs */
.neo-item-tab.tab-dragging {
    opacity: 0.95;
    background: var(--neo-white);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 100;
    outline: 2px solid var(--neo-primary);
    outline-offset: -2px;
    border-left-color: transparent !important;
    transition: none !important;
    position: relative;
}

.neo-item-tab:hover {
    color: var(--neo-gray-700);
}

.neo-item-tab.active {
    background: var(--neo-white);
    border-radius: 14px;
    padding: 6px;
    color: var(--neo-gray-700);
    border-left-color: transparent;
}

.neo-item-tab.active .neo-item-tab-icon {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-item-tab-icon {
    width: 36px;
    height: 36px;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    flex-shrink: 0;
    transition: var(--neo-transition);
}
.neo-item-tab-icon.has-initials {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.neo-item-tab:hover .neo-item-tab-icon {
    background: var(--neo-gray-200);
    color: var(--neo-gray-600);
}

.neo-item-tab.active:hover .neo-item-tab-icon {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-item-tab-icon svg {
    width: 18px;
    height: 18px;
}

.neo-item-tab-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.neo-item-tab-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    color: inherit;
    white-space: nowrap;
}

.neo-item-tab.active .neo-item-tab-name {
    color: var(--neo-primary);
}

.neo-item-tab-id {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 5px;
    background: var(--neo-gray-100);
    color: var(--neo-gray-600);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
}

.neo-item-tab.active .neo-item-tab-id {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

/* Badge de módulo en item-tabs */
.neo-item-tab-module {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(152, 125, 95, 0.12);
    color: var(--neo-primary-hover);
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    flex-shrink: 0;
}
.neo-item-tab.active .neo-item-tab-module {
    background: rgba(152, 125, 95, 0.18);
}
/* Módulo Formularios - verde salvia */
.neo-item-tab-module.mod-formularios {
    background: rgba(45, 106, 79, 0.12);
    color: #2d6a4f;
}
.neo-item-tab.active .neo-item-tab-module.mod-formularios {
    background: rgba(45, 106, 79, 0.18);
}

/* Contenedor para ID y badge de módulo en la misma línea */
.neo-item-tab-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.neo-item-tab-close {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    border-radius: var(--neo-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    cursor: pointer;
    transition: var(--neo-transition);
    padding: 0;
    margin-left: var(--neo-space-xs);
    opacity: 0;
}

.neo-item-tab:hover .neo-item-tab-close {
    opacity: 1;
}

.neo-item-tab-factura {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px solid var(--neo-primary);
    background: var(--neo-primary-light);
    border-radius: var(--neo-radius-full);
    color: var(--neo-primary);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: 4px;
}
.neo-item-tab-factura:hover {
    background: var(--neo-primary);
    color: white;
}
.neo-item-tab-factura svg {
    width: 13px;
    height: 13px;
}
.neo-item-tab.active .neo-item-tab-factura.visible {
    display: flex;
}

.neo-item-tab-close:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-item-tab-close svg {
    width: 12px;
    height: 12px;
}

.neo-item-tab.active .neo-item-tab-close {
    opacity: 0;
    color: var(--neo-primary);
}

.neo-item-tab.active:hover .neo-item-tab-close {
    opacity: 1;
}

.neo-item-tab.active .neo-item-tab-close:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

/* Vista de Detalle */
.neo-detail-view {
    padding: var(--neo-space-xl);
    max-width: 900px;
    margin: 0 auto;
}

.neo-detail-header {
    display: flex;
    align-items: flex-start;
    gap: var(--neo-space-lg);
    margin-bottom: var(--neo-space-xl);
    padding-bottom: var(--neo-space-lg);
    border-bottom: 1px solid var(--neo-gray-200);
}

.neo-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--neo-radius-xl);
    background: var(--neo-primary-light);
    color: var(--neo-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Avatar pequeño estilo tabs - para comprobantes/reportes/preformas */
.neo-detail-avatar-small {
    width: 36px;
    height: 36px;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Avatar pequeño en selector flotante - más pequeño y más cuadrado */
.neo-detail-avatar-xs {
    width: 28px;
    height: 28px;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.neo-detail-info {
    flex: 1;
}

.neo-detail-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--neo-gray-900);
    margin-bottom: var(--neo-space-xs);
}

.neo-detail-name-row {
    display: flex;
    align-items: center;
    gap: var(--neo-space-md);
    margin-bottom: var(--neo-space-xs);
}

.neo-detail-name-row .neo-detail-name {
    margin-bottom: 0;
}

.neo-btn-facturacion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--neo-primary-dark, #92400e);
    background: color-mix(in srgb, var(--neo-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--neo-primary) 25%, transparent);
    border-radius: var(--neo-radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.neo-btn-facturacion:hover {
    background: color-mix(in srgb, var(--neo-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--neo-primary) 40%, transparent);
}

.neo-header-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
    margin-left: auto;
}
.neo-header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 14px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: var(--neo-radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    color: var(--neo-gray-600);
    min-width: 110px;
}
.neo-header-action-btn:hover {
    background: var(--neo-gray-50);
    border-color: var(--neo-gray-300);
    color: var(--neo-gray-800);
}
.neo-header-action-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.neo-header-action-btn.btn-primary-action {
    color: var(--neo-primary-dark, #92400e);
    background: color-mix(in srgb, var(--neo-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--neo-primary) 25%, transparent);
}
.neo-header-action-btn.btn-primary-action:hover {
    background: color-mix(in srgb, var(--neo-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--neo-primary) 40%, transparent);
}

/* Header Action Menu (floating dropdown) */
.neo-header-action-menu {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}
.neo-header-action-menu-trigger {
    width: 38px;
    height: 38px;
    border-radius: var(--neo-radius-full);
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    color: var(--neo-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.neo-header-action-menu-trigger:hover,
.neo-header-action-menu-trigger.active {
    background: var(--neo-gray-50);
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.neo-header-action-menu-trigger svg {
    width: 18px;
    height: 18px;
}
.neo-header-action-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.neo-header-action-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.neo-header-action-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-700);
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}
.neo-header-action-dropdown-item:hover {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.neo-header-action-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}
.neo-header-action-dropdown-item:hover svg {
    opacity: 1;
}
.neo-header-action-dropdown-item .neo-action-badge {
    margin-left: auto;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    background: color-mix(in srgb, var(--neo-primary) 12%, transparent);
    color: var(--neo-primary);
}
.neo-header-action-dropdown-sep {
    height: 1px;
    background: var(--neo-gray-100);
    margin: 3px 8px;
}
/* Facturación dropdown */
.neo-facturacion-menu {
    position: relative;
}
.neo-facturacion-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
    padding: 6px;
    padding-top: 6px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}
.neo-facturacion-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}
.neo-facturacion-menu:hover .neo-facturacion-dropdown,
.neo-facturacion-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.neo-facturacion-menu:hover .neo-facturacion-chevron {
    transform: rotate(180deg);
}
.neo-facturacion-chevron.neo-chevron-up {
    transform: rotate(180deg);
}
.neo-facturacion-menu:hover .neo-facturacion-chevron.neo-chevron-up {
    transform: rotate(0deg);
}
.neo-facturacion-dropdown.neo-facturacion-dropdown-center {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-6px) scale(0.97);
}
.neo-facturacion-menu:hover .neo-facturacion-dropdown.neo-facturacion-dropdown-center,
.neo-facturacion-dropdown.neo-facturacion-dropdown-center.open {
    transform: translateX(-50%) translateY(0) scale(1);
}
.neo-facturacion-chevron {
    transition: transform 0.2s;
}
.neo-facturacion-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-700);
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}
.neo-facturacion-dropdown-item:hover {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.neo-facturacion-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}
.neo-facturacion-dropdown-item:hover svg {
    opacity: 1;
}

/* Estilos para botones dropdown deshabilitados */
.neo-facturacion-dropdown-item:disabled,
.neo-facturacion-dropdown-item[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--neo-gray-50);
    color: var(--neo-gray-400);
}

.neo-facturacion-dropdown-item:disabled:hover,
.neo-facturacion-dropdown-item[disabled]:hover {
    background: var(--neo-gray-50);
    color: var(--neo-gray-400);
}

.neo-facturacion-tabs-mobile {
    display: none;
}

.neo-facturacion-tools-mobile {
    display: none;
}

/* Listado Floating Dropdown */
.neo-listado-floating {
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
}
.neo-listado-floating-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    padding-right: 44px;
    border-radius: 14px;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    box-shadow: var(--neo-shadow-lg);
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-600);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-width: 300px;
    height: 58px;
}
.neo-listado-floating.trash-open .neo-listado-floating-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.neo-listado-home-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.neo-listado-home-btn:hover {
    background: var(--neo-gray-100);
    color: var(--neo-primary);
}
.neo-listado-home-btn svg {
    width: 16px;
    height: 16px;
}

/* Servicio Selector Dropdown */
.neo-servicio-selector {
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
}
.neo-servicio-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    padding-right: 44px;
    border-radius: 14px;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    box-shadow: var(--neo-shadow-lg);
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 300px;
    min-height: 18px;
}
.neo-servicio-selector-btn:hover {
    border-color: var(--neo-gray-300);
}
.neo-servicio-selector-btn.active {
    background: var(--neo-white);
    border-color: var(--neo-gray-200);
    border-radius: 14px 14px 0 0;
    border-bottom-color: transparent;
    box-shadow: none;
}
.neo-servicio-home-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.neo-servicio-home-btn:hover {
    background: var(--neo-gray-100);
    color: var(--neo-primary);
}
.neo-servicio-home-btn svg {
    width: 16px;
    height: 16px;
}
.neo-servicio-selector-btn .neo-servicio-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--neo-gray-400);
}
.neo-servicio-selector-btn.active .neo-servicio-chevron {
    transform: rotate(180deg);
}
.neo-servicio-selector.trash-open .neo-servicio-selector-btn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.neo-servicio-dropdown-panel {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    width: 100%;
    max-height: 60vh;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-top: none;
    border-radius: 0 0 14px 14px;
    box-shadow: var(--neo-shadow-lg);
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.neo-servicio-dropdown-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.neo-servicio-dropdown-panel .neo-servicio-dropdown-header {
    padding: 12px 14px 4px;
}
.neo-servicio-dropdown-panel .neo-servicio-dropdown-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}
.neo-servicio-dropdown-footer {
    padding: 8px;
    border-top: 1px solid var(--neo-gray-200);
    background: var(--neo-gray-50);
}
.neo-servicio-buscar-mas-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--neo-gray-200);
    border-radius: 8px;
    background: var(--neo-white);
    color: var(--neo-gray-700);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.neo-servicio-buscar-mas-btn:hover {
    background: var(--neo-primary);
    color: var(--neo-white);
    border-color: var(--neo-primary);
}
.neo-servicio-buscar-mas-btn svg {
    width: 16px;
    height: 16px;
}
.neo-servicio-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 44px 10px 12px; /* Padding derecho extra para botón de eliminar */
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.neo-servicio-item:hover {
    background: var(--neo-gray-50);
}
.neo-servicio-item.active {
    background: var(--neo-primary-light);
}
.neo-servicio-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Botón de eliminar en items del dropdown */
.neo-servicio-delete-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
    pointer-events: none;
}

.neo-servicio-delete-btn svg {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-500);
    transition: color 0.2s;
}

.neo-servicio-item:hover .neo-servicio-delete-btn {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.neo-servicio-delete-btn:hover {
    background: transparent;
}

.neo-servicio-delete-btn:hover svg {
    color: var(--neo-danger);
}

/* Botones de eliminar en items de fact-listado (comprobantes, preformas, reportes) */
.fact-listado-delete-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
    pointer-events: none;
}

.fact-listado-delete-btn svg {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-500);
    transition: color 0.2s;
}

.fact-listado-item:hover .fact-listado-delete-btn {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.fact-listado-delete-btn:hover {
    background: transparent;
}

.fact-listado-delete-btn:hover svg {
    color: var(--neo-danger);
}

/* Botón de editar en items de fact-listado */
.fact-listado-edit-btn {
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
    pointer-events: none;
}

.fact-listado-edit-btn svg {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-500);
    transition: color 0.2s;
}

.fact-listado-item:hover .fact-listado-edit-btn {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.fact-listado-edit-btn:hover {
    background: transparent;
}

.fact-listado-edit-btn:hover svg {
    color: var(--neo-primary);
}

/* Agregar position relative a fact-listado-item para el botón absoluto */
.fact-listado-item {
    position: relative;
    padding-right: 44px; /* Espacio para el botón */
}

/* Avatar con mismo border-radius que los tabs del header */
.neo-servicio-item .neo-detail-avatar,
#servicio-selector .neo-detail-avatar {
    border-radius: var(--neo-radius-lg) !important;
}
.neo-servicio-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.neo-servicio-item-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 11px;
    color: var(--neo-gray-500);
}

/* Badge de ID (similar al badge de estado) */
.neo-id-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: var(--neo-gray-100);
    color: var(--neo-gray-600);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.neo-listado-floating-btn.active {
    background: var(--neo-white);
    border-color: var(--neo-gray-200);
    color: var(--neo-gray-600);
    border-radius: 14px 14px 0 0;
    border-bottom-color: transparent;
    box-shadow: none;
}
.neo-listado-floating-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.neo-listado-floating-btn .neo-listado-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}
.neo-listado-floating-btn.active .neo-listado-chevron {
    transform: rotate(180deg);
}
.neo-listado-trash-icon {
    width: 16px;
    height: 16px;
    padding: 4px;
    margin-top: 6px;
    box-sizing: content-box;
    color: var(--neo-gray-400);
    transition: color 0.2s;
    cursor: pointer;
}
.neo-listado-trash-icon:hover {
    color: var(--neo-danger);
}

.neo-servicio-add-icon-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1.5px solid #d4af37;
    background: transparent;
    border-radius: 6px;
    color: #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.neo-servicio-add-icon-btn:hover {
    background: #d4af37;
    color: white;
    transform: translateY(-50%) scale(1.05);
}

/* Ajustar posición del botón + en móviles y tablets para que no se encime con el chevron */
@media (max-width: 1024px) {
    #servicio-add-icon-btn,
    #fact-listado-add-icon-btn {
        right: 38px !important;
    }
}

.neo-trash-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    background: var(--neo-danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    pointer-events: none;
}
.neo-listado-dropdown-panel {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    width: 100%;
    max-height: 75vh;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-top: none;
    border-radius: 0 0 14px 14px;
    box-shadow: none;
    z-index: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.neo-listado-dropdown-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.neo-listado-dropdown-panel .neo-listado-dropdown-header {
    padding: 12px 14px 0;
}
.neo-listado-dropdown-panel .neo-listado-dropdown-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 6px 8px;
}
.neo-listado-add-btn-dropdown {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid var(--neo-gray-200);
    border-radius: 8px;
    background: var(--neo-white);
    cursor: pointer;
    color: var(--neo-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.neo-listado-add-btn-dropdown:hover {
    background: color-mix(in srgb, var(--neo-primary) 8%, transparent);
    border-color: var(--neo-primary);
}

/* Listado Comprobantes Table */
.fact-listado-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.fact-listado-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neo-gray-400);
    border-bottom: 1px solid var(--neo-gray-200);
    white-space: nowrap;
}
.fact-listado-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}
.fact-listado-table tbody tr:hover {
    background: var(--neo-gray-50);
}
.fact-listado-table tbody td {
    padding: 11px 12px;
    color: var(--neo-gray-700);
    border-bottom: 1px solid var(--neo-gray-100);
    white-space: nowrap;
}
.fact-listado-table tbody tr:last-child td {
    border-bottom: none;
}
.fact-tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.fact-tipo-badge.tipo-factura {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.fact-tipo-badge.tipo-nc {
    background: #ecfdf5;
    color: #059669;
}
.fact-tipo-badge.tipo-nd {
    background: #fffbeb;
    color: #d97706;
}
.fact-tipo-badge.tipo-pendiente {
    background: var(--neo-gray-100);
    color: var(--neo-gray-500);
}
.fact-listado-filter-btn {
    padding: 8px 6px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid var(--neo-gray-200);
    border-radius: 6px;
    background: var(--neo-white);
    color: var(--neo-gray-600);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
}
.fact-listado-filter-btn:hover {
    background: var(--neo-gray-50);
}
.fact-listado-filter-btn.active {
    background: var(--neo-primary);
    color: #fff;
    border-color: var(--neo-primary);
}
.fact-listado-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 44px 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--neo-gray-100);
    position: relative;
}
.fact-listado-item:hover {
    background: var(--neo-gray-50);
}
.fact-listado-item.fact-listado-active {
    background: color-mix(in srgb, var(--neo-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--neo-primary) 15%, transparent);
}
.fact-listado-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.fact-listado-item:hover .fact-listado-actions {
    opacity: 1;
}
.fact-listado-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: var(--neo-white);
    color: var(--neo-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.fact-listado-action-btn:hover {
    color: var(--neo-primary);
    background: var(--neo-primary-light);
}
.fact-listado-action-btn.fact-listado-delete-btn:hover {
    color: #ef4444;
    background: #fef2f2;
}
.fact-listado-action-btn svg {
    width: 13px;
    height: 13px;
}
.fact-estado-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.fact-estado-badge.estado-procesada {
    background: #ecfdf5;
    color: #059669;
}
.fact-estado-badge.estado-pendiente {
    background: #fffbeb;
    color: #d97706;
}
.fact-estado-badge.estado-anulada {
    background: #fef2f2;
    color: #dc2626;
}
.fact-listado-table .fact-numero-col {
    font-weight: 600;
    color: var(--neo-gray-800);
}
.fact-listado-table .fact-total-col {
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Tabs de Facturación */

/* Badges de tipos de comprobantes para tabs */
.fact-tipo-badge-mini {
    display: inline-block;
    font-weight: 600;
}
.fact-tipo-badge-mini.tipo-factura {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.fact-tipo-badge-mini.tipo-nc {
    background: #ecfdf5;
    color: #059669;
}
.fact-tipo-badge-mini.tipo-nd {
    background: #fffbeb;
    color: #d97706;
}
.fact-tipo-badge-mini.tipo-pendiente {
    background: var(--neo-gray-100);
    color: var(--neo-gray-500);
}

/* Detalle Spreadsheet */
.fact-detalle-wrapper {
    margin-top: 14px;
    border: 1px solid var(--neo-gray-200);
    border-radius: 10px;
    overflow: hidden;
}
.fact-detalle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--neo-gray-50);
    border-bottom: 1px solid var(--neo-gray-200);
    gap: 8px;
    flex-wrap: wrap;
}
.fact-detalle-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
}
.fact-detalle-title svg { width: 16px; height: 16px; }
.fact-detalle-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.fact-monto-toggle {
    display: flex;
    background: var(--neo-gray-100);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.fact-monto-toggle-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--neo-gray-500);
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.fact-monto-toggle-btn.active {
    background: var(--neo-white);
    color: var(--neo-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fact-extra-toggles {
    display: flex;
    gap: 4px;
}
.fact-extra-toggle-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    border-radius: 6px;
    cursor: pointer;
    color: var(--neo-gray-500);
    transition: all 0.15s;
    font-family: inherit;
}
.fact-extra-toggle-btn.active {
    border-color: var(--neo-primary);
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.fact-spreadsheet {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: auto;
}
.fact-spreadsheet th {
    background: var(--neo-gray-50);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--neo-gray-500);
    border-bottom: 1px solid var(--neo-gray-200);
    white-space: nowrap;
}
.fact-spreadsheet .col-cantidad,
.fact-spreadsheet .fact-col-cant-th { width: 70px; }
.fact-spreadsheet .col-precio,
.fact-spreadsheet .fact-col-precio-th,
.fact-spreadsheet .pf-col-precio-th { width: 100px; }
.fact-spreadsheet .col-bonif,
.fact-spreadsheet .col-bonif-th,
.fact-spreadsheet .pf-col-bonif,
.fact-spreadsheet .pf-col-bonif-th { width: 80px; }
.fact-spreadsheet .col-iva,
.fact-spreadsheet .col-iva-th,
.fact-spreadsheet .pf-col-iva,
.fact-spreadsheet .pf-col-iva-th { width: 100px; }
.fact-spreadsheet .col-subtotal,
.fact-spreadsheet .fact-col-subtotal-th,
.fact-spreadsheet .pf-col-subtotal-th { width: 100px; }
.fact-spreadsheet th.col-actions,
.fact-spreadsheet td:last-child { width: 36px; }
.fact-spreadsheet td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--neo-gray-100);
    vertical-align: middle;
}
.fact-spreadsheet tbody tr:hover {
    background: var(--neo-primary-light);
}
.fact-spreadsheet input,
.fact-spreadsheet select {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.fact-spreadsheet input:focus,
.fact-spreadsheet select:focus {
    border-color: var(--neo-primary);
    background: var(--neo-white);
    outline: none;
}
.fact-spreadsheet input::placeholder { color: var(--neo-gray-300); }
.fact-spreadsheet .col-cantidad input,
.fact-spreadsheet .col-precio input,
.fact-spreadsheet .col-bonif input { text-align: right; }
.fact-spreadsheet .col-precio {
    position: relative;
}
.fact-spreadsheet .col-precio::before {
    content: '$';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-400);
    pointer-events: none;
    z-index: 1;
}
.fact-spreadsheet .col-precio input {
    padding-left: 18px;
}
.fact-spreadsheet .col-subtotal {
    text-align: right;
    font-weight: 600;
    font-size: 12px;
    color: var(--neo-gray-700);
    padding-right: 10px;
}
.fact-row-delete {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neo-gray-300);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}
.fact-row-delete:hover { color: var(--neo-danger); background: #fef2f2; }
.fact-row-delete svg { width: 14px; height: 14px; }
.pf-campo-insert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--neo-gray-300);
    border-radius: 5px;
    background: var(--neo-white);
    color: var(--neo-primary);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.pf-campo-insert-btn:hover,
.pf-campo-insert-btn.active {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
}
.pf-concepto-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pf-concepto-cell input {
    flex: 1;
    min-width: 0;
}
.pf-campos-dropdown {
    position: fixed;
    width: 210px;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pf-campos-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.pf-campos-dropdown-search {
    padding: 6px;
    border-bottom: 1px solid var(--neo-gray-100);
}
.pf-campos-dropdown-search input {
    width: 100%;
    height: 28px;
    border: 1px solid var(--neo-gray-200);
    border-radius: 6px;
    padding: 0 8px;
    font-size: 11px;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}
.pf-campos-dropdown-search input:focus {
    border-color: var(--neo-primary);
}
.pf-campos-dropdown-list {
    max-height: 150px;
    overflow-y: auto;
    padding: 4px;
}
.pf-campos-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 8px;
    border: none;
    background: none;
    font-size: 11px;
    font-family: inherit;
    color: var(--neo-gray-700);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-campos-dropdown-item:hover {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.pf-campos-dropdown-add {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-top: 1px solid var(--neo-gray-100);
    background: var(--neo-gray-50);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--neo-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.pf-campos-dropdown-add:hover {
    background: var(--neo-primary-light);
}
.fact-add-row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--neo-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border-top: 1px dashed var(--neo-gray-200);
    transition: background 0.15s;
}
.fact-add-row-btn:hover { background: var(--neo-primary-light); }
.fact-add-row-btn svg { width: 14px; height: 14px; }
.fact-detalle-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: var(--neo-gray-50);
    border-top: 2px solid var(--neo-gray-200);
}
.fact-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fact-footer-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-500);
}
.fact-footer-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--neo-gray-800);
    min-width: 100px;
    text-align: right;
}
.fact-footer-row.total { padding-top: 8px; }
.fact-footer-row.total .fact-footer-label { font-size: 13px; color: var(--neo-gray-700); }
.fact-footer-row.total .fact-footer-value { font-size: 16px; color: var(--neo-primary); }
.fact-footer-input {
    width: 120px;
    padding: 5px 8px 5px 20px;
    border: 1px solid var(--neo-gray-200);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    font-family: inherit;
}
.fact-footer-input:focus { border-color: var(--neo-primary); outline: none; }
.fact-footer-input-wrap {
    position: relative;
    display: inline-block;
}
.fact-footer-input-wrap::before {
    content: '$';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-400);
    pointer-events: none;
    z-index: 1;
}

.neo-btn-inline-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--neo-primary);
    background: var(--neo-primary-light);
    border: 1px solid color-mix(in srgb, var(--neo-primary) 25%, transparent);
    border-radius: var(--neo-radius-full);
    cursor: pointer;
    transition: var(--neo-transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.neo-btn-inline-edit:hover {
    background: color-mix(in srgb, var(--neo-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--neo-primary) 40%, transparent);
    box-shadow: 0 2px 8px rgba(152, 125, 95, 0.2);
}

.neo-btn-inline-edit svg {
    width: 14px;
    height: 14px;
}

.neo-detail-id {
    font-size: 14px;
    color: var(--neo-gray-500);
    margin-bottom: var(--neo-space-sm);
}

.neo-detail-status {
    display: inline-flex;
    align-items: center;
    gap: var(--neo-space-xs);
    padding: var(--neo-space-xs) var(--neo-space-sm);
    border-radius: var(--neo-radius-full);
    font-size: 12px;
    font-weight: 500;
}

.neo-detail-status.active {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}

.neo-detail-status.pending {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
}

.neo-detail-status.completed {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.neo-detail-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.neo-detail-actions {
    display: flex;
    gap: var(--neo-space-sm);
}

.neo-detail-section {
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    margin-bottom: var(--neo-space-lg);
    overflow: hidden;
}

.neo-detail-section-header {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-md) var(--neo-space-lg);
    background: var(--neo-gray-50);
    border-bottom: 1px solid var(--neo-gray-200);
    font-weight: 600;
    color: var(--neo-gray-700);
}

.neo-detail-section-header svg {
    width: 18px;
    height: 18px;
    color: var(--neo-primary);
}

.neo-detail-section-body {
    padding: var(--neo-space-lg);
}

/* Section Edit/Detail Toggle */
.neo-section-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-full);
    background: white;
    color: var(--neo-gray-500);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
    pointer-events: none;
}
.neo-card:hover .neo-section-edit-btn {
    opacity: 1;
    pointer-events: auto;
}
.neo-section-edit-btn:hover {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    background: var(--neo-primary-light);
}
.neo-section-edit-btn svg {
    width: 13px;
    height: 13px;
}
.neo-section-header-actions {
    display: none;  /* Ocultar botones de limpiar */
}

.neo-section-header-actions .neo-btn {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: var(--neo-radius-full);
    gap: 4px;
}
.neo-section-header-actions .neo-btn svg {
    width: 13px;
    height: 13px;
}
.neo-section-actions {
    display: none;
}

.neo-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--neo-space-lg);
}

.neo-detail-field {
    display: flex;
    flex-direction: column;
    gap: var(--neo-space-xs);
}

.neo-detail-field.full-width {
    grid-column: 1 / -1;
}

.neo-detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: font-size 0.3s ease;
}
.neo-detail-label svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--neo-primary);
    opacity: 0.6;
}

.neo-detail-value {
    font-size: 15px;
    color: var(--neo-gray-800);
    transition: font-size 0.3s ease;
}

.neo-detail-value.empty {
    color: var(--neo-gray-400);
    font-style: italic;
}

/* Ocultar iconos en facturación y testigos */
#ds-facturacion-detail-mode .neo-detail-label svg,
#ds-testigos-detail-mode .neo-detail-label svg {
    display: none;
}

/* Remover borde en valores de facturación y testigos */
#ds-facturacion-detail-mode .neo-detail-value,
#ds-testigos-detail-mode .neo-detail-value {
    border: none;
    padding: 0;
    display: none;  /* Ocultar valores */
}

/* Ocultar labels en facturación y testigos */
#ds-facturacion-detail-mode .neo-detail-label,
#ds-testigos-detail-mode .neo-detail-label {
    display: none;
}

/* Ocultar label en avisos */
#ds-avisos-detail-mode .neo-detail-label {
    display: none;
}

/* Ocultar value en avisos */
#ds-avisos-detail-mode .neo-detail-value {
    display: none;
}

.neo-items-sidebar-home {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--neo-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: var(--neo-transition);
    flex-shrink: 0;
}

.neo-items-sidebar-home:hover {
    background: var(--neo-gray-100);
    color: var(--neo-primary);
}

.neo-items-sidebar-home svg {
    width: 16px;
    height: 16px;
}

.neo-items-sidebar-search {
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    padding: 0 var(--neo-space-sm);
    height: 32px;
    width: 170px;
    flex-shrink: 0;
}

.neo-items-sidebar-search:focus-within {
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 3px var(--neo-primary-light);
}

.neo-items-sidebar-search svg {
    width: 14px;
    height: 14px;
    color: var(--neo-gray-400);
    flex-shrink: 0;
}

.neo-items-sidebar-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--neo-gray-800);
    background: transparent;
    width: 100%;
}

.neo-items-sidebar-search input::placeholder {
    color: var(--neo-gray-400);
}

.neo-items-sidebar-toggle {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--neo-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: var(--neo-transition);
    flex-shrink: 0;
}

.neo-items-sidebar-toggle:hover {
    background: var(--neo-gray-100);
    color: var(--neo-primary);
}

.neo-items-sidebar-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.neo-items-sidebar.expanded .neo-items-sidebar-toggle svg {
    transform: rotate(0deg);
}

.neo-items-sidebar-body {
    display: block;
    position: absolute;
    top: 56px;
    left: 0;
    width: 280px;
    background: var(--neo-white);
    overflow-y: auto;
    padding: var(--neo-space-sm);
    max-height: calc(100vh - 200px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--neo-gray-200);
    border-top: none;
    border-radius: 0 0 var(--neo-radius-lg) var(--neo-radius-lg);
    z-index: 9999;
}

.neo-open-item {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-sm) var(--neo-space-md);
    border-radius: var(--neo-radius-lg);
    cursor: pointer;
    transition: var(--neo-transition);
    margin-bottom: var(--neo-space-xs);
    border: 1px solid transparent;
    background: var(--neo-gray-50);
}

.neo-open-item:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-200);
}

.neo-open-item.active {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    justify-content: flex-start;
    gap: var(--neo-space-sm);
}

.neo-open-item-actions {
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
    margin-left: auto;
    flex-shrink: 0;
}

.neo-item-action-btn {
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
    padding: var(--neo-space-xs) var(--neo-space-sm);
    border: 1px solid var(--neo-gray-300);
    background: var(--neo-white);
    border-radius: var(--neo-radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-600);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-item-action-btn:hover {
    background: var(--neo-gray-100);
    color: var(--neo-gray-800);
    border-color: var(--neo-gray-400);
}

.neo-item-action-btn svg {
    width: 14px;
    height: 14px;
}

.neo-open-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--neo-radius-full);
    background: var(--neo-primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-white);
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.neo-open-item.active .neo-open-item-avatar {
    background: var(--neo-primary);
}

.neo-open-item-content {
    flex: 1;
    min-width: 0;
}

.neo-open-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--neo-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-open-item.active .neo-open-item-name {
    color: var(--neo-primary);
}

.neo-open-item-meta {
    font-size: 13px;
    color: var(--neo-gray-500);
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
}

.neo-open-item-status {
    width: 6px;
    height: 6px;
    border-radius: var(--neo-radius-full);
}

.neo-open-item-status.pending { background: var(--neo-warning); }
.neo-open-item-status.active { background: var(--neo-info); }
.neo-open-item-status.completed { background: var(--neo-success); }

.neo-open-item-close {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    border-radius: var(--neo-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    cursor: pointer;
    transition: var(--neo-transition);
    opacity: 0;
}

.neo-open-item:hover .neo-open-item-close {
    opacity: 1;
}

.neo-open-item-close:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-open-item-close svg {
    width: 12px;
    height: 12px;
}

.neo-items-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--neo-space-lg);
    text-align: center;
    color: var(--neo-gray-400);
}

.neo-items-sidebar-empty svg {
    width: 32px;
    height: 32px;
    margin-bottom: var(--neo-space-sm);
    opacity: 0.5;
}

.neo-items-sidebar-empty span {
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-500);
}

.neo-items-sidebar-empty small {
    font-size: 12px;
    color: var(--neo-gray-400);
    margin-top: var(--neo-space-xs);
}

.neo-items-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--neo-space-xs);
    padding: var(--neo-space-sm);
    margin-top: var(--neo-space-xs);
    border-top: 1px solid var(--neo-gray-200);
    cursor: pointer;
    color: var(--neo-gray-500);
    font-size: 12px;
    font-weight: 500;
    transition: var(--neo-transition);
}

.neo-items-sidebar-footer:hover {
    background: var(--neo-gray-50);
    color: var(--neo-primary);
}

.neo-items-sidebar-footer svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   CONTENT AREA & PROGRAM CONTENT
======================================== */
.neo-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.neo-program-content {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.neo-program-content.active {
    display: flex;
}

/* ========================================
   HOME VIEW
======================================== */
.neo-home-view {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    background-image: radial-gradient(#ddd 1px, transparent 1px);
    background-size: 20px 20px;
    padding: var(--neo-space-xl);
}

.neo-home-content {
    text-align: center;
    max-width: 600px;
}

.neo-home-logo-img {
    /* Ancho fijo, alto automatico segun aspect ratio del logo. Sin max-height
       para que un logo cuadrado / vertical no quede recortado. */
    width: 320px;
    max-width: 100%;
    height: auto;
    margin: 0 auto var(--neo-space-lg);
    display: block;
}

.neo-home-subtitle {
    font-size: 16px;
    color: var(--neo-gray-500);
    margin-bottom: var(--neo-space-xl);
}

.neo-home-hint {
    font-size: 13px;
    color: var(--neo-gray-400);
    margin-bottom: var(--neo-space-lg);
}

.neo-home-shortcuts {
    display: flex;
    gap: var(--neo-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.neo-home-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-lg);
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-xl);
    cursor: pointer;
    transition: var(--neo-transition);
    /* Ancho fijo para que todos los shortcuts se alineen igual, sin
       depender del largo del texto. flex:0 0 aisla el basis del grow/shrink. */
    flex: 0 0 160px;
    width: 160px;
    box-sizing: border-box;
}
/* Override propio (mayor specificity) para que los shortcuts tapen la marca
   de agua .neo-home-neo-brand (fixed, z-index:0). Se separa de la regla base
   para poder tunearlo o desactivarlo sin tocar el estilo base del shortcut. */
.neo-home-shortcuts > .neo-home-shortcut {
    position: relative;
    z-index: 2;
}

.neo-home-shortcut:hover {
    border-color: var(--neo-primary);
    box-shadow: var(--neo-shadow-md);
    transform: translateY(-2px);
}

.neo-home-shortcut-icon {
    width: 48px;
    height: 48px;
    background: var(--neo-primary-light);
    border-radius: var(--neo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-home-shortcut-icon svg {
    width: 22px;
    height: 22px;
    color: var(--neo-primary);
}
/* Icon FontAwesome (<i>): mismo color primary que los SVG para que los
   shortcuts con fa-* queden alineados visualmente con los que usan svg. */
.neo-home-shortcut-icon i {
    color: var(--neo-primary);
    font-size: 20px;
    line-height: 1;
}

.neo-home-shortcut span {
    font-weight: 600;
    color: var(--neo-gray-800);
    font-size: 13px;
}

.neo-home-shortcut small {
    font-size: 13px;
    color: var(--neo-gray-500);
}

/* ========================================
   MODAL PREVIEW
======================================== */
.neo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50000;
    padding: var(--neo-space-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.neo-modal-overlay.active {
    display: flex;
}

.neo-modal {
    background: var(--neo-white);
    border-radius: var(--neo-radius-xl);
    box-shadow: var(--neo-shadow-xl);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.neo-modal-lg {
    width: 100%;
    max-width: 900px;
}

.neo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--neo-space-lg) var(--neo-space-xl);
    border-bottom: 1px solid var(--neo-gray-200);
    background: var(--neo-gray-50);
}

.neo-modal-title {
    display: flex;
    align-items: center;
    gap: var(--neo-space-md);
}

.neo-modal-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--neo-radius-full);
    background: var(--neo-primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-white);
    font-weight: 700;
    font-size: 16px;
}

.neo-modal-title-info h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--neo-gray-800);
    margin: 0;
}

.neo-modal-subtitle {
    font-size: 13px;
    color: var(--neo-gray-500);
}

.neo-modal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--neo-space-md);
}

.neo-modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--neo-white);
    border-radius: var(--neo-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-modal-close:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-modal-close svg {
    width: 18px;
    height: 18px;
}

.neo-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--neo-space-xl);
}

.neo-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--neo-space-md);
    padding: var(--neo-space-lg) var(--neo-space-xl);
    border-top: 1px solid var(--neo-gray-200);
    background: var(--neo-gray-50);
}

/* Modal de Papelera */
.neo-modal-md {
    width: 100%;
    max-width: 600px;
}

/* Modal de Eliminación CRUD - Estilo Elegante */
.neo-modal-delete {
    width: 100%;
    max-width: 380px;
    border-radius: var(--neo-radius-xl);
    overflow: hidden;
    position: relative;
}

.neo-modal-delete-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--neo-radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    transition: var(--neo-transition);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.neo-modal-delete-close:hover {
    background: white;
    color: var(--neo-danger);
    transform: rotate(90deg);
}

.neo-modal-delete-close svg {
    width: 16px;
    height: 16px;
}

.neo-modal-delete-body {
    padding: 40px 32px 24px;
    text-align: center;
    background: linear-gradient(180deg, #fef2f2 0%, white 100%);
}

.neo-modal-delete-icon {
    margin-bottom: 20px;
}

.neo-modal-delete-icon-bg {
    width: 72px;
    height: 72px;
    border-radius: var(--neo-radius-full);
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
    animation: deleteIconPulse 2s ease-in-out infinite;
}

@keyframes deleteIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Animación de spin para loading */
@keyframes spinAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-animation {
    animation: spinAnimation 1s linear infinite;
}

.neo-modal-delete-icon-bg svg {
    width: 32px;
    height: 32px;
    color: #dc2626;
}

.neo-modal-delete-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--neo-gray-900);
    margin: 0 0 8px 0;
}

.neo-modal-delete-text {
    font-size: 14px;
    color: var(--neo-gray-500);
    margin: 0;
    line-height: 1.5;
}

.neo-modal-delete-text strong {
    color: var(--neo-gray-700);
    font-weight: 500;
}

.neo-modal-delete-footer {
    display: flex;
    gap: 12px;
    padding: 20px 32px 28px;
    background: white;
}

.neo-modal-delete-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--neo-radius-lg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.neo-modal-delete-btn svg {
    width: 16px;
    height: 16px;
}

.neo-modal-delete-btn-cancel {
    background: var(--neo-gray-100);
    color: var(--neo-gray-700);
    border: 1px solid var(--neo-gray-200);
}

.neo-modal-delete-btn-cancel:hover {
    background: var(--neo-gray-200);
    border-color: var(--neo-gray-300);
}

.neo-modal-delete-btn-confirm {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.neo-modal-delete-btn-confirm:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Image Cropper Modal */
.neo-modal-cropper {
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}

.neo-modal-cropper .neo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neo-gray-200);
}

.neo-modal-cropper .neo-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--neo-gray-800);
    margin: 0;
}

.neo-modal-cropper .neo-modal-title svg {
    width: 20px;
    height: 20px;
    color: var(--neo-primary);
}

.neo-cropper-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.neo-cropper-container {
    position: relative;
    width: 100%;
    background: var(--neo-gray-900);
    border-radius: var(--neo-radius-lg);
    overflow: hidden;
}

.neo-cropper-image-wrapper {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#cropper-image {
    max-width: none;
    max-height: none;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.1s ease;
}

#cropper-image:active {
    cursor: grabbing;
}

.neo-cropper-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.neo-cropper-selection {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border: 3px solid white;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
}

.neo-cropper-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid white;
}

.neo-cropper-corner-nw {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    border-radius: 6px 0 0 0;
}

.neo-cropper-corner-ne {
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 6px 0 0;
}

.neo-cropper-corner-sw {
    bottom: -3px;
    left: -3px;
    border-right: none;
    border-top: none;
    border-radius: 0 0 0 6px;
}

.neo-cropper-corner-se {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 6px 0;
}

.neo-cropper-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.neo-cropper-zoom {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 280px;
}

.neo-cropper-zoom-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--neo-gray-300);
    background: white;
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-600);
    transition: var(--neo-transition);
}

.neo-cropper-zoom-btn:hover {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    background: var(--neo-primary-light);
}

.neo-cropper-zoom-btn svg {
    width: 18px;
    height: 18px;
}

#cropper-zoom-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    background: var(--neo-gray-200);
    border-radius: 3px;
    outline: none;
}

#cropper-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--neo-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.neo-cropper-hint {
    font-size: 12px;
    color: var(--neo-gray-400);
    margin: 0;
}

.neo-modal-cropper .neo-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--neo-gray-200);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.neo-image-upload-circle.has-image {
    padding: 0;
    overflow: hidden;
}

.neo-image-upload-circle.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.neo-image-upload-circle.has-image svg,
.neo-image-upload-circle.has-image span {
    display: none;
}

.neo-trash-list {
    display: flex;
    flex-direction: column;
    gap: var(--neo-space-sm);
}

.neo-trash-item {
    display: flex;
    align-items: center;
    gap: var(--neo-space-md);
    padding: var(--neo-space-md);
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    transition: var(--neo-transition);
}

.neo-trash-item:hover {
    background: var(--neo-white);
    border-color: var(--neo-gray-300);
}

.neo-trash-item-info {
    flex: 1;
}

.neo-trash-item-name {
    font-weight: 500;
    color: var(--neo-gray-800);
    margin-bottom: 2px;
}

.neo-trash-item-id {
    font-size: 12px;
    color: var(--neo-gray-500);
}

.neo-trash-item-actions {
    display: flex;
    gap: var(--neo-space-xs);
}

.neo-trash-item-actions .neo-btn {
    padding: var(--neo-space-xs) var(--neo-space-sm);
    font-size: 12px;
}


.neo-trash-empty {
    text-align: center;
    padding: var(--neo-space-xl);
    color: var(--neo-gray-500);
}

.neo-trash-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--neo-space-md);
    opacity: 0.5;
}

.neo-trash-empty p {
    margin: 0;
}

/* Items de papelera con estilo de tabs */
.neo-trash-tab-item {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-sm) var(--neo-space-md);
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    transition: var(--neo-transition);
    margin-bottom: var(--neo-space-xs);
}

.neo-trash-tab-item:hover {
    background: var(--neo-white);
    border-color: var(--neo-gray-300);
}

.neo-trash-tab-icon {
    width: 36px;
    height: 36px;
    background: var(--neo-danger-light);
    border-radius: var(--neo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-danger);
    flex-shrink: 0;
}

.neo-trash-tab-icon svg {
    width: 18px;
    height: 18px;
}

.neo-trash-tab-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.neo-trash-tab-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    color: var(--neo-gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-trash-tab-id {
    font-size: 12px;
    color: var(--neo-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-trash-tab-actions {
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
    flex-shrink: 0;
}

.neo-trash-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--neo-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-trash-action-btn svg {
    width: 14px;
    height: 14px;
}

.neo-trash-action-btn.restore {
    color: var(--neo-success);
}

.neo-trash-action-btn.restore:hover {
    background: var(--neo-success-light);
}

.neo-trash-action-btn.delete {
    color: var(--neo-gray-400);
}

.neo-trash-action-btn.delete:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

/* Preview Grid */
.neo-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--neo-space-lg);
}

.neo-preview-section {
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    overflow: hidden;
}

.neo-preview-section-full {
    grid-column: 1 / -1;
}

.neo-preview-section-header {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-md) var(--neo-space-lg);
    background: var(--neo-primary-lighter);
    border-bottom: 1px solid var(--neo-primary-light);
}

.neo-preview-section-header svg {
    width: 18px;
    height: 18px;
    color: var(--neo-primary);
}

.neo-preview-section-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.neo-preview-content {
    padding: var(--neo-space-md) var(--neo-space-lg);
}

.neo-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--neo-space-sm) 0;
    border-bottom: 1px solid var(--neo-gray-100);
}

.neo-preview-row:last-child {
    border-bottom: none;
}

.neo-preview-label {
    font-size: 13px;
    color: var(--neo-gray-500);
    font-weight: 500;
}

.neo-preview-value {
    font-size: 13px;
    color: var(--neo-gray-800);
    font-weight: 500;
    text-align: right;
}

.neo-preview-epitafio {
    font-style: italic;
    color: var(--neo-gray-600);
    line-height: 1.6;
    padding: var(--neo-space-md);
    background: var(--neo-gray-50);
    border-radius: var(--neo-radius-md);
    border-left: 3px solid var(--neo-primary);
}

@media (max-width: 768px) {
    .neo-preview-grid {
        grid-template-columns: 1fr;
    }
    
    .neo-modal {
        max-height: 100vh;
        border-radius: 0;
    }
    
    .neo-modal-overlay {
        padding: 0;
    }
}

/* ========================================
   MAIN CONTENT AREA
======================================== */
.neo-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ========================================
   BREADCRUMB BAR
======================================== */
.neo-breadcrumb-bar {
    background: var(--neo-white);
    border-bottom: 1px solid var(--neo-gray-200);
    padding: var(--neo-space-sm) var(--neo-space-xl);
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-xs) var(--neo-space-md);
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md);
    font-size: 13px;
    color: var(--neo-gray-600);
    text-decoration: none;
    transition: var(--neo-transition);
}

.neo-breadcrumb:hover {
    background: var(--neo-gray-200);
    color: var(--neo-gray-800);
}

.neo-breadcrumb svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   APP HEADER
======================================== */
.neo-app-header {
    background: var(--neo-white);
    border-bottom: 1px solid var(--neo-gray-200);
    padding: var(--neo-space-sm) var(--neo-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--neo-space-md);
    height: 56px;
    box-sizing: border-box;
}



.neo-header-left {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-header-right {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--neo-radius-md);
    border: 1px solid var(--neo-gray-300);
    background: var(--neo-white);
    color: var(--neo-gray-600);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-btn-icon:hover {
    background: var(--neo-gray-100);
    color: var(--neo-gray-800);
}

.neo-btn-icon.neo-btn-save {
    background: linear-gradient(135deg, #B19B82 0%, #A78E73 100%);
    border-color: #A78E73;
    color: white;
}

.neo-btn-icon.neo-btn-save:hover {
    background: linear-gradient(135deg, #A78E73 0%, #9F8466 100%);
    border-color: #9F8466;
    transform: translateY(-1px);
}

.neo-btn-icon svg {
    width: 18px;
    height: 18px;
}

.neo-btn-group {
    display: flex;
    align-items: center;
}

.neo-btn-group .neo-btn {
    border-radius: 0;
}

.neo-btn-group .neo-btn:first-child {
    border-radius: var(--neo-radius-md) 0 0 var(--neo-radius-md);
}

.neo-btn-group .neo-btn:last-child {
    border-radius: 0 var(--neo-radius-md) var(--neo-radius-md) 0;
    border-left: none;
}

/* Barra de acciones del listado */
.neo-list-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--neo-space-sm) 0;
    margin-bottom: var(--neo-space-md);
}

.neo-list-actions-left {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-list-actions-right {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-trash-btn {
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
    padding: var(--neo-space-xs) var(--neo-space-sm);
    border: 1px solid var(--neo-gray-300);
    background: var(--neo-white);
    border-radius: var(--neo-radius-md);
    color: var(--neo-gray-600);
    font-size: 13px;
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-trash-btn:hover {
    background: var(--neo-gray-100);
    color: var(--neo-gray-800);
}

.neo-trash-btn svg {
    width: 16px;
    height: 16px;
}

.neo-trash-btn .neo-trash-count {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
    padding: 2px 6px;
    border-radius: var(--neo-radius-full);
    font-size: 11px;
    font-weight: 600;
}

.neo-page-icon {
    width: 36px;
    height: 36px;
    background: var(--neo-primary-light);
    border-radius: var(--neo-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-primary);
    position: relative;
    flex-shrink: 0;
}

.neo-page-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 1px dashed var(--neo-primary);
    border-radius: var(--neo-radius-md);
    opacity: 0.3;
}

.neo-page-icon svg {
    width: 16px;
    height: 16px;
}

.neo-page-info {
    flex: 1;
}

.neo-page-title {
    font-family: var(--neo-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

.neo-page-subtitle {
    font-size: 13px;
    color: var(--neo-gray-500);
    margin: 0;
}

.neo-header-actions {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

/* ========================================
   TABS BAR
======================================== */
.neo-tabs-bar {
    position: sticky;
    top: 4px;
    display: flex;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    padding: var(--neo-space-xs);
    gap: var(--neo-space-xs);
    border-radius: 14px;
    box-shadow: var(--neo-shadow-lg);
    z-index: 500;
    width: fit-content;
    margin: 0 auto var(--neo-space-md) auto;
}

/* Contenedor con flechas para tabs-bar */
.neo-tabs-bar-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
}

.neo-tabs-nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--neo-shadow-sm);
    flex-shrink: 0;
}

.neo-tabs-nav-btn:hover {
    background: var(--neo-gray-50);
    border-color: var(--neo-primary);
    transform: scale(1.05);
}

.neo-tabs-nav-btn:active {
    transform: scale(0.95);
}

.neo-tabs-nav-btn svg {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-500);
    transition: color 0.2s;
}

.neo-tabs-nav-btn:hover svg {
    color: var(--neo-primary);
}

.neo-tabs-nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Contenedor de flotantes */
.neo-floating-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.neo-floating-toolbar.neo-floating-toolbar-centered {
    justify-content: center;
}

/* Edit bar: title | carousel | 3-dot */
#edit-floating-bar {
    justify-content: center;
    gap: 40px;
    align-items: center;
}
.neo-edit-bar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    max-width: 220px;
}
.neo-edit-bar-title .neo-detail-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
    flex-shrink: 0;
}
.neo-edit-bar-title-text {
    min-width: 0;
}
.neo-edit-bar-title .neo-detail-name {
    font-size: 14px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.neo-edit-bar-menu {
    flex-shrink: 0;
    position: relative;
}

.neo-floating-toolbar .neo-tabs-bar {
    position: relative;
    top: 0;
    margin: 0;
    transition: visibility 0.2s, opacity 0.2s;
}

/* DS Tabs carousel */
.neo-tabs-bar.ds-tabs-carousel {
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background: var(--neo-gray-50);
    border-radius: 14px;
}

/* Altura ajustada para toolbar flotante */
.neo-floating-toolbar .neo-tabs-bar.ds-tabs-carousel {
    padding: 8px 12px;
}

.ds-tabs-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

/* Estilos específicos para form-tabs-scroll */
#form-tabs-scroll {
    overflow-x: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--neo-gray-300) transparent;
}

#form-tabs-scroll::-webkit-scrollbar {
    height: 6px;
}

#form-tabs-scroll::-webkit-scrollbar-track {
    background: transparent;
}

#form-tabs-scroll::-webkit-scrollbar-thumb {
    background-color: var(--neo-gray-300);
    border-radius: 3px;
}

#form-tabs-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--neo-gray-400);
}

/* DS Nav Pages */
.ds-nav-page {
    display: none;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
    animation: dsPageIn 0.25s ease-out;
}
.ds-nav-page.active {
    display: flex;
}
#edit-main-tabs .ds-tabs-scroll::-webkit-scrollbar { display: none; }
#edit-main-tabs.neo-tabs-bar {
    width: calc(100vw - 950px) !important;
    min-width: 450px;
    max-width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
}
@media (max-width: 1600px) {
    #edit-main-tabs.neo-tabs-bar {
        width: calc(100vw - 950px) !important;
    }
}
@media (max-width: 1400px) {
    #edit-main-tabs.neo-tabs-bar {
        width: calc(100vw - 950px) !important;
    }
}
@media (max-width: 1200px) {
    #edit-main-tabs.neo-tabs-bar {
        width: calc(100vw - 850px) !important;
    }
}
@media (max-width: 1024px) {
    #edit-main-tabs.neo-tabs-bar {
        width: calc(100vw - 700px) !important;
    }
}
@media (max-width: 768px) {
    #edit-main-tabs.neo-tabs-bar {
        width: calc(100vw - 500px) !important;
        min-width: 350px;
    }
}
#edit-main-tabs .ds-tabs-scroll {
    display: flex !important;
    align-items: center;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    cursor: grab;
    flex: 1;
    width: 0;
    min-width: 0;
}
#edit-main-tabs .ds-tabs-scroll:active {
    cursor: grabbing;
}
.ds-carousel-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: auto;
    width: fit-content;
    justify-content: flex-start;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 14px;
}
#edit-main-tabs .ds-nav-dots {
    display: none;
}
@keyframes dsPageIn {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}
/* DS Nav Pills */
.ds-nav-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-600);
    background: var(--neo-white);
    border: 1.5px solid var(--neo-gray-200);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Estilos para botones deshabilitados */
.ds-nav-pill:disabled,
.ds-nav-pill[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--neo-gray-50);
    border-color: var(--neo-gray-150);
    color: var(--neo-gray-400);
}

.ds-nav-pill:disabled .ds-nav-icon,
.ds-nav-pill[disabled] .ds-nav-icon {
    opacity: 0.5;
}

/* Botones solo con icono (sin texto) */
.ds-nav-pill:not(:has(.ds-nav-label)) {
    padding: 8px;
    min-width: 36px;
    justify-content: center;
}

/* Tooltips nativos mejorados */
.ds-nav-pill[title] {
    position: relative;
}
.ds-nav-pill .ds-nav-label::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neo-gray-300);
    margin-left: 8px;
    vertical-align: middle;
    transition: all 0.2s ease;
}
/* Colores específicos para cada pill */
.ds-nav-pill[onclick*="tab-contactos"] .ds-nav-label::after {
    background: #22c55e;
}
.ds-nav-pill[onclick*="tab-fallecido"] .ds-nav-label::after {
    background: #22c55e;
}
.ds-nav-pill[onclick*="tab-velatorio"] .ds-nav-label::after {
    background: #ef4444;
}
.ds-nav-pill[onclick*="tab-misa"] .ds-nav-label::after {
    background: #ef4444;
}
.ds-nav-pill[onclick*="tab-destino"] .ds-nav-label::after {
    background: #f59e0b;
}
.ds-nav-pill[onclick*="ds-section-fallecido"] .ds-nav-label::after,
.ds-nav-pill[onclick*="ds-section-fallecimiento"] .ds-nav-label::after,
.ds-nav-pill[onclick*="ds-section-autorizante"] .ds-nav-label::after {
    background: #22c55e;
}
.ds-nav-pill[onclick*="ds-section-facturacion"] .ds-nav-label::after,
.ds-nav-pill[onclick*="ds-section-testigos"] .ds-nav-label::after {
    background: #f59e0b;
}
.ds-nav-pill[onclick*="ds-section-inventario"] .ds-nav-label::after,
.ds-nav-pill[onclick*="ds-section-avisos"] .ds-nav-label::after {
    background: #3b82f6;
}
.ds-nav-pill.active .ds-nav-label::after {
    box-shadow: 0 0 0 2px rgba(152, 125, 95, 0.15);
}
.neo-facturacion-menu .ds-nav-pill .ds-nav-label::after {
    display: none;
}
.ds-nav-pill:hover {
    color: var(--neo-gray-700);
    background: var(--neo-gray-50);
    border-color: var(--neo-gray-300);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.ds-nav-pill.active {
    color: var(--neo-primary);
    background: var(--neo-white);
    border-color: var(--neo-primary);
}

/* Dropdown de Guardar - Estilo Facturación */
.ds-nav-pill-dropdown {
    position: relative;
    display: inline-block;
}

.save-dropdown-menu {
    position: absolute;
    /* top y left se setean dinámicamente via JS */
    min-width: 220px;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 700;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.18s, visibility 0.18s, transform 0.18s;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

.save-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

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

.save-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-700);
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}

.save-dropdown-item:hover {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.save-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.save-dropdown-item:hover svg {
    opacity: 1;
}
.ds-nav-num {
    display: none;
}
.ds-nav-label {
    line-height: 1;
}
.ds-nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.ds-nav-pill.active .ds-nav-icon {
    opacity: 1;
    color: var(--neo-primary);
}
/* DS Nav Pill special - Datos del servicio */
.ds-nav-pill.ds-nav-pill-ds {
    border-left: 1.5px solid var(--neo-gray-200);
    margin-left: 3px;
    padding-left: 16px;
    border-radius: var(--neo-radius-full);
}
.ds-nav-pill.ds-nav-pill-ds.active {
    color: var(--neo-info);
    background: var(--neo-white);
    border-color: var(--neo-info);
    border-left-color: var(--neo-info);
}
.ds-nav-pill.ds-nav-pill-ds.active .ds-nav-label::after {
    background: var(--neo-info);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--neo-info) 25%, transparent);
}
.ds-nav-pill.ds-nav-pill-ds.active .ds-nav-icon {
    color: var(--neo-info);
}
/* DS Nav Dots */
.ds-nav-dots {
    display: none;
}
.ds-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neo-gray-200);
    transition: all 0.2s ease;
    cursor: pointer;
}
.ds-nav-dot.active {
    background: var(--neo-primary);
    width: 16px;
    border-radius: 3px;
}
/* Carousel button always visible */
.ds-carousel-btn.at-edge {
    opacity: 0.3;
    pointer-events: none;
}
.ds-carousel-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
    margin: 0 -2px;
}
.ds-carousel-btn:hover {
    background: var(--neo-gray-100);
}
.ds-carousel-btn svg {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-500);
}
.ds-carousel-btn:hover svg {
    color: var(--neo-primary);
}

.neo-tabs-separator {
    width: 1px;
    height: 22px;
    background: var(--neo-gray-200);
    margin: 0 2px;
    flex-shrink: 0;
    align-self: center;
}

.neo-tab.neo-tab-ds {
    background: transparent;
    color: var(--neo-gray-500);
}
.neo-tab.neo-tab-ds:hover {
    background: var(--neo-gray-50);
    color: var(--neo-gray-700);
}
.neo-tab.neo-tab-ds.active {
    background: var(--neo-primary);
    color: white;
}

/* Flotante izquierdo - Toggle Ver/Editar */
.neo-float-left {
    display: flex;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    padding: var(--neo-space-xs);
    border-radius: var(--neo-radius-full);
    box-shadow: var(--neo-shadow-lg);
    flex-shrink: 0;
}

.neo-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--neo-space-xs);
    padding: var(--neo-space-sm) var(--neo-space-md);
    border: none;
    background: transparent;
    color: var(--neo-gray-500);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--neo-radius-full);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    min-width: 80px;
}

.neo-toggle-btn:hover {
    color: var(--neo-gray-700);
    background: var(--neo-gray-100);
}

.neo-toggle-btn.active {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* Single toggle button (no pair) */
.neo-toggle-btn.neo-toggle-single {
    color: var(--neo-gray-600);
    background: transparent;
}
.neo-toggle-btn.neo-toggle-single:hover {
    color: var(--neo-primary);
    background: var(--neo-primary-light);
}

/* Flotante derecho - Acciones */
.neo-float-right {
    display: flex;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    padding: var(--neo-space-xs);
    gap: var(--neo-space-xs);
    border-radius: var(--neo-radius-full);
    box-shadow: var(--neo-shadow-lg);
    flex-shrink: 0;
    transition: visibility 0.2s, opacity 0.2s;
}

.neo-float-right.hidden {
    visibility: hidden;
    opacity: 0;
}

.neo-float-right .neo-btn {
    border-radius: var(--neo-radius-full);
    padding: var(--neo-space-sm) var(--neo-space-md);
    font-size: 13px;
}

/* Panel lateral de papelera */
.neo-trash-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--neo-white);
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.neo-trash-panel.active {
    right: 0;
}

.neo-trash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--neo-space-lg);
    background: var(--neo-gray-50);
}

.neo-trash-panel-title {
    display: flex;
    align-items: center;
    gap: var(--neo-space-md);
}

.neo-trash-panel-title svg {
    width: 24px;
    height: 24px;
    color: var(--neo-danger);
}

.neo-trash-panel-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--neo-danger);
    margin: 0;
}

.neo-trash-panel-subtitle {
    font-size: 13px;
    color: var(--neo-gray-600);
    margin: 0;
}

.neo-trash-panel-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--neo-white);
    border-radius: var(--neo-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-trash-panel-close:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-trash-panel-close svg {
    width: 18px;
    height: 18px;
}

.neo-trash-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--neo-space-md);
}

.neo-trash-panel-footer {
    padding: var(--neo-space-md) var(--neo-space-lg);
    border-top: 1px solid var(--neo-gray-200);
    background: var(--neo-gray-50);
}

.neo-trash-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1499;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.neo-trash-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.neo-tab {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-sm) var(--neo-space-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--neo-gray-500);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--neo-radius-full);
    transition: var(--neo-transition);
    white-space: nowrap;
}

.neo-tab:hover {
    color: var(--neo-gray-700);
    background: var(--neo-gray-100);
}

.neo-tab.active {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
    border-color: var(--neo-primary);
}

.neo-tab svg {
    width: 18px;
    height: 18px;
}

.neo-tab-indicator {
    width: 6px;
    height: 6px;
    border-radius: var(--neo-radius-full);
    background: var(--neo-success);
    margin-left: var(--neo-space-xs);
}

.neo-tab-indicator.warning {
    background: var(--neo-warning);
}

.neo-tab-indicator.danger {
    background: var(--neo-danger);
}

/* ========================================
   APP BODY
======================================== */
.neo-app-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.neo-app-main {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: var(--neo-gray-100);
    position: relative;
    container-type: inline-size;
}

/* When panel opens and main area shrinks, stack form fields vertically */
@container (max-width: 520px) {
    .neo-form-grid {
        grid-template-columns: 1fr !important;
    }
    .neo-form-with-image {
        flex-direction: column;
    }
    .neo-detail-grid {
        grid-template-columns: 1fr !important;
    }
    .neo-detail-header {
        flex-wrap: wrap;
    }
    .neo-header-actions {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
    }
    .neo-contactos-grid {
        flex-direction: column;
    }
    .neo-customer-grid {
        grid-template-columns: 1fr !important;
    }
    .ds-sections-row {
        grid-template-columns: 1fr !important;
    }
    /* Reduce font sizes to prevent line-wrapping in compressed layout */
    .neo-detail-value {
        font-size: 12.5px;
    }
    .neo-detail-label {
        font-size: 10.5px;
    }
    .neo-select-trigger {
        font-size: 11.5px;
    }
    .neo-select-title {
        font-size: 11.5px;
    }
    .neo-select-subtitle {
        font-size: 10px;
    }
    .neo-label {
        font-size: 11.5px;
    }
    .neo-input,
    .neo-select,
    .neo-textarea {
        font-size: 12px;
        padding: 9px 12px;
    }
    .neo-card-title {
        font-size: 13px;
    }
    .neo-section-edit-btn {
        font-size: 11px;
    }
    .neo-contacto-value {
        font-size: 11.5px;
    }
    .neo-contacto-label {
        font-size: 10px;
    }
    .neo-contacto-detail {
        font-size: 10px;
    }
}

.neo-app-main > .neo-floating-toolbar {
    position: sticky;
    top: 0;
    background: var(--neo-gray-100);
    padding-top: var(--neo-space-sm);
    padding-bottom: var(--neo-space-md);
    margin-left: calc(-1 * var(--neo-space-lg));
    margin-right: calc(-1 * var(--neo-space-lg));
    padding-left: var(--neo-space-lg);
    padding-right: var(--neo-space-lg);
    z-index: 500;
}

.neo-app-main > .neo-floating-toolbar::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--neo-gray-100);
    z-index: -1;
}

/* ========================================
   CARDS
======================================== */
.neo-card {
    background: var(--neo-white);
    border-radius: 14px;
    box-shadow: var(--neo-shadow-sm);
    margin-bottom: var(--neo-space-lg);
    border: 1px solid var(--neo-gray-150);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

@keyframes sectionHighlight {
    0% { border-color: var(--neo-gray-150); box-shadow: var(--neo-shadow-sm); }
    15% { border-color: var(--neo-primary); box-shadow: 0 0 0 3px rgba(152, 125, 95,0.18), var(--neo-shadow-sm); }
    100% { border-color: var(--neo-gray-150); box-shadow: var(--neo-shadow-sm); }
}
.neo-card-highlight {
    animation: sectionHighlight 1.6s ease-out;
}

.neo-card-header {
    padding: var(--neo-space-sm) var(--neo-space-lg);
    border-bottom: 1px solid var(--neo-gray-150);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--neo-gray-50);
}

.neo-card-title {
    font-size: 15px;
    font-weight: 400;
    color: var(--neo-gray-700);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-card-title svg {
    width: 18px;
    height: 18px;
    color: var(--neo-primary);
}

.neo-card-body {
    padding: var(--neo-space-xl);
}

.neo-card-footer {
    padding: var(--neo-space-lg) var(--neo-space-xl);
    border-top: 1px solid var(--neo-gray-150);
    background: var(--neo-gray-50);
    display: flex;
    justify-content: flex-end;
    gap: var(--neo-space-sm);
}

/* ========================================
   PLANTILLA CARDS
======================================== */
.neo-plantilla-card {
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.neo-plantilla-card:hover {
    border-color: var(--neo-primary);
    box-shadow: 0 4px 12px rgba(152, 125, 95, 0.15);
    transform: translateY(-2px);
}

.neo-plantilla-icon {
    width: 48px;
    height: 48px;
    background: var(--neo-primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-plantilla-icon svg {
    width: 24px;
    height: 24px;
    color: var(--neo-primary);
}

.neo-plantilla-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.neo-plantilla-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--neo-gray-800);
    margin: 0;
}

.neo-plantilla-desc {
    font-size: 12px;
    color: var(--neo-gray-500);
    margin: 0;
    line-height: 1.4;
}

/* ========================================
   INTERVINIENTE CARDS
======================================== */
.neo-interviniente-card {
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.neo-interviniente-card:hover {
    border-color: var(--neo-primary);
    box-shadow: 0 4px 12px rgba(152, 125, 95, 0.15);
    transform: translateY(-2px);
}

.neo-interviniente-card.neo-interviniente-add {
    border: 2px dashed var(--neo-gray-300);
    background: var(--neo-gray-50);
}

.neo-interviniente-card.neo-interviniente-add:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-lighter);
}

.neo-interviniente-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.neo-interviniente-info {
    flex: 1;
    min-width: 0;
}

.neo-interviniente-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--neo-gray-800);
    margin: 0 0 2px 0;
}

.neo-interviniente-rol {
    font-size: 12px;
    color: var(--neo-gray-500);
    margin: 0;
}

.neo-interviniente-delete {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--neo-gray-300);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.neo-interviniente-delete:hover {
    background: var(--neo-danger);
    border-color: var(--neo-danger);
}

.neo-interviniente-delete svg {
    width: 14px;
    height: 14px;
    color: var(--neo-gray-500);
    transition: color 0.2s ease;
}

.neo-interviniente-delete:hover svg {
    color: var(--neo-white);
}

.neo-interviniente-datos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--neo-gray-150);
}

.neo-interviniente-dato {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.neo-interviniente-label {
    font-size: 11px;
    color: var(--neo-gray-500);
    font-weight: 500;
    min-width: 60px;
}

.neo-interviniente-value {
    font-size: 12px;
    color: var(--neo-gray-700);
    flex: 1;
}


/* ========================================
   FORM ELEMENTS
======================================== */
.neo-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--neo-space-xl);
}

.neo-form-grid.cols-1 {
    grid-template-columns: 1fr;
}

.neo-form-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.neo-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--neo-space-lg);
    align-items: start;
}
.neo-customer-grid > .neo-card {
    margin: 0;
}
.neo-customer-grid .neo-form-grid {
    grid-template-columns: 1fr;
}
@media (max-width: 900px) {
    .neo-customer-grid {
        grid-template-columns: 1fr;
    }
    .neo-customer-grid .neo-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Contactos Grid */
.neo-contactos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    align-items: start;
    /* Altura dinámica - solo muestra lo necesario */
    min-height: auto;
    max-height: none;
}

.neo-contacto-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    cursor: pointer;
    transition: var(--neo-transition);
    position: relative;
}

@media (max-width: 768px) {
    .neo-contactos-grid {
        grid-template-columns: 1fr;
    }
}

.neo-contacto-card:hover {
    border-color: var(--neo-primary);
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.neo-contacto-card.neo-field-active {
    border-color: var(--neo-primary) !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(152, 125, 95,0.15) !important;
}

.neo-contacto-card.has-value {
    background: white;
    border-color: var(--neo-gray-300);
}

.neo-contacto-card.has-value .neo-contacto-value {
    color: var(--neo-gray-800);
    font-weight: 500;
}

.neo-contacto-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.neo-contacto-icon.contratante {
    background: linear-gradient(135deg, var(--neo-primary-light), #e8f4fd);
    color: var(--neo-primary);
}

.neo-contacto-icon.invitado {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #16a34a;
}

.neo-contacto-icon svg {
    width: 20px;
    height: 20px;
}

.neo-contacto-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.neo-contacto-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--neo-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.neo-contacto-value {
    font-size: 13px;
    color: var(--neo-gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-contacto-detail {
    font-size: 11px;
    color: var(--neo-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-contacto-arrow {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-400);
    flex-shrink: 0;
    opacity: 0;  /* Oculto por defecto */
    transition: opacity 0.2s ease;
}

.neo-contacto-card.has-value .neo-contacto-arrow {
    opacity: 1;  /* Visible cuando tiene valor */
}

.neo-contacto-add {
    min-width: 56px;
    height: 72px;
    border: 2px dashed var(--neo-gray-300);
    border-radius: var(--neo-radius-lg);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--neo-transition);
    color: var(--neo-gray-400);
}

.neo-contacto-add:hover {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    background: var(--neo-primary-light);
}

.neo-contacto-add svg {
    width: 24px;
    height: 24px;
}

.neo-contacto-card .neo-contacto-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neo-danger);
    color: white;
    border: 2px solid white;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.neo-contacto-card .neo-contacto-delete svg {
    width: 12px;
    height: 12px;
}

.neo-contacto-card[data-tipo="invitado"]:hover .neo-contacto-delete {
    display: flex;
}

#ds-facturacion-cards .neo-contacto-card:hover .neo-contacto-delete {
    display: flex;
}

#ds-testigos-cards .neo-contacto-card:hover .neo-contacto-delete {
    display: flex;
}

.neo-contacto-card {
    position: relative;
}

/* Panel Contacto Form */
.neo-contacto-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.neo-contacto-form .neo-form-group {
    margin-bottom: 0;
}

/* WhatsApp Input Validation */
.neo-whatsapp-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.neo-whatsapp-icon {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.neo-whatsapp-icon svg {
    width: 18px;
    height: 18px;
}

.neo-whatsapp-input {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.neo-whatsapp-status {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-whatsapp-status svg {
    width: 18px;
    height: 18px;
    display: none;
}

.neo-whatsapp-status .neo-whatsapp-valid {
    color: #16a34a;
}

.neo-whatsapp-status .neo-whatsapp-invalid {
    color: #dc2626;
}

.neo-whatsapp-input-wrapper.valid .neo-whatsapp-status .neo-whatsapp-valid {
    display: block;
}

.neo-whatsapp-input-wrapper.invalid .neo-whatsapp-status .neo-whatsapp-invalid {
    display: block;
}

.neo-whatsapp-input-wrapper.valid .neo-whatsapp-input {
    border-color: #16a34a;
    background-color: #f0fdf4;
}

.neo-whatsapp-input-wrapper.invalid .neo-whatsapp-input {
    border-color: #dc2626;
    background-color: #fef2f2;
}

.neo-input-hint {
    font-size: 11px;
    color: var(--neo-gray-400);
    margin-top: 4px;
}

.neo-input-hint.error {
    color: #dc2626;
}

.neo-input-hint.success {
    color: #16a34a;
}

/* Contratante match banner */
.neo-contratante-match {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--neo-primary-light) 0%, var(--neo-primary-lighter) 100%);
    border: 1px solid rgba(152, 125, 95, 0.3);
    border-radius: 10px;
    animation: neoMatchSlideIn 0.3s ease;
}
@keyframes neoMatchSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.neo-match-icon {
    width: 34px; height: 34px; min-width: 34px; margin-top: 2px;
    background: var(--neo-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.neo-match-icon svg { width: 17px; height: 17px; stroke: white; }
.neo-match-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.neo-match-title { font-size: 10px; color: var(--neo-primary-hover); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.neo-match-name { font-size: 14px; color: var(--neo-gray-800); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neo-match-detail { font-size: 11px; color: var(--neo-gray-500); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neo-match-btn {
    margin-top: 6px; padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: var(--neo-primary); color: white; border: none; cursor: pointer;
    transition: all 0.2s; white-space: nowrap; align-self: flex-start;
}
.neo-match-btn:hover { background: var(--neo-primary-hover); transform: scale(1.03); }
.neo-match-dismiss {
    width: 24px; height: 24px; padding: 0; border: none; cursor: pointer;
    background: none; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: all 0.15s; color: var(--neo-gray-400);
}
.neo-match-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--neo-gray-600); }
.neo-match-dismiss svg { width: 14px; height: 14px; }

/* Email Input Validation */
.neo-email-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.neo-email-icon {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    color: var(--neo-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.neo-email-icon svg {
    width: 16px;
    height: 16px;
}

.neo-email-input {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.neo-email-status {
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-email-status svg {
    width: 18px;
    height: 18px;
    display: none;
}

.neo-email-status .neo-email-valid {
    color: #16a34a;
}

.neo-email-status .neo-email-invalid {
    color: #dc2626;
}

.neo-email-input-wrapper.valid .neo-email-status .neo-email-valid {
    display: block;
}

.neo-email-input-wrapper.valid .neo-email-icon {
    color: #16a34a;
}

.neo-email-input-wrapper.invalid .neo-email-status .neo-email-invalid {
    display: block;
}

.neo-email-input-wrapper.invalid .neo-email-icon {
    color: #dc2626;
}

.neo-email-input-wrapper.valid .neo-email-input {
    border-color: #16a34a;
    background-color: #f0fdf4;
}

.neo-email-input-wrapper.invalid .neo-email-input {
    border-color: #dc2626;
    background-color: #fef2f2;
}

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

.neo-form-group.full-width {
    grid-column: 1 / -1;
}

.neo-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-500);
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
    transition: font-size 0.3s ease;
}

.neo-label-required {
    color: var(--neo-danger);
}

.neo-label-optional {
    font-weight: 400;
    color: var(--neo-gray-400);
    font-size: 13px;
}

.neo-field-hint {
    display: block;
    font-size: 11px;
    color: var(--neo-gray-400);
    margin-top: 4px;
}

.neo-input,
.neo-select,
.neo-textarea {
    width: 100%;
    padding: var(--neo-space-md);
    border: 1px solid transparent !important;
    border-radius: var(--neo-radius-md);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-800);
    background: var(--neo-white);
    transition: var(--neo-transition);
    min-height: 38px;
}

.neo-input:hover,
.neo-select:hover,
.neo-textarea:hover {
    border-color: transparent !important;
    background: var(--neo-gray-50);
}

.neo-input:focus,
.neo-select:focus,
.neo-textarea:focus {
    outline: none !important;
    border-color: var(--neo-primary) !important;
    box-shadow: none !important;
}

/* Toggle Switch */
.neo-toggle-switch-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.neo-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.neo-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.neo-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neo-gray-300);
    transition: 0.3s;
    border-radius: 24px;
}

.neo-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.neo-toggle-switch input:checked + .neo-toggle-slider {
    background-color: var(--neo-primary);
}

.neo-toggle-switch input:checked + .neo-toggle-slider:before {
    transform: translateX(20px);
}

.neo-toggle-label {
    font-size: 14px;
    color: var(--neo-gray-600);
}

/* Checkbox Styles */
.neo-checkbox-inline {
    display: flex;
    align-items: center;
}

.neo-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.neo-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.neo-checkbox-mark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--neo-gray-300);
    border-radius: var(--neo-radius-sm);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--neo-transition);
    flex-shrink: 0;
}

.neo-checkbox-mark::after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: var(--neo-transition);
}

.neo-checkbox:hover .neo-checkbox-mark {
    border-color: var(--neo-primary);
}

.neo-checkbox input:checked ~ .neo-checkbox-mark {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
}

.neo-checkbox input:checked ~ .neo-checkbox-mark::after {
    transform: rotate(45deg) scale(1);
}

/* Checkbox wrapper para listas */
.neo-checkbox-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.neo-checkbox-wrapper .neo-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 0;
}

.neo-checkbox-custom {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--neo-gray-300);
    border-radius: 4px;
    background: white;
    pointer-events: none;
    transition: all 0.2s;
}

.neo-checkbox-custom::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.neo-checkbox-wrapper:hover .neo-checkbox-custom {
    border-color: var(--neo-primary);
}

.neo-checkbox-wrapper .neo-checkbox:checked ~ .neo-checkbox-custom {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
}

.neo-checkbox-wrapper .neo-checkbox:checked ~ .neo-checkbox-custom::after {
    display: block;
}

.neo-checkbox-label {
    font-size: 14px;
    color: var(--neo-gray-700);
}

.neo-checkbox-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.neo-input::placeholder,
.neo-textarea::placeholder {
    color: var(--neo-gray-400);
}

.neo-input-icon {
    position: relative;
}

.neo-input-icon input {
    padding-right: 44px;
}

.neo-input-icon svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--neo-gray-400);
    pointer-events: none;
}

.neo-input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.neo-input-with-icon .neo-field-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--neo-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.neo-input-with-icon .neo-field-icon svg {
    width: 14px;
    height: 14px;
    min-width: 14px;
    color: var(--neo-primary);
}

.neo-input-with-icon input.neo-input {
    border: 1px solid transparent;
    background: var(--neo-white);
    transition: var(--neo-transition);
    flex: 1;
    min-width: 0;
    padding: var(--neo-space-md);
    border-radius: var(--neo-radius-md);
    min-height: 38px;
}

.neo-input-with-icon input.neo-input:hover {
    border-color: transparent;
    background: var(--neo-gray-50);
}

.neo-input-with-icon input.neo-input:focus {
    border-color: var(--neo-primary) !important;
    box-shadow: none !important;
    background: var(--neo-white);
    outline: none;
}

.neo-input-with-icon input.neo-input:focus {
    border-color: var(--neo-primary) !important;
    box-shadow: none !important;
    background: var(--neo-white);
    outline: none;
}

.neo-input-with-icon select.neo-input {
    border: 1px solid transparent;
    background: var(--neo-white);
    transition: var(--neo-transition);
    flex: 1;
    min-width: 0;
    padding: var(--neo-space-md);
    border-radius: var(--neo-radius-md);
    min-height: 38px;
}

.neo-input-with-icon select.neo-input:hover {
    border-color: transparent;
    background: var(--neo-gray-50);
}

.neo-input-with-icon select.neo-input:focus {
    border-color: var(--neo-primary) !important;
    box-shadow: none !important;
    background: var(--neo-white);
    outline: none;
}

.neo-input-with-icon textarea.neo-textarea {
    border: 1px solid transparent;
    background: var(--neo-white);
    transition: var(--neo-transition);
    flex: 1;
    min-width: 0;
    padding: var(--neo-space-md);
    border-radius: var(--neo-radius-md);
}

.neo-input-with-icon textarea.neo-textarea:hover {
    border-color: transparent;
    background: var(--neo-gray-50);
}

.neo-input-with-icon textarea.neo-textarea:focus {
    border-color: var(--neo-primary) !important;
    box-shadow: none !important;
    background: var(--neo-white);
    outline: none;
}

.neo-input-with-icon .neo-field-icon.icon-textarea {
    align-self: flex-start;
    margin-top: 10px;
}

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

.neo-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 44px;
    cursor: pointer;
}

/* ========================================
   SELECTABLE BUTTONS (NUEVO - Reemplaza selects)
======================================== */
.neo-selectable-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--neo-space-sm);
}

.neo-selectable-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--neo-space-xs);
    padding: var(--neo-space-sm) var(--neo-space-md);
    border: 1px solid var(--neo-gray-300);
    border-radius: var(--neo-radius-full);
    background: var(--neo-white);
    color: var(--neo-gray-600);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-selectable-btn:hover {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    background: var(--neo-primary-lighter);
}

.neo-selectable-btn.selected {
    border-color: var(--neo-primary);
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-selectable-btn.selected::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--neo-radius-full);
    background: var(--neo-primary);
}

.neo-selectable-btn svg {
    width: 16px;
    height: 16px;
}

.neo-selectable-btn.active {
    border-color: var(--neo-primary);
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-selectable-btn.active::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--neo-radius-full);
    background: var(--neo-primary);
}

/* Vertical selectable group for panels */
.neo-selectable-vertical {
    flex-direction: column;
}

.neo-selectable-vertical .neo-selectable-btn {
    width: 100%;
    justify-content: flex-start;
    padding: var(--neo-space-md);
    border-radius: var(--neo-radius-md);
}

/* Documento inline input - estilo licencias */
.ds-name-row {
    display: flex;
    align-items: center;
    gap: var(--neo-space-xl);
}
.ds-name-row .neo-input {
    flex: 1;
    min-width: 0;
}
.ds-name-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    border: 1px dashed var(--neo-gray-300);
    background: transparent;
    color: var(--neo-gray-400);
    cursor: pointer;
    transition: var(--neo-transition);
}
.ds-name-add-btn:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.ds-name-add-btn.active {
    border-style: solid;
    border-color: var(--neo-danger);
    background: #fee2e2;
    color: var(--neo-danger);
    transform: rotate(45deg);
}
.ds-name-add-btn svg {
    width: 16px;
    height: 16px;
}
#ds-section-fallecido,
#ds-section-fallecimiento,
#ds-section-autorizante,
#ds-section-facturacion, #ds-section-testigos,
#ds-section-inventario, #ds-section-avisos {
    scroll-margin-top: 70px;
}

#fact-section-comprobantes,
#fact-section-reportes,
#fact-section-preformas {
    scroll-margin-top: 70px;
}

/* Hacer que el main de facturación use flexbox para que los hijos puedan crecer */
#view-servicios-facturacion .neo-app-main {
    display: flex;
    flex-direction: column;
}

/* Hacer que el card de reportes ocupe el espacio vertical disponible */
#fact-section-reportes {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 600px;
}

#fact-section-reportes .neo-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Causa rows */
.ds-causa-row {
    margin-bottom: 6px;
}
.ds-causa-row:last-child {
    margin-bottom: 0;
}
.ds-causa-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    border: 1px solid var(--neo-gray-200);
    background: transparent;
    color: var(--neo-gray-400);
    cursor: pointer;
    transition: var(--neo-transition);
}
.ds-causa-remove-btn:hover {
    border-color: var(--neo-danger);
    background: #fee2e2;
    color: var(--neo-danger);
}
.ds-causa-remove-btn svg {
    width: 16px;
    height: 16px;
}

/* DS Fallecimiento time row */
.ds-fall-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--neo-gray-100);
    background: var(--neo-gray-50);
    border-radius: 0 0 12px 12px;
}
.ds-fall-time-input {
    font-size: 13px !important;
    font-weight: 600;
}

/* DS Sections Grid - 2 per row */
.ds-sections-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;  /* Espacio horizontal entre columnas */
    row-gap: 2px;  /* Espacio vertical entre rows */
    margin-top: 0;  /* Sin espacio vertical adicional */
}
.ds-sections-row:first-child {
    margin-top: 0;  /* Sin espacio ni en el primero */
}
.ds-sections-row .neo-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
@media (max-width: 700px) {
    .ds-sections-row {
        grid-template-columns: 1fr;
    }
}

.ds-doc-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.ds-doc-item .neo-selectable-btn {
    width: 100%;
    border-radius: 0;
    border: none;
    border-left: 2px solid transparent;
    padding: 10px 12px 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-600);
    background: transparent;
    justify-content: flex-start;
    display: flex;
}
.ds-doc-item .neo-selectable-btn:hover {
    background: var(--neo-primary-light);
    border-left-color: var(--neo-primary);
    color: var(--neo-gray-800);
}
.ds-doc-item .neo-selectable-btn.selected {
    background: var(--neo-primary-light);
    border-left-color: var(--neo-primary);
    color: var(--neo-primary);
}
.ds-doc-item .neo-selectable-btn.selected::before {
    display: none;
}
/* Ocultar el botón cuando el input row está visible */
.ds-doc-item.input-active .neo-selectable-btn {
    display: none;
}
.ds-doc-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px 6px 12px;
    background: var(--neo-primary-light);
    border: none;
    border-left: 2px solid var(--neo-primary);
    border-radius: 0;
    animation: dsDocFade 0.15s ease-out;
}
@keyframes dsDocFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ds-doc-input-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--neo-primary);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 40px;
}
.ds-doc-input-row .neo-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    font-size: 13px;
    letter-spacing: 0.5px;
    border: 1px solid var(--neo-gray-300);
    padding: 4px 10px;
    border-radius: 6px;
}
.ds-doc-input-row .neo-input:focus {
    border-color: var(--neo-primary);
}
.ds-doc-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: var(--neo-transition);
    flex-shrink: 0;
}
.ds-doc-action-btn svg {
    width: 14px;
    height: 14px;
}
.ds-doc-confirm {
    background: var(--neo-primary);
    color: white;
}
.ds-doc-confirm:hover {
    opacity: 0.85;
}
.ds-doc-cancel {
    background: var(--neo-gray-200);
    color: var(--neo-gray-600);
}
.ds-doc-cancel:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Select Trigger Button */
.neo-select-trigger {
    border: 1px solid transparent;  /* Mismo borde que input */
    border-radius: var(--neo-radius-md);
    font-family: inherit;
    font-size: 13px;
    color: var(--neo-gray-400);
    background: var(--neo-white);  /* Mismo fondo que input */
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* Chevron a la derecha */
    padding: var(--neo-space-md);  /* Mismo padding que input */
    transition: var(--neo-transition);
    min-height: 38px;
    position: relative;
    flex: 1;  /* Ocupa el espacio restante dentro de neo-input-with-icon */
    min-width: 0;  /* Permite que se reduzca si es necesario */
}

/* Reducir padding vertical cuando tiene altura fija para mantener alineación */
.neo-select-trigger[style*="min-height"] {
    padding-top: 7px;
    padding-bottom: 7px;
}

.neo-select-trigger:hover {
    border-color: transparent;
    background: var(--neo-gray-50);  /* Mismo hover que input */
}

.neo-select-trigger:focus {
    outline: none !important;
    border-color: var(--neo-primary) !important;
    box-shadow: none !important;
}

/* Campo activo - borde dorado cuando se está editando */
.neo-select-trigger.neo-field-active,
.neo-input.neo-field-active {
    border-color: var(--neo-primary) !important;
    box-shadow: 0 0 0 3px rgba(152, 125, 95,0.15) !important;
}

.neo-select-trigger.has-value {
    color: var(--neo-gray-800);
}

/* Contenido del selector - YA NO SE USA, el icono está fuera */
/* .neo-select-trigger .neo-select-content { ... } */

/* neo-select-info ahora está directamente en el botón */
.neo-select-trigger .neo-select-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    pointer-events: none;
}

/* Placeholder dentro de neo-select-info */
.neo-select-placeholder {
    font-size: 13px;
    color: var(--neo-gray-400);
}

/* Flecha derecha (chevron) - Oculta siempre */
.neo-select-trigger > svg {
    display: none;  /* Completamente oculta */
}

.neo-iva-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--neo-gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: var(--neo-gray-50);
    min-height: 38px;
}
.neo-iva-btn {
    flex: 1;
    padding: 8px 0;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid var(--neo-gray-200);
}
.neo-iva-btn:last-child {
    border-right: none;
}
.neo-iva-btn:hover {
    color: var(--neo-gray-700);
    background: var(--neo-gray-100);
}
.neo-iva-btn.active {
    background: var(--neo-primary);
    color: #fff;
    font-weight: 600;
    border-right-color: var(--neo-primary);
}
.neo-iva-row-toggle {
    display: flex;
    border: 1px solid var(--neo-gray-200);
    border-radius: 6px;
    overflow: hidden;
    background: var(--neo-gray-50);
}
.neo-iva-row-btn {
    flex: 1;
    padding: 3px 0;
    border: none;
    background: transparent;
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid var(--neo-gray-200);
    white-space: nowrap;
}
.neo-iva-row-btn:last-child { border-right: none; }
.neo-iva-row-btn:hover { color: var(--neo-gray-700); background: var(--neo-gray-100); }
.neo-iva-row-btn.active {
    background: var(--neo-primary);
    color: #fff;
    font-weight: 600;
    border-right-color: var(--neo-primary);
}

/* Contenido estructurado del select */
.neo-select-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.neo-select-placeholder {
    color: var(--neo-gray-400);
}

/* YA NO SE USA - Los iconos ahora usan .neo-field-icon */
/*
.neo-select-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--neo-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.neo-select-icon svg {
    width: 14px;
    height: 14px;
    color: var(--neo-primary);
}
*/

.neo-select-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;  /* Ocupa todo el espacio disponible */
    min-width: 0;
}

.neo-select-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-800);
    line-height: 1.2;
    transition: font-size 0.3s ease;
}

.neo-select-subtitle {
    font-size: 11px;
    color: var(--neo-gray-500);
    line-height: 1.2;
}

.neo-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.neo-select-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: var(--neo-primary-light);
    color: var(--neo-primary-dark);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.neo-select-tag-label {
    color: var(--neo-primary);
    opacity: 0.7;
}

.neo-horarios-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 0;
}

.neo-horario-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 7px;
    background: linear-gradient(135deg, var(--neo-gray-50) 0%, var(--neo-gray-100) 100%);
    border: 1px solid var(--neo-gray-200);
    color: var(--neo-gray-700);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
}

.neo-licencia-tag-viejo {
    border-left: 3px solid var(--neo-primary);
    background: linear-gradient(135deg, rgba(152, 125, 95,0.06) 0%, rgba(152, 125, 95,0.02) 100%);
}
.neo-licencia-tag-nuevo {
    border-left: 3px solid var(--neo-success);
    background: linear-gradient(135deg, rgba(45,106,79,0.06) 0%, rgba(45,106,79,0.02) 100%);
}
.neo-licencia-type-dot {
    width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.neo-licencia-type-dot.viejo { background: var(--neo-primary); }
.neo-licencia-type-dot.nuevo { background: var(--neo-success); }

.neo-horario-tag-editable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.neo-horario-tag-editable:hover {
    border-color: var(--neo-primary);
    background: linear-gradient(135deg, var(--neo-primary-light) 0%, #fff5eb 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.neo-ds-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12px;
    color: var(--neo-gray-700);
}
.neo-ds-detail-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--neo-primary);
    opacity: 0.7;
}
.neo-ds-detail-label {
    font-weight: 600;
    color: var(--neo-gray-500);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 65px;
    flex-shrink: 0;
}
.neo-ds-detail-val {
    color: var(--neo-gray-800);
    font-weight: 500;
}
.neo-horario-tag-editable.neo-licencia-tag-viejo:hover {
    border-color: var(--neo-primary);
    border-left-color: var(--neo-primary);
    background: linear-gradient(135deg, rgba(152, 125, 95,0.12) 0%, rgba(152, 125, 95,0.04) 100%);
}
.neo-horario-tag-editable.neo-licencia-tag-nuevo:hover {
    border-color: var(--neo-success);
    border-left-color: var(--neo-success);
    background: linear-gradient(135deg, rgba(45,106,79,0.12) 0%, rgba(45,106,79,0.04) 100%);
}

.neo-horario-tag-fecha {
    color: var(--neo-gray-700);
}

.neo-horario-tag-hora {
    color: var(--neo-primary);
    font-weight: 600;
    padding-left: 6px;
    border-left: 1px solid var(--neo-gray-300);
}

.neo-horario-tag-editable:hover .neo-horario-tag-hora {
    border-left-color: var(--neo-primary);
}

.neo-horario-tag-remove {
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--neo-gray-400);
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0;
}

.neo-horario-tag-remove svg {
    width: 10px;
    height: 10px;
}

.neo-horario-tag-editable:hover .neo-horario-tag-remove {
    opacity: 1;
}

.neo-horario-tag-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* DS panel triggers with tags */
#ds-padres-btn, #ds-inventario-btn, #ds-aut-domicilios-btn, #ds-domicilio-btn, #ds-fallecimiento-btn, #ds-autorizante-btn, #ds-fallecido-btn, #ds-fall-fecha-btn, #fact-reportes-fecha-btn {
    min-height: 38px;
    height: auto;
}
#ds-padres-btn .neo-select-content, #ds-inventario-btn .neo-select-content,
#ds-aut-domicilios-btn .neo-select-content,
#ds-domicilio-btn .neo-select-content, #ds-fallecimiento-btn .neo-select-content,
#ds-autorizante-btn .neo-select-content, #ds-fallecido-btn .neo-select-content,
#fact-reportes-fecha-btn .neo-select-content {
    flex: 1;
    min-width: 0;
}
#ds-padres-btn .neo-horarios-tags, #ds-inventario-btn .neo-horarios-tags,
#ds-aut-domicilios-btn .neo-horarios-tags,
#ds-domicilio-btn .neo-horarios-tags, #ds-fallecimiento-btn .neo-horarios-tags,
#ds-autorizante-btn .neo-horarios-tags, #ds-fallecido-btn .neo-horarios-tags,
#fact-reportes-fecha-btn .neo-horarios-tags {
    margin-top: 0;
}

.neo-horario-item.neo-horario-highlight {
    animation: horarioHighlight 2s ease;
}

@keyframes horarioHighlight {
    0%, 100% { background: white; }
    20%, 80% { background: var(--neo-primary-light); box-shadow: 0 0 0 2px var(--neo-primary); }
}

/* Cortejo Fúnebre */
/* Phone Prefix Selector */
.neo-phone-prefix-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--neo-gray-200);
    border-radius: 8px;
    overflow: visible;
    position: relative;
    transition: border-color 0.2s ease;
    background: var(--neo-white);
}
.neo-phone-prefix-wrapper:focus-within {
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 3px rgba(152, 125, 95, 0.08);
}
.neo-phone-prefix-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 6px 0 10px;
    cursor: pointer;
    height: 38px;
    flex-shrink: 0;
    user-select: none;
    transition: background 0.15s ease;
    border-radius: 8px 0 0 8px;
}
.neo-phone-prefix-selector:hover {
    background: var(--neo-gray-50);
}
.neo-phone-flag {
    width: 22px;
    height: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-radius: 2px;
    overflow: hidden;
}
.neo-phone-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}
.neo-phone-prefix-selector .neo-phone-code {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-700);
}
.neo-phone-prefix-arrow {
    width: 12px;
    height: 12px;
    color: var(--neo-gray-400);
    transition: transform 0.2s ease;
}
.neo-phone-prefix-selector.open .neo-phone-prefix-arrow {
    transform: rotate(180deg);
}
.neo-phone-input {
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    flex: 1;
    min-width: 0;
    box-shadow: none !important;
}
.neo-phone-input:focus {
    box-shadow: none !important;
}
.neo-phone-prefix-dropdown {
    position: fixed;
    min-width: auto;
    width: fit-content;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-150);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
    z-index: 9999;
    display: none;
    overflow: hidden;
    padding: 4px;
}
.neo-phone-prefix-dropdown.show {
    display: block;
    animation: prefixDropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes prefixDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.neo-phone-prefix-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 8px;
    white-space: nowrap;
}
.neo-phone-prefix-option:hover {
    background: var(--neo-gray-50);
}
.neo-phone-prefix-option.selected {
    background: rgba(152, 125, 95, 0.1);
}
.neo-phone-prefix-option .neo-phone-country {
    font-size: 13px;
    color: var(--neo-gray-400);
    font-weight: 400;
}
.neo-phone-prefix-option .neo-phone-code {
    font-size: 13px;
    color: var(--neo-gray-700);
    font-weight: 600;
}

/* Selector de Contratantes */
.neo-contratante-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.neo-selector-search {
    position: relative;
}
.neo-selector-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--neo-gray-400);
}
.neo-selector-search .neo-input {
    padding-left: 34px;
}
.neo-selector-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 420px;
    overflow-y: auto;
}
.neo-selector-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
}
.neo-selector-item:hover {
    background: var(--neo-gray-50);
    border-color: var(--neo-primary);
}
.neo-selector-item.selected {
    background: rgba(var(--neo-primary-rgb, 79, 70, 229), 0.06);
    border-color: var(--neo-primary);
}
.neo-selector-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--neo-gray-100);
    color: var(--neo-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.neo-selector-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.neo-selector-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.neo-selector-detail {
    font-size: 11px;
    color: var(--neo-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.neo-selector-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--neo-primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.neo-selector-item.selected .neo-selector-check {
    opacity: 1;
}
.neo-selector-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--neo-gray-400);
    gap: 8px;
}
.neo-selector-empty svg {
    width: 40px;
    height: 40px;
    opacity: 0.4;
}
.neo-selector-empty p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--neo-gray-500);
}
.neo-selector-empty span {
    font-size: 12px;
    color: var(--neo-gray-400);
}

.neo-cortejo-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--neo-gray-200);
}

.neo-cortejo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.neo-cortejo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid var(--neo-gray-300);
    border-radius: var(--neo-radius-md);
    background: white;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-600);
    cursor: pointer;
    transition: var(--neo-transition);
    font-family: inherit;
}

.neo-cortejo-toggle:hover {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
}

.neo-cortejo-toggle.active {
    border-color: var(--neo-primary);
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-cortejo-toggle-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--neo-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--neo-transition);
    flex-shrink: 0;
}

.neo-cortejo-toggle-check svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: var(--neo-transition);
    color: white;
}

.neo-cortejo-toggle.active .neo-cortejo-toggle-check {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
}

.neo-cortejo-toggle.active .neo-cortejo-toggle-check svg {
    opacity: 1;
}

.neo-cortejo-toggle-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.neo-cortejo-help-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    background: var(--neo-gray-50);
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: var(--neo-transition);
    font-family: inherit;
}

.neo-cortejo-help-btn:hover {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    background: var(--neo-primary-light);
}

.neo-cortejo-help-btn svg {
    width: 15px;
    height: 15px;
}

.neo-cortejo-body {
    margin-top: 12px;
    animation: fadeSlideDown 0.3s ease;
}

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

.neo-cortejo-input-wrap {
    position: relative;
}

.neo-cortejo-input-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    color: var(--neo-gray-400);
    pointer-events: none;
}

.neo-cortejo-input-wrap .neo-textarea {
    padding-left: 34px;
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    resize: vertical;
}

.neo-paste-zone {
    border: 2px dashed var(--neo-gray-300);
    border-radius: var(--neo-radius-lg);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--neo-gray-50);
    min-height: 100px;
}
.neo-paste-zone:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-light);
}
.neo-paste-zone:focus-within {
    border-color: var(--neo-primary);
    background: white;
    border-style: solid;
}
.neo-paste-zone-icon {
    width: 48px;
    height: 48px;
    color: var(--neo-gray-300);
    transition: color 0.2s ease;
}
.neo-paste-zone:hover .neo-paste-zone-icon {
    color: var(--neo-primary);
}
.neo-paste-zone-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-400);
    transition: color 0.2s ease;
}
.neo-paste-zone:hover .neo-paste-zone-label {
    color: var(--neo-primary);
}
.neo-paste-zone textarea {
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    color: var(--neo-gray-700);
    min-height: 60px;
}
/* Compact paste zone for cortejo panel */
#panel-cortejo .neo-paste-zone {
    min-height: 0; padding: 0;
}
#panel-cortejo .neo-paste-zone textarea {
    min-height: 22px; padding: 4px 10px; font-size: 11px; text-align: center;
}
#panel-cortejo .neo-paste-zone.has-content,
#panel-cortejo .neo-paste-zone.has-error {
    padding: 0;
}
.neo-paste-zone.has-content {
    padding: 24px 16px;
    align-items: center;
    border-color: var(--neo-success);
    border-style: solid;
    background: var(--neo-gray-50);
}
.neo-paste-zone.has-content .neo-paste-zone-placeholder {
    display: none !important;
}
.neo-paste-zone.has-error {
    padding: 32px 16px;
    align-items: center;
    border-color: #ef4444;
    border-style: dashed;
    background: rgba(239,68,68,0.03);
}
.neo-paste-zone.has-error .neo-paste-zone-placeholder {
    display: none !important;
}

.neo-cortejo-preview {
    margin-top: 12px;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    overflow: hidden;
    animation: fadeSlideDown 0.3s ease;
}

.neo-cortejo-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--neo-gray-50);
    border-bottom: 1px solid var(--neo-gray-200);
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-600);
}

.neo-cortejo-preview-header svg {
    width: 14px;
    height: 14px;
    color: var(--neo-primary);
}

.neo-cortejo-iframe-container {
    height: 250px;
    background: var(--neo-gray-100);
    position: relative;
}

.neo-cortejo-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.neo-map-activate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
.neo-map-activate-overlay:hover {
    background: rgba(0,0,0,0.12);
}
.neo-map-activate-overlay span {
    background: white;
    color: var(--neo-gray-700);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.neo-map-activate-overlay:hover span {
    opacity: 1;
}
.neo-map-activate-overlay.active {
    display: none;
}

/* Tutorial Panel */
.neo-tutorial-container {
    padding: 4px 0;
}

.neo-tutorial-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--neo-primary-light);
    border-radius: var(--neo-radius-lg);
    margin-bottom: 20px;
}

.neo-tutorial-intro-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: var(--neo-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-tutorial-intro-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.neo-tutorial-intro p {
    font-size: 13px;
    color: var(--neo-gray-700);
    line-height: 1.5;
    margin: 0;
}

.neo-tutorial-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.neo-tutorial-step {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--neo-gray-100);
}

.neo-tutorial-step:last-child {
    border-bottom: none;
}

.neo-tutorial-step-number {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--neo-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-primary);
    margin-top: 1px;
}

.neo-tutorial-step-content h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-800);
    margin: 0 0 4px 0;
}

.neo-tutorial-step-content p {
    font-size: 12.5px;
    color: var(--neo-gray-600);
    line-height: 1.5;
    margin: 0;
}

.neo-tutorial-step-content code {
    background: var(--neo-gray-100);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--neo-primary);
}

.neo-tutorial-tip {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #FFF8E1;
    border-radius: var(--neo-radius-md);
    margin-top: 16px;
    border: 1px solid #FFE082;
}

.neo-tutorial-tip svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    color: #F9A825;
    margin-top: 1px;
}

.neo-tutorial-tip div {
    font-size: 12px;
    color: var(--neo-gray-700);
    line-height: 1.5;
}

.neo-tutorial-tip strong {
    color: var(--neo-gray-800);
}

/* Modal Cortejo Stepper */
.neo-cortejo-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 9999; align-items: center; justify-content: center;
    padding: 24px; backdrop-filter: blur(4px);
}
.neo-cortejo-modal-overlay.active { display: flex; }
.neo-cortejo-modal {
    background: white; border-radius: var(--neo-radius-xl); width: 100%;
    max-width: 560px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3); animation: neoModalIn 0.25s ease;
}
@keyframes neoModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.neo-cortejo-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--neo-gray-100);
}
.neo-cortejo-modal-header h3 {
    font-size: 15px; font-weight: 600; color: var(--neo-gray-800);
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.neo-cortejo-modal-header h3 svg { width: 18px; height: 18px; color: var(--neo-primary); }
.neo-cortejo-modal-close {
    width: 32px; height: 32px; border: none; background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--neo-gray-500); transition: all 0.15s ease;
}
.neo-cortejo-modal-close:hover { background: var(--neo-gray-200); color: var(--neo-gray-700); }
.neo-cortejo-modal-close svg { width: 16px; height: 16px; }

/* Progress */
.neo-cs-progress { display: flex; gap: 4px; padding: 0 20px 16px; }
.neo-cs-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--neo-gray-100); transition: background 0.3s; }
.neo-cs-bar.done { background: var(--neo-primary); }

/* Body */
.neo-cs-body {
    padding: 28px 28px 20px; text-align: center; min-height: 280px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#cortejo-panel-tutorial .neo-cs-body {
    min-height: 0; padding: 16px;
}
#cortejo-panel-tutorial .neo-cs-visual {
    max-width: 100%; padding: 14px; margin-bottom: 16px;
}
#cortejo-panel-tutorial .neo-cs-title { font-size: 14px; }
#cortejo-panel-tutorial .neo-cs-desc { font-size: 12px; }

/* Visual mockups */
.neo-cs-visual {
    width: 100%; max-width: 380px; border-radius: var(--neo-radius-lg);
    overflow: hidden; margin-bottom: 24px; border: 1px solid var(--neo-gray-100);
    background: var(--neo-gray-50); padding: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.neo-cs-mock-bar {
    width: 100%; background: white; border-radius: 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1); padding: 10px 14px;
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--neo-gray-400);
}
.neo-cs-mock-bar svg { width: 16px; height: 16px; min-width: 16px; }
.neo-cs-mock-bar .mock-text { color: var(--neo-gray-600); }
.neo-cs-mock-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #4285f4; color: white; border-radius: 20px;
    padding: 7px 14px; font-size: 11px; font-weight: 500;
}
.neo-cs-mock-btn svg { width: 13px; height: 13px; }
.neo-cs-mock-menu {
    background: white; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    padding: 4px 0; text-align: left; width: 85%;
}
.neo-cs-mock-menu-item { padding: 7px 14px; font-size: 11.5px; color: var(--neo-gray-500); }
.neo-cs-mock-menu-item.hl { background: #e8f0fe; color: #1a73e8; font-weight: 600; border-radius: 4px; }
.neo-cs-mock-tabs { display: flex; width: 85%; border-bottom: 2px solid var(--neo-gray-200); }
.neo-cs-mock-tab { padding: 7px 14px; font-size: 11.5px; color: var(--neo-gray-400); position: relative; }
.neo-cs-mock-tab.active { color: #1a73e8; font-weight: 600; }
.neo-cs-mock-tab.active::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #1a73e8;
}
.neo-cs-mock-code {
    width: 85%; background: #f8f9fa; border: 1px solid var(--neo-gray-200);
    border-radius: 8px; padding: 10px 14px; font-family: monospace;
    font-size: 10px; color: var(--neo-gray-400); text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;
}
.neo-cs-mock-copy {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: #1a73e8; color: white; border: none; border-radius: 4px;
    padding: 3px 10px; font-size: 10px; font-weight: 600;
}
.neo-cs-mock-paste {
    width: 85%; border: 2px dashed var(--neo-primary); border-radius: 10px;
    padding: 14px; display: flex; flex-direction: column;
    align-items: center; gap: 4px; background: var(--neo-primary-light);
}
.neo-cs-mock-paste svg { width: 22px; height: 22px; color: var(--neo-primary); }
.neo-cs-mock-paste span { font-size: 11px; color: var(--neo-primary); font-weight: 500; }

/* Step number + text */
.neo-cs-num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--neo-primary);
    color: white; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.neo-cs-title { font-size: 16px; font-weight: 600; color: var(--neo-gray-800); margin: 0 0 6px; }
.neo-cs-desc { font-size: 13px; color: var(--neo-gray-500); margin: 0; line-height: 1.6; max-width: 380px; }
.neo-cs-desc strong { color: var(--neo-gray-700); }
.neo-cs-tag {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--neo-primary-light); color: var(--neo-primary);
    padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 11.5px;
}
.neo-cs-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: #1a73e8; font-weight: 600; font-size: 13px; text-decoration: none;
    margin-top: 12px;
}
.neo-cs-link svg { width: 14px; height: 14px; }

/* Footer */
.neo-cs-footer {
    padding: 12px 20px 16px; display: flex; align-items: center; justify-content: space-between;
}
.neo-cs-counter { font-size: 12px; color: var(--neo-gray-400); }
.neo-cs-btns { display: flex; gap: 8px; }
.neo-cs-btns .neo-btn { display: flex; align-items: center; }

/* Client Table Inline Elements */
.neo-tbl-input {
    border: 1px solid var(--neo-gray-200); border-radius: var(--neo-radius-sm);
    padding: 4px 8px; font-size: 12px; color: var(--neo-gray-700);
    background: var(--neo-white); width: 100%; transition: all 0.15s ease;
    font-family: inherit;
}
.neo-tbl-input:focus { outline: none; border-color: var(--neo-primary); box-shadow: 0 0 0 2px var(--neo-primary-light); }
.neo-tbl-input::placeholder { color: var(--neo-gray-300); }
.neo-tbl-input-sm { max-width: 140px; text-align: center; }
.neo-tbl-input-duo { display: flex; flex-direction: column; gap: 4px; }
.neo-tbl-input-duo .neo-tbl-input { flex: 1; min-width: 0; }

.neo-tbl-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; align-items: center; }
.neo-tbl-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
    background: var(--neo-primary-light); color: var(--neo-primary);
}
.neo-tbl-tag-blue { background: #e8f0fe; color: #1a73e8; }
.neo-tbl-tag-green { background: #ecfdf5; color: #059669; }
.neo-tbl-tag-purple { background: #f3e8ff; color: #7c3aed; }
.neo-tbl-tag-red { background: #fef2f2; color: #dc2626; }

.neo-tbl-stat {
    font-size: 13px; font-weight: 600; color: var(--neo-gray-700); text-align: center;
}
.neo-tbl-stat-zero { color: var(--neo-gray-300); }
.neo-stat-link { cursor: pointer; border-radius: 6px; padding: 2px 6px; transition: all 0.15s; display: inline-flex; align-items: center; gap: 4px; }
.neo-stat-link svg { width: 13px; height: 13px; opacity: 0.35; transition: all 0.15s; flex-shrink: 0; }
.neo-stat-link:hover { background: var(--neo-primary-light); color: var(--neo-primary); }
.neo-stat-link:hover svg { opacity: 1; stroke: var(--neo-primary); }

/* Phone Input */
.neo-phone-input-wrapper {
    display: flex;
    border: 1px solid var(--neo-gray-300);
    border-radius: var(--neo-radius-md);
    overflow: hidden;
    transition: var(--neo-transition);
    background: var(--neo-white);
}

.neo-phone-input-wrapper:hover {
    border-color: var(--neo-gray-400);
}

.neo-phone-input-wrapper:focus-within {
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 3px var(--neo-primary-light);
}

.neo-phone-country {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-md);
    background: var(--neo-gray-50);
    border-right: 1px solid var(--neo-gray-300);
    cursor: pointer;
    font-size: 13px;
    color: var(--neo-gray-600);
    transition: var(--neo-transition);
}

.neo-phone-country:hover {
    background: var(--neo-gray-100);
}

.neo-phone-country img {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: var(--neo-shadow-xs);
}

.neo-phone-input-wrapper input {
    flex: 1;
    border: none;
    padding: var(--neo-space-md);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    min-width: 0;
}

/* Image Upload Circle */
.neo-image-upload-circle {
    width: 115px;
    height: 115px;
    border-radius: var(--neo-radius-full);
    border: 2px dashed var(--neo-gray-300);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--neo-transition);
    background: var(--neo-gray-50);
    position: relative;
    overflow: hidden;
}

.neo-image-upload-circle:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-lighter);
}

.neo-image-upload-circle::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed var(--neo-gray-300);
    border-radius: var(--neo-radius-full);
    pointer-events: none;
    transition: var(--neo-transition);
}

.neo-image-upload-circle:hover::before {
    border-color: var(--neo-primary);
    opacity: 0.5;
}

.neo-image-upload-circle svg {
    width: 40px;
    height: 40px;
    color: var(--neo-gray-400);
    margin-bottom: var(--neo-space-sm);
    transition: var(--neo-transition);
}

.neo-image-upload-circle:hover svg {
    color: var(--neo-primary);
    transform: scale(1.1);
}

.neo-image-upload-circle span {
    font-size: 13px;
    color: var(--neo-gray-500);
    font-weight: 500;
}

/* Form with image layout */
.neo-form-with-image {
    display: flex;
    gap: var(--neo-space-2xl);
}

.neo-form-fields {
    flex: 1;
}

.neo-form-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--neo-space-lg);
    gap: var(--neo-space-sm);
    margin-right: 20px;
}

.neo-form-image-hint {
    font-size: 13px;
    color: var(--neo-gray-400);
    text-align: center;
    max-width: 140px;
}

/* Form Hint */
.neo-form-hint {
    font-size: 13px;
    color: var(--neo-gray-500);
    margin-top: var(--neo-space-xs);
}

/* ========================================
   BUTTONS
======================================== */
.neo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-sm) var(--neo-space-lg);
    border: none;
    border-radius: var(--neo-radius-md);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--neo-transition);
    text-decoration: none;
    white-space: nowrap;
}

.neo-btn svg {
    width: 18px;
    height: 18px;
}

.neo-btn-sm {
    padding: var(--neo-space-xs) var(--neo-space-md);
    font-size: 13px;
}

.neo-btn-sm svg {
    width: 16px;
    height: 16px;
}

.neo-btn-lg {
    padding: var(--neo-space-md) var(--neo-space-xl);
    font-size: 13px;
}

.neo-btn-default {
    background: var(--neo-white);
    color: var(--neo-gray-700);
    border: 1px solid var(--neo-gray-300);
}

.neo-btn-default:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-400);
}

.neo-btn-primary {
    background: linear-gradient(135deg, #B19B82 0%, #A78E73 100%);
    color: var(--neo-white);
    box-shadow: var(--neo-shadow-primary);
}

.neo-btn-primary:hover {
    background: linear-gradient(135deg, #A78E73 0%, #9F8466 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(152, 125, 95, 0.35);
}

.neo-btn-ghost {
    background: transparent;
    color: var(--neo-gray-600);
}

.neo-btn-ghost:hover {
    background: var(--neo-gray-100);
    color: var(--neo-gray-800);
}

.neo-btn-danger {
    background: var(--neo-danger);
    color: var(--neo-white);
}

.neo-btn-danger:hover {
    background: #a93226;
}

.neo-btn-danger-outline {
    background: var(--neo-white);
    color: var(--neo-danger);
    border-color: var(--neo-danger);
}

.neo-btn-danger-outline:hover {
    background: var(--neo-danger-light);
}

.neo-btn-primary-outline {
    background: var(--neo-white);
    color: var(--neo-primary);
    border-color: var(--neo-primary);
}

.neo-btn-primary-outline:hover {
    background: var(--neo-primary-light);
}

.neo-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--neo-radius-md);
}

/* ========================================
   PANEL LATERAL
======================================== */
.neo-panel {
    width: var(--neo-panel-width);
    background: var(--neo-white);
    border-left: 1px solid var(--neo-gray-200);
    display: flex;
    flex-direction: column;
    transition: var(--neo-transition-slow);
    overflow: hidden;
    box-shadow: var(--neo-shadow-lg);
}

.neo-panel.neo-panel-collapsed {
    width: 0;
    border-left: none;
    box-shadow: none;
}

/* Panel de herramientas - alinear con toolbar */
#herramientas-panel {
    padding-top: 16px;
    background: var(--neo-gray-100);
    overflow: hidden;
    border-left: none;
    display: flex;
    flex-direction: column;
}

#herramientas-panel .neo-panel-header {
    background: var(--neo-gray-50);
    flex-shrink: 0;
}

#herramientas-panel .neo-panel-body {
    overflow-y: auto;
    flex: 1;
    background: var(--neo-white);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#herramientas-panel .neo-panel-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Panel de intervinientes - mismo tratamiento */
#intervinientes-panel {
    padding-top: 16px;
    background: var(--neo-gray-100);
    overflow: hidden;
    border-left: none;
    display: flex;
    flex-direction: column;
}

#intervinientes-panel .neo-panel-header {
    background: var(--neo-gray-50);
    flex-shrink: 0;
}

#intervinientes-panel .neo-panel-body {
    overflow-y: auto;
    flex: 1;
    background: var(--neo-white);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#intervinientes-panel .neo-panel-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Panel de variables - mismo tratamiento */
#variables-panel {
    padding-top: 16px;
    background: var(--neo-gray-100);
    overflow: hidden;
    border-left: none;
    display: flex;
    flex-direction: column;
}

#variables-panel .neo-panel-header {
    background: var(--neo-gray-50);
    flex-shrink: 0;
}

#variables-panel .neo-panel-body {
    overflow-y: auto;
    flex: 1;
    background: var(--neo-white);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#variables-panel .neo-panel-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Ocultar scrollbar de neo-app-main en vista de formularios */
#view-servicios-formularios .neo-app-main {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#view-servicios-formularios .neo-app-main::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.neo-panel-header {
    padding: var(--neo-space-lg);
    border-bottom: 1px solid var(--neo-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    background: var(--neo-gray-50);
}

.neo-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    flex: 1;
    min-width: 0;
}

.neo-panel-title svg {
    width: 18px;
    height: 18px;
    color: var(--neo-primary);
}

.neo-panel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    transition: var(--neo-transition);
}

.neo-panel-close:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-panel-close svg {
    width: 16px;
    height: 16px;
}

.neo-panel-trash {
    position: relative;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    transition: var(--neo-transition);
    margin-left: auto;
    margin-right: 8px;
}

.neo-panel-trash:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-panel-trash svg {
    width: 16px;
    height: 16px;
}

.neo-panel-trash-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--neo-danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.neo-panel-back {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    transition: var(--neo-transition);
    flex-shrink: 0;
    margin-right: 6px;
}
.neo-panel-back:hover {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}
.neo-panel-back svg {
    width: 16px;
    height: 16px;
}
.neo-panel-back.visible {
    display: flex;
}

/* Epitafio items */
/* CRUD Panel Styles */
.neo-crud-form {
    display: none;
}

.neo-crud-form.active {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    padding-left: 16px;
    border-left: 2px solid var(--neo-primary);
    background: var(--neo-primary-light);
    margin-bottom: 8px;
}

.neo-crud-form-icon {
    width: 32px;
    height: 32px;
    background: var(--neo-primary-light);
    border-radius: var(--neo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-primary);
    flex-shrink: 0;
}

.neo-crud-form-icon svg {
    width: 16px;
    height: 16px;
}

.neo-crud-form-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--neo-primary);
    border-radius: var(--neo-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-800);
    background: white;
    outline: none;
}

.neo-crud-form-input:focus {
    box-shadow: 0 0 0 2px var(--neo-primary-light);
}

.neo-crud-form-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Formulario completo CRUD (con múltiples campos) */
.neo-crud-form-full {
    display: none;
    position: relative;
    background: white;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    margin-bottom: 16px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.neo-crud-form-full.active {
    display: block;
}

.neo-crud-form-full-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--neo-primary-light) 0%, rgba(152, 125, 95, 0.05) 100%);
    border-bottom: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg) var(--neo-radius-lg) 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--neo-gray-800);
}

.neo-crud-form-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.neo-crud-form-save-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: linear-gradient(135deg, #B19B82 0%, #A78E73 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: var(--neo-radius-full);
    transition: var(--neo-transition);
    box-shadow: 0 2px 4px rgba(152, 125, 95, 0.3);
}

.neo-crud-form-save-btn:hover {
    background: linear-gradient(135deg, #A78E73 0%, #9F8466 100%);
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(152, 125, 95, 0.4);
}

.neo-crud-form-save-btn svg {
    width: 14px;
    height: 14px;
}

.neo-crud-form-full-close {
    width: 28px;
    height: 28px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    border-radius: var(--neo-radius-full);
    transition: var(--neo-transition);
}

.neo-crud-form-full-close:hover {
    background: var(--neo-gray-100);
    color: var(--neo-danger);
}

.neo-crud-form-full-close svg {
    width: 14px;
    height: 14px;
}

.neo-crud-form-full-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 0 0 var(--neo-radius-lg) var(--neo-radius-lg);
}

.neo-crud-form-full-body .neo-form-group {
    margin-bottom: 0;
}

.neo-crud-form-full-body .neo-label {
    font-size: 12px;
    margin-bottom: 6px;
}

.neo-crud-form-full-body .neo-input {
    padding: 8px 12px;
    font-size: 13px;
}

/* Grid de 2 columnas para formulario CRUD */
.neo-crud-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.neo-crud-form-grid .neo-form-group {
    margin-bottom: 0;
}

/* Botones de tipo de destino */
.neo-tipo-destino-btns {
    display: flex;
    gap: 8px;
}

.neo-tipo-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 500;
    color: var(--neo-gray-600);
}

.neo-tipo-btn svg {
    width: 22px;
    height: 22px;
    color: var(--neo-gray-400);
    transition: all 0.2s ease;
}

.neo-tipo-btn:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-lighter);
}

.neo-tipo-btn:hover svg {
    color: var(--neo-primary);
}

.neo-tipo-btn.active {
    border-color: var(--neo-primary);
    background: linear-gradient(135deg, var(--neo-primary-light) 0%, rgba(152, 125, 95, 0.1) 100%);
    color: var(--neo-gray-800);
}

.neo-tipo-btn.active svg {
    color: var(--neo-primary);
}

.neo-tipo-btns-row {
    display: flex;
    gap: 8px;
}

.neo-tipo-btn-sm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: 2px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-600);
}

.neo-tipo-btn-sm svg {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-400);
    transition: all 0.2s ease;
}

.neo-tipo-btn-sm:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-lighter);
}

.neo-tipo-btn-sm:hover svg {
    color: var(--neo-primary);
}

.neo-tipo-btn-sm.active {
    border-color: var(--neo-primary);
    background: linear-gradient(135deg, var(--neo-primary-light) 0%, rgba(152, 125, 95, 0.1) 100%);
    color: var(--neo-gray-800);
}

.neo-tipo-btn-sm.active svg {
    color: var(--neo-primary);
}

.neo-crud-form-full-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    background: var(--neo-gray-50);
    border-top: 1px solid var(--neo-gray-200);
    border-radius: 0 0 var(--neo-radius-lg) var(--neo-radius-lg);
}

.neo-crud-form-full-footer .neo-btn {
    padding: 7px 12px;
    font-size: 12px;
}

.neo-crud-form-full-footer .neo-btn-secondary {
    background: linear-gradient(135deg, var(--neo-gray-100) 0%, var(--neo-gray-200) 100%);
    color: var(--neo-gray-700);
    border: 1px solid var(--neo-gray-300);
}

.neo-crud-form-full-footer .neo-btn-secondary:hover {
    background: linear-gradient(135deg, var(--neo-gray-200) 0%, var(--neo-gray-300) 100%);
    border-color: var(--neo-gray-400);
}

/* Toast de éxito para formularios CRUD */
.neo-crud-toast {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: var(--neo-radius-lg);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    white-space: nowrap;
}

.neo-crud-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.neo-crud-toast svg {
    width: 18px;
    height: 18px;
}

/* Toast container con botones */
.neo-crud-toast-container {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: var(--neo-radius-lg);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
}

.neo-crud-toast-container.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.neo-crud-toast-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.neo-crud-toast-content svg {
    width: 18px;
    height: 18px;
}

.neo-crud-toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.neo-crud-toast-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--neo-radius-md);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.neo-crud-toast-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.neo-crud-toast-btn svg {
    width: 14px;
    height: 14px;
}

.neo-crud-toast-btn.close {
    background: rgba(0, 0, 0, 0.15);
}

.neo-crud-toast-btn.close:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Componente de subida de imagen */
.neo-file-upload {
    position: relative;
}

.neo-file-upload input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.neo-file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed var(--neo-gray-300);
    border-radius: var(--neo-radius-md);
    background: var(--neo-gray-50);
    transition: var(--neo-transition);
    text-align: center;
}

.neo-file-upload:hover .neo-file-upload-content {
    border-color: var(--neo-primary);
    background: var(--neo-primary-lighter);
}

.neo-file-upload-content svg {
    width: 32px;
    height: 32px;
    color: var(--neo-gray-400);
}

.neo-file-upload-content span {
    font-size: 12px;
    color: var(--neo-gray-500);
}

.neo-file-upload-content.has-image {
    padding: 8px;
    border-style: solid;
    border-color: var(--neo-primary);
}

.neo-file-upload-content.has-image img {
    max-width: 100%;
    max-height: 80px;
    border-radius: var(--neo-radius-sm);
    object-fit: cover;
}

/* File upload centrado */
.neo-file-upload-center {
    display: flex;
    justify-content: center;
}

/* File upload cuadrado */
.neo-file-upload-square {
    width: 180px;
}

.neo-file-upload-square .neo-file-upload-content {
    width: 180px;
    height: 180px;
    padding: 16px;
}

.neo-file-upload-square .neo-file-upload-content svg {
    width: 40px;
    height: 40px;
}

.neo-file-upload-square .neo-file-upload-content.has-image img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.neo-file-upload-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.neo-label-center {
    text-align: center;
}

/* Fila de uploads de imagen/icono */
.neo-file-upload-row {
    display: flex;
    gap: 12px;
}

.neo-file-upload-item {
    flex: 1;
}

.neo-file-upload-item .neo-file-upload-content {
    padding: 16px 12px;
}

.neo-file-upload-item .neo-file-upload-content svg {
    width: 28px;
    height: 28px;
}

.neo-file-upload-item .neo-file-upload-content span {
    font-size: 11px;
}

/* Item de lugar velatorio con imagen */
.neo-crud-item-image {
    width: 40px;
    height: 40px;
    border-radius: var(--neo-radius-md);
    background: var(--neo-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.neo-crud-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.neo-crud-item-image svg {
    width: 20px;
    height: 20px;
    color: var(--neo-gray-400);
}

.neo-crud-item-info {
    flex: 1;
    min-width: 0;
}

.neo-crud-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neo-crud-item-meta {
    font-size: 11px;
    color: var(--neo-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Panel de descripción */
.neo-panel-description {
    font-size: 12px;
    color: var(--neo-gray-500);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Opciones de WhatsApp */
.neo-whatsapp-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.neo-whatsapp-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border: 2px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.neo-whatsapp-option:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-lighter);
}

.neo-whatsapp-option.selected {
    border-color: var(--neo-primary);
    background: linear-gradient(135deg, var(--neo-primary-light) 0%, rgba(152, 125, 95, 0.05) 100%);
    box-shadow: 0 4px 12px rgba(152, 125, 95, 0.15);
}

.neo-whatsapp-option-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--neo-radius-md);
    background: var(--neo-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.neo-whatsapp-option-icon svg {
    width: 22px;
    height: 22px;
    color: var(--neo-gray-500);
}

.neo-whatsapp-option:hover .neo-whatsapp-option-icon,
.neo-whatsapp-option.selected .neo-whatsapp-option-icon {
    background: var(--neo-primary);
}

.neo-whatsapp-option:hover .neo-whatsapp-option-icon svg,
.neo-whatsapp-option.selected .neo-whatsapp-option-icon svg {
    color: white;
}

.neo-whatsapp-option-content {
    flex: 1;
    min-width: 0;
}

.neo-whatsapp-option-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--neo-gray-800);
    margin-bottom: 2px;
}

.neo-whatsapp-option-desc {
    display: block;
    font-size: 12px;
    color: var(--neo-gray-500);
}

.neo-whatsapp-option-check {
    width: 24px;
    height: 24px;
    border-radius: var(--neo-radius-full);
    border: 2px solid var(--neo-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.neo-whatsapp-option-check svg {
    width: 14px;
    height: 14px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.neo-whatsapp-option.selected .neo-whatsapp-option-check {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
}

.neo-whatsapp-option.selected .neo-whatsapp-option-check svg {
    opacity: 1;
    transform: scale(1);
}

.neo-crud-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: none;
    border-radius: var(--neo-radius-md);
    background: linear-gradient(135deg, #B19B82 0%, #A78E73 100%);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: white;
    transition: var(--neo-transition);
    flex-shrink: 0;
    white-space: nowrap;
}

.neo-crud-add-btn.neo-crud-add-btn-icon {
    padding: 7px;
    width: 32px;
    height: 32px;
    justify-content: center;
}

.neo-crud-add-btn:hover {
    background: linear-gradient(135deg, #A78E73 0%, #9F8466 100%);
    transform: translateY(-1px);
}

.neo-crud-add-btn svg {
    width: 14px;
    height: 14px;
}

/* Formulario de ubicación de destino */
.neo-destino-ubicacion-form {
    display: none;
    background: var(--neo-primary-light);
    border: 1px solid var(--neo-primary);
    border-radius: var(--neo-radius-md);
    padding: 12px;
    margin-bottom: 12px;
}

.neo-destino-ubicacion-form.active {
    display: block;
}

.neo-destino-ubicacion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.neo-destino-ubicacion-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.neo-destino-ubicacion-label {
    font-size: 10px;
    color: var(--neo-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.neo-destino-ubicacion-nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-800);
}

.neo-destino-ubicacion-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--neo-primary-dark);
    cursor: pointer;
    border-radius: var(--neo-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-destino-ubicacion-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.neo-destino-ubicacion-close svg {
    width: 16px;
    height: 16px;
}

.neo-destino-ubicacion-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.neo-destino-ubicacion-fields .neo-form-group {
    margin-bottom: 0;
}

.neo-destino-ubicacion-fields .neo-input {
    background: white;
    border-color: var(--neo-gray-200);
}

.neo-destino-ubicacion-fields .neo-input:focus {
    border-color: var(--neo-primary);
}

.neo-label-editable-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.neo-label-editable {
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-700);
    border: 1px dashed var(--neo-gray-300);
    background: var(--neo-gray-50);
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
    width: 100%;
    transition: var(--neo-transition);
}

.neo-label-editable:hover {
    border-color: var(--neo-primary);
    background: white;
}

.neo-label-editable:focus {
    color: var(--neo-gray-800);
    border-color: var(--neo-primary);
    border-style: solid;
    background: white;
}

.neo-label-editable::placeholder {
    color: var(--neo-gray-400);
    font-weight: 400;
}

.neo-label-edit-icon {
    display: none;
}

.neo-input-editable {
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-700);
    border: 1px dashed var(--neo-gray-300);
    background: var(--neo-gray-50);
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
    width: 100%;
    transition: var(--neo-transition);
}

.neo-input-editable:hover {
    border-color: var(--neo-primary);
    background: white;
}

.neo-input-editable:focus {
    color: var(--neo-gray-800);
    border-color: var(--neo-primary);
    border-style: solid;
    background: white;
}

.neo-input-editable::placeholder {
    color: var(--neo-gray-400);
    font-weight: 400;
}

.neo-ubicacion-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.neo-ubicacion-field-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.neo-ubicacion-field-item .neo-label-editable-wrapper {
    margin-bottom: 0;
}

.neo-destino-tipo-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.neo-destino-filter-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-gray-50);
    border-radius: var(--neo-radius-md);
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-600);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-destino-filter-btn:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-destino-filter-btn.active {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
}

.neo-destino-filter-btn svg {
    width: 16px;
    height: 16px;
}

.neo-misa-tipo-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.neo-misa-filter-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-gray-50);
    border-radius: var(--neo-radius-md);
    font-size: 11px;
    font-weight: 500;
    color: var(--neo-gray-600);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-misa-filter-btn:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-misa-filter-btn.active {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
}

.neo-misa-filter-btn svg {
    width: 14px;
    height: 14px;
}

.neo-crud-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--neo-gray-400);
    text-align: center;
    gap: 8px;
}

.neo-crud-empty svg {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

.neo-crud-empty span {
    font-size: 13px;
}

/* Cuentas de carteleras */
.neo-cuentas-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.neo-cuentas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: var(--neo-gray-400);
    font-size: 13px;
}
.neo-cuenta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    font-size: 13px;
}
.neo-cuenta-item .neo-cuenta-name {
    flex: 1;
    font-weight: 500;
    color: var(--neo-gray-700);
}
.neo-cuenta-item .neo-cuenta-id {
    font-size: 11px;
    color: var(--neo-gray-400);
    font-family: monospace;
}
.neo-cuenta-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--neo-gray-400);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.neo-cuenta-delete:hover {
    color: var(--neo-danger);
    background: rgba(231,76,60,0.08);
}
.neo-cuenta-delete svg {
    width: 14px;
    height: 14px;
}
/* Licencias */
.neo-licencias-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.neo-licencias-empty {
    color: var(--neo-gray-400);
    font-size: 13px;
    padding: 8px 0;
}
.neo-licencia-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(var(--neo-primary-rgb, 79,70,229), 0.08);
    border: 1px solid rgba(var(--neo-primary-rgb, 79,70,229), 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-primary);
}
.neo-licencia-tag button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--neo-primary);
    opacity: 0.6;
    padding: 0;
    display: flex;
    align-items: center;
    transition: opacity 0.15s;
}
.neo-licencia-tag button:hover {
    opacity: 1;
}
.neo-licencia-tag button svg {
    width: 12px;
    height: 12px;
}
.neo-crud-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Country/Province panel styles */
.ds-provincia-country-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 0 0 8px 0;
    background: var(--neo-primary-light);
    border: 1px solid color-mix(in srgb, var(--neo-primary) 20%, transparent);
    border-radius: var(--neo-radius-md);
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-primary);
}
.ds-provincia-no-pais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
    color: var(--neo-gray-400);
    font-size: 13px;
}
.ds-geo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    padding-left: 16px;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: var(--neo-transition);
    font-size: 13px;
    color: var(--neo-gray-700);
}
.ds-geo-item:hover {
    background: var(--neo-primary-light);
    border-left-color: var(--neo-primary);
    color: var(--neo-gray-900);
}
.ds-geo-item.selected {
    background: var(--neo-primary-light);
    border-left-color: var(--neo-primary);
    color: var(--neo-primary);
    font-weight: 600;
}
.ds-geo-item.selected::after {
    content: '';
    margin-left: auto;
    width: 16px;
    height: 16px;
    background: var(--neo-primary);
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}
.ds-geo-flag {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.neo-crud-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    padding-left: 16px;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: var(--neo-transition);
    position: relative;
}

.neo-crud-item:hover {
    background: var(--neo-primary-light);
    border-left-color: var(--neo-primary);
}

.neo-crud-item-icon {
    width: 32px;
    height: 32px;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-400);
    flex-shrink: 0;
    transition: var(--neo-transition);
}

.neo-crud-item-icon svg {
    width: 16px;
    height: 16px;
}

.neo-crud-item:hover .neo-crud-item-icon {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-crud-item-content {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-600);
    line-height: 1.4;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.neo-crud-item:hover .neo-crud-item-content {
    color: var(--neo-gray-800);
}

.neo-cartelera-selected {
    background: var(--neo-primary-light) !important;
    border-left-color: var(--neo-primary) !important;
}

/* ========================================
   VIRTUAL SCROLL PAGINATION
======================================== */
.neo-vscroll-container {
    position: relative;
}

.neo-vscroll-container .neo-data-table tbody {
    position: relative;
}

.neo-vscroll-container .neo-data-table tbody tr[data-row-id] {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.neo-vscroll-container .neo-data-table tbody tr.neo-vscroll-hiding-down {
    opacity: 0;
    transform: translateY(-8px);
}

.neo-vscroll-container .neo-data-table tbody tr.neo-vscroll-hiding-up {
    opacity: 0;
    transform: translateY(8px);
}

.neo-vscroll-container .neo-data-table tbody tr.neo-vscroll-entering {
    opacity: 0;
    transform: translateY(8px);
}

.neo-vscroll-container .neo-data-table tbody tr.neo-vscroll-entering-up {
    opacity: 0;
    transform: translateY(-8px);
}

.neo-vscroll-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px;
    border-top: 1px solid var(--neo-gray-100);
    user-select: none;
}

.neo-vscroll-info {
    font-size: 12px;
    color: var(--neo-gray-400);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.neo-vscroll-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.neo-vscroll-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neo-gray-200);
    transition: all 0.25s ease;
    cursor: pointer;
}

.neo-vscroll-dot.active {
    background: var(--neo-primary);
    transform: scale(1.3);
}

.neo-vscroll-dot:hover:not(.active) {
    background: var(--neo-gray-300);
}

.neo-vscroll-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
}

.neo-vscroll-arrow {
    width: 28px;
    height: 28px;
    border: 1px solid var(--neo-gray-200);
    background: white;
    border-radius: var(--neo-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--neo-gray-500);
    transition: all 0.15s ease;
}

.neo-vscroll-arrow:hover:not(.disabled) {
    background: var(--neo-gray-50);
    border-color: var(--neo-gray-300);
    color: var(--neo-gray-700);
}

.neo-vscroll-arrow.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.neo-vscroll-arrow svg {
    width: 14px;
    height: 14px;
}

.neo-vscroll-hint {
    font-size: 11px;
    color: var(--neo-gray-300);
    display: flex;
    align-items: center;
    gap: 4px;
}

.neo-vscroll-hint svg {
    width: 12px;
    height: 12px;
}

.neo-pagination {
    display: none;
}

/* Sticky header for clientes-modulo table */
#view-clientes-modulo-lista .neo-card {
    overflow: visible;
}

#view-clientes-modulo-lista .neo-card .neo-table-wrapper {
    overflow: visible;
}

#view-clientes-modulo-lista .neo-card .neo-card-header {
    position: sticky;
    top: 0;
    z-index: 12;
    border-radius: var(--neo-radius-xl) var(--neo-radius-xl) 0 0;
}

#view-clientes-modulo-lista .neo-card .neo-data-table thead {
    position: sticky;
    top: 41px;
    z-index: 11;
}

#view-clientes-modulo-lista .neo-card .neo-data-table thead th {
    background: var(--neo-gray-50);
    box-shadow: 0 1px 0 0 var(--neo-gray-200);
}

.neo-crud-item-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.neo-crud-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-700);
    line-height: 1.3;
    margin-bottom: 2px;
}

.neo-crud-item:hover .neo-crud-item-name {
    color: var(--neo-gray-900);
}

.neo-crud-item-meta {
    font-size: 11px;
    color: var(--neo-gray-500);
    line-height: 1.3;
}

.neo-crud-item-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.neo-crud-item-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.neo-crud-item-badge.misa {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-crud-item-badge.responso {
    background: var(--neo-warning-light);
    color: var(--neo-warning);
}

.neo-crud-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: var(--neo-transition);
}

.neo-crud-item:hover .neo-crud-item-actions {
    opacity: 1;
}

.neo-crud-item-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: var(--neo-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--neo-transition);
}

.neo-crud-item-btn svg {
    width: 14px;
    height: 14px;
    color: var(--neo-gray-400);
}

.neo-crud-item-btn:hover {
    background: var(--neo-gray-200);
}

.neo-crud-item-btn:hover svg {
    color: var(--neo-gray-700);
}

.neo-crud-item-btn.delete:hover {
    background: var(--neo-danger-light);
}

.neo-crud-item-btn.delete:hover svg {
    color: var(--neo-danger);
}

.neo-crud-item-btn.save {
    background: rgba(212, 188, 138, 0.15);
}

.neo-crud-item-btn.save svg {
    color: #A78E73;
}

.neo-crud-item-btn.save:hover {
    background: linear-gradient(135deg, #B19B82 0%, #A78E73 100%);
}

.neo-crud-item-btn.save:hover svg {
    color: white;
}

.neo-crud-item-btn.cancel {
    background: var(--neo-gray-200);
}

.neo-crud-item-btn.cancel svg {
    color: var(--neo-gray-500);
}

.neo-crud-item-btn.cancel:hover {
    background: var(--neo-danger-light);
}

.neo-crud-item-btn.cancel:hover svg {
    color: var(--neo-danger);
}

.neo-crud-item-form {
    background: var(--neo-gray-100);
    border: 1px dashed var(--neo-gray-300);
}

.neo-crud-item-form .neo-crud-item-actions {
    opacity: 1;
}

.neo-crud-item-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--neo-gray-300);
    border-radius: var(--neo-radius-sm);
    font-size: 13px;
    background: white;
    transition: var(--neo-transition);
}

.neo-crud-item-input:focus {
    outline: none;
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.neo-crud-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.neo-crud-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md);
    flex: 1;
    border: 1px solid var(--neo-gray-200);
    transition: var(--neo-transition);
}

.neo-crud-search:focus-within {
    border-color: var(--neo-primary);
    background: white;
}

.neo-crud-search svg {
    width: 15px;
    height: 15px;
    color: var(--neo-gray-400);
    flex-shrink: 0;
}

.neo-crud-search input {
    border: none;
    background: none;
    font-size: 13px;
    outline: none;
    width: 100%;
    color: var(--neo-gray-700);
}

.neo-crud-search input::placeholder {
    color: var(--neo-gray-400);
}

.neo-crud-item.hidden {
    display: none;
}

/* Edición inline */
.neo-crud-item-editing {
    background: var(--neo-primary-light);
    border-left-color: var(--neo-primary);
}

.neo-crud-edit-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--neo-primary);
    border-radius: var(--neo-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-800);
    background: white;
    outline: none;
}

.neo-crud-edit-input:focus {
    box-shadow: 0 0 0 2px var(--neo-primary-light);
}

.neo-crud-edit-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.neo-crud-edit-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--neo-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--neo-transition);
}

.neo-crud-edit-btn svg {
    width: 14px;
    height: 14px;
}

.neo-crud-edit-btn.save {
    background: linear-gradient(135deg, #B19B82 0%, #A78E73 100%);
    color: white;
}

.neo-crud-edit-btn.save:hover {
    background: linear-gradient(135deg, #A78E73 0%, #9F8466 100%);
}

.neo-crud-edit-btn.cancel {
    background: var(--neo-gray-200);
    color: var(--neo-gray-600);
}

.neo-crud-edit-btn.cancel:hover {
    background: var(--neo-gray-300);
    color: var(--neo-gray-800);
}

.neo-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--neo-space-md);
}

.neo-search-box {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-sm);
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-lg);
    margin-bottom: var(--neo-space-lg);
}

.neo-search-box svg {
    width: 18px;
    height: 18px;
    color: var(--neo-gray-400);
    flex-shrink: 0;
}

.neo-search-box input {
    flex: 1;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.neo-btn-add-service {
    width: 40px;
    height: 40px;
    border-radius: var(--neo-radius-md);
    border: none;
    background: linear-gradient(135deg, #B19B82 0%, #A78E73 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--neo-transition);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
}

.neo-btn-add-service svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.neo-btn-add-service-text {
    display: none;
}

.neo-btn-add-service:hover {
    background: linear-gradient(135deg, #A78E73 0%, #9F8466 100%);
    transform: translateY(-1px);
}

.neo-panel-section {
    margin-bottom: var(--neo-space-lg);
}

.neo-panel-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--neo-space-sm) 0;
    margin-bottom: var(--neo-space-sm);
}

.neo-panel-item {
    padding: var(--neo-space-md);
    border-radius: var(--neo-radius-lg);
    cursor: pointer;
    transition: var(--neo-transition);
    margin-bottom: var(--neo-space-sm);
    border: 1px solid var(--neo-gray-150);
}

.neo-panel-item:hover {
    background: var(--neo-gray-50);
    border-color: var(--neo-gray-200);
}

.neo-panel-item.selected {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
}

.neo-panel-item-type {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.neo-panel-item-name {
    font-weight: 600;
    color: var(--neo-gray-800);
    margin-bottom: 2px;
}

.neo-panel-item-meta {
    font-size: 13px;
    color: var(--neo-gray-500);
}

.neo-panel-item.selected .neo-panel-item-type {
    color: var(--neo-primary);
}

.neo-panel-item-selectable {
    transition: all 0.2s ease;
}

.neo-panel-item-selectable:hover {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    transform: translateX(4px);
}

.neo-panel-item-selectable:active {
    transform: translateX(2px);
}

.neo-panel-item-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--neo-space-lg);
    color: var(--neo-gray-400);
    text-align: center;
}

.neo-panel-item-empty svg {
    width: 32px;
    height: 32px;
    margin-bottom: var(--neo-space-sm);
    opacity: 0.5;
}

/* ========================================
   VIEWS
======================================== */
.neo-view {
    display: none;
    flex-direction: column;
    height: 100%;
}

.neo-view.active {
    display: flex;
}

/* Vista de APPs en iframe */
#view-app-frame {
    position: fixed;
    top: 42px; /* Debajo de la barra de tabs */
    left: 76px; /* Igual al sidebar colapsado, sin hueco */
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--neo-gray-100);
    transition: left 0.3s ease, top 0.3s ease;
}

#view-app-frame.sidebar-expanded {
    left: var(--neo-sidebar-width); /* 228px - sin hueco entre sidebar y contenido */
}

/* Tablets - iframe ajustado al sidebar colapsado */
@media (min-width: 768px) and (max-width: 1024px) {
    #view-app-frame {
        left: 76px;
        top: 42px;
        transition: left 0.3s ease;
    }
    
    #view-app-frame.tablet-sidebar-expanded {
        left: var(--neo-sidebar-width); /* 228px - sin hueco entre sidebar y contenido */
    }
}

/* Móviles pequeños - iframe ocupa todo el ancho */
@media (max-width: 767px) {
    #view-app-frame {
        left: 0;
        top: 42px;
    }
}

/* Loader del iframe */
.app-frame-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--neo-white);
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.app-frame-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.app-frame-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--neo-gray-200);
    border-top-color: var(--neo-primary);
    border-radius: 50%;
    animation: app-spinner 0.8s linear infinite;
}

@keyframes app-spinner {
    to { transform: rotate(360deg); }
}

.app-frame-loader-text {
    margin-top: 16px;
    font-size: 16px;
    color: var(--neo-gray-600);
    font-weight: 500;
}

/* ========================================
   TAB CONTENT
======================================== */
.neo-tab-content {
    display: block;
    scroll-margin-top: 60px;
}

.neo-tab-content.active {
    display: block;
}

.neo-sections-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    scroll-margin-top: 60px;
}
.neo-sections-row .neo-tab-content {
    scroll-margin-top: 0;
}
.neo-sections-row .neo-card {
    height: 100%;
}
@media (max-width: 900px) {
    .neo-sections-row {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   DATA TABLE
======================================== */
/* ===================================
   RESPONSIVE - SERVICIOS LISTA MOBILE
   =================================== */

@media (max-width: 768px) {
    /* Header de la lista de servicios */
    #view-servicios-lista .neo-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    #view-servicios-lista .neo-card-title {
        font-size: 18px !important;
    }
    
    #view-servicios-lista .neo-card-title svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Controles del header - permitir wrap para que búsqueda vaya a línea 2 */
    #view-servicios-lista .neo-card-header > div[style*="flex: 1"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }
    
    /* Contenedor de filtros - ocupa TODA la línea 1 (100%) */
    #view-servicios-lista .neo-card-header > div[style*="flex: 1"] > div:first-child {
        display: flex !important;
        gap: 4px !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        order: 1 !important;
        flex-basis: 100% !important; /* Fuerza que ocupe toda la línea */
    }
    
    /* Contenedor wrapper de filtros desktop - ocupa 100% de su padre */
    #view-servicios-lista #servicios-filters-desktop {
        display: flex !important;
        gap: 4px !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    
    /* Búsqueda en línea 2 - reducida para que quepa el botón + */
    #view-servicios-lista .neo-search-box {
        width: calc(100% - 38px) !important; /* 100% menos 32px del botón y 6px de gap */
        flex: 0 0 calc(100% - 38px) !important;
        margin: 0 !important;
        order: 2 !important;
    }
    
    /* Filtros - ocupan todo el ancho disponible */
    #view-servicios-lista .neo-servicio-filter-btn {
        font-size: 10px !important;
        padding: 6px 6px !important;
        min-height: 32px !important;
        flex: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Botón de agregar - al lado derecho del buscador en línea 2 */
    #view-servicios-lista .neo-btn-add-service {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        order: 3 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    #view-servicios-lista .neo-btn-add-service svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    #view-servicios-lista .neo-btn-add-service-text {
        display: none !important;
    }
    
    #view-servicios-lista .neo-trash-btn {
        width: 100%;
        justify-content: center;
        height: 44px !important;
    }
    
    /* Ocultar tabla en móvil */
    #view-servicios-lista .neo-table-wrapper {
        display: none !important;
    }
    
    /* Contenedor de tarjetas móvil */
    #view-servicios-lista .neo-card-body {
        padding: 12px !important;
    }
    
    /* Crear contenedor de tarjetas después de la tabla */
    #view-servicios-lista .neo-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* Estilo de tarjeta individual */
    #view-servicios-lista .neo-mobile-card {
        background: var(--neo-white);
        border: 1px solid var(--neo-gray-200);
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    #view-servicios-lista .neo-mobile-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    /* Header de la tarjeta */
    #view-servicios-lista .neo-mobile-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--neo-gray-100);
    }
    
    #view-servicios-lista .neo-mobile-card-info {
        flex: 1;
        min-width: 0;
    }
    
    #view-servicios-lista .neo-mobile-card-id {
        font-size: 11px;
        font-weight: 600;
        color: var(--neo-gray-400);
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    #view-servicios-lista .neo-mobile-card-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--neo-gray-900);
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    #view-servicios-lista .neo-mobile-card-date {
        font-size: 13px;
        color: var(--neo-gray-600);
    }
    
    /* Badge de estado */
    #view-servicios-lista .neo-mobile-card-header .neo-badge {
        flex-shrink: 0;
        margin-left: 8px;
    }
    
    /* Body de la tarjeta */
    #view-servicios-lista .neo-mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    #view-servicios-lista .neo-mobile-card-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    
    #view-servicios-lista .neo-mobile-card-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--neo-gray-500);
        min-width: 80px;
        flex-shrink: 0;
    }
    
    #view-servicios-lista .neo-mobile-card-value {
        font-size: 13px;
        color: var(--neo-gray-700);
        flex: 1;
    }
    
    /* Footer con acción */
    #view-servicios-lista .neo-mobile-card-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--neo-gray-100);
        display: flex;
        justify-content: flex-end;
    }
    
    #view-servicios-lista .neo-mobile-card-footer button {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid var(--neo-danger-light);
        background: transparent;
        color: var(--neo-danger);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    #view-servicios-lista .neo-mobile-card-footer button:active {
        background: var(--neo-danger-light);
    }
    
    #view-servicios-lista .neo-mobile-card-footer button svg {
        width: 16px;
        height: 16px;
    }
    
    /* Estado vacío */
    #view-servicios-lista .neo-mobile-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--neo-gray-400);
    }
    
    /* ============================================
       CLIENTES - Diseño Responsive
       ============================================ */
    /* Header de la lista de clientes */
    #view-clientes-lista .neo-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    #view-clientes-lista .neo-card-title {
        font-size: 18px !important;
    }
    
    #view-clientes-lista .neo-card-title svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Controles del header - permitir wrap para que búsqueda vaya a línea 2 */
    #view-clientes-lista .neo-card-header > div[style*="flex: 1"] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }
    
    /* Contenedor de filtros - ocupa TODA la línea 1 (100%) */
    #view-clientes-lista .neo-card-header > div[style*="flex: 1"] > div:first-child {
        display: flex !important;
        gap: 4px !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        order: 1 !important;
        flex-basis: 100% !important; /* Fuerza que ocupe toda la línea */
    }
    
    /* Contenedor wrapper de filtros - ocupa 100% de su padre */
    #view-clientes-lista .neo-tipo-filter {
        display: flex !important;
        gap: 4px !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    
    /* Búsqueda en línea 2 - reducida para que quepa el botón + */
    #view-clientes-lista .neo-search-box {
        width: calc(100% - 38px) !important; /* 100% menos 32px del botón y 6px de gap */
        flex: 0 0 calc(100% - 38px) !important;
        margin: 0 !important;
        order: 2 !important;
    }
    
    /* Filtros - ocupan todo el ancho disponible */
    #view-clientes-lista .neo-tipo-filter-btn {
        font-size: 10px !important;
        padding: 6px 6px !important;
        min-height: 32px !important;
        flex: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Botón de agregar - al lado derecho del buscador en línea 2 */
    #view-clientes-lista .neo-btn-add-service {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        order: 3 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    #view-clientes-lista .neo-btn-add-service svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    #view-clientes-lista .neo-btn-add-service-text {
        display: none !important;
    }
    
    #view-clientes-lista .neo-trash-btn {
        width: 100%;
        justify-content: center;
        height: 44px !important;
    }
    
    /* Ocultar tabla en móvil */
    #view-clientes-lista .neo-table-wrapper {
        display: none !important;
    }
    
    /* Contenedor de tarjetas móvil */
    #view-clientes-lista .neo-card-body {
        padding: 12px !important;
    }
    
    /* Crear contenedor de tarjetas después de la tabla */
    #view-clientes-lista .neo-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* Estilo de tarjeta individual */
    #view-clientes-lista .neo-mobile-card {
        background: var(--neo-white);
        border: 1px solid var(--neo-gray-200);
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    #view-clientes-lista .neo-mobile-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    /* Header de la tarjeta */
    #view-clientes-lista .neo-mobile-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--neo-gray-100);
    }
    
    #view-clientes-lista .neo-mobile-card-info {
        flex: 1;
        min-width: 0;
    }
    
    #view-clientes-lista .neo-mobile-card-id {
        font-size: 11px;
        font-weight: 600;
        color: var(--neo-gray-400);
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    #view-clientes-lista .neo-mobile-card-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--neo-gray-900);
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    #view-clientes-lista .neo-mobile-card-date {
        font-size: 13px;
        color: var(--neo-gray-600);
    }
    
    /* Badge de estado */
    #view-clientes-lista .neo-mobile-card-header .neo-badge {
        flex-shrink: 0;
        margin-left: 8px;
    }
    
    /* Body de la tarjeta */
    #view-clientes-lista .neo-mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    #view-clientes-lista .neo-mobile-card-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    
    #view-clientes-lista .neo-mobile-card-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--neo-gray-500);
        min-width: 80px;
        flex-shrink: 0;
    }
    
    #view-clientes-lista .neo-mobile-card-value {
        font-size: 13px;
        color: var(--neo-gray-700);
        flex: 1;
    }
    
    /* Footer con acción */
    #view-clientes-lista .neo-mobile-card-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--neo-gray-100);
        display: flex;
        justify-content: flex-end;
    }
    
    #view-clientes-lista .neo-mobile-card-footer button {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid var(--neo-danger-light);
        background: transparent;
        color: var(--neo-danger);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    #view-clientes-lista .neo-mobile-card-footer button:active {
        background: var(--neo-danger-light);
    }
    
    #view-clientes-lista .neo-mobile-card-footer button svg {
        width: 16px;
        height: 16px;
    }
    
    /* Estado vacío */
    #view-clientes-lista .neo-mobile-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--neo-gray-400);
    }
    
    /* ============================================
       CONTRATANTES - Diseño Responsive
       ============================================ */
    /* Header de la lista de contratantes */
    #view-clientes-modulo-lista .neo-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    #view-clientes-modulo-lista .neo-card-title {
        font-size: 18px !important;
    }
    
    #view-clientes-modulo-lista .neo-card-title svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Controles del header - poner buscador y botón en fila */
    #view-clientes-modulo-lista .neo-card-header > div[style*="flex: 1"] {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    #view-clientes-modulo-lista .neo-search-box {
        flex: 1 !important;
        margin: 0 !important;
        width: auto !important;
    }
    
    /* Botón de agregar más pequeño y compacto */
    #view-clientes-modulo-lista .neo-btn-add-service {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    #view-clientes-modulo-lista .neo-btn-add-service svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    #view-clientes-modulo-lista .neo-btn-add-service-text {
        display: none !important;
    }
    
    #view-clientes-modulo-lista .neo-trash-btn {
        width: 100%;
        justify-content: center;
        height: 44px !important;
    }
    
    /* Ocultar tabla en móvil */
    #view-clientes-modulo-lista .neo-table-wrapper {
        display: none !important;
    }
    
    /* Contenedor de tarjetas móvil */
    #view-clientes-modulo-lista .neo-card-body {
        padding: 12px !important;
    }
    
    /* Crear contenedor de tarjetas después de la tabla */
    #view-clientes-modulo-lista .neo-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* Estilo de tarjeta individual */
    #view-clientes-modulo-lista .neo-mobile-card {
        background: var(--neo-white);
        border: 1px solid var(--neo-gray-200);
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    #view-clientes-modulo-lista .neo-mobile-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    /* Header de la tarjeta */
    #view-clientes-modulo-lista .neo-mobile-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--neo-gray-100);
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-info {
        flex: 1;
        min-width: 0;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-id {
        font-size: 11px;
        font-weight: 600;
        color: var(--neo-gray-400);
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--neo-gray-900);
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-date {
        font-size: 13px;
        color: var(--neo-gray-600);
    }
    
    /* Badge de estado */
    #view-clientes-modulo-lista .neo-mobile-card-header .neo-badge {
        flex-shrink: 0;
        margin-left: 8px;
    }
    
    /* Body de la tarjeta */
    #view-clientes-modulo-lista .neo-mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--neo-gray-500);
        min-width: 80px;
        flex-shrink: 0;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-value {
        font-size: 13px;
        color: var(--neo-gray-700);
        flex: 1;
    }
    
    /* Footer con acción */
    #view-clientes-modulo-lista .neo-mobile-card-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--neo-gray-100);
        display: flex;
        justify-content: flex-end;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-footer button {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid var(--neo-danger-light);
        background: transparent;
        color: var(--neo-danger);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-footer button:active {
        background: var(--neo-danger-light);
    }
    
    #view-clientes-modulo-lista .neo-mobile-card-footer button svg {
        width: 16px;
        height: 16px;
    }
    
    /* Estado vacío */
    #view-clientes-modulo-lista .neo-mobile-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--neo-gray-400);
    }
    
    /* ============================================
       USUARIOS - Diseño Responsive
       ============================================ */
    /* Header de la lista de usuarios */
    #view-usuarios-lista .neo-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    
    #view-usuarios-lista .neo-card-title {
        font-size: 18px !important;
    }
    
    #view-usuarios-lista .neo-card-title svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Controles del header - poner buscador y botón en fila */
    #view-usuarios-lista .neo-card-header > div[style*="flex: 1"] {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    #view-usuarios-lista .neo-search-box {
        flex: 1 !important;
        margin: 0 !important;
        width: auto !important;
    }
    
    /* Botón de agregar más pequeño y compacto */
    #view-usuarios-lista .neo-btn-add-service {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    #view-usuarios-lista .neo-btn-add-service svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    #view-usuarios-lista .neo-btn-add-service-text {
        display: none !important;
    }
    
    #view-usuarios-lista .neo-trash-btn {
        width: 100%;
        justify-content: center;
        height: 44px !important;
    }
    
    /* Ocultar tabla en móvil */
    #view-usuarios-lista .neo-table-wrapper {
        display: none !important;
    }
    
    /* Contenedor de tarjetas móvil */
    #view-usuarios-lista .neo-card-body {
        padding: 12px !important;
    }
    
    /* Crear contenedor de tarjetas después de la tabla */
    #view-usuarios-lista .neo-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    /* Estilo de tarjeta individual */
    #view-usuarios-lista .neo-mobile-card {
        background: var(--neo-white);
        border: 1px solid var(--neo-gray-200);
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    #view-usuarios-lista .neo-mobile-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    
    /* Header de la tarjeta */
    #view-usuarios-lista .neo-mobile-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--neo-gray-100);
    }
    
    #view-usuarios-lista .neo-mobile-card-info {
        flex: 1;
        min-width: 0;
    }
    
    #view-usuarios-lista .neo-mobile-card-id {
        font-size: 11px;
        font-weight: 600;
        color: var(--neo-gray-400);
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    #view-usuarios-lista .neo-mobile-card-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--neo-gray-900);
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    #view-usuarios-lista .neo-mobile-card-date {
        font-size: 13px;
        color: var(--neo-gray-600);
    }
    
    /* Badge de estado */
    #view-usuarios-lista .neo-mobile-card-header .neo-badge {
        flex-shrink: 0;
        margin-left: 8px;
    }
    
    /* Body de la tarjeta */
    #view-usuarios-lista .neo-mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    #view-usuarios-lista .neo-mobile-card-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }
    
    #view-usuarios-lista .neo-mobile-card-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--neo-gray-500);
        min-width: 80px;
        flex-shrink: 0;
    }
    
    #view-usuarios-lista .neo-mobile-card-value {
        font-size: 13px;
        color: var(--neo-gray-700);
        flex: 1;
    }
    
    /* Footer con acción */
    #view-usuarios-lista .neo-mobile-card-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--neo-gray-100);
        display: flex;
        justify-content: flex-end;
    }
    
    #view-usuarios-lista .neo-mobile-card-footer button {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid var(--neo-danger-light);
        background: transparent;
        color: var(--neo-danger);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    #view-usuarios-lista .neo-mobile-card-footer button:active {
        background: var(--neo-danger-light);
    }
    
    #view-usuarios-lista .neo-mobile-card-footer button svg {
        width: 16px;
        height: 16px;
    }
    
    /* Estado vacío */
    #view-usuarios-lista .neo-mobile-empty {
        text-align: center;
        padding: 60px 20px;
        color: var(--neo-gray-400);
    }
    
    #view-servicios-lista .neo-mobile-empty svg {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }
    
    #view-servicios-lista .neo-mobile-empty-text {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
    }
    
    #view-servicios-lista .neo-mobile-empty-subtext {
        font-size: 12px;
        color: var(--neo-gray-400);
    }
}

/* Desktop y Tablets: ocultar contenedor móvil */
@media (min-width: 768px) {
    #view-servicios-lista .neo-mobile-cards,
    #view-clientes-lista .neo-mobile-cards,
    #view-clientes-modulo-lista .neo-mobile-cards,
    #view-usuarios-lista .neo-mobile-cards {
        display: none !important;
    }
}

.neo-table-wrapper {
    border-radius: var(--neo-radius-xl);
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    overflow: hidden;
}

.neo-data-table {
    width: 100%;
    border-collapse: collapse;
}

.neo-data-table th {
    background: var(--neo-gray-50);
    padding: 10px var(--neo-space-md);
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    border-bottom: 1px solid var(--neo-gray-200);
}

.neo-data-table td {
    padding: 8px var(--neo-space-md);
    border-bottom: 1px solid var(--neo-gray-100);
    vertical-align: middle;
}

.neo-data-table tbody tr {
    transition: var(--neo-transition);
}

.neo-data-table tbody tr:hover {
    background: var(--neo-gray-50);
}

.neo-data-table tbody tr.neo-row-clickable {
    cursor: pointer;
}

.neo-data-table tbody tr.neo-row-clickable:hover {
    background: var(--neo-primary-lighter);
}

.neo-data-table tbody tr.selected {
    background: var(--neo-primary-lighter);
}

.neo-data-table tbody tr:last-child td {
    border-bottom: none;
}

.neo-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--neo-radius-full);
    background: var(--neo-primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-white);
    font-weight: 600;
    font-size: 13px;
}

.neo-cell-name {
    font-weight: 600;
    color: var(--neo-gray-800);
}

.neo-cell-secondary {
    font-size: 13px;
    color: var(--neo-gray-700);
    font-weight: 500;
}

/* ========================================
   BADGES
======================================== */
.neo-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--neo-space-xs);
    padding: var(--neo-space-xs) var(--neo-space-md);
    border-radius: var(--neo-radius-full);
    font-size: 13px;
    font-weight: 500;
}

.neo-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--neo-radius-full);
    background: currentColor;
}

.neo-badge-success {
    background: var(--neo-success-light);
    color: var(--neo-success);
}

.neo-badge-warning {
    background: var(--neo-warning-light);
    color: var(--neo-warning);
}

.neo-badge-danger {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-badge-info {
    background: var(--neo-info-light);
    color: var(--neo-info);
}

/* Badge pequeño para componentes compactos */
.neo-badge-sm {
    font-size: 10px;
    padding: 2px 8px;
}

.neo-badge-sm .neo-badge-dot {
    width: 5px;
    height: 5px;
}

/* Tipo badges for client list */
.neo-tipo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--neo-radius-full);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.neo-tipo-contratante {
    background: rgba(52, 152, 219, 0.1);
    color: #2980b9;
}
.neo-tipo-invitado {
    background: rgba(155, 89, 182, 0.1);
    color: #8e44ad;
}

/* Tipo filter buttons */
.neo-tipo-filter {
    display: flex;
    gap: 4px;
    align-items: center;
}
.neo-tipo-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--neo-gray-200);
    border-radius: 8px;
    background: var(--neo-white);
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.neo-tipo-filter-btn:hover {
    border-color: var(--neo-gray-300);
    color: var(--neo-gray-700);
}
.neo-tipo-filter-btn.active {
    background: var(--neo-primary);
    color: white;
    border-color: var(--neo-primary);
}
.neo-tipo-filter-btn svg {
    width: 11px;
    height: 11px;
}

/* ========================================
   ACTION BUTTONS
======================================== */
.neo-action-buttons {
    display: flex;
    gap: var(--neo-space-xs);
}

.neo-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--neo-gray-100);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-500);
    transition: var(--neo-transition);
}

.neo-action-btn:hover {
    background: var(--neo-gray-200);
    color: var(--neo-gray-700);
}

.neo-action-btn.neo-action-primary:hover {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-action-btn.neo-action-danger:hover {
    background: var(--neo-danger-light);
    color: var(--neo-danger);
}

.neo-action-btn svg {
    width: 16px;
    height: 16px;
}

.neo-row-clickable .neo-action-btn {
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.neo-row-clickable:hover .neo-action-btn {
    opacity: 1;
}

/* ========================================
   INLINE CALENDAR
======================================== */
.neo-calendar-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--neo-space-xl);
    margin-top: var(--neo-space-md);
}

.neo-calendar-section {
    background: var(--neo-gray-50);
    border-radius: var(--neo-radius-lg);
    padding: var(--neo-space-lg);
    border: 1px solid var(--neo-gray-200);
}

.neo-calendar-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-700);
    margin-bottom: var(--neo-space-md);
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-calendar-section-title svg {
    width: 16px;
    height: 16px;
    color: var(--neo-primary);
}

.neo-calendar {
    background: var(--neo-white);
    border-radius: var(--neo-radius-md);
    overflow: hidden;
}

.neo-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--neo-space-md);
    background: var(--neo-primary-light);
}

.neo-calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
}

.neo-calendar-nav-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--neo-white);
    border-radius: var(--neo-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-gray-600);
    transition: var(--neo-transition);
}

.neo-calendar-nav-btn:hover {
    background: var(--neo-primary);
    color: var(--neo-white);
}

.neo-calendar-nav-btn svg {
    width: 14px;
    height: 14px;
}

.neo-calendar-month {
    font-weight: 600;
    font-size: 13px;
    color: var(--neo-gray-800);
}

.neo-calendar-grid {
    padding: var(--neo-space-sm);
}

.neo-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--neo-space-xs);
}

.neo-calendar-weekday {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-400);
    text-transform: uppercase;
    padding: var(--neo-space-xs);
}

.neo-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.neo-calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--neo-gray-700);
    border-radius: var(--neo-radius-sm);
    cursor: pointer;
    transition: var(--neo-transition);
    border: 2px solid transparent;
}

.neo-calendar-day:hover {
    background: var(--neo-gray-100);
}

.neo-calendar-day.other-month {
    color: var(--neo-gray-300);
}

.neo-calendar-day.today {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
    font-weight: 600;
}

.neo-calendar-day.selected {
    background: var(--neo-primary-light);
    color: var(--neo-primary-dark);
    font-weight: 600;
    border-color: var(--neo-primary);
}

.neo-calendar-day.selected:hover {
    background: #E9E3DC;
}

.neo-calendar-day.empty {
    cursor: default;
    pointer-events: none;
}

/* Time Picker */
.neo-time-picker {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    margin-top: var(--neo-space-md);
    padding: var(--neo-space-md);
    background: var(--neo-white);
    border-radius: var(--neo-radius-md);
}

.neo-time-picker-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-600);
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
}

.neo-time-picker-label svg {
    width: 16px;
    height: 16px;
    color: var(--neo-primary);
}

.neo-time-inputs {
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
    flex: 1;
}

.neo-time-input {
    width: 50px;
    padding: var(--neo-space-sm);
    border: 1px solid var(--neo-gray-300);
    border-radius: var(--neo-radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--neo-gray-800);
    transition: var(--neo-transition);
}

.neo-time-input:focus {
    outline: none;
    border-color: var(--neo-primary);
    box-shadow: 0 0 0 3px var(--neo-primary-light);
}

.neo-time-separator {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-400);
}

.neo-time-period {
    display: flex;
    gap: 2px;
    margin-left: var(--neo-space-sm);
}

.neo-time-period-btn {
    padding: var(--neo-space-xs) var(--neo-space-sm);
    border: 1px solid var(--neo-gray-300);
    background: var(--neo-white);
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-500);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-time-period-btn:first-child {
    border-radius: var(--neo-radius-sm) 0 0 var(--neo-radius-sm);
}

.neo-time-period-btn:last-child {
    border-radius: 0 var(--neo-radius-sm) var(--neo-radius-sm) 0;
}

.neo-time-period-btn.active {
    background: var(--neo-primary);
    border-color: var(--neo-primary);
    color: var(--neo-white);
}

.neo-time-period-btn:hover:not(.active) {
    background: var(--neo-gray-100);
}

/* Selected datetime display */
.neo-selected-datetime {
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    padding: var(--neo-space-sm) var(--neo-space-md);
    background: var(--neo-success-light);
    border-radius: var(--neo-radius-md);
    margin-top: var(--neo-space-md);
    font-size: 13px;
    color: var(--neo-success);
    font-weight: 500;
}

.neo-selected-datetime svg {
    width: 16px;
    height: 16px;
}

/* Panel Calendar Styles */
.neo-panel-calendar-block {
    background: var(--neo-gray-50);
    border-radius: var(--neo-radius-lg);
    padding: var(--neo-space-sm);
    margin-bottom: var(--neo-space-sm);
}

.neo-panel-calendar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-700);
    margin-bottom: var(--neo-space-sm);
    display: flex;
    align-items: center;
    gap: var(--neo-space-xs);
}

.neo-panel-calendar-title svg {
    width: 14px;
    height: 14px;
    color: var(--neo-primary);
}

.neo-calendar-compact {
    /* Sin borde */
}

.neo-calendar-compact .neo-calendar-header {
    padding: var(--neo-space-sm);
}

.neo-calendar-compact .neo-calendar-month {
    font-size: 13px;
}

.neo-calendar-compact .neo-calendar-grid {
    padding: var(--neo-space-xs);
}

.neo-calendar-compact .neo-calendar-day {
    font-size: 13px;
}

/* Calendar Month/Year Selectors */
.neo-calendar-selectors {
    display: flex;
    align-items: center;
    gap: 4px;
}

.neo-calendar-month-btn,
.neo-calendar-year-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--neo-gray-100);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--neo-gray-700);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-calendar-month-btn:hover,
.neo-calendar-year-btn:hover {
    background: var(--neo-gray-200);
    border-color: var(--neo-gray-300);
}

.neo-calendar-month-btn.active,
.neo-calendar-year-btn.active {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
}

.neo-calendar-month-btn svg,
.neo-calendar-year-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.neo-calendar-month-btn.active svg,
.neo-calendar-year-btn.active svg {
    transform: rotate(180deg);
}

.neo-calendar-view {
    min-height: 220px;
}

.neo-calendar-picker {
    padding: 12px;
}

.neo-calendar-months-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.neo-calendar-years-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
}

.neo-calendar-month-item,
.neo-calendar-year-item {
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-700);
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-calendar-month-item:hover,
.neo-calendar-year-item:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-calendar-month-item.selected,
.neo-calendar-year-item.selected {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
    font-weight: 600;
}

.neo-calendar-month-item.current,
.neo-calendar-year-item.current {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    font-weight: 600;
}

.neo-time-picker-compact {
    padding: var(--neo-space-sm);
    margin-top: var(--neo-space-sm);
}

.neo-time-picker-compact .neo-time-input {
    width: 40px;
    padding: var(--neo-space-xs);
    font-size: 13px;
}

/* ========================================
   HORARIO VELATORIO PANEL
======================================== */
.neo-horario-panel {
    padding: 0;
}

.neo-horarios-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.neo-horario-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-horario-item:hover {
    background: white;
    border-color: var(--neo-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.neo-horario-item {
    cursor: pointer;
}

.neo-horario-item.editing {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    box-shadow: 0 2px 8px rgba(152, 125, 95, 0.2);
}

.neo-horario-item.editing .neo-horario-item-icon {
    background: var(--neo-primary);
    color: white;
}

.neo-horario-item.editing .neo-horario-item-delete {
    opacity: 1;
}

.neo-horario-item-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--neo-radius-md);
    background: var(--neo-primary-light);
    color: var(--neo-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.neo-horario-item-icon svg {
    width: 14px;
    height: 14px;
}

.neo-horario-item-content {
    flex: 1;
    min-width: 0;
}

.neo-horario-item-fecha {
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-800);
}

.neo-horario-item-hora {
    font-size: 11px;
    color: var(--neo-gray-500);
}

.neo-horario-item-edit,
.neo-horario-item-delete {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--neo-gray-400);
    cursor: pointer;
    border-radius: var(--neo-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--neo-transition);
    opacity: 0;
    flex-shrink: 0;
}

.neo-horario-item:hover .neo-horario-item-edit,
.neo-horario-item:hover .neo-horario-item-delete {
    opacity: 1;
}

.neo-horario-item-edit:hover {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-horario-item-delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

.neo-horario-item-edit svg,
.neo-horario-item-delete svg {
    width: 14px;
    height: 14px;
}

.neo-horario-form {
    background: white;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    padding: 10px;
}

.neo-horario-tipo-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.neo-horario-tipo-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 8px;
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    font-size: 11px;
    font-weight: 500;
    color: var(--neo-gray-600);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-horario-tipo-btn:hover {
    background: var(--neo-gray-100);
}

.neo-horario-tipo-btn.active {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
}

.neo-horario-tipo-btn svg {
    width: 14px;
    height: 14px;
}

.neo-horario-modo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.neo-horario-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.neo-horario-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--neo-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.neo-horario-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.neo-horario-calendar-mini {
    flex: 1;
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    padding: 8px;
}

.neo-mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.neo-mini-cal-nav {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--neo-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--neo-radius-sm);
}

.neo-mini-cal-nav:hover {
    background: var(--neo-gray-200);
}

.neo-mini-cal-nav svg {
    width: 14px;
    height: 14px;
}

.neo-mini-cal-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-700);
}

.neo-mini-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.neo-mini-cal-weekday {
    font-size: 9px;
    font-weight: 600;
    color: var(--neo-gray-400);
    text-align: center;
    padding: 2px;
}

.neo-mini-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.neo-mini-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--neo-gray-600);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-mini-cal-day:hover {
    background: var(--neo-gray-200);
}

.neo-mini-cal-day.selected {
    background: var(--neo-primary-light);
    color: var(--neo-primary-dark);
    font-weight: 600;
}

.neo-mini-cal-day.today {
    border: 1px solid var(--neo-primary);
    color: var(--neo-primary);
}

.neo-mini-cal-day.empty {
    cursor: default;
    pointer-events: none;
}

.neo-mini-cal-day.other-month {
    color: var(--neo-gray-300);
}

.neo-horario-time-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    padding: 6px 10px;
}

.neo-time-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.neo-spinner-btn {
    width: 24px;
    height: 18px;
    border: none;
    background: var(--neo-gray-100);
    color: var(--neo-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--neo-transition);
}

.neo-spinner-btn:hover {
    background: var(--neo-gray-200);
    color: var(--neo-gray-700);
}

.neo-spinner-btn svg {
    width: 12px;
    height: 12px;
}

.neo-spinner-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--neo-gray-800);
    min-width: 24px;
    text-align: center;
}

.neo-time-sep {
    font-size: 16px;
    font-weight: 600;
    color: var(--neo-gray-400);
}

.neo-time-hrs {
    font-size: 11px;
    color: var(--neo-gray-400);
    margin-left: 4px;
}

.neo-horario-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.neo-horario-a {
    font-size: 13px;
    color: var(--neo-gray-500);
}

.neo-horarios-empty {
    text-align: center;
    padding: 20px;
    color: var(--neo-gray-400);
    font-size: 13px;
}

/* Botón guardar horario */
.neo-horario-save-container {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    animation: horarioSaveSlideIn 0.3s ease;
}

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

.neo-horario-save-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--neo-primary);
    color: white;
    border: none;
    border-radius: var(--neo-radius-md);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--neo-font-family);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(152, 125, 95, 0.3);
}

.neo-horario-save-btn:hover {
    background: var(--neo-primary-hover);
    box-shadow: 0 4px 12px rgba(152, 125, 95, 0.4);
    transform: translateY(-1px);
}

.neo-horario-save-btn svg {
    width: 16px;
    height: 16px;
}

.neo-horario-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--neo-gray-100);
    color: var(--neo-gray-600);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--neo-font-family);
    cursor: pointer;
    transition: all 0.2s ease;
}

.neo-horario-cancel-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.neo-horario-cancel-btn svg {
    width: 14px;
    height: 14px;
}

/* Calendario único con selección de rango */
.neo-horario-calendar {
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    padding: 8px;
    margin-bottom: 8px;
}

.neo-horario-calendar .neo-hcal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.neo-horario-calendar .neo-hcal-nav {
    width: 24px;
    height: 24px;
    border: none;
    background: white;
    color: var(--neo-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--neo-radius-sm);
    border: 1px solid var(--neo-gray-200);
    transition: var(--neo-transition);
}

.neo-horario-calendar .neo-hcal-nav:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-horario-calendar .neo-hcal-nav svg {
    width: 14px;
    height: 14px;
}

.neo-horario-calendar .neo-hcal-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-700);
}

.neo-horario-calendar .neo-hcal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 4px;
}

.neo-horario-calendar .neo-hcal-weekday {
    font-size: 9px;
    font-weight: 600;
    color: var(--neo-gray-400);
    text-align: center;
    padding: 2px;
    text-transform: uppercase;
}

.neo-horario-calendar .neo-hcal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.neo-horario-calendar .neo-hcal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--neo-gray-600);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
    border: 1px solid transparent;
}

.neo-horario-calendar .neo-hcal-day:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-horario-calendar .neo-hcal-day.today {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    font-weight: 600;
}

.neo-horario-calendar .neo-hcal-day.selected-single {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
    font-weight: 600;
}

.neo-horario-calendar .neo-hcal-day.empty {
    color: var(--neo-gray-300);
    cursor: default;
    pointer-events: none;
    background: transparent;
}

.neo-horario-calendar .neo-hcal-day.disabled,
.neo-hcal-day.disabled {
    color: var(--neo-gray-300);
    cursor: not-allowed;
    pointer-events: none;
    background: transparent;
    text-decoration: line-through;
    opacity: 0.5;
}

.neo-hcal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.neo-hcal-nav {
    width: 24px;
    height: 24px;
    border: none;
    background: white;
    color: var(--neo-gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--neo-radius-sm);
    border: 1px solid var(--neo-gray-200);
    transition: var(--neo-transition);
}

.neo-hcal-nav:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-hcal-nav svg {
    width: 14px;
    height: 14px;
}

.neo-hcal-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-700);
}

.neo-hcal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 4px;
}

.neo-hcal-weekday {
    font-size: 9px;
    font-weight: 600;
    color: var(--neo-gray-400);
    text-align: center;
    padding: 2px;
    text-transform: uppercase;
}

.neo-hcal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.neo-hcal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--neo-gray-600);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
    border: 1px solid transparent;
}

.neo-hcal-day:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-hcal-day.today {
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    font-weight: 600;
}

.neo-hcal-day.selected-start,
.neo-hcal-day.selected-end,
.neo-hcal-day.selected-single {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
    font-weight: 600;
}

.neo-hcal-day.in-range {
    background: #fef9f3;
    border-radius: 0;
}

.neo-hcal-day.selected-start {
    border-radius: 6px 0 0 6px;
}

.neo-hcal-day.selected-end {
    border-radius: 0 6px 6px 0;
}

.neo-hcal-day.selected-start.selected-end {
    border-radius: 6px;
}

.neo-hcal-day.empty {
    cursor: default;
    pointer-events: none;
    background: transparent;
}

.neo-hcal-day.past {
    color: var(--neo-gray-300);
}

.neo-hcal-day.already-added {
    background: var(--neo-success-light);
    color: var(--neo-success);
    font-weight: 600;
    position: relative;
}

.neo-hcal-day.already-added::after {
    content: '✓';
    position: absolute;
    bottom: -1px;
    right: 1px;
    font-size: 7px;
    line-height: 1;
    color: var(--neo-success);
}

/* Indicador de selección */
.neo-horario-selection-info {
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--neo-radius-md);
    font-size: 11px;
    color: #0369a1;
    text-align: center;
}

.neo-selection-hint {
    display: block;
}

.neo-selection-dates {
    font-weight: 600;
}

/* Grid de horas visual */
.neo-horario-horas-container {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.neo-hora-selector {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.neo-hora-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    padding: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.neo-hora-btn {
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--neo-gray-600);
    background: white;
    border: 1px solid var(--neo-gray-200);
    border-radius: 4px;
    cursor: pointer;
    transition: var(--neo-transition);
    text-align: center;
}

.neo-hora-btn:hover {
    background: var(--neo-gray-100);
    border-color: var(--neo-gray-300);
}

.neo-hora-btn.selected {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
    font-weight: 500;
}

/* Hora Display Button */
.neo-hora-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-hora-display:hover {
    border-color: var(--neo-primary);
    background: var(--neo-gray-50);
}

.neo-hora-display span {
    font-size: 14px;
    font-weight: 400;
    color: var(--neo-gray-800);
}

.neo-hora-display span.neo-hora-placeholder {
    color: var(--neo-gray-400);
    font-weight: 400;
}

.neo-time-input::placeholder {
    color: var(--neo-gray-400);
    font-weight: 400;
}

.neo-hora-display svg {
    width: 16px;
    height: 16px;
    color: var(--neo-gray-400);
}

/* Hora Picker Modal */
.neo-hora-picker {
    background: white;
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    margin-top: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
}

.neo-hora-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--neo-gray-50);
    border-bottom: 1px solid var(--neo-gray-200);
}

.neo-hora-picker-header span {
    font-size: 12px;
    font-weight: 600;
    color: var(--neo-gray-700);
}

.neo-hora-picker-close {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--neo-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--neo-radius-sm);
}

.neo-hora-picker-close:hover {
    background: var(--neo-gray-200);
    color: var(--neo-gray-600);
}

.neo-hora-picker-close svg {
    width: 14px;
    height: 14px;
}

.neo-hora-step {
    padding: 10px;
}

.neo-hora-step-label {
    font-size: 11px;
    color: var(--neo-gray-500);
    margin-bottom: 8px;
    text-align: center;
}

.neo-hora-ampm-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.neo-ampm-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--neo-gray-50);
    border: 2px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-lg);
    cursor: pointer;
    transition: var(--neo-transition);
}

.neo-ampm-btn:hover {
    border-color: var(--neo-primary);
    background: var(--neo-primary-light);
}

.neo-ampm-btn svg {
    width: 22px;
    height: 22px;
    color: var(--neo-primary);
}

.neo-ampm-btn span {
    font-size: 12px;
    font-weight: 400;
    color: var(--neo-gray-800);
}

.neo-ampm-btn small {
    font-size: 10px;
    color: var(--neo-gray-500);
}

.neo-hora-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.neo-hora-grid-compact .neo-hora-btn,
.neo-min-btn {
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--neo-gray-700);
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: var(--neo-radius-md);
    cursor: pointer;
    transition: var(--neo-transition);
    text-align: center;
}

.neo-hora-grid-compact .neo-hora-btn:hover,
.neo-min-btn:hover {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary-dark);
}

/* ========================================
   STATS
======================================== */
.neo-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--neo-space-xs);
    margin-bottom: var(--neo-space-sm);
}

.neo-stat-card {
    background: var(--neo-white);
    border-radius: var(--neo-radius-xl);
    padding: var(--neo-space-sm) var(--neo-space-md);
    border: 1px solid var(--neo-gray-150);
    display: flex;
    align-items: center;
    gap: var(--neo-space-sm);
    transition: var(--neo-transition);
}

.neo-stat-card:hover {
    box-shadow: var(--neo-shadow-md);
    transform: translateY(-2px);
}

.neo-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--neo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.neo-stat-icon svg {
    width: 17px;
    height: 17px;
}

.neo-stat-icon.primary {
    background: var(--neo-primary-light);
    color: var(--neo-primary);
}

.neo-stat-icon.success {
    background: var(--neo-success-light);
    color: var(--neo-success);
}

.neo-stat-icon.warning {
    background: var(--neo-warning-light);
    color: var(--neo-warning);
}

.neo-stat-icon.info {
    background: var(--neo-info-light);
    color: var(--neo-info);
}

.neo-stat-content {
    flex: 1;
}

.neo-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--neo-gray-800);
    line-height: 1;
    margin-bottom: 2px;
}

.neo-stat-label {
    font-size: 12px;
    color: var(--neo-gray-500);
}

/* ========================================
   TOOLTIP
======================================== */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: var(--neo-space-xs) var(--neo-space-sm);
    background: var(--neo-gray-800);
    color: var(--neo-white);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--neo-radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--neo-transition);
    pointer-events: none;
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}

/* Desactivar tooltips CSS para nav-items del sidebar */
.neo-sidebar .neo-nav-item[data-tooltip]::after {
    display: none !important;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1400px) {
    .neo-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet / iPad */
@media (max-width: 1024px) {
    .neo-sidebar-toggle {
        width: 36px;
        height: 36px;
    }
    
    /* .neo-nav-item min-height:48px removido: forzaba items mas altos que
       el desktop base (26px), rompiendo el layout del sidebar en tablet. */

    .neo-form-with-image {
        flex-direction: column-reverse;
    }
    
    .neo-form-image {
        justify-content: center;
        margin-right: 0;
    }
    
    .neo-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .neo-calendar-container {
        grid-template-columns: 1fr;
    }
    
    .neo-open-services-bar {
        padding: 0 var(--neo-space-md);
    }
    
    /* Paneles laterales más anchos en tablets/móviles horizontales */
    .neo-panel {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ocultar botón de Intervinientes en el dropdown móvil/tablet */
    #mobile-tab-intervinientes {
        display: none !important;
    }
    
    /* Vista de formularios - ajustar posición del toolbar para no taparse con neo-item-tabs-wrapper */
    #view-servicios-formularios .neo-floating-toolbar {
        margin-top: 52px !important;
    }
    
    /* Mover botón de agregar formulario a la izquierda */
    #view-servicios-formularios #form-listado-add-icon-btn {
        right: 38px !important;
    }
    
    /* Panel de herramientas cerrado por defecto en tablet */
    #herramientas-panel.neo-panel-collapsed {
        width: 0 !important;
        left: 100% !important;
        display: none !important;
    }
    
    #herramientas-panel:not(.neo-panel-collapsed) {
        display: flex !important;
    }
    
    /* Ocultar toolbar de botones en vista de formularios y mostrar en dropdown */
    #view-servicios-formularios #form-tabs-bar {
        display: none !important;
    }
    
    /* Mostrar herramientas en el dropdown */
    .neo-facturacion-tools-mobile {
        display: block !important;
    }
    
    /* Visor de documento con zoom en tablet */
    #form-pdf-viewer {
        position: relative !important;
    }
    
    #form-zoom-controls {
        display: flex !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
    }
    
    #form-document-scroll-area {
        padding: 12px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
    }
    
    #form-pdf-page-content {
        width: 816px !important;
        transform-origin: top left !important;
    }
    
    #form-zoom-wrapper {
        display: block !important;
        overflow: visible !important;
    }
}

/* ========================================
   RESPONSIVE - TABLETS ESPECÍFICO (768px - 1024px)
   iPad, iPad Air, iPad Pro, Tablets Android
   SOLO TABLETS - Filtros colapsables y altura uniforme
======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Optimizar para pantallas medianas */
    .neo-app-main {
        padding: 20px !important;
    }
    
    /* Floating toolbar */
    .neo-floating-toolbar {
        padding: 14px 20px !important;
        min-height: 64px !important;
    }
    
    /* Componentes con ancho fijo como en desktop - 300px */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* Selectores - altura 48px y ancho fijo */
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        min-height: 48px !important;
        max-height: 48px !important;
        height: 48px !important;
        padding: 10px 14px !important;
        width: 100% !important;
        min-width: 300px !important;
        box-sizing: border-box !important;
    }
    
    /* Botones activos - parte superior del conjunto */
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Dropdowns - parte inferior del conjunto */
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        max-height: 500px !important;
        width: 100% !important;
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    /* Búsqueda - altura 48px */
    .neo-search-box {
        height: 48px !important;
    }
    
    .neo-search-box input {
        height: 48px !important;
        padding: 12px 14px 12px 40px !important;
        font-size: 15px !important;
    }
    
    /* Botón "+ Nuevo" - altura 48px */
    .neo-btn-add-service {
        min-height: 48px !important;
        height: 48px !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    
    .neo-btn-add-service svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Edit bar optimizado */
    #edit-floating-bar {
        gap: 24px !important;
    }
    
    .neo-edit-bar-title {
        max-width: 30% !important;
    }
    
    .neo-servicio-item,
    .fact-listado-item {
        padding: 16px !important;
        min-height: 72px !important;
    }
    
    /* Búsqueda en dropdowns - igual que móviles */
    .neo-listado-dropdown-panel .neo-crud-search,
    .neo-servicio-dropdown-panel .neo-crud-search {
        padding: 0 !important;
    }
    
    .neo-listado-dropdown-panel .neo-crud-search input,
    .neo-servicio-dropdown-panel .neo-crud-search input {
        font-size: 12px !important;
        padding: 7px 8px 7px 30px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }
    
    .neo-listado-dropdown-panel .neo-crud-search svg,
    .neo-servicio-dropdown-panel .neo-crud-search svg {
        width: 14px !important;
        height: 14px !important;
        left: 8px !important;
    }
    
    /* Botón "+ Nuevo" - igual que móviles */
    .neo-listado-add-btn-dropdown {
        padding: 7px 10px !important;
        font-size: 11px !important;
        min-width: 65px !important;
        max-width: 75px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }
    
    .neo-listado-add-btn-dropdown svg {
        width: 13px !important;
        height: 13px !important;
    }
    
    /* Avatares más grandes */
    .neo-detail-avatar-small {
        width: 44px !important;
        height: 44px !important;
        font-size: 15px !important;
    }
    
    /* Cards optimizadas para tablet */
    .neo-card {
        padding: 20px !important;
        border-radius: 16px !important;
    }
    
    /* Stats en 3 columnas en tablet */
    .neo-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
    
    .neo-stat-card {
        padding: 20px !important;
    }
    
    /* Formularios en 2 columnas */
    .neo-form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    /* Tabs más espaciosas */
    .neo-item-tab {
        min-height: 84px !important;
        padding: 16px !important;
        flex-shrink: 0 !important;
    }
    
    /* Mobile cards más grandes */
    #view-servicios-lista .neo-mobile-card {
        padding: 20px !important;
    }
    
    /* Badges más compactos en tablets */
    .neo-badge {
        font-size: 13px !important;
        padding: 3px 12px !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .neo-badge-sm {
        font-size: 10px !important;
        padding: 2px 8px !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Botones de acción óptimos */
    .neo-action-btn {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* Sidebar más ancho */
    .neo-sidebar {
        width: 300px !important;
    }
    
    /* FILTROS COLAPSABLES - SOLO TABLETS */
    .neo-filters-toggle-btn {
        display: flex !important;
    }
    
    #servicios-filters-desktop,
    #client-tipo-filter {
        display: none !important;
    }
    
    /* Tabs bar - menú de 3 puntos */
    #view-servicios-editar .neo-tabs-bar-container {
        display: none !important;
    }
    
    .neo-facturacion-menu .ds-nav-pill {
        padding: 12px !important;
        min-width: 48px;
        width: 48px;
        height: 48px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .neo-facturacion-menu .ds-nav-label,
    .neo-facturacion-menu .neo-facturacion-chevron {
        display: none !important;
    }
    
    .neo-facturacion-menu .ds-nav-icon {
        display: none !important;
    }
    
    .neo-facturacion-menu .ds-nav-pill::before {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        background: currentColor;
        border-radius: 50%;
        box-shadow: 0 -9px 0 currentColor, 0 9px 0 currentColor;
        position: relative;
    }
    
    .neo-facturacion-tabs-mobile {
        display: block !important;
    }
    
    .neo-facturacion-menu ~ * .neo-tabs-bar-container,
    .neo-tabs-bar-container:has(+ .neo-facturacion-menu) {
        display: none !important;
    }
    
    /* Paneles laterales a ancho completo en tablets */
    .neo-panel {
        width: 100% !important;
        max-width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        border-left: none !important;
    }
    
    .neo-panel.neo-panel-collapsed {
        width: 0 !important;
        left: 100% !important;
    }
    
    /* Header del panel con posicionamiento relativo */
    .neo-panel-header {
        position: relative !important;
        padding-right: 68px !important; /* Espacio para hamburguesa */
    }
    
    /* Botón de cerrar posicionado a la izquierda del hamburguesa */
    .neo-panel-close {
        position: absolute !important;
        right: 68px !important; /* 12px + 44px + 12px = izquierda del hamburguesa */
        top: 12px !important; /* Alineado con hamburguesa */
        transform: none !important;
        width: 44px !important;
        height: 44px !important;
        background: var(--neo-danger-light) !important;
        color: var(--neo-danger) !important;
        z-index: 10 !important;
    }
    
    .neo-panel-close svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .neo-panel-back {
        width: 44px !important;
        height: 44px !important;
    }
    
    .neo-panel-back svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* iPad Mini (768×1024) */
@media (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
    .neo-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .neo-form-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Componentes con ancho fijo como en desktop - 300px */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* Altura uniforme 48px y ancho fijo */
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn,
    .neo-search-box,
    .neo-btn-add-service {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        width: 100% !important;
        min-width: 300px !important;
    }
    
    /* Botones activos - conjunto visual */
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Dropdowns - conjunto visual */
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        width: 100% !important;
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    .neo-filters-toggle-btn {
        display: flex !important;
    }
    
    #servicios-filters-desktop,
    #client-tipo-filter {
        display: none !important;
    }
}

/* iPad Air/iPad Pro 11" (810-850px) */
@media (min-width: 810px) and (max-width: 850px) {
    .neo-app-main {
        padding: 24px !important;
    }
    
    .neo-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Componentes con ancho fijo como en desktop - 300px */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* Altura uniforme 48px y ancho fijo */
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn,
    .neo-search-box,
    .neo-btn-add-service {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        width: 100% !important;
        min-width: 300px !important;
    }
    
    /* Botones activos - conjunto visual */
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Dropdowns - conjunto visual */
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        width: 100% !important;
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    .neo-filters-toggle-btn {
        display: flex !important;
    }
    
    #servicios-filters-desktop,
    #client-tipo-filter {
        display: none !important;
    }
}

/* iPad Pro 12.9" (1024×1366) */
@media (min-width: 1024px) and (max-width: 1024px) {
    .neo-stats {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .neo-form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Componentes con ancho fijo como en desktop - 300px */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* Altura uniforme 48px y ancho fijo */
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn,
    .neo-search-box,
    .neo-btn-add-service {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        width: 100% !important;
        min-width: 300px !important;
    }
    
    /* Botones activos - conjunto visual */
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Dropdowns - conjunto visual */
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        width: 100% !important;
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    .neo-filters-toggle-btn {
        display: flex !important;
    }
    
    #servicios-filters-desktop,
    #client-tipo-filter {
        display: none !important;
    }
}

/* ========================================
   TABLETS (768px - 1024px) - Sidebar siempre visible, colapsado por defecto
======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* IMPORTANTE: Anular TODOS los comportamientos de hover del sidebar */
    .neo-sidebar,
    .neo-sidebar:hover,
    .neo-sidebar:not(.sidebar-collapsed),
    .neo-sidebar:not(.sidebar-collapsed):hover,
    .neo-sidebar.sidebar-collapsed {
        width: 76px !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        z-index: 10000 !important;
        transform: translateX(0) !important;
        transition: width 0.3s ease !important;
        /* Sin box-shadow en colapsado: el shadow marca la "capa" flotante
           del sidebar expandido; en colapsado no va (parece bug visual). */
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Sidebar expandido en tablet: box-shadow para marcar la capa flotante. */
    .neo-sidebar.tablet-expanded,
    .neo-sidebar.tablet-expanded:hover {
        width: var(--neo-sidebar-width) !important;
        box-shadow: 2px 0 12px rgba(0,0,0,0.1) !important;
    }
    
    /* Logo colapsado */
    .neo-sidebar .neo-sidebar-logo,
    .neo-sidebar:hover .neo-sidebar-logo {
        width: 44px !important;
        overflow: hidden !important;
    }
    
    .neo-sidebar.tablet-expanded .neo-sidebar-logo,
    .neo-sidebar.tablet-expanded:hover .neo-sidebar-logo {
        width: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    /* Header colapsado */
    .neo-sidebar .neo-sidebar-header,
    .neo-sidebar:hover .neo-sidebar-header {
        justify-content: center !important;
        padding: 16px 8px !important;
    }
    
    .neo-sidebar.tablet-expanded .neo-sidebar-header,
    .neo-sidebar.tablet-expanded:hover .neo-sidebar-header {
        justify-content: flex-start !important;
        padding: 16px !important;
    }
    
    /* Nav items: NO overriden en tablet. El desktop base ya centra bien el
       icono via .neo-sidebar.sidebar-collapsed .neo-nav-item {padding:5px
       24px; gap:0}, tomando en cuenta la etiqueta vertical de la categoria.
       Cualquier override propio de tablet aca deforma el layout que ya
       funciona en desktop. */


    /* Textos ocultos cuando colapsado */
    .neo-sidebar .neo-nav-text,
    .neo-sidebar .neo-nav-badge,
    .neo-sidebar .neo-nav-arrow,
    .neo-sidebar .neo-nav-section-title,
    .neo-sidebar .neo-user-info,
    .neo-sidebar .neo-nav-submenu,
    .neo-sidebar:hover .neo-nav-text,
    .neo-sidebar:hover .neo-nav-badge,
    .neo-sidebar:hover .neo-nav-arrow,
    .neo-sidebar:hover .neo-nav-section-title,
    .neo-sidebar:hover .neo-user-info,
    .neo-sidebar:hover .neo-nav-submenu,
    .neo-sidebar.sidebar-collapsed .neo-nav-text,
    .neo-sidebar.sidebar-collapsed .neo-nav-badge,
    .neo-sidebar.sidebar-collapsed .neo-nav-arrow,
    .neo-sidebar.sidebar-collapsed .neo-nav-section-title,
    .neo-sidebar.sidebar-collapsed .neo-user-info,
    .neo-sidebar.sidebar-collapsed .neo-nav-submenu {
        opacity: 0 !important;
        width: 0 !important;
        visibility: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        flex: 0 !important;
    }
    
    /* Textos visibles cuando expandido */
    .neo-sidebar.tablet-expanded .neo-nav-text,
    .neo-sidebar.tablet-expanded .neo-nav-badge,
    .neo-sidebar.tablet-expanded .neo-nav-arrow,
    .neo-sidebar.tablet-expanded .neo-nav-section-title,
    .neo-sidebar.tablet-expanded .neo-user-info,
    .neo-sidebar.tablet-expanded .neo-nav-submenu,
    .neo-sidebar.tablet-expanded:hover .neo-nav-text,
    .neo-sidebar.tablet-expanded:hover .neo-nav-badge,
    .neo-sidebar.tablet-expanded:hover .neo-nav-arrow,
    .neo-sidebar.tablet-expanded:hover .neo-nav-section-title,
    .neo-sidebar.tablet-expanded:hover .neo-user-info,
    .neo-sidebar.tablet-expanded:hover .neo-nav-submenu {
        opacity: 1 !important;
        width: auto !important;
        visibility: visible !important;
        flex: unset !important;
    }
    
    .neo-sidebar.tablet-expanded .neo-nav-text {
        flex: 1 !important;
    }
    
    .neo-sidebar.tablet-expanded .neo-user-info {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* User card colapsado */
    .neo-sidebar .neo-user-card,
    .neo-sidebar:hover .neo-user-card {
        justify-content: center !important;
        gap: 0 !important;
    }
    
    .neo-sidebar.tablet-expanded .neo-user-card,
    .neo-sidebar.tablet-expanded:hover .neo-user-card {
        justify-content: flex-start !important;
        gap: 10px !important;
    }
    
    /* Ocultar botón hamburguesa en tablets */
    .neo-mobile-menu-btn {
        display: none !important;
    }
    
    /* Overlay para tablets - a la derecha del sidebar colapsado */
    .neo-sidebar-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 76px !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .neo-sidebar-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Ajustar contenido principal. margin-left:0 (era 76) porque cuando la
       app hija corre embebida en un iframe del CEM, el iframe ya empieza a
       la derecha del sidebar del CEM. El margin-left:76 duplicaba el
       desplazamiento. Standalone: el sidebar propio de la app se encarga. */
    .neo-app-main {
        margin-left: 0 !important;
        transition: margin-left 0.3s ease !important;
    }
    
    /* Ajustar tabs bar. left:0 (era 76) porque el CEM ya le mete
       padding-left:76 desde cem.js para acomodar el sidebar fixed. Con
       left:76 + padding-left:76 el contenido de la barra quedaba a 152px
       del borde y desalineado. */
    .neo-program-tabs-bar {
        left: 0 !important;
        transition: left 0.3s ease !important;
    }
    
    /* Ajustar item tabs wrapper */
    .neo-item-tabs-wrapper {
        left: 76px !important;
        transition: left 0.3s ease !important;
    }
}

/* ========================================
   MÓVILES PEQUEÑOS (< 768px) - Menú oculto con hamburguesa
======================================== */
@media (max-width: 767px) {
    .neo-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: var(--neo-sidebar-width) !important;
        z-index: 10000;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .neo-sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    
    /* Asegurar que los textos siempre sean visibles cuando el menú está abierto */
    .neo-sidebar .neo-nav-text {
        opacity: 1 !important;
        width: auto !important;
        display: inline !important;
        visibility: visible !important;
        flex: 1 !important;
    }
    
    .neo-sidebar .neo-nav-badge {
        opacity: 1 !important;
        display: inline !important;
        visibility: visible !important;
        width: auto !important;
    }
    
    .neo-sidebar .neo-nav-arrow {
        opacity: 1 !important;
        display: flex !important;
        visibility: visible !important;
        width: auto !important;
    }
    
    .neo-sidebar .neo-nav-section-title {
        opacity: 1 !important;
        display: block !important;
        visibility: visible !important;
        width: auto !important;
    }
    
    .neo-sidebar .neo-nav-submenu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
    }
    
    .neo-sidebar .neo-logo-full {
        opacity: 1 !important;
    }
    
    .neo-sidebar .neo-sidebar-logo {
        width: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    .neo-sidebar .neo-sidebar-header {
        padding: 16px !important;
    }
    
    .neo-sidebar .neo-nav-item {
        justify-content: flex-start !important;
        padding: 12px 16px !important;
        gap: 10px !important;
    }
    
    .neo-sidebar .neo-user-info {
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        visibility: visible !important;
    }
    
    .neo-sidebar .neo-user-card {
        opacity: 1 !important;
        display: flex !important;
        gap: 10px !important;
    }
    
    /* Botón hamburguesa para móvil */
    .neo-mobile-menu-btn {
        position: fixed;
        right: 16px;
        top: 16px;
        width: 40px;
        height: 40px;
        background: var(--neo-primary);
        border: none;
        border-radius: 10px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 9999;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
        transition: all 0.3s ease;
    }
    
    .neo-mobile-menu-btn:active {
        transform: scale(0.95);
    }
    
    .neo-mobile-menu-btn svg {
        width: 20px;
        height: 20px;
        color: white;
        stroke-width: 2.5;
    }
    
    /* Overlay para móviles */
    .neo-sidebar-overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .neo-sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Contenido principal ocupa todo el ancho */
    .neo-app-main {
        margin-left: 0 !important;
        padding-top: 16px;
    }
    
    /* Tabs bar a ancho completo */
    .neo-program-tabs-bar {
        left: 0 !important;
    }
    
    .neo-item-tabs-wrapper {
        left: 0 !important;
    }
    
    /* Asegurar que el header de las cards no interfiera con el botón */
    .neo-card-header {
        padding-top: 16px !important;
    }
}

/* ========================================
   RESPONSIVE - Dispositivos 720px (Móviles modernos)
   Optimizado para: 720x1612px y similares
   ======================================== */
@media (max-width: 768px) {
    /* Optimización de rendering para móviles */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
        -webkit-touch-callout: none;
    }
    
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Overlay clickeable solo en móviles pequeños */
    .neo-sidebar-overlay.active {
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.5);
    }
    
    /* Asegurar que el sidebar sea del ancho correcto */
    .neo-sidebar {
        width: 280px !important; /* Aumentado para mejor legibilidad en 720px */
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    }
    
    /* Botón hamburguesa optimizado para 720px */
    .neo-mobile-menu-btn {
        right: 12px;
        top: 12px;
        width: 44px;
        height: 44px;
    }
    
    .neo-mobile-menu-btn svg {
        width: 22px;
        height: 22px;
    }
    
    /* Optimizar cards para 720px */
    .neo-card {
        border-radius: 12px;
    }
    
    /* Optimizar padding del contenido principal */
    .neo-app-main {
        /* padding: 12px !important; */  /* comentado para probar sin el padding forzado */
    }
    
    /* Header responsive optimizado */
    .neo-card-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    /* Headers vacíos no deben ocupar espacio en móvil */
    .neo-app-header:empty {
        display: none;
    }
    
    /* Asegurar que el toolbar tenga el mismo padding superior */
    .neo-app-main > .neo-floating-toolbar:first-child {
        margin-top: 0;
    }
    
    /* Botones de acción en header */
    .neo-card-header .neo-btn-add-service {
        width: 44px;
        height: 44px;
    }
    
    /* Tarjetas móviles optimizadas */
    .neo-mobile-card {
        padding: 14px;
        border-radius: 12px;
    }
    
    .neo-mobile-card-header {
        gap: 10px;
    }
    
    .neo-mobile-card-name {
        font-size: 15px;
    }
    
    .neo-mobile-card-value {
        font-size: 14px;
    }
    
    /* Stats optimizados para 720px */
    .neo-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .neo-stat-card {
        padding: 14px;
    }
    
    .neo-stat-value {
        font-size: 22px !important;
    }
    
    .neo-stat-label {
        font-size: 12px !important;
    }
    
    /* Búsqueda optimizada */
    .neo-search-wrapper input {
        font-size: 15px;
        padding: 10px 12px 10px 40px;
    }
    
    /* Botones táctiles más grandes */
    .neo-action-btn {
        min-width: 44px;
        min-height: 38px;
    }
    
    /* Filtros optimizados */
    .neo-tipo-filter-btn {
        font-size: 13px;
        padding: 8px 14px;
        min-height: 40px;
    }
    
    /* Paginación optimizada */
    .neo-pagination {
        padding: 12px;
    }
    
    /* Footer de vscroll */
    .neo-vscroll-footer {
        padding: 10px 12px;
    }
    
    .neo-vscroll-dot {
        width: 10px;
        height: 10px;
    }
    
    /* Badges más legibles */
    .neo-badge {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    /* Tabs optimizados */
    .neo-tab {
        font-size: 14px;
        padding: 10px 16px;
        min-height: 38px;
    }
    
    /* Floating toolbar */
    .neo-floating-toolbar {
        padding: 10px 12px;
        min-height: 56px;
    }
    
    /* Asegurar mismo espaciado para toolbars con selectores */
    #edit-floating-bar,
    .neo-floating-toolbar {
        gap: 8px !important;
    }
    
    /* Componentes con ancho fijo como en desktop - no ocupan todo el espacio */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important; /* No crece ni se encoge - ancho automático */
        min-width: 300px !important; /* Mismo min-width que desktop */
        max-width: 100% !important; /* Pero no excede el contenedor */
        position: relative !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    /* Botones de los selectores - misma altura exacta */
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        min-height: 48px !important;
        max-height: 48px !important;
        height: 48px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        width: 100% !important; /* Ocupa 100% del contenedor padre */
        min-width: 300px !important; /* Mismo min-width que desktop */
    }
    
    /* Asegurar que el contenido interno no exceda la altura */
    .neo-servicio-selector-btn > div,
    .neo-listado-floating-btn > div {
        max-height: 32px !important;
    }
    
    /* Dropdowns se adecúan exactamente al ancho del botón - formando un conjunto */
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        max-height: 400px;
        width: 100% !important; /* Mismo ancho exacto que el botón */
        left: 0 !important; /* Alineado perfectamente */
        right: auto !important;
        top: calc(100% - 2px) !important; /* Solapamiento visual */
        margin: 0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 0 0 14px 14px !important; /* Esquinas inferiores redondeadas */
        border-top: none !important; /* Sin borde superior para fusión visual */
    }
    
    /* Botones activos - esquinas superiores redondeadas */
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important; /* Esquinas superiores redondeadas */
        border-bottom-color: transparent !important; /* Sin borde inferior para fusión */
    }
    
    /* Asegurar que el componente padre tenga ancho fijo como en desktop */
    .neo-servicio-selector,
    .neo-listado-floating {
        overflow: visible !important;
        position: relative !important;
        flex: 0 0 auto !important;
        min-width: 300px !important;
    }
    
    /* Botones ocupan 100% del contenedor padre (que tiene min-width: 300px) */
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 300px !important;
    }
    
    /* Ajustar max-height para móviles */
    .neo-servicio-dropdown-panel.open,
    .neo-listado-dropdown-panel.open {
        max-height: calc(100vh - 150px);
    }
    
    /* Ajustar contenido interno del dropdown para que se adapte al ancho */
    .neo-listado-dropdown-panel .neo-listado-dropdown-header,
    .neo-servicio-dropdown-panel .neo-servicio-dropdown-header {
        padding: 8px 8px 4px 8px !important;
        box-sizing: border-box !important;
    }
    
    .neo-listado-dropdown-panel .neo-listado-dropdown-body,
    .neo-servicio-dropdown-panel .neo-servicio-dropdown-body {
        padding: 4px 8px 8px 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Contenedor de búsqueda y botón - usar todo el ancho disponible */
    #fact-listado-search-container {
        gap: 6px !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
    }
    
    /* Búsqueda compacta pero legible en dropdown */
    .neo-listado-dropdown-panel .neo-crud-search,
    .neo-servicio-dropdown-panel .neo-crud-search {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    .neo-listado-dropdown-panel .neo-crud-search input,
    .neo-servicio-dropdown-panel .neo-crud-search input {
        font-size: 12px !important;
        padding: 7px 8px 7px 30px !important;
        height: 32px !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .neo-listado-dropdown-panel .neo-crud-search svg,
    .neo-servicio-dropdown-panel .neo-crud-search svg {
        width: 14px !important;
        height: 14px !important;
        left: 8px !important;
    }
    
    /* Botón de agregar compacto pero legible */
    .neo-listado-add-btn-dropdown {
        padding: 7px 10px !important;
        font-size: 11px !important;
        min-width: 65px !important;
        max-width: 75px !important;
        gap: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        height: 32px !important;
    }
    
    .neo-listado-add-btn-dropdown svg {
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0 !important;
    }
    
    .neo-listado-add-btn-dropdown span {
        display: inline !important;
    }
    
    /* Filtros compactos pero táctiles */
    .fact-listado-filter-btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-height: 32px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    
    /* Contenedor de filtros */
    .neo-listado-dropdown-panel div[style*="gap:4px"] {
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Tabla del dropdown adaptada al ancho */
    .fact-listado-table {
        font-size: 11px !important;
        width: 100% !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }
    
    .fact-listado-table thead th {
        padding: 8px 6px !important;
        font-size: 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .fact-listado-table tbody td {
        padding: 8px 6px !important;
        font-size: 11px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Badges más pequeños */
    .fact-tipo-badge,
    .fact-listado-table .neo-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    
    /* Items del dropdown de servicios */
    .neo-servicio-dropdown-panel .neo-servicio-item {
        padding: 6px !important;
        font-size: 12px !important;
    }
    
    /* Ajustar badges de trash */
    .neo-trash-badge {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }
    
    /* Iconos de items de facturación con mismo border-radius que servicios */
    .fact-listado-item .neo-detail-avatar,
    .fact-listado-item .neo-detail-avatar-small,
    .fact-listado-item .neo-detail-avatar-xs {
        border-radius: var(--neo-radius-lg) !important;
    }
    
    /* ========================================
       ESTILOS ESPECÍFICOS PARA iOS
       Asegurar compatibilidad con iPhone
    ======================================== */
    
    /* Prevenir zoom en inputs en iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /* Scroll suave en iOS */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Optimización de fuentes para iOS */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-text-size-adjust: 100%;
    }
    
    /* Fix para 100vh en iOS */
    html {
        height: -webkit-fill-available;
    }
    
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    /* Prevenir rubber band overscroll en iOS */
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    /* Safe areas para iPhone con notch/Dynamic Island */
    .neo-mobile-menu-btn {
        right: max(12px, env(safe-area-inset-right));
        top: max(12px, env(safe-area-inset-top));
    }
    
    /* Asegurar que los selectores tengan la misma apariencia en iOS y Android */
    select {
        background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px !important;
    }
    
    /* Paneles laterales a ancho completo en móviles */
    .neo-panel {
        width: 100% !important;
        max-width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        border-left: none !important;
    }
    
    .neo-panel.neo-panel-collapsed {
        width: 0 !important;
        left: 100% !important;
    }
    
    /* Header del panel con posicionamiento relativo */
    .neo-panel-header {
        position: relative !important;
        padding-right: 68px !important; /* Espacio para hamburguesa */
    }
    
    /* Botón de cerrar posicionado a la izquierda del hamburguesa */
    .neo-panel-close {
        position: absolute !important;
        right: 68px !important; /* 12px + 44px + 12px = izquierda del hamburguesa */
        top: 12px !important; /* Alineado con hamburguesa */
        transform: none !important;
        width: 44px !important;
        height: 44px !important;
        background: var(--neo-danger-light) !important;
        color: var(--neo-danger) !important;
        z-index: 10 !important;
    }
    
    .neo-panel-close svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .neo-panel-back {
        width: 44px !important;
        height: 44px !important;
    }
    
    .neo-panel-back svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Vista de formularios - ajustar posición del toolbar para no taparse con neo-item-tabs-wrapper */
    #view-servicios-formularios .neo-floating-toolbar {
        margin-top: 52px !important;
    }
    
    #view-servicios-formularios .neo-listado-floating,
    #view-servicios-formularios .neo-facturacion-menu.neo-facturacion-right {
        align-self: flex-start !important;
    }
    
    /* Mover botón de agregar formulario a la izquierda */
    #view-servicios-formularios #form-listado-add-icon-btn {
        right: 38px !important;
    }
    
    /* Panel de herramientas cerrado por defecto en móvil */
    #herramientas-panel.neo-panel-collapsed {
        width: 0 !important;
        left: 100% !important;
        display: none !important;
    }
    
    #herramientas-panel:not(.neo-panel-collapsed) {
        display: flex !important;
    }
    
    /* Ocultar toolbar de botones en vista de formularios y mostrar en dropdown */
    #view-servicios-formularios #form-tabs-bar {
        display: none !important;
    }
    
    /* Mostrar herramientas en el dropdown */
    .neo-facturacion-tools-mobile {
        display: block !important;
    }
    
    /* Visor de documento con zoom en móvil */
    #form-pdf-viewer {
        position: relative !important;
    }
    
    #form-zoom-controls {
        display: flex !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 1000 !important;
    }
    
    #form-document-viewport {
        touch-action: pan-x pan-y !important;
        overflow: hidden !important;
    }
    
    #form-document-scroll-area {
        padding: 8px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y pinch-zoom !important;
        display: block !important;
    }
    
    #form-pdf-page-content {
        width: 816px !important;
        transform-origin: top left !important;
    }
    
    #form-zoom-wrapper {
        display: block !important;
        overflow: visible !important;
    }
    
    #form-pdf-preview-area {
        min-height: 400px !important;
        overflow: hidden !important;
    }
    
    /* Mejorar scroll suave del documento */
    #form-document-viewport {
        overflow: hidden !important;
    }
}

/* Ajustes adicionales para móviles muy pequeños (≤375px) */
@media (max-width: 375px) {
    /* Componentes con ancho fijo */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        min-width: 300px !important;
    }
    
    .neo-listado-dropdown-panel,
    .neo-servicio-dropdown-panel {
        width: 100% !important;
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    .neo-listado-dropdown-panel .neo-crud-search input,
    .neo-servicio-dropdown-panel .neo-crud-search input {
        font-size: 11px !important;
        padding: 6px 7px 6px 28px !important;
    }
    
    .neo-listado-add-btn-dropdown {
        min-width: 60px !important;
        max-width: 65px !important;
        font-size: 10px !important;
    }
    
    .fact-listado-filter-btn {
        font-size: 10px !important;
        padding: 5px 6px !important;
    }
}

/* Ajustes para móviles medianos (376px - 389px) */
@media (min-width: 376px) and (max-width: 389px) {
    /* Componentes con ancho fijo */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        min-width: 300px !important;
    }
    
    .neo-listado-dropdown-panel,
    .neo-servicio-dropdown-panel {
        width: 100% !important; /* Mismo ancho que el botón */
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
}

/* Ajustes para móviles grandes y tablets pequeñas (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    /* Componentes con ancho fijo */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        min-width: 300px !important;
    }
    
    .neo-listado-dropdown-panel,
    .neo-servicio-dropdown-panel {
        width: 100% !important;
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    .neo-listado-dropdown-panel .neo-crud-search input,
    .neo-servicio-dropdown-panel .neo-crud-search input {
        font-size: 13px !important;
        padding: 8px 10px 8px 32px !important;
    }
}

/* Ajuste específico para iPhone 14, 14 Pro y similares (390px-430px) */
@media (min-width: 390px) and (max-width: 430px) {
    /* Componentes con ancho fijo */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        min-width: 300px !important;
    }
    
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        width: 100% !important; /* Mismo ancho que el botón */
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    /* Ajustar padding interno */
    .neo-listado-dropdown-panel .neo-listado-dropdown-header,
    .neo-servicio-dropdown-panel .neo-servicio-dropdown-header {
        padding: 8px 6px 4px 6px !important;
    }
    
    .neo-listado-dropdown-panel .neo-listado-dropdown-body,
    .neo-servicio-dropdown-panel .neo-servicio-dropdown-body {
        padding: 4px 6px 8px 6px !important;
    }
}

/* Ajustes para móviles grandes (431px-480px) */
@media (min-width: 431px) and (max-width: 480px) {
    /* Componentes con ancho fijo */
    .neo-servicio-selector,
    .neo-listado-floating {
        flex: 0 0 auto !important;
        min-width: 300px !important;
    }
    
    .neo-servicio-selector-btn,
    .neo-listado-floating-btn {
        min-width: 300px !important;
    }
    
    .neo-servicio-dropdown-panel,
    .neo-listado-dropdown-panel {
        width: 100% !important; /* Mismo ancho que el botón */
        left: 0 !important;
        top: calc(100% - 2px) !important;
        border-radius: 0 0 14px 14px !important;
        border-top: none !important;
    }
    
    .neo-servicio-selector-btn.active,
    .neo-listado-floating-btn.active {
        border-radius: 14px 14px 0 0 !important;
        border-bottom-color: transparent !important;
    }
    
    /* Icono de papelera - posicionamiento (JavaScript controla visibilidad) */
    #servicio-trash-icon-wrapper,
    #fact-trash-icon-wrapper {
        position: absolute !important;
        right: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    .neo-listado-trash-icon {
        width: 16px !important;
        height: 16px !important;
        color: var(--neo-gray-400) !important;
        cursor: pointer !important;
    }
    
    /* Panel lateral de items */
    #items-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Asegurar que los textos no se corten */
    .neo-mobile-card-label,
    .neo-mobile-card-value {
        white-space: normal;
        word-break: break-word;
    }
    
    /* Scroll suave en contenedores */
    .neo-app-main,
    .neo-sidebar-nav,
    .neo-mobile-cards {
        -webkit-overflow-scrolling: touch;
    }
}

/* Optimizaciones para orientación vertical (portrait) */
@media (max-width: 768px) and (orientation: portrait) {
    /* Aprovechar mejor el espacio vertical */
    .neo-card {
        margin-bottom: 12px;
    }
    
    /* Asegurar que las listas usen toda la altura disponible */
    .neo-card-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    /* Optimizar el spacing vertical */
    .neo-mobile-cards {
        padding-bottom: 20px;
    }
}

/* Móvil pequeño - Ajustes adicionales */
@media (max-width: 767px) {
    .neo-stats {
        grid-template-columns: 1fr;
    }
    
    /* ========================================
       STATS RESPONSIVE - Diseño mejorado
       ======================================== */
    /* Para tablets y móviles medianos: 2 columnas */
    @media (min-width: 481px) and (max-width: 1024px) {
        .neo-stats {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
        }
    }
    
    /* Para móviles pequeños: 2 columnas compactas */
    @media (max-width: 768px) {
        .neo-stats {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 8px !important;
            margin-bottom: 16px !important;
        }
        
        .neo-stat-card {
            flex-direction: column !important;
            align-items: flex-start !important;
            padding: 12px !important;
            gap: 8px !important;
        }
        
        .neo-stat-icon {
            width: 32px !important;
            height: 32px !important;
        }
        
        .neo-stat-icon svg {
            width: 16px !important;
            height: 16px !important;
        }
        
        .neo-stat-content {
            width: 100%;
        }
        
        .neo-stat-value {
            font-size: 20px !important;
            line-height: 1.2 !important;
        }
        
        .neo-stat-label {
            font-size: 11px !important;
            line-height: 1.3 !important;
        }
    }
    
    /* Para móviles muy pequeños: 1 columna */
    @media (max-width: 400px) {
        .neo-stats {
            grid-template-columns: 1fr !important;
        }
    }
}

/* Media queries para móviles */
@media (max-width: 768px) {
    /* Ocultar carousel en vista de servicios en móviles */
    #view-servicios-editar .neo-tabs-bar-container {
        display: none !important;
    }
    
    /* Cambiar neo-facturacion-menu a icono de 3 puntos en móviles */
    .neo-facturacion-menu .ds-nav-pill {
        padding: 10px !important;
        min-width: 44px;
        width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* Ocultar texto y chevron en móviles */
    .neo-facturacion-menu .ds-nav-label,
    .neo-facturacion-menu .neo-facturacion-chevron {
        display: none !important;
    }
    
    /* Mostrar solo el icono y reemplazarlo con 3 puntos verticales */
    .neo-facturacion-menu .ds-nav-icon {
        display: none !important;
    }
    
    /* Agregar icono de 3 puntos verticales centrado */
    .neo-facturacion-menu .ds-nav-pill::before {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        background: currentColor;
        border-radius: 50%;
        box-shadow: 0 -8px 0 currentColor, 0 8px 0 currentColor;
        position: relative;
    }
    
    /* Mostrar tabs móviles en el dropdown */
    .neo-facturacion-tabs-mobile {
        display: block !important;
    }
    
    /* Ocultar el carousel de tabs principal en facturación (en la página de facturación) */
    .neo-facturacion-menu ~ * .neo-tabs-bar-container,
    .neo-tabs-bar-container:has(+ .neo-facturacion-menu) {
        display: none !important;
    }
}

/* ========================================
   BOTONES DE FILTRO DE SERVICIOS
======================================== */
.neo-servicio-filter-btn {
    padding: 8px 12px;
    border: 1px solid var(--neo-gray-200);
    background: white;
    color: var(--neo-gray-600);
    font-size: 10px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.neo-servicio-filter-btn:hover {
    background: var(--neo-gray-50);
    border-color: var(--neo-gray-300);
}

.neo-servicio-filter-btn.active {
    background: var(--neo-primary);
    color: white;
    border-color: var(--neo-primary);
}

.neo-servicio-filter-btn.active:hover {
    background: var(--neo-primary-hover);
    border-color: var(--neo-primary-hover);
}

/* ========================================
   FILTROS COLAPSABLES EN RESPONSIVE
======================================== */

/* Botón principal de filtros con ícono */
.neo-filters-toggle-btn {
    display: none; /* Oculto por defecto en desktop y móviles */
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.neo-filters-toggle-btn:hover {
    background: var(--neo-gray-50);
    border-color: var(--neo-primary);
}

.neo-filters-toggle-btn.active {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
}

.neo-filters-toggle-btn svg {
    width: 20px;
    height: 20px;
    color: var(--neo-gray-600);
}

.neo-filters-toggle-btn.active svg {
    color: var(--neo-primary);
}

/* Badge de filtro activo */
.neo-filters-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: var(--neo-primary);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--neo-white);
}

/* Dropdown de filtros */
.neo-filters-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--neo-white);
    border: 1px solid var(--neo-gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 200px;
    z-index: 1100;
}

.neo-filters-dropdown.open {
    display: block;
}

.neo-filters-dropdown-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--neo-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 4px;
}

.neo-filters-dropdown-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.neo-filters-dropdown-option {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--neo-gray-200);
    background: var(--neo-white);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--neo-gray-700);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.neo-filters-dropdown-option:hover {
    background: var(--neo-gray-50);
    border-color: var(--neo-primary);
}

.neo-filters-dropdown-option.active {
    background: var(--neo-primary);
    color: white;
    border-color: var(--neo-primary);
}

.neo-filters-dropdown-option svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ========================================
   DESKTOP - Chevrones siempre visibles (>1024px)
======================================== */
@media (min-width: 1025px) {
    /* En desktop, chevrones siempre visibles independientemente de JavaScript */
    .neo-servicio-chevron,
    .neo-listado-chevron {
        visibility: visible !important;
    }
    
    /* Visor de formularios centrado en desktop */
    #form-document-scroll-area {
        display: flex !important;
        justify-content: center !important;
        padding: 24px !important;
    }
    
    #form-pdf-page-content {
        width: 100% !important;
        max-width: 816px !important;
        min-height: 1056px !important;
        transform: none !important;
        transform-origin: top center !important;
    }
    
    /* No mostrar controles de zoom en desktop */
    #form-zoom-controls {
        display: none !important;
    }
    
    /* No usar wrapper de zoom en desktop */
    #form-zoom-wrapper {
        display: contents !important;
    }
}

/* ========================================
   SAFARI iOS - OPTIMIZACIONES ESPECÍFICAS
======================================== */
@supports (-webkit-touch-callout: none) {
    /* Solo se aplica en Safari iOS */
    
    /* Usar viewport dinámico */
    html {
        height: -webkit-fill-available;
    }
    
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        /* Asegurar que body pueda hacer scroll */
        position: relative;
    }
    
    .neo-app {
        height: 100dvh;
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
    
    .neo-app-main {
        height: 100%;
        /* Asegurar scroll natural */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Importante: permitir que Safari detecte el scroll */
        position: relative;
        /* Forzar altura mínima para generar scroll */
        min-height: calc(100vh + 1px);
    }
    
    /* Asegurar que el contenido interno tenga scroll */
    .neo-app-content,
    .neo-view {
        min-height: calc(100% + 1px);
    }
    
    /* Asegurar que áreas scrollables secundarias funcionen */
    .neo-panel-body,
    .neo-detail-panel-body,
    .neo-modal-body {
        overflow-x: hidden !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: none;
        overscroll-behavior-y: contain;
    }
    
    /* Prevenir arrastre lateral */
    * {
        overscroll-behavior-x: none;
    }
    
    /* Permitir touch normal en elementos interactivos */
    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation !important;
    }
}

/* Template cards para nuevo formulario */
.new-form-template-card {
    transition: all 0.3s ease;
}

.new-form-template-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}


/* Panel de variables */
.variables-group {
    margin-bottom: 20px;
}

.variables-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--neo-gray-600);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--neo-gray-200);
}

/* Estilos para variables en el panel de Variables */
#variables-panel .variable-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 4px;
    font-size: 11px;
    background: white;
    border: 1px solid var(--neo-gray-200);
}

#variables-panel .variable-item:hover {
    background: var(--neo-gray-50);
    transform: translateX(2px);
    border-color: var(--neo-gray-300);
}

#variables-panel .variable-item.selected {
    background: var(--neo-primary);
    transform: translateX(2px);
    border-color: var(--neo-primary);
}

#variables-panel .variable-item.selected svg {
    color: white;
}

#variables-panel .variable-item.selected span {
    color: white;
}

#variables-panel .variable-item svg {
    color: var(--neo-primary);
    flex-shrink: 0;
}

#variables-panel .variable-item span {
    flex: 1;
    color: var(--neo-gray-700);
    font-weight: 500;
}

#variables-panel .variable-item code {
    font-size: 9px;
    padding: 2px 6px;
    background: var(--neo-gray-100);
    color: var(--neo-gray-600);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}

#variables-panel .variable-item.variable-inserted {
    background: rgba(152, 125, 95, 0.2);
    border-color: var(--neo-primary);
    transform: scale(0.98);
}

#variables-panel .variable-item.variable-inserted svg {
    color: var(--neo-primary);
}

#variables-panel .variable-item.variable-inserted span {
    color: var(--neo-primary);
}

/* Panel de Herramientas */
.herramientas-section {
    margin-bottom: 24px;
    padding: 0 12px;
}

.herramientas-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--neo-gray-600);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neo-gray-200);
}

.herramientas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.herramienta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--neo-gray-50);
    border: 1px solid var(--neo-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    font-weight: 500;
    color: var(--neo-gray-700);
}

.herramienta-item:hover {
    background: var(--neo-primary-light);
    border-color: var(--neo-primary);
    color: var(--neo-primary);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.herramienta-item svg {
    width: 20px;
    height: 20px;
    color: var(--neo-primary);
}

.herramienta-item:hover svg {
    color: var(--neo-primary);
}

.herramienta-item:active {
    transform: scale(0.95);
    background: var(--neo-primary);
    color: white;
}

.herramienta-item:active svg {
    color: white;
}

/* Botones de guardado individual de campos */
.field-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--neo-primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0;
    pointer-events: none;
}

/* Mostrar botón al hacer hover sobre el field-wrapper */
.field-wrapper:hover .field-save-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Mostrar botón cuando el input tiene focus */
.field-wrapper:has(input:focus) .field-save-btn,
.field-wrapper:has(textarea:focus) .field-save-btn,
.field-wrapper:has(select:focus) .field-save-btn {
    opacity: 1;
    pointer-events: auto;
}

.field-save-btn:hover {
    background: var(--neo-primary-dark);
    transform: scale(1.1);
}

.field-save-btn svg {
    width: 12px;
    height: 12px;
}

.field-saved {
    background: var(--neo-success) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Placeholders de campos interactivos - heredan fuente del campo */
.field-wrapper input::placeholder,
.field-wrapper textarea::placeholder,
.field-editable-content[data-placeholder]:empty::before {
    font-weight: normal !important;
    font-style: italic !important;
    text-decoration: none !important;
    color: #999 !important;
    /* font-family se hereda del input/textarea que ya tiene la fuente del editor */
}

/* Asegurar que todos los campos interactivos hereden la fuente del editor */
#custom-form-content .field-wrapper input,
#custom-form-content .field-wrapper textarea,
#custom-form-content .field-wrapper select,
#custom-form-content .field-wrapper .field-editable-content,
#custom-form-content .field-wrapper label span {
    font-family: inherit;
    font-size: inherit;
}

/* Placeholder para el editor custom */
.custom-editor-with-placeholder:empty::before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
    pointer-events: none;
}

.custom-editor-with-placeholder.has-placeholder::before {
    content: attr(data-placeholder);
    color: #999;
    font-style: italic;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}

/* ========================================
   ESTILOS DE HOJA CARTA (LETTER SIZE)
   8.5" x 11" = 816px x 1056px @ 96dpi
======================================== */
.letter-page {
    width: 100%;
    max-width: 816px;
    min-height: 1056px;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-radius: 2px;
    padding: 15px 25px;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Fondo del área de scroll para simular escritorio */
#form-document-scroll-area {
    background: var(--neo-gray-200) !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .letter-page {
        min-height: auto;
        padding: 15px;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    
    #form-document-scroll-area {
        padding: 0 !important;
        background: white !important;
    }
}

/* Estilos de impresión para hoja carta */
@media print {
    .letter-page {
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
        padding: 15px 25px !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: white !important;
    }
    
    #form-document-scroll-area {
        padding: 0 !important;
        background: white !important;
    }
    
    @page {
        size: letter;
        margin: 0;
    }
}

.field-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1.5px solid transparent;
    transition: background-color 0.2s, box-shadow 0.2s;
    cursor: move;
    user-select: none;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Efecto visual sutil al hacer hover */
.field-wrapper:hover {
    background-color: rgba(152, 125, 95, 0.08);
    box-shadow: 0 0 0 1px rgba(152, 125, 95, 0.2);
}

/* Estilos para campos arrastrables */
.field-wrapper.draggable {
    cursor: move;
}

.field-wrapper.dragging {
    opacity: 0.7;
    background-color: rgba(152, 125, 95, 0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: grabbing !important;
    z-index: 100;
}

.field-wrapper.positioned {
    position: absolute !important;
    z-index: 10;
    background: white;
    border: 1.5px solid transparent;
    padding: 2px 4px;
    box-sizing: border-box;
    overflow: visible;
}

.field-wrapper.positioned:hover {
    border: 1.5px dashed var(--neo-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.field-wrapper.positioned.field-selected {
    border: 1.5px dashed var(--neo-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Placeholder para mantener espacio cuando campo se posiciona absolutamente */
.field-placeholder {
    visibility: hidden;
    pointer-events: none;
    line-height: inherit;
}

@media print {
    .field-placeholder {
        visibility: hidden !important;
        /* No usar display:none para mantener el espacio */
    }
    
    /* Ocultar toda la UI excepto el documento */
    body > *:not(#print-container) {
        display: none !important;
    }
    
    #print-container {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
    
    #print-container * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Ocultar elementos de edición */
    .field-variable-indicator,
    .field-delete-btn,
    .field-wrapper:hover,
    .field-wrapper.field-selected {
        border: none !important;
        box-shadow: none !important;
    }
    
    .field-wrapper.positioned {
        background: transparent !important;
        border: none !important;
    }
    
    @page {
        size: letter;
        margin: 0;
    }
}

/* Campo editable con variables */
.field-editable-content {
    border: none;
    border-bottom: 1px solid #000;
    padding: 2px 5px;
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    min-width: 200px;
    min-height: 1.4em;
    display: inline-block;
    outline: none;
    white-space: pre-wrap;
}

/* Inputs autoexpandibles en formularios */
.field-wrapper input[type="text"].auto-expand {
    min-width: 80px;
    width: auto;
    max-width: 100%;
    /* Sin transition aquí: se aplica solo durante escritura del usuario via JS */
}

/* Ocultar línea cuando el campo editable tiene contenido */
.field-editable-content.has-content {
    border-bottom: none;
}

.field-editable-content.textarea-style {
    min-width: 300px;
    min-height: 60px;
    display: block;
}

.field-editable-content:focus {
    border-bottom-color: var(--neo-primary);
}

/* Inputs con valor - ocultar línea */
.field-wrapper input:not([type="checkbox"]):not([type="radio"]).has-value {
    border-bottom: none !important;
}

.field-wrapper select.has-value {
    border-bottom: none !important;
}

.field-wrapper textarea.has-value {
    border-bottom: none !important;
}

/* Tags de variables dentro de campos editables */
.field-var-tag {
    display: inline-block;
    background: var(--neo-primary-light);
    color: var(--neo-primary);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    margin: 0 2px;
    cursor: default;
    user-select: all;
    vertical-align: baseline;
}

.field-var-tag:hover {
    background: var(--neo-primary);
    color: white;
}

/* Resaltado cuando se arrastra variable sobre campo */
.drop-highlight {
    outline: 2px dashed var(--neo-primary) !important;
    outline-offset: 2px;
    background-color: rgba(152, 125, 95, 0.1) !important;
}

/* Estilos para lista de opciones en panel de propiedades */
.option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: white;
    border: 1px solid var(--neo-gray-200);
    border-radius: 6px;
    margin-bottom: 6px;
    transition: all 0.15s ease;
}

.option-item:last-child {
    margin-bottom: 0;
}

.option-item:hover {
    border-color: var(--neo-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.option-item.dragging {
    opacity: 0.5;
    border-style: dashed;
}

.option-item .drag-handle {
    cursor: grab;
    color: var(--neo-gray-400);
    padding: 2px;
    display: flex;
    align-items: center;
}

.option-item .drag-handle:active {
    cursor: grabbing;
}

.option-item .drag-handle:hover {
    color: var(--neo-gray-600);
}

.option-item input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    padding: 4px 0;
    outline: none;
    font-family: inherit;
}

.option-item input:focus {
    border-bottom: 1px solid var(--neo-primary);
}

.option-item .delete-option {
    background: none;
    border: none;
    color: var(--neo-gray-400);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.option-item .delete-option:hover {
    background: #fee2e2;
    color: #ef4444;
}

#field-config-options-list:empty::before {
    content: 'No hay opciones. Agrega una opción abajo.';
    display: block;
    color: var(--neo-gray-400);
    font-size: 12px;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* Estilos para items de variable en lista de opciones (panel de propiedades) */
#field-config-variables-list .variable-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--neo-primary-light);
    border: 1px solid var(--neo-primary);
    border-radius: 6px;
    margin-bottom: 6px;
}

#field-config-variables-list .variable-item:last-child {
    margin-bottom: 0;
}

#field-config-variables-list .variable-item .variable-text {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--neo-primary);
    font-family: monospace;
}

#field-config-variables-list .variable-item .delete-variable {
    background: none;
    border: none;
    color: var(--neo-primary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    opacity: 0.7;
}

#field-config-variables-list .variable-item .delete-variable:hover {
    background: rgba(152, 125, 95, 0.3);
    opacity: 1;
}

#field-config-variables-list:empty::before {
    content: 'No hay variables. Selecciona y agrega variables abajo.';
    display: block;
    color: var(--neo-gray-400);
    font-size: 12px;
    text-align: center;
    padding: 15px;
    font-style: italic;
}

/* Botón de eliminar campo */
.field-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ef4444;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s;
    z-index: 20;
}

.field-delete-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

.field-wrapper:hover .field-delete-btn,
.field-wrapper.field-selected .field-delete-btn {
    display: flex;
}

.field-wrapper.field-selected {
    background-color: rgba(152, 125, 95, 0.15);
    box-shadow: 0 0 0 2px var(--neo-primary);
}

/* Placeholder para campos editables (heading/paragraph) */
.field-editable-content[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
    font-style: italic;
}

.field-editable-content:focus[data-placeholder]:empty::before {
    color: #bbb;
}

/* Permitir saltos de línea en párrafos */
.field-wrapper[data-field-type="paragraph"] .field-editable-content {
    white-space: pre-wrap;
}

/* Resize handle para campos positioned de texto, textarea, heading y paragraph */
.field-wrapper.positioned.field-selected[data-field-type="text"] .field-resize-handle,
.field-wrapper.positioned.field-selected[data-field-type="textarea"] .field-resize-handle,
.field-wrapper.positioned.field-selected[data-field-type="heading"] .field-resize-handle,
.field-wrapper.positioned.field-selected[data-field-type="paragraph"] .field-resize-handle,
.field-wrapper.positioned.field-selected[data-field-type="date"] .field-resize-handle,
.field-wrapper.positioned.field-selected[data-field-type="checkbox"] .field-resize-handle,
.field-wrapper.positioned.field-selected[data-field-type="radio"] .field-resize-handle,
.field-wrapper.positioned.field-selected[data-field-type="select"] .field-resize-handle {
    display: block;
}

/* Resize handle para campos inline (no positioned) cuando están seleccionados */
.field-wrapper.field-selected:not(.positioned) {
    position: relative;
}

/* Para campos inline con input de texto: solo mostrar resize-e */
.field-wrapper.field-selected:not(.positioned) .field-resize-handle.resize-e {
    display: block;
}

/* Para campos inline con textarea: mostrar todos los handles */
.field-wrapper.field-selected:not(.positioned).has-textarea .field-resize-handle.resize-e,
.field-wrapper.field-selected:not(.positioned).has-textarea .field-resize-handle.resize-s,
.field-wrapper.field-selected:not(.positioned).has-textarea .field-resize-handle.resize-se {
    display: block;
}

/* Para campos inline con checkbox/radio: mostrar resize-e y resize-se */
.field-wrapper.field-selected:not(.positioned).has-options .field-resize-handle.resize-e,
.field-wrapper.field-selected:not(.positioned).has-options .field-resize-handle.resize-se {
    display: block;
}

.field-resize-handle {
    display: none;
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--neo-primary);
    border: 2px solid var(--neo-white);
    border-radius: 2px;
    cursor: se-resize;
    z-index: 20;
}

.field-resize-handle.resize-e {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: e-resize;
    width: 8px;
    height: 16px;
}

.field-resize-handle.resize-s {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: s-resize;
    width: 16px;
    height: 8px;
}

.field-resize-handle.resize-se {
    right: -5px;
    bottom: -5px;
    cursor: se-resize;
}

/* Solo mostrar resize-e para text y heading positioned */
.field-wrapper.positioned.field-selected[data-field-type="text"] .field-resize-handle.resize-s,
.field-wrapper.positioned.field-selected[data-field-type="text"] .field-resize-handle.resize-se,
.field-wrapper.positioned.field-selected[data-field-type="heading"] .field-resize-handle.resize-s,
.field-wrapper.positioned.field-selected[data-field-type="heading"] .field-resize-handle.resize-se,
.field-wrapper.positioned.field-selected[data-field-type="date"] .field-resize-handle.resize-s,
.field-wrapper.positioned.field-selected[data-field-type="date"] .field-resize-handle.resize-se,
.field-wrapper.positioned.field-selected[data-field-type="select"] .field-resize-handle.resize-s,
.field-wrapper.positioned.field-selected[data-field-type="select"] .field-resize-handle.resize-se {
    display: none;
}

/* Para checkbox y radio positioned: mostrar resize-e y resize-se para ajustar el contenedor */
.field-wrapper.positioned.field-selected[data-field-type="checkbox"] .field-resize-handle.resize-s,
.field-wrapper.positioned.field-selected[data-field-type="radio"] .field-resize-handle.resize-s {
    display: none;
}

/* Mostrar todos los resize handles para textarea y paragraph positioned */
.field-wrapper.positioned.field-selected[data-field-type="textarea"] .field-resize-handle.resize-e,
.field-wrapper.positioned.field-selected[data-field-type="textarea"] .field-resize-handle.resize-s,
.field-wrapper.positioned.field-selected[data-field-type="textarea"] .field-resize-handle.resize-se,
.field-wrapper.positioned.field-selected[data-field-type="paragraph"] .field-resize-handle.resize-e,
.field-wrapper.positioned.field-selected[data-field-type="paragraph"] .field-resize-handle.resize-s,
.field-wrapper.positioned.field-selected[data-field-type="paragraph"] .field-resize-handle.resize-se {
    display: block;
}

.neo-panel.neo-panel-collapsed {
    transition: none !important;
    visibility: hidden;
}