/* ═══════════════════════════════════════════════
   devices.css — Clases para devices.js
   ═══════════════════════════════════════════════ */

/* ── Dot de conectividad ── */

.dev-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dev-dot--online  { background: var(--green); animation: pulse 2s ease-in-out infinite; }
.dev-dot--slow    { background: var(--yellow); }
.dev-dot--offline { background: var(--red); }
.dev-dot--unknown { background: var(--text-muted); }

/* ── Device Card ── */

.dev-card {
    margin-bottom: 1rem;
}

.dev-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.dev-card-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dev-name {
    font-weight: 600;
    font-size: 1rem;
}

.dev-name-label {
    color: var(--accent);
    margin-right: 0.4rem;
}

.dev-name-sep {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.dev-id {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.dev-id-ip {
    margin-left: 0.5rem;
    opacity: 0.6;
}

.dev-contact {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ── Device Info Grid ── */

.dev-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.dev-info-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.dev-info-value {
    font-family: var(--font-mono);
    font-weight: 600;
}

.dev-info-value--sm   { font-size: 0.85rem; }
.dev-info-value--next { color: var(--yellow); }

/* ── Device Buttons ── */

.dev-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ── Packages Section dentro de Device Card ── */

.dev-pkg-section {
    margin-top: 0.8rem;
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}

.dev-pkg-section-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dev-pkg-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem;
    margin-bottom: 0.5rem;
}

.dev-pkg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dev-pkg-header--active {
    margin-bottom: 0.5rem;
}

.dev-pkg-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dev-pkg-header-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dev-pkg-state-badge {
    font-size: 0.65rem;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-pkg-name {
    font-weight: 500;
    font-size: 0.82rem;
}

.dev-pkg-pers-badge { font-size: 0.6rem; }
.dev-pkg-genre-badge { font-size: 0.58rem; }

/* ── Barras de Progreso ── */

.dev-prog-block {
    margin-bottom: 0.4rem;
}

.dev-prog-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    margin-bottom: 0.2rem;
}

.dev-prog-label  { color: var(--text-muted); }
.dev-prog-value  { font-family: var(--font-mono); color: var(--text-secondary); }
.dev-prog-pct    { color: var(--text-muted); }

.dev-prog-bar {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.dev-prog-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s;
}

.dev-prog-fill--tracks { background: var(--green); }
.dev-prog-fill--time   { background: var(--blue); }

.dev-pkg-next {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--yellow);
    margin-top: 0.2rem;
}

.dev-sync-time {
    margin-top: 0.6rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ── VPN Badge ── */

.dev-vpn-badge {
    font-size: 0.72rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dev-vpn-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dev-vpn-dot--on  { background: var(--green); }
.dev-vpn-dot--off { background: var(--red); }

.dev-vpn-server  { font-family: var(--font-mono); color: var(--text-secondary); }
.dev-vpn-sep     { color: var(--text-muted); }
.dev-vpn-loc     { color: var(--text-muted); }

/* ── Sub-vistas (historial, pool, paquetes) ── */

.dv-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dv-subheader-title { font-weight: 600; }

.dv-subheader-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Historial — stat cards resumen ── */

.dv-stats-row {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.dv-stat-mini {
    flex: 1;
    min-width: 80px;
    padding: 0.6rem;
    text-align: center;
}

.dv-stat-mini-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.dv-stat-mini-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.2rem;
}

.dv-stat-mini-value--green { color: var(--green); }
.dv-stat-mini-value--red   { color: var(--red); }
.dv-stat-mini-value--blue  { color: var(--blue); }

/* ── Historial — distribución de comandos ── */

.dv-cmd-dist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

/* ── Tabla de comandos (historial y recientes) ── */

.dv-td-time {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.dv-td-cmd {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
}

.dv-td-params {
    font-size: 0.75rem;
    color: var(--text-secondary);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-td-duration {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

.dv-td-error {
    font-size: 0.7rem;
    color: var(--red);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Command Pool — tabla ── */

.dv-td-mono       { font-family: var(--font-mono); font-weight: 500; }
.dv-td-mono-muted { font-family: var(--font-mono); color: var(--text-secondary); }
.dv-td-mono-sm    {
    font-size: 0.72rem;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-td-center     { font-family: var(--font-mono); text-align: center; font-weight: 600; }
.dv-td-center-dim { font-family: var(--font-mono); text-align: center; color: var(--text-secondary); }
.dv-td-desc       { font-size: 0.78rem; color: var(--text-secondary); }
.dv-td-nowrap     { white-space: nowrap; }
.dv-tr-disabled   { opacity: 0.5; }

/* ── Device Packages — grupos ── */

.dv-pkg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.dv-pkg-filter-badge {
    font-size: 0.68rem;
    cursor: pointer;
}

.dv-pkg-search-wrap { margin-bottom: 1rem; }

.dv-td-pkg-name   { font-weight: 500; }
.dv-td-pkg-id     { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.dv-td-pkg-ver    { font-family: var(--font-mono); font-size: 0.8rem; }
.dv-td-pkg-action { font-size: 0.75rem; color: var(--text-muted); }

/* ── Enviar Comando ── */

.dv-cmd-form {
    max-width: 500px;
}

.dv-cmd-field {
    margin-bottom: 0.8rem;
}

.dv-cmd-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 0.3rem;
}

.dv-cmd-result-wrap {
    margin-bottom: 0.8rem;
}

.dv-cmd-submit {
    width: 100%;
}

.dv-cmd-recent-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.dv-cmd-recent-wrap {
    margin-top: 1rem;
}

.dv-td-recent-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.dv-td-recent-pkg  { font-size: 0.75rem; }
.dv-td-recent-cmd  { font-family: var(--font-mono); font-size: 0.78rem; }

/* ── Mensajes de resultado ── */

.dv-msg-success {
    background: var(--green-bg);
    border: 1px solid var(--green);
    border-radius: 6px;
    padding: 0.6rem;
    font-size: 0.82rem;
}

.dv-msg-success-id {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.dv-msg-error {
    color: var(--red);
    font-size: 0.82rem;
    padding: 0.4rem;
}

/* ── Modal Rename ── */

.dv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dv-modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dv-modal-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.dv-modal-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.dv-modal-result {
    margin-bottom: 0.8rem;
}

/* ── Botón volver ── */
.dv-btn-back {
    margin-bottom: 1rem;
}

/* ── Utilidades de ancho completo ── */
.w-full { width: 100%; }

/* ── Botón eliminar (color rojo) ── */
.btn-danger { color: var(--red); }