/* ==========================================================================
   SYNMANAGER · Sistema de diseño (CSS centralizado)
   ========================================================================== */

:root {
    /* Colores de marca */
    --color-primario:        #2563eb;
    --color-primario-oscuro: #1d4ed8;
    --color-primario-claro:  #dbeafe;
    --color-primario-suave:  #eff6ff;

    /* Neutros */
    --color-fondo:      #f4f6fb;
    --color-superficie: #ffffff;
    --color-borde:      #e6e9f0;
    --color-borde-suave:#eef1f7;

    /* Texto */
    --texto-fuerte: #0f172a;
    --texto:        #334155;
    --texto-suave:  #64748b;
    --texto-tenue:  #94a3b8;

    /* Estados */
    --exito:    #16a34a;
    --exito-bg: #dcfce7;
    --alerta:   #d97706;
    --alerta-bg:#fef3c7;
    --peligro:  #dc2626;
    --peligro-bg:#fee2e2;
    --info:     #0891b2;
    --info-bg:  #cffafe;

    /* Layout */
    --ancho-sidebar: 256px;
    --alto-topbar:   64px;
    --radio:    12px;
    --radio-sm: 8px;
    --sombra:      0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --sombra-md:   0 4px 12px rgba(15, 23, 42, .08);
    --sombra-lg:   0 10px 30px rgba(15, 23, 42, .12);
    --transicion: .18s ease;
    --fuente: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Tema oscuro
   ========================================================================== */
[data-tema="oscuro"] {
    --color-primario:        #3b82f6;
    --color-primario-oscuro: #2563eb;
    --color-primario-claro:  rgba(59, 130, 246, .30);
    --color-primario-suave:  rgba(59, 130, 246, .14);

    --color-fondo:      #0f172a;
    --color-superficie: #1e293b;
    --color-borde:      #334155;
    --color-borde-suave:#26324a;

    --texto-fuerte: #f1f5f9;
    --texto:        #cbd5e1;
    --texto-suave:  #94a3b8;
    --texto-tenue:  #64748b;

    --exito:    #4ade80;  --exito-bg:  rgba(34, 197, 94, .16);
    --alerta:   #fbbf24;  --alerta-bg: rgba(217, 119, 6, .18);
    --peligro:  #f87171;  --peligro-bg:rgba(220, 38, 38, .18);
    --info:     #22d3ee;  --info-bg:   rgba(8, 145, 178, .18);

    --sombra:    0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-md: 0 4px 12px rgba(0, 0, 0, .45);
    --sombra-lg: 0 10px 30px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { transition: background-color var(--transicion); }

html, body {
    height: 100%;
    font-family: var(--fuente);
    color: var(--texto);
    background: var(--color-fondo);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100%;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ==========================================================================
   Estructura general
   ========================================================================== */
.app {
    display: grid;
    grid-template-columns: var(--ancho-sidebar) 1fr;
    min-height: 100vh;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

/* ---------- Sidebar ---------- */
.sidebar {
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar__marca {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: var(--alto-topbar);
    border-bottom: 1px solid var(--color-borde);
    flex-shrink: 0;
    text-decoration: none;
    transition: background var(--transicion);
}
.sidebar__marca:hover { background: var(--color-fondo); }

/* Logo de marca (Sync Manager) */
.marca-logo-wrap { display: inline-flex; align-items: center; line-height: 0; }
.marca-logo { width: auto; max-width: 168px; object-fit: contain; display: block; }
.marca-logo--oscuro { display: none; }
[data-tema="oscuro"] .marca-logo--claro  { display: none; }
[data-tema="oscuro"] .marca-logo--oscuro { display: block; }

.sidebar__nav { padding: 14px 12px; flex: 1; }
.sidebar__grupo-titulo {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--texto-tenue);
    padding: 16px 12px 8px;
}
.sidebar__item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radio-sm);
    color: var(--texto-suave);
    font-weight: 500;
    margin-bottom: 2px;
    transition: var(--transicion);
    cursor: pointer;
}
.sidebar__item svg { width: 19px; height: 19px; flex-shrink: 0; }
.sidebar__item:hover { background: var(--color-fondo); color: var(--texto-fuerte); }
.sidebar__item.activo {
    background: var(--color-primario);
    color: #fff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .3);
}
.sidebar__item .flecha { margin-left: auto; transition: transform var(--transicion); }
.sidebar__item.abierto .flecha { transform: rotate(90deg); }

.sidebar__submenu {
    max-height: 0; overflow: hidden;
    transition: max-height var(--transicion);
    margin-left: 12px;
    border-left: 1.5px solid var(--color-borde);
    padding-left: 6px;
}
.sidebar__submenu.abierto { max-height: 320px; }
.sidebar__subitem {
    display: block; padding: 8px 12px;
    border-radius: var(--radio-sm);
    color: var(--texto-suave); font-size: 13.5px;
    transition: var(--transicion);
}
.sidebar__subitem:hover { background: var(--color-fondo); color: var(--color-primario); }
.sidebar__subitem.activo { color: var(--color-primario); font-weight: 600; }

.sidebar__pie {
    padding: 14px 20px; border-top: 1px solid var(--color-borde);
    font-size: 12px; color: var(--texto-tenue);
    flex-shrink: 0;
}

/* Overlay móvil (fuera del grid para no romper el layout) */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 40;
}
.overlay.activo { display: block; }

/* ---------- Contenido ---------- */
.contenido {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    background: var(--color-fondo);
    overflow-x: clip;
}

/* ---------- Topbar ---------- */
.topbar {
    height: var(--alto-topbar);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: var(--sombra);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px 0 16px;
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
}
.topbar__titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--texto-fuerte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    flex-shrink: 0;
}
.topbar__centro {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0 8px;
}
.topbar__derecha {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.topbar__icono {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center; color: var(--texto-suave);
    position: relative; transition: var(--transicion);
}
.topbar__icono:hover { background: var(--color-fondo); color: var(--texto-fuerte); }
.topbar__icono .punto {
    position: absolute; top: 8px; right: 9px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--peligro); border: 2px solid #fff;
}

/* Selector de empresa (topbar) */
.empresa-selector { position: relative; max-width: 360px; width: 100%; }
.empresa-selector__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    color: var(--texto-fuerte);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transicion);
}
.empresa-selector__btn:hover { border-color: var(--color-primario-claro); background: var(--color-primario-suave); }
.empresa-selector__nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.empresa-selector__flecha { flex-shrink: 0; color: var(--texto-suave); transition: transform .2s; }
.empresa-selector.abierto .empresa-selector__flecha { transform: rotate(180deg); }
.empresa-selector__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    box-shadow: var(--sombra-md);
    padding: 6px;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}
.empresa-selector.abierto .empresa-selector__menu { display: block; }
.empresa-selector__item-form { margin: 0; }
.empresa-selector__item {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: var(--transicion);
}
.empresa-selector__item:hover:not(:disabled) { background: var(--color-fondo); }
.empresa-selector__item.activa { background: var(--color-primario-suave); cursor: default; }
.empresa-selector__item.inactiva { opacity: .55; }
.empresa-selector__item-nombre { display: block; font-weight: 600; font-size: 13px; color: var(--texto-fuerte); }
.empresa-selector__item-meta { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 2px; }
.empresa-selector__footer {
    display: block;
    padding: 10px 12px;
    margin-top: 4px;
    border-top: 1px solid var(--color-borde);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primario);
    text-align: center;
}
.empresa-selector__footer:hover { background: var(--color-fondo); border-radius: 0 0 8px 8px; }

.empresa-selector__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 80;
}
.empresa-selector.abierto .empresa-selector__backdrop { display: block; }

body.empresa-sheet-abierta { overflow: hidden; }

@media (min-width: 901px) {
    .empresa-selector__backdrop { display: none !important; }
    body.empresa-sheet-abierta { overflow: auto; }
}

.usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    transition: var(--transicion);
    cursor: pointer;
    max-width: 280px;
}
.usuario:hover {
    border-color: var(--color-primario-claro);
    background: var(--color-primario-suave);
}
.usuario__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primario), #4f46e5);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.usuario__info { line-height: 1.25; min-width: 0; text-align: left; }
.usuario__nombre {
    font-weight: 600;
    color: var(--texto-fuerte);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.usuario__rol {
    font-size: 11.5px;
    color: var(--texto-tenue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
}

/* ---------- Área principal ---------- */
.principal {
    padding: 24px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}
.pagina-encabezado { margin-bottom: 20px; }
.pagina-encabezado h1 { font-size: 22px; color: var(--texto-fuerte); font-weight: 700; }
.pagina-encabezado p { color: var(--texto-suave); margin-top: 2px; }

/* ==========================================================================
   Componentes
   ========================================================================== */
.grid { display: grid; gap: 18px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta__cuerpo { padding: 20px; }
.tarjeta__cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--color-borde-suave);
    flex-wrap: wrap;
    gap: 6px 12px;
}
.tarjeta__cabecera h3 { font-size: 15px; font-weight: 700; color: var(--texto-fuerte); }
.tarjeta__pie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--color-borde-suave);
}
.tarjeta__pie--derecha { justify-content: flex-end; }
.tarjeta__cuerpo--sin-pad { padding: 0; }

/* Tarjeta métrica */
.metrica { display: flex; flex-direction: column; gap: 10px; }
.metrica__top { display: flex; align-items: flex-start; justify-content: space-between; }
.metrica__label { font-size: 13px; color: var(--texto-suave); font-weight: 500; }
.metrica__icono {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--color-primario-suave); color: var(--color-primario);
}
.metrica__valor { font-size: 30px; font-weight: 800; color: var(--texto-fuerte); line-height: 1; }
.metrica__delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.metrica__delta.sube  { color: var(--exito); }
.metrica__delta.baja  { color: var(--peligro); }
.metrica__delta.neutro{ color: var(--texto-tenue); }

.icono-acento-verde  { background: var(--exito-bg);  color: var(--exito); }
.icono-acento-amarillo{ background: var(--alerta-bg); color: var(--alerta); }
.icono-acento-rojo   { background: var(--peligro-bg);color: var(--peligro); }

/* Badges */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.badge--exito  { background: var(--exito-bg);  color: var(--exito); }
.badge--alerta { background: var(--alerta-bg); color: var(--alerta); }
.badge--peligro{ background: var(--peligro-bg);color: var(--peligro); }
.badge--info   { background: var(--info-bg);   color: var(--info); }
.badge--neutro { background: var(--color-fondo);color: var(--texto-suave); }

/* Tabla */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
    text-align: left; font-size: 12px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--texto-tenue); font-weight: 600;
    padding: 12px 16px; border-bottom: 1px solid var(--color-borde);
}
.tabla td { padding: 13px 16px; border-bottom: 1px solid var(--color-borde-suave); color: var(--texto); }
.tabla tbody tr:hover { background: var(--color-primario-suave); }
.tabla tbody tr:last-child td { border-bottom: none; }

/* Botones */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--radio-sm);
    font-weight: 600; font-size: 14px; transition: var(--transicion);
    border: 1px solid transparent;
}
.btn svg { width: 18px; height: 18px; }
.btn--primario { background: var(--color-primario); color: #fff; }
.btn--primario:hover { background: var(--color-primario-oscuro); box-shadow: var(--sombra-md); }
.btn--secundario { background: var(--color-superficie); color: var(--texto); border-color: var(--color-borde); }
.btn--secundario:hover { background: var(--color-fondo); }
.btn--bloque { width: 100%; }

/* Accesos rápidos */
.acceso {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radio-sm);
    border: 1px solid var(--color-borde);
    transition: var(--transicion); cursor: pointer;
}
.acceso:hover { border-color: var(--color-primario); background: var(--color-primario-suave); }
.acceso__icono {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--color-primario-suave); color: var(--color-primario);
}
.acceso__texto { font-weight: 600; color: var(--texto-fuerte); font-size: 13.5px; }

/* Formularios dentro de la app */
.form-campo { margin-bottom: 18px; }
.form-campo label { display: block; font-weight: 600; font-size: 13.5px; color: var(--texto-fuerte); margin-bottom: 7px; }
.form-campo .input-wrap { position: relative; display: flex; align-items: center; }
.form-campo .input-wrap svg.left { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--texto-tenue); }
.form-campo input[type="text"],
.form-campo input[type="email"],
.form-campo input[type="password"],
.form-campo select {
    width: 100%; padding: 11px 14px 11px 42px;
    border: 1px solid var(--color-borde); border-radius: var(--radio-sm);
    font-size: 14.5px; font-family: inherit; color: var(--texto-fuerte);
    background: var(--color-superficie); transition: var(--transicion);
}
.form-campo input:focus, .form-campo select:focus {
    outline: none; border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-claro);
}
.form-campo .hint { font-size: 12px; color: var(--texto-tenue); margin-top: 6px; }
.form-campo .hint--info {
    padding: 10px 12px; border-radius: 8px;
    background: var(--color-primario-suave, #eff6ff);
    border: 1px solid var(--color-primario-claro, #bfdbfe);
    color: var(--color-primario-oscuro, #1e3a8a);
    line-height: 1.45;
}

.alerta-caja {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px; border-radius: var(--radio-sm);
    font-size: 13.5px; font-weight: 500; margin-bottom: 18px;
}
.alerta-caja--exito  { background: var(--exito-bg);  color: var(--exito); }
.alerta-caja--error  { background: var(--peligro-bg);color: var(--peligro); }

/* Flujo del proceso */
.flujo { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.flujo__paso { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 88px; }
.flujo__icono {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--color-primario-suave); color: var(--color-primario);
    border: 1px solid var(--color-primario-claro);
}
.flujo__label { font-size: 12px; font-weight: 600; color: var(--texto-suave); max-width: 92px; }
.flujo__flecha { color: var(--texto-tenue); flex-shrink: 0; }
@media (max-width: 760px) { .flujo { justify-content: flex-start; } .flujo__flecha { transform: rotate(90deg); } }

/* Utilidades */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }
.font-bold { font-weight: 700; }
.text-sm { font-size: 13px; }
.ver-mas { color: var(--color-primario); font-weight: 600; font-size: 13px; }
.ver-mas:hover { text-decoration: underline; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 50;
        width: var(--ancho-sidebar);
        transform: translateX(-100%); transition: transform var(--transicion);
    }
    .sidebar.abierto { transform: translateX(0); box-shadow: var(--sombra-lg); }
    .grid--3, .grid--2 { grid-template-columns: 1fr; }
    .menu-toggle { display: grid !important; }

    /* Topbar móvil: fila fija de iconos + empresa abajo */
    .topbar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-rows: var(--alto-topbar) auto;
        align-items: center;
        height: auto;
        min-height: calc(var(--alto-topbar) + 52px);
        flex-wrap: nowrap;
        gap: 0 6px;
        padding: 0 10px;
        padding-top: max(0px, env(safe-area-inset-top));
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .menu-toggle {
        grid-column: 1;
        grid-row: 1;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
    }
    .topbar__titulo {
        grid-column: 2;
        grid-row: 1;
        flex: unset;
        min-width: 0;
        max-width: none;
        font-size: 17px;
        font-weight: 700;
        height: var(--alto-topbar);
        display: flex;
        align-items: center;
        line-height: 1.2;
    }
    .topbar__derecha {
        grid-column: 3;
        grid-row: 1;
        margin-left: 0;
        flex-shrink: 0;
        height: var(--alto-topbar);
        align-items: center;
        gap: 2px;
    }
    .topbar__centro {
        order: unset;
        grid-column: 1 / -1;
        grid-row: 2;
        flex: unset;
        width: 100%;
        padding: 6px 0 10px;
        justify-content: stretch;
    }
    .topbar__icono, .menu-toggle {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    .topbar__icono--oculto-movil {
        display: none !important;
    }
    .usuario-menu .usuario {
        padding: 0;
        border: none;
        background: transparent;
        max-width: none;
        gap: 0;
    }
    .usuario-menu .usuario .chevron { display: none; }
    .usuario__avatar {
        width: 40px;
        height: 40px;
    }
    .empresa-selector {
        max-width: none;
        width: 100%;
    }
    .empresa-selector__btn {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }
    .empresa-selector__menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        max-height: min(75vh, 520px);
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        box-shadow: 0 -8px 32px rgba(15, 23, 42, .18);
        z-index: 90;
    }
    .empresa-selector__menu::before {
        content: 'Cambiar empresa';
        display: block;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--texto-suave);
        padding: 4px 0 10px;
    }
    .empresa-selector__item {
        min-height: 52px;
        padding: 12px 14px;
    }
    .empresa-selector__item-nombre {
        font-size: 15px;
        white-space: normal;
        word-break: break-word;
    }
    .empresa-selector__item-meta {
        font-size: 12px;
        white-space: normal;
    }
    .empresa-selector__footer {
        min-height: 48px;
        font-size: 14px;
    }

    .pagina-encabezado.flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    .pagina-encabezado .btn {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 560px) {
    .grid--4 { grid-template-columns: 1fr; }
    .usuario__info { display: none; }
    .principal {
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* PWA instalada — áreas seguras iOS/Android */
@media (display-mode: standalone) {
    .topbar {
        padding-top: max(4px, env(safe-area-inset-top));
    }
    .principal {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

.menu-toggle {
    display: grid; width: 40px; height: 40px; border-radius: 10px;
    place-items: center; color: var(--texto-suave);
}
.menu-toggle:hover { background: var(--color-fondo); color: var(--texto-fuerte); }

/* ==========================================================================
   Menú colapsable (rail en escritorio) + expandir al pasar el mouse
   ========================================================================== */
@media (min-width: 901px) {
    html.menu-colapsado .app { grid-template-columns: var(--ancho-rail, 76px) 1fr; }
    html.menu-colapsado .sidebar { width: var(--ancho-rail, 76px); overflow: visible; }

    html.menu-colapsado .sidebar__grupo-titulo,
    html.menu-colapsado .sidebar__item span,
    html.menu-colapsado .sidebar__item .flecha,
    html.menu-colapsado .sidebar__pie,
    html.menu-colapsado .sidebar__submenu { display: none; }

    html.menu-colapsado .sidebar__marca .marca-logo-wrap {
        width: 34px; overflow: hidden;
    }
    html.menu-colapsado .sidebar__marca .marca-logo { max-width: none; }

    html.menu-colapsado .sidebar__item  { justify-content: center; padding-left: 0; padding-right: 0; }
    html.menu-colapsado .sidebar__marca { justify-content: center; padding: 0; }

    /* Al pasar el mouse, la barra se expande sobre el contenido */
    html.menu-colapsado .sidebar:hover {
        width: var(--ancho-sidebar);
        position: fixed; left: 0; top: 0; height: 100vh;
        box-shadow: var(--sombra-lg); z-index: 60; overflow-y: auto;
    }
    html.menu-colapsado .sidebar:hover .sidebar__grupo-titulo,
    html.menu-colapsado .sidebar:hover .sidebar__pie     { display: block; }
    html.menu-colapsado .sidebar:hover .sidebar__marca .marca-logo-wrap { width: auto; overflow: visible; }
    html.menu-colapsado .sidebar:hover .sidebar__item span { display: inline; }
    html.menu-colapsado .sidebar:hover .sidebar__item .flecha { display: block; }
    html.menu-colapsado .sidebar:hover .sidebar__submenu.abierto { display: block; }
    html.menu-colapsado .sidebar:hover .sidebar__item  { justify-content: flex-start; padding: 10px 12px; }
    html.menu-colapsado .sidebar:hover .sidebar__marca { justify-content: flex-start; padding: 0 20px; }
}

/* ==========================================================================
   Menú desplegable de usuario (topbar)
   ========================================================================== */
.usuario-menu { position: relative; }
.usuario-menu .usuario .chevron { color: var(--texto-tenue); transition: transform var(--transicion); }
.usuario-menu.abierto .usuario .chevron { transform: rotate(180deg); }

.dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 240px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
    padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: var(--transicion); z-index: 100;
}
.usuario-menu.abierto .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__cabecera { padding: 10px 12px; border-bottom: 1px solid var(--color-borde-suave); margin-bottom: 6px; }
.dropdown__cabecera .nombre { font-weight: 700; color: var(--texto-fuerte); font-size: 14px; }
.dropdown__cabecera .email  { font-size: 12.5px; color: var(--texto-tenue); }
.dropdown__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radio-sm);
    color: var(--texto); font-size: 14px; font-weight: 500;
    transition: var(--transicion); width: 100%; text-align: left;
    border: none; background: transparent; font-family: inherit; cursor: pointer;
}
.dropdown__item svg { width: 18px; height: 18px; color: var(--texto-suave); }
.dropdown__item:hover { background: var(--color-fondo); color: var(--texto-fuerte); }
.dropdown__item--peligro { color: var(--peligro); }
.dropdown__item--peligro svg { color: var(--peligro); }
.dropdown__item--peligro:hover { background: var(--peligro-bg); color: var(--peligro); }
.dropdown__sep { height: 1px; background: var(--color-borde-suave); margin: 6px 0; }

/* Interruptor de tema */
.tema-toggle .icono-sol  { display: none; }
.tema-toggle .icono-luna { display: block; }
[data-tema="oscuro"] .tema-toggle .icono-sol  { display: block; }
[data-tema="oscuro"] .tema-toggle .icono-luna { display: none; }

/* Botones pequeños e iconos en tablas */
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--icono {
    width: 34px; height: 34px; padding: 0;
    border-radius: 8px; border: 1px solid var(--color-borde);
    background: var(--color-superficie); color: var(--texto-suave);
    display: inline-grid; place-items: center;
}
.btn--icono:hover { background: var(--color-fondo); color: var(--texto-fuerte); }
.btn--icono.peligro:hover { background: var(--peligro-bg); color: var(--peligro); border-color: #fecaca; }
.tabla-acciones { display: flex; align-items: center; gap: 6px; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15, 23, 42, .5);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-overlay.activo { display: flex; }
.modal-overlay--confirm {
    z-index: 400;
}
.modal--confirm {
    max-width: 460px;
}
.modal-confirm__texto {
    margin: 0;
    line-height: 1.5;
    color: var(--texto-fuerte);
    white-space: pre-wrap;
}
.modal-confirm__input-wrap { margin-top: 14px; }
.modal-confirm__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 14px;
}
.tabla-contab-error { color: #b91c1c; }
.procesos-historial {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.procesos-historial__item {
    padding: 10px 12px;
    border: 1px solid var(--color-borde-suave);
    border-radius: 10px;
    background: var(--color-fondo);
}
.procesos-historial__item--exito { border-left: 3px solid #22c55e; }
.procesos-historial__item--error { border-left: 3px solid #ef4444; }
.procesos-historial__item--info { border-left: 3px solid #94a3b8; }
.procesos-historial__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.procesos-historial__fecha {
    margin-left: auto;
    font-size: 12px;
    color: var(--texto-suave);
}
.procesos-historial__mensaje {
    font-size: 13px;
    color: var(--texto-fuerte);
    line-height: 1.45;
    word-break: break-word;
}
.procesos-historial__meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--texto-suave);
}
.preview-historial-procesos { margin-top: 20px; }
.badge--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.modal {
    width: 100%; max-width: 520px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
    max-height: 90vh; overflow-y: auto;
}
.modal__cabecera {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--color-borde-suave);
}
.modal__cabecera h2 { font-size: 18px; font-weight: 700; color: var(--texto-fuerte); }
.modal__cerrar {
    width: 36px; height: 36px; border-radius: 8px;
    display: grid; place-items: center; color: var(--texto-suave);
}
.modal__cerrar:hover { background: var(--color-fondo); color: var(--texto-fuerte); }
.modal__cuerpo { padding: 20px; }
.modal__pie {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 20px; border-top: 1px solid var(--color-borde-suave);
}

.form-campo select { padding-left: 14px; }
.modal .form-campo input[type="text"],
.modal .form-campo input[type="email"],
.modal .form-campo input[type="password"],
.modal .form-campo select { padding-left: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.busqueda {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm); background: var(--color-fondo);
    max-width: 320px;
}
.busqueda input {
    border: none; background: transparent; outline: none;
    font-family: inherit; font-size: 14px; color: var(--texto-fuerte); width: 100%;
}
.fila-inactiva { opacity: .65; }

/* Banner bienvenida onboarding */
.bienvenida-banner {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 18px 20px; margin-bottom: 24px;
    background: linear-gradient(135deg, var(--color-primario-suave), var(--color-superficie));
    border: 1px solid var(--color-primario-claro);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    position: relative;
}
.bienvenida-banner__icono { font-size: 28px; line-height: 1; flex-shrink: 0; }
.bienvenida-banner__texto { flex: 1; min-width: 0; }
.bienvenida-banner__texto strong {
    display: block; font-size: 16px; color: var(--texto-fuerte); margin-bottom: 4px;
}
.bienvenida-banner__texto span { font-size: 14px; color: var(--texto-suave); }
.bienvenida-banner__texto em { font-style: normal; font-weight: 600; color: var(--color-primario); }
.bienvenida-banner__pasos {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
}
.bienvenida-banner__pasos a {
    font-size: 13px; font-weight: 600; color: var(--color-primario);
    background: var(--color-superficie); border: 1px solid var(--color-borde);
    padding: 6px 12px; border-radius: 999px; transition: var(--transicion);
}
.bienvenida-banner__pasos a:hover {
    background: var(--color-primario); color: #fff; border-color: var(--color-primario);
}
.bienvenida-banner__cerrar {
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px; border-radius: 8px;
    font-size: 22px; line-height: 1; color: var(--texto-tenue);
    display: grid; place-items: center;
}
.bienvenida-banner__cerrar:hover { background: var(--color-fondo); color: var(--texto-fuerte); }
.bienvenida-banner.oculto { display: none; }

/* Modal ancho / importación CSV */
.modal--ancho { max-width: 680px; }

.accesos-empresa-wrap {
    margin-top: 8px;
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio);
    overflow: auto;
    max-height: 260px;
}
.tabla--compacta th,
.tabla--compacta td { padding: 10px 12px; font-size: 13px; }
.accesos-empresa .acceso-check { width: 16px; height: 16px; cursor: pointer; }
.accesos-empresa .acceso-rol {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-superficie);
    font-size: 13px;
}
.accesos-empresa .acceso-rol:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.upload-zona {
    position: relative;
    border: 2px dashed var(--color-borde);
    border-radius: var(--radio);
    padding: 32px 20px;
    text-align: center;
    background: var(--color-fondo);
    cursor: pointer;
    transition: var(--transicion);
}
.upload-zona:hover,
.upload-zona--hover {
    border-color: var(--color-primario);
    background: var(--color-primario-suave);
}
.upload-zona input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.upload-zona svg { color: var(--color-primario); margin-bottom: 12px; }
.upload-zona__titulo { font-weight: 600; color: var(--texto-fuerte); margin-bottom: 6px; }
.upload-zona__archivo { font-size: 13px; color: var(--texto-suave); }
.importar-ayuda {
    margin-top: 16px;
    font-size: 13px;
    color: var(--texto-suave);
}
.importar-ayuda summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 8px;
}
.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-borde-suave);
}
.btn--sm { padding: 6px 14px; font-size: 13px; }

/* Overlay importación DIAN (loading) */
.import-loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(15, 23, 42, .72);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.import-loading.activo { display: flex; }
.import-loading__caja {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
    padding: 32px 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.import-loading__spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border: 4px solid var(--color-borde);
    border-top-color: var(--color-primario);
    border-radius: 50%;
    animation: import-spin .85s linear infinite;
}
@keyframes import-spin {
    to { transform: rotate(360deg); }
}
.import-loading__titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--texto-fuerte);
    margin-bottom: 8px;
}
.import-loading__archivo {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primario);
    margin-bottom: 12px;
    word-break: break-all;
}
.import-loading__hint {
    font-size: 13px;
    color: var(--texto-suave);
    line-height: 1.5;
    margin: 0;
}

/* Tarjetas software / integración API */
.software-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.software-card {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.software-card--ok { border-color: var(--color-primario-claro); }
.software-card--integrado {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
}
.software-card__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-borde-suave);
}
.software-card__cabecera h3 { font-size: 16px; font-weight: 700; color: var(--texto-fuerte); margin-bottom: 2px; }
.software-card__titulo-grupo {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.software-card__logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-primario);
    background: var(--color-primario-suave);
    flex-shrink: 0;
}
.software-card__datos { display: grid; gap: 10px; }
.software-card__dato {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 8px 10px;
    background: var(--color-fondo);
    border-radius: var(--radio-sm);
}
.software-card__dato span { color: var(--texto-suave); }
.software-card__hint { margin: 0; line-height: 1.5; }
.software-card__vacio {
    padding: 28px 24px;
    background: var(--color-fondo);
    border-bottom: 1px solid var(--color-borde-suave);
}
.software-card__seccion {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-borde-suave);
    background: var(--color-fondo);
}
.software-card__seccion-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-fuerte);
    margin-bottom: 12px;
}
.software-card__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.software-card__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-borde-suave);
    background: var(--color-superficie);
}
.software-card__form-inline { display: inline-flex; margin: 0; }

.credenciales-resumen {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--color-borde-suave);
}
.credenciales-resumen__item {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 12px 20px;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid var(--color-borde-suave);
    font-size: 13px;
}
.credenciales-resumen__item:last-child { border-bottom: none; }
.credenciales-resumen__label {
    color: var(--texto-suave);
    font-weight: 500;
    white-space: nowrap;
}
.credenciales-resumen__valor {
    color: var(--texto-fuerte);
    font-weight: 600;
    word-break: break-word;
    text-align: right;
}
.credenciales-resumen__valor--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* Vinculo empresa / integración API */
.vinculo-empresa-banner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--color-primario-suave), var(--color-superficie));
    border: 1px solid var(--color-primario-claro);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.vinculo-empresa-banner--compacto {
    align-items: center;
    padding: 16px 20px;
}
.vinculo-empresa-banner__contenido { min-width: 0; }
.vinculo-empresa-banner__icono {
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--color-superficie);
    color: var(--color-primario);
    flex-shrink: 0;
}
.vinculo-empresa-banner--compacto .vinculo-empresa-banner__icono {
    width: 44px;
    height: 44px;
}
.vinculo-empresa-banner__titulo { font-size: 12px; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.vinculo-empresa-banner__nombre { font-size: 18px; font-weight: 700; color: var(--texto-fuerte); margin: 4px 0; }
.vinculo-empresa-banner__meta { font-size: 13px; color: var(--texto-suave); }
.vinculo-empresa-banner__token { margin-top: 10px; font-size: 13px; color: var(--texto); }

.software-picker__opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.software-picker__opcion {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 18px; border: 2px solid var(--color-borde); border-radius: var(--radio-sm);
    cursor: pointer; transition: var(--transicion);
    position: relative;
}
.software-picker__opcion input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.software-picker__opcion:has(input:checked),
.software-picker__opcion.activa {
    border-color: var(--color-primario);
    background: var(--color-primario-suave);
    box-shadow: 0 0 0 1px var(--color-primario-claro);
}
.software-picker__opcion:has(input:checked)::after,
.software-picker__opcion.activa::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primario);
    box-shadow: inset 0 0 0 3px var(--color-superficie);
}
.software-picker__nombre { font-weight: 700; font-size: 14px; color: var(--texto-fuerte); padding-right: 28px; }
.software-picker__desc { font-size: 12px; color: var(--texto-suave); line-height: 1.4; }

/* Página config API */
.pagina-config-api {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 90%;
    max-width: none;
    margin: 0 auto;
}
.pagina-config-api .pagina-encabezado { margin-bottom: 0; }
.pagina-config-api .vinculo-empresa-banner { margin-bottom: 0; }
.pagina-config-api .alerta-caja { margin: 0; }
.config-api-paso { margin: 0; }
.config-api-paso .tarjeta__cabecera > div {
    display: flex;
    align-items: center;
    gap: 12px;
}
.config-api-paso__num {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primario);
    background: var(--color-primario-suave);
    flex-shrink: 0;
}
.config-api-paso__intro { margin: 0 0 18px; line-height: 1.5; }
.config-api-paso .software-picker .tarjeta__pie {
    padding-top: 16px;
    margin-top: 18px;
}

.fila-activa-empresa { background: var(--color-primario-suave); }
.modal__aviso {
    padding: 12px 20px; font-size: 13px; color: var(--texto-suave);
    background: var(--color-fondo); border-bottom: 1px solid var(--color-borde-suave);
}

/* Modal vista previa DTE — ancho completo */
.modal--preview {
    max-width: min(1400px, 98vw);
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.modal--preview .modal__cabecera,
.modal--preview .preview-tabs,
.modal--preview .modal__pie {
    flex-shrink: 0;
}
.modal--preview .modal__cuerpo--scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px;
    position: relative;
}
.modal-overlay:has(.modal--preview) {
    padding: 16px;
    align-items: flex-start;
    padding-top: 3vh;
}

.preview-banner { margin-bottom: 16px; }
.preview-nota-siigo {
    font-size: 14px;
    color: var(--texto-suave);
    margin: 0 0 12px;
    line-height: 1.5;
}

.preview-json {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 16px;
    font-size: 12px;
    line-height: 1.5;
    overflow: auto;
    max-height: 320px;
    white-space: pre-wrap;
    word-break: break-word;
}
.preview-json--alto { max-height: 55vh; font-size: 13px; }

.preview-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-borde-suave);
    padding: 0 28px;
    background: var(--color-fondo);
}
.preview-tabs__btn {
    padding: 14px 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.preview-tabs__btn.activo {
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
}
.preview-tabs__btn--bloqueado {
    opacity: 0.55;
    cursor: not-allowed;
}
.preview-tabs__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-fondo);
    color: var(--texto-suave);
    vertical-align: middle;
}
.preview-panel { display: none; }
.preview-panel.activo { display: block; }
.preview-panel--bloqueado { position: relative; min-height: 280px; }
.preview-panel-bloqueo {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px dashed var(--color-borde-suave);
    border-radius: 12px;
}
.preview-panel-bloqueo__icono { font-size: 28px; }
.preview-panel-bloqueo__contenido { display: none; }

.preview-contabilizado {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #86efac;
    background: #f0fdf4;
}
.preview-contabilizado[hidden] { display: none !important; }
.preview-contabilizado__icono {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #22c55e;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
.preview-contabilizado__texto strong { display: block; color: #166534; }
.preview-contabilizado--no-causar {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.preview-contabilizado--no-causar .preview-contabilizado__texto strong { color: #475569; }
.preview-contabilizado__icono--neutro {
    background: #94a3b8;
    font-size: 18px;
    line-height: 1;
}

.preview-dian-eventos {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-borde-suave);
}
.preview-dian-eventos__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.preview-dian-eventos__titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-fuerte);
}
.preview-dian-eventos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.btn-dian-evento {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
    opacity: 0.72;
}
.btn-dian-evento__icono { flex-shrink: 0; }
.btn-dian-evento--warn:not(:disabled) { border-color: #fcd34d; }

.fila-contabilizada { background: #f0fdf4; }
.fila-no-causar { background: #f8fafc; }
.tabla-contab-ref { margin-top: 4px; }
.tabla-contab-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.preview-contabilizado__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.btn--deshabilitado-info {
    opacity: 0.85;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .preview-dian-eventos__grid { grid-template-columns: 1fr; }
}

.preview-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-borde-suave);
}
.preview-hero__numero {
    font-size: 26px;
    font-weight: 800;
    color: var(--texto-fuerte);
    margin-top: 8px;
    letter-spacing: -0.02em;
}
.preview-hero__fecha {
    font-size: 15px;
    color: var(--texto-suave);
    margin-top: 4px;
}
.preview-hero__totales {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.preview-total-card {
    min-width: 120px;
    padding: 14px 18px;
    border-radius: var(--radio-sm);
    background: var(--color-primario-suave);
    border: 1px solid var(--color-borde-suave);
}
.preview-total-card span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    margin-bottom: 4px;
}
.preview-total-card strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primario);
    font-variant-numeric: tabular-nums;
}
.preview-total-card--sec strong {
    font-size: 18px;
    color: var(--texto-fuerte);
}

.preview-cufe {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
}
.preview-cufe__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    margin-bottom: 6px;
}
.preview-cufe__valor {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    word-break: break-all;
    color: var(--texto);
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

.preview-partes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .preview-partes { grid-template-columns: 1fr; }
}
.preview-parte {
    padding: 16px 18px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    background: var(--color-superficie);
}
.preview-parte__titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
    margin-bottom: 8px;
}
.preview-parte__valor {
    font-size: 16px;
    font-weight: 600;
    color: var(--texto-fuerte);
    line-height: 1.4;
}
.preview-parte--detalle .preview-parte__valor {
    margin-bottom: 10px;
}
.preview-parte__meta {
    display: grid;
    gap: 8px;
    margin: 0;
}
.preview-parte__meta dt {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    margin-bottom: 1px;
}
.preview-parte__meta dd {
    font-size: 13px;
    color: var(--texto);
    margin: 0;
    word-break: break-word;
}

.preview-totales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.preview-total-chip {
    padding: 10px 12px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    background: var(--color-fondo);
}
.preview-total-chip span {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 2px;
}
.preview-total-chip strong {
    font-size: 15px;
    color: var(--texto-fuerte);
    font-variant-numeric: tabular-nums;
}
.preview-total-chip--destacado {
    background: var(--color-primario-suave);
    border-color: var(--color-primario);
}
.preview-total-chip--destacado strong {
    color: var(--color-primario);
}

.preview-impuestos { font-size: 13px; width: 100%; }
.preview-impuestos thead th {
    position: sticky;
    top: 0;
    background: var(--color-fondo);
    z-index: 1;
    font-size: 11px;
    padding: 10px 12px;
}
.preview-impuestos tbody td,
.preview-impuestos tfoot td {
    padding: 9px 12px;
}
.preview-imp-fila--cero {
    opacity: 0.55;
}
.preview-impuestos tfoot td {
    background: var(--color-fondo);
    border-top: 2px solid var(--color-borde);
}

.preview-seccion-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-fuerte);
    margin-bottom: 10px;
}
.preview-tabla-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    margin-bottom: 16px;
    max-height: 340px;
    overflow-y: auto;
}
.preview-lineas {
    margin: 0;
    font-size: 14px;
    width: 100%;
}
.preview-lineas thead th {
    position: sticky;
    top: 0;
    background: var(--color-fondo);
    z-index: 1;
    font-size: 12px;
    padding: 12px 14px;
}
.preview-lineas tbody td {
    padding: 11px 14px;
    vertical-align: top;
}
.preview-lineas tbody tr:nth-child(even) {
    background: var(--color-fondo);
}

.preview-detalles { margin-top: 20px; }
.preview-detalles summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--color-primario);
    font-weight: 600;
    margin-bottom: 10px;
    padding: 8px 0;
}

/* Lista automatización — filtros en cabecera de tabla */
.auto-lista-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.btn-linkish {
    background: transparent;
    border: none;
    color: var(--color-primario);
    text-decoration: underline;
    padding: 4px 8px;
    font-size: 12px;
}
.btn-linkish:hover { opacity: .85; }
.btn--block { width: 100%; }

.auto-tabla-wrap {
    padding: 0 !important;
    overflow-x: auto;
}

.tabla--filtros-cabecera thead th {
    vertical-align: top;
    background: var(--fondo-suave, #f8fafc);
    border-bottom: 1px solid var(--color-borde-suave, #e2e8f0);
    padding: 10px 8px;
}
.tabla-th-filtro {
    min-width: 100px;
}
.tabla-th-filtro--ancho { min-width: 160px; }
.tabla-th-filtro--periodo { min-width: 108px; }
.tabla-th-filtro--num { min-width: 110px; }
.tabla-th-filtro--acciones {
    min-width: 72px;
    width: 72px;
}
.tabla-th-filtro__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    margin-bottom: 6px;
    line-height: 1.2;
}
.tabla-th-filtro__input {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-borde, #cbd5e1);
    border-radius: var(--radio-sm, 6px);
    font-size: 12px;
    background: var(--color-superficie, #fff);
    box-sizing: border-box;
}
.tabla-th-filtro__input--sm {
    padding: 5px 6px;
    font-size: 11px;
}
.tabla-th-filtro__grupo {
    display: flex;
    gap: 4px;
}
.tabla-th-filtro__grupo .tabla-th-filtro__input {
    flex: 1;
    min-width: 0;
}
.tabla-th-filtro__check {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    font-size: 11px;
    color: var(--texto-suave);
    cursor: pointer;
    white-space: nowrap;
}
.tabla-th-filtro__check input { margin: 0; }
.tabla--filtros-cabecera tbody td {
    padding: 10px 8px;
    font-size: 13px;
}
.tabla--filtros-cabecera .acciones-fila {
    white-space: nowrap;
}

/* Filtros automatización (legacy) */
.auto-filtros-wrap { padding: 16px 20px !important; }
.auto-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 16px;
    align-items: end;
}
.auto-filtros__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}
.auto-filtros__campo span {
    font-weight: 600;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 11px;
}
.auto-filtros__campo input,
.auto-filtros__campo select {
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    font-size: 14px;
    background: var(--color-superficie);
}
.auto-filtros__campo--ancho { grid-column: span 2; }
@media (max-width: 720px) {
    .auto-filtros__campo--ancho { grid-column: span 1; }
}
.auto-filtros__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding-bottom: 8px;
}
.auto-filtros__acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    grid-column: 1 / -1;
    padding-top: 4px;
}

.badge--neutral {
    background: var(--color-fondo);
    color: var(--texto-suave);
    border: 1px solid var(--color-borde);
}
.badge--advertencia {
    background: #fef3c7;
    color: #92400e;
}
.badge--exito {
    background: #d1fae5;
    color: #065f46;
}

/* Loading modal preview */
.preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 40px 24px;
    text-align: center;
}
.preview-loading[hidden] { display: none !important; }
.preview-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-borde);
    border-top-color: var(--color-primario);
    border-radius: 50%;
    animation: preview-spin 0.8s linear infinite;
    margin-bottom: 20px;
}
@keyframes preview-spin {
    to { transform: rotate(360deg); }
}
.preview-loading__titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--texto-fuerte);
    margin: 0 0 16px;
}
.preview-loading__pasos {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    min-width: 280px;
}
.preview-loading__pasos li {
    font-size: 14px;
    color: var(--texto-suave);
    padding: 8px 0 8px 28px;
    position: relative;
}
.preview-loading__pasos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
}
.preview-loading__pasos li.activo { color: var(--texto-fuerte); font-weight: 600; }
.preview-loading__pasos li.activo::before {
    border-color: var(--color-primario);
    border-top-color: transparent;
    animation: preview-spin 0.8s linear infinite;
}
.preview-loading__pasos li.ok { color: #065f46; }
.preview-loading__pasos li.ok::before {
    content: '✓';
    border-color: #10b981;
    background: #d1fae5;
    color: #065f46;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    animation: none;
}
.preview-loading__pasos li.error { color: #991b1b; }
.preview-loading__pasos li.error::before {
    content: '!';
    border-color: #f87171;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 700;
    display: grid;
    place-items: center;
    animation: none;
}

.preview-envio-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(3px);
}
.preview-envio-overlay[hidden] { display: none !important; }
.preview-envio-overlay__box {
    text-align: center;
    padding: 28px 32px;
    max-width: 420px;
    border-radius: var(--radio-md);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
    background: #fff;
}
.preview-envio-overlay__titulo {
    margin: 14px 0 6px;
    font-weight: 600;
    font-size: 15px;
    color: var(--texto-fuerte);
}

.preview-aviso--sticky {
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.preview-contabilizado.preview-contabilizado--sticky {
    position: sticky;
    top: 0;
    z-index: 39;
}

.preview-aviso {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--radio-sm);
    font-size: 13px;
    line-height: 1.4;
}
.preview-aviso--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}
.preview-aviso--exito {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.preview-tercero-erp[hidden] { display: none !important; }
.preview-tercero-erp { margin-bottom: 16px; }

.preview-tercero-siigo {
    margin-bottom: 16px;
    border-radius: var(--radio-sm);
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.preview-tercero-siigo__ok {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--radio-sm);
    padding: 14px 16px;
    width: 100%;
}
.preview-tercero-siigo__warn {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radio-sm);
    padding: 14px 16px;
    width: 100%;
}
.preview-tercero-siigo__icono {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
}
.preview-tercero-siigo__ok .preview-tercero-siigo__icono {
    background: #10b981;
    color: #fff;
}
.preview-tercero-siigo__warn .preview-tercero-siigo__icono {
    background: #f59e0b;
    color: #fff;
}
.acciones-fila { white-space: nowrap; }
.tabla th.num, .tabla td.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Causación operativa */
.causacion-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 10px;
}
.causacion-estado-wrap {
    flex: 1 1 280px;
    margin-bottom: 0;
    min-width: 0;
}
.causacion-meta--compact {
    flex: 1 1 180px;
    margin-bottom: 0;
    font-size: 12px;
    gap: 8px;
}
.causacion-catalogos-bar--inline {
    flex: 0 1 auto;
    margin-bottom: 0;
    padding: 4px 10px;
    font-size: 12px;
}
.causacion-estado {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 10px;
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: var(--radio-sm);
    background: var(--fondo-suave, #f8fafc);
}
.causacion-estado__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.causacion-estado--ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.causacion-estado--error {
    border-color: #fecaca;
    background: #fef2f2;
}
.causacion-estado__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.causacion-estado__texto {
    font-size: 13px;
    color: #991b1b;
}
.causacion-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
}
.causacion-chip--ok {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.causacion-chip--warn {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.causacion-chip--error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.causacion-chip--destacado {
    font-weight: 700;
}
.causacion-chip--mini {
    padding: 1px 6px;
    font-size: 10px;
    vertical-align: middle;
}
.causacion-estado__aviso {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #fde68a;
    border-radius: var(--radio-sm);
    background: #fffbeb;
    color: #92400e;
    font-size: 11px;
    line-height: 1.45;
}
.causacion-estado-detalle {
    font-size: 11px;
    color: var(--texto-suave, #64748b);
    margin-left: auto;
    flex-shrink: 0;
}
.causacion-estado-detalle summary {
    cursor: pointer;
    user-select: none;
    color: var(--texto, #475569);
    font-weight: 600;
    white-space: nowrap;
    list-style: none;
}
.causacion-estado-detalle summary::-webkit-details-marker { display: none; }
.causacion-estado-detalle summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.15s;
}
.causacion-estado-detalle[open] summary::before { transform: rotate(90deg); }
.causacion-estado-detalle ul {
    position: absolute;
    right: 0;
    z-index: 5;
    margin: 4px 0 0;
    padding: 8px 10px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: var(--radio-sm);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    min-width: 220px;
    max-width: 320px;
}
.causacion-estado-detalle { position: relative; }
.causacion-estado-detalle li { margin: 3px 0; font-size: 11px; line-height: 1.35; }
.causacion-retenciones-acciones {
    display: flex;
    gap: 6px;
    align-items: center;
}
.causacion-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.causacion-seccion { margin-bottom: 14px; }
.causacion-seccion__titulo {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--texto-fuerte);
}
.causacion-cabecera {
    --causacion-control-h: 34px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
}
@media (max-width: 960px) {
    .causacion-cabecera { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .causacion-cabecera { grid-template-columns: 1fr; }
}
.causacion-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.causacion-campo__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texto-suave);
}
.causacion-campo span:not(.causacion-campo__label-row):not(.causacion-campo__tools):not(.causacion-sync-hint):not(.causacion-campo__hint) {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texto-suave);
}
.causacion-campo__tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.causacion-select-wrap { position: relative; width: 100%; }
.causacion-select,
.causacion-campo select,
.causacion-campo input:not([type="hidden"]),
.causacion-campo textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0 28px 0 10px;
    border: 1px solid var(--color-borde-suave, #e2e8f0);
    border-radius: 6px;
    background-color: var(--fondo-input, #fff);
    font-size: 12px;
    line-height: 1.3;
    color: var(--texto, #1e293b);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.causacion-cabecera .causacion-select,
.causacion-cabecera .causacion-campo select,
.causacion-cabecera .causacion-campo input:not([type="hidden"]) {
    min-height: var(--causacion-control-h, 34px);
    height: var(--causacion-control-h, 34px);
    line-height: calc(var(--causacion-control-h, 34px) - 2px);
}
.causacion-campo textarea {
    min-height: auto;
    height: auto;
    padding: 8px 10px;
}
.causacion-campo input[type="date"] {
    padding: 0 8px 0 10px;
    font-family: inherit;
}
.causacion-campo input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
    cursor: pointer;
    opacity: 0.55;
}
.causacion-select-wrap .causacion-select,
.causacion-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
}
.causacion-select:focus,
.causacion-campo select:focus,
.causacion-campo input:focus,
.causacion-campo textarea:focus {
    outline: none;
    border-color: var(--color-primario, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.causacion-select:disabled,
.causacion-campo select:disabled {
    opacity: 0.65;
    cursor: wait;
    background-color: #f8fafc;
}
.causacion-moneda-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--causacion-control-h, 34px);
    height: var(--causacion-control-h, 34px);
    padding: 0 10px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid var(--color-borde-suave, #e2e8f0);
    font-size: 12px;
    font-weight: 700;
    color: var(--texto, #334155);
    letter-spacing: 0.04em;
    box-sizing: border-box;
}
.causacion-campo--moneda .causacion-moneda-pill { width: 100%; }
.causacion-campo--full { grid-column: 1 / -1; }
.causacion-tabla-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio-sm);
}
.causacion-lineas { font-size: 12px; min-width: 720px; }
.causacion-lineas thead th {
    background: var(--fondo-suave, #f8fafc);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
}
.causacion-lineas tbody td {
    padding: 8px 10px;
    vertical-align: middle;
}
.causacion-lineas tbody tr:nth-child(even) { background: #fafbfc; }
.causacion-lineas tbody tr.causacion-linea--impuesto-cargo { background: #f0f7ff; }
.causacion-lineas tbody tr.causacion-linea--impuesto-cargo:nth-child(even) { background: #e8f2fd; }
.causacion-lineas .btn--sm { padding: 4px 8px; font-size: 11px; }
.causacion-impuesto-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 200px;
}
.causacion-impuesto-cell .causacion-select-wrap { flex: 1; min-width: 0; }
.causacion-impuesto-cell .causacion-select { font-size: 11px; padding: 5px 24px 5px 8px; }
.causacion-dian-pill {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.causacion-dian-pill--ok {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.causacion-retenciones-nota { margin: 6px 0 0; font-size: 11px; }
.causacion-retenciones .causacion-select { font-size: 11px; min-width: 160px; }
.causacion-acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}
.causacion-nombre-regla {
    flex: 1 1 220px;
    min-width: 180px;
    padding: 8px 10px;
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio-sm);
}
.causacion-buscar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.causacion-buscar input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio-sm);
}
.modal--asociar-item { max-width: 560px; }
.causacion-asociar-contexto {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--fondo-suave, #f8fafc);
    border-radius: var(--radio-sm);
}
.causacion-asociar-contexto__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.causacion-asociar-contexto__label {
    min-width: 88px;
    font-size: 13px;
    color: var(--texto-suave);
}
.causacion-asociar-contexto__valor {
    font-size: 13px;
    font-weight: 500;
}
.causacion-asociar-hint { margin: 0 0 12px; }
.texto-requerido { color: var(--color-error, #dc2626); }
.causacion-item-tipo {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--texto-suave);
    margin-right: 4px;
}
.causacion-productos-lista {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.causacion-producto-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio-sm);
    cursor: pointer;
}
.causacion-producto-item:hover { background: var(--fondo-suave, #f8fafc); }
.causacion-producto-item--activo {
    border-color: var(--color-primario, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}
.causacion-catalogos-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--radio-sm);
    font-size: 13px;
}
.causacion-catalogos-bar--loading {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}
.causacion-catalogos-bar--ok {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}
.causacion-catalogos-bar--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.causacion-sync-hint {
    font-size: 10px;
    color: var(--texto-suave, #94a3b8);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.causacion-sync-hint--inline {
    display: inline-block;
    min-width: 36px;
    text-align: right;
}
.causacion-sync-hint--busqueda { margin-top: 4px; display: block; }
.causacion-sync-hint--loading { color: #1d4ed8; }
.causacion-sync-hint--ok { color: #047857; }
.causacion-sync-hint--error { color: #b91c1c; }
.causacion-campo .causacion-sync-hint--inline { margin-top: 0; }
.causacion-retenciones-acciones .causacion-sync-hint--inline { margin-right: 4px; }
.causacion-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.causacion-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-borde-suave);
    border-top-color: var(--color-primario, #2563eb);
    border-radius: 50%;
    animation: causacion-spin 0.7s linear infinite;
}
.causacion-loading-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 12px;
    color: var(--texto-suave);
    font-size: 13px;
}
.causacion-campo__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.btn-refrescar-catalogo {
    border: none;
    background: transparent;
    color: var(--color-primario, #2563eb);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: var(--radio-sm);
}
.btn-refrescar-catalogo:hover { background: rgba(37, 99, 235, 0.08); }
.btn-refrescar-catalogo:disabled { opacity: 0.5; cursor: wait; }
.btn-refrescar-catalogo--loading {
    animation: causacion-spin 0.7s linear infinite;
    opacity: 0.7;
}
.btn-refrescar-catalogo--ok {
    color: #047857;
    background: #ecfdf5;
}
.btn-refrescar-catalogo--error {
    color: #b91c1c;
    background: #fef2f2;
}
.causacion-retenciones-acciones .causacion-sync-hint {
    margin-left: 8px;
    display: inline-block;
}
.causacion-resumen-totales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.causacion-resumen-card {
    padding: 8px 10px;
    border: 1px solid var(--color-borde-suave);
    border-radius: 6px;
    background: #fff;
}
.causacion-resumen-card span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 2px;
}
.causacion-resumen-card strong {
    display: block;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.causacion-resumen-card--destacado {
    border-color: var(--color-primario, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}
.nc-intro { margin-bottom: 10px; }
.nc-campo-factura { max-width: 720px; }
.nc-tabla input[type="text"],
.nc-tabla input[type="number"] {
    width: 100%;
    min-width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: var(--radio-sm, 6px);
    font: inherit;
}
.nc-tabla input[type="number"] { text-align: right; }
.nc-avisos { display: flex; flex-direction: column; gap: 6px; }
.causacion-retenciones-wrap .tabla { margin-top: 8px; }
.causacion-retenciones input[type="text"],
.causacion-retenciones input[type="number"] {
    width: 100%;
    min-width: 90px;
    padding: 6px 8px;
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: var(--radio-sm, 6px);
    font-size: 13px;
}
.causacion-retenciones-vacio td {
    padding: 14px 12px;
    text-align: center;
}
.causacion-campo--buscar { margin-bottom: 8px; }
.causacion-buscar-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.causacion-buscar-input-wrap input {
    width: 100%;
    padding: 8px 36px 8px 10px;
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio-sm);
}
.causacion-buscar-input-wrap input:disabled {
    background: var(--fondo-suave, #f8fafc);
    color: var(--texto-suave);
}
.causacion-buscar-spinner {
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-borde-suave);
    border-top-color: var(--color-primario, #2563eb);
    border-radius: 50%;
    animation: causacion-spin 0.7s linear infinite;
}
.causacion-productos-lista--vacio {
    padding: 16px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--texto-suave);
    border: 1px dashed var(--color-borde-suave);
    border-radius: var(--radio-sm);
    background: var(--fondo-suave, #f8fafc);
}
.causacion-productos-lista--error {
    padding: 12px;
    font-size: 13px;
    color: var(--color-error, #dc2626);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: var(--radio-sm);
    background: rgba(220, 38, 38, 0.04);
}
@keyframes causacion-spin {
    to { transform: rotate(360deg); }
}
.software-card__dato--full { grid-column: 1 / -1; }
.software-card__variante-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.software-card__variante-select {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--texto-fuerte);
    background: var(--color-superficie);
}
.software-card__variante-select:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-suave);
}
.regla-toggle-wrap { display: inline-flex; }

@media (max-width: 720px) {
    .credenciales-resumen__item {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .credenciales-resumen__valor { text-align: left; }
    .software-card__pie {
        flex-direction: column;
        align-items: stretch;
    }
    .software-card__pie .btn,
    .software-card__form-inline .btn { width: 100%; }
}

/* Siigo Contador — picker cuentas */
.causacion-cuenta-picker {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.causacion-cuenta-picker input {
    flex: 1;
    min-width: 0;
    background: var(--fondo-suave, #f8fafc);
    cursor: default;
}

.causacion-vencimiento-rapido {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.causacion-vencimiento-rapido .btn {
    padding: 4px 10px;
    font-size: 12px;
}

.causacion-contador-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--fondo-suave, #f8fafc);
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: 8px;
}
.causacion-contador-toolbar__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.causacion-contador-toolbar__hint {
    margin: 0;
    flex: 1 1 220px;
}
.causacion-contador-toolbar__error {
    margin: 6px 0 0;
    flex: 1 1 100%;
    color: var(--color-error, #b91c1c);
    font-size: 12px;
}
.causacion-contador-fallback {
    grid-column: 1 / -1;
    margin-top: 4px;
}
.causacion-contador-fallback__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.causacion-contador-fallback summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.causacion-contador-fallback__grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.causacion-campo-cuenta__control {
    display: flex;
    align-items: center;
    gap: 6px;
}
.causacion-campo-cuenta__control input {
    flex: 1 1 auto;
    min-width: 0;
}
.causacion-campo-cuenta__control .btn-elegir-cuenta {
    flex: 0 0 auto;
    min-height: var(--causacion-control-h, 34px);
    height: var(--causacion-control-h, 34px);
}
.causacion-linea__nota {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--texto-suave);
    font-style: italic;
}
.causacion-linea__complemento {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-primario-oscuro);
    background: var(--color-primario-claro);
}
.causacion-linea__parte {
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
    letter-spacing: .02em;
}
.causacion-lineas tbody tr.causacion-linea--parte { background: #fbf7ff; }
.causacion-lineas tbody tr.causacion-linea--parte:nth-child(even) { background: #f5eeff; }
.causacion-lineas tbody tr.causacion-linea--parte td:first-child {
    border-left: 3px solid var(--color-primario-claro);
}
.modal--dividir-linea { max-width: 720px; }
.causacion-dividir-tabla { width: 100%; margin-top: 12px; }
.causacion-dividir-tabla input[type="number"] { width: 110px; text-align: right; }
.causacion-dividir-tabla input[type="text"] { width: 100%; }
.causacion-dividir-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.causacion-dividir-total--error { color: var(--alerta); font-weight: 600; }
.causacion-campo__hint--alerta {
    color: var(--alerta);
    background: var(--alerta-bg);
    border-radius: var(--radio-sm);
    padding: 6px 8px;
    white-space: normal;
}
.causacion-campo--alerta input {
    border-color: var(--alerta);
}
.causacion-campo__hint {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Config API — explorador catálogos Siigo */
.config-catalogos-prueba__intro { margin: 0 0 14px; line-height: 1.5; }
.config-catalogos-prueba__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.config-catalogos-prueba__estado--error { color: var(--color-error, #b91c1c); }
.config-catalogos-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    min-height: 420px;
}
.config-catalogos-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.config-catalogos-nav__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.config-catalogos-nav__btn:hover { background: var(--fondo-suave, #f8fafc); }
.config-catalogos-nav__btn--activa {
    border-color: var(--color-primario-claro, #93c5fd);
    background: var(--color-primario-suave, #eff6ff);
}
.config-catalogos-nav__count {
    font-size: 12px;
    color: var(--texto-suave);
}
.config-catalogos-panel {
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.config-catalogos-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--borde-suave, #e2e8f0);
    background: var(--fondo-suave, #f8fafc);
}
.config-catalogos-buscar {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid var(--borde-suave, #e2e8f0);
    border-radius: 8px;
}
.config-catalogos-tabla-wrap {
    max-height: 520px;
    overflow: auto;
    padding: 0;
}
.config-catalogos-tabla { margin: 0; font-size: 13px; }
.config-catalogos-tabla td,
.config-catalogos-tabla th { white-space: nowrap; }
.config-catalogos-tabla__mas { padding: 10px 12px; margin: 0; }

@media (max-width: 900px) {
    .config-catalogos-layout { grid-template-columns: 1fr; }
    .config-catalogos-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .config-catalogos-nav__btn { width: auto; flex: 1 1 calc(50% - 6px); }
}