/* ═══════════════════════════════════════════════════════════════════════
   action-menu.css  –  Dropdown de acciones premium – NegocioRodar v2
   El dropdown usa position:fixed y se queda dentro del .nr-action-menu.
   El JS calcula top/left con getBoundingClientRect.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Celda de la tabla ───────────────────────────────────────────────── */
td.accionesColumn,
td#accionesColumn {
    text-align: center;
    white-space: nowrap;
    width: 1%;                  /* que colapse al mínimo */
    padding: 6px 8px !important;
    /* IMPORTANTE: no usar overflow:hidden ni position que cree stacking context */
}

/* ── Contenedor del dropdown ─────────────────────────────────────────── */
.nr-action-menu {
    position: relative;         /* ancla visual, pero el dropdown es fixed */
    display: inline-block;
}

/* ── Botón disparador ────────────────────────────────────────────────── */
.nr-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--nr-dark-mid, #3D4044), var(--nr-dark, #282B2D));
    color: var(--nr-accent, #F2E6D8);
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: var(--nr-font, 'Inter', sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}
.nr-action-btn:hover {
    background: linear-gradient(135deg, var(--nr-primary, #A60825), var(--nr-primary-dark, #73020C));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(115, 2, 12, 0.35);
}
.nr-action-btn:active {
    transform: translateY(0) scale(0.97);
}
.nr-action-btn .nr-action-chevron {
    font-size: 0.65rem;
    transition: transform 0.22s ease;
    opacity: 0.75;
}
.nr-action-menu.open .nr-action-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ── Panel desplegable ───────────────────────────────────────────────── */
.nr-action-dropdown {
    position: fixed;            /* posicionado por JS con getBoundingClientRect */
    min-width: 185px;
    max-width: 260px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 99999;            /* muy alto para estar sobre todo */
    overflow: hidden;
    display: none;              /* oculto por defecto */
    flex-direction: column;
    transform-origin: top center; /* animación abre desde centro-arriba */
    pointer-events: none;       /* cuando oculto, no intercepta clicks */
}

/* Cuando visible */
.nr-action-dropdown.show-dropdown {
    display: flex;
    pointer-events: auto;
    animation: nr-dropdown-open 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes nr-dropdown-open {
    from { opacity: 0; transform: scale(0.88) translateY(-8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Items del dropdown ──────────────────────────────────────────────── */
.nr-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-family: var(--nr-font, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--nr-dark, #282B2D);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    line-height: 1.2;
}
.nr-action-item:last-child {
    border-bottom: none;
}
.nr-action-item:hover {
    background: rgba(166, 8, 37, 0.07);
    padding-left: 18px;
    color: var(--nr-primary-dark, #73020C);
}

/* ── Ícono de cada ítem ──────────────────────────────────────────────── */
.nr-action-item .nr-ai-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform 0.18s, box-shadow 0.18s;
}
.nr-action-item:hover .nr-ai-icon {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ── Variantes de color por tipo de acción ───────────────────────────── */
.nr-ai--info     { background: rgba(0, 82, 163, 0.12); color: #0052A3; }
.nr-ai--doc      { background: rgba(67, 56, 202, 0.12); color: #4338CA; }
.nr-ai--success  { background: rgba(26, 122, 74, 0.12); color: #1A7A4A; }
.nr-ai--edit     { background: rgba(192, 120, 0, 0.13); color: #C07800; }
.nr-ai--danger   { background: rgba(192, 16, 16, 0.12); color: #C01010; }
.nr-ai--credit   { background: rgba(124, 58, 237, 0.12); color: #7C3AED; }
.nr-ai--account  { background: rgba(0, 128, 128, 0.12); color: #007070; }
.nr-ai--print    { background: rgba(40, 43, 45, 0.12);  color: #282B2D; }
.nr-ai--wapp     { background: rgba(37, 211, 102, 0.14); color: #128C7E; }

/* Al hover → fondo más sólido */
.nr-action-item:hover .nr-ai--info    { background: rgba(0, 82, 163, 0.20); }
.nr-action-item:hover .nr-ai--doc     { background: rgba(67, 56, 202, 0.20); }
.nr-action-item:hover .nr-ai--success { background: rgba(26, 122, 74, 0.22); }
.nr-action-item:hover .nr-ai--edit    { background: rgba(192, 120, 0, 0.22); }
.nr-action-item:hover .nr-ai--danger  { background: rgba(192, 16, 16, 0.22); }
.nr-action-item:hover .nr-ai--credit  { background: rgba(124, 58, 237, 0.22); }
.nr-action-item:hover .nr-ai--account { background: rgba(0, 128, 128, 0.22); }
.nr-action-item:hover .nr-ai--print   { background: rgba(40, 43, 45, 0.22); }
.nr-action-item:hover .nr-ai--wapp    { background: rgba(37, 211, 102, 0.26); }

/* ── Separador dentro del dropdown ──────────────────────────────────── */
.nr-action-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 3px 10px;
}

/* ── Label de sección ────────────────────────────────────────────────── */
.nr-action-section {
    padding: 5px 14px 3px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(40, 43, 45, 0.42);
    user-select: none;
}

/* ── Asegurar que ni la tabla ni sus contenedores clippeen el dropdown ─ */
.nr-table-wrap,
.table-responsive,
table,
thead,
tbody,
tr,
td {
    overflow: visible !important;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .nr-action-dropdown { min-width: 160px; }
    .nr-action-btn { padding: 5px 9px; font-size: 0.74rem; }
}

/* Ajuste para pantallas 1366x768 — botón más compacto */
@media (max-width: 1400px) {
    .nr-action-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    .nr-action-dropdown {
        min-width: 170px;
    }
    .nr-action-item {
        padding: 7px 12px;
        font-size: 0.80rem;
    }
    .nr-action-item .nr-ai-icon {
        width: 24px;
        height: 24px;
        font-size: 0.78rem;
    }
}