/* ============================================================
   Cronopio · Administración de VMs (vms/index.html)
   Complementa styles.css (tabla, botones circulares, filtros).
   ============================================================ */

/* Miga de pan */
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    background: #e9ecef;
    font-size: 0.875rem;
    color: #6c757d;
}
.page-breadcrumb a { color: #4e73df; text-decoration: none; }
.page-breadcrumb a:hover { text-decoration: underline; }

/* Botones de la cabecera degradada */
.card-header-gradient .header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card-header-gradient .header-btn i { font-size: 0.7rem; }
.card-header-gradient .header-btn:hover:not(:disabled),
.card-header-gradient .header-btn:focus-visible {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    outline: none;
}
.card-header-gradient .header-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
.card-header-gradient .header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Etiquetas de filtro */
.vm-filters .form-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #5a5c69;
}
.vm-filters .form-label i { width: 14px; color: #858796; }

/* Los dropdowns PkiSelect deben quedar por encima de la tabla */
.vm-filters .pki-select-panel { z-index: 1030; }

/* Aviso de error de carga */
#vmAlert { margin-bottom: 1rem; }
#vmAlert[hidden] { display: none; }

@media (max-width: 768px) {
    .card-header-gradient .header-actions { width: 100%; justify-content: flex-start; }
}


/* ============================================================
   PkiSelect · dropdown propio (js/pki-select.js), copiado del
   formulario de nuevo certificado para los filtros de esta página.
   ============================================================ */
.pki-select {
    --pki-primary: #667eea;
    --pki-text: #3a3b45;
    --pki-muted: #858796;
    --pki-border: #e3e6f0;
    --pki-bg-soft: #f8f9fc;
}

.pki-select { position: relative; width: 100%; }

.pki-select-native {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    /* !important: Bootstrap pone opacity:1 en .form-control:disabled */
    opacity: 0 !important;
    z-index: -1;
    pointer-events: none;
}

.pki-select-btn {
    width: 100%;
    height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.9rem;
    border: 1px solid #d9dde9;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--pki-text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pki-select-btn:hover:not(:disabled) { border-color: #b9c1e0; }

.pki-select-btn:focus-visible,
.pki-select.is-open .pki-select-btn {
    outline: none;
    border-color: var(--pki-primary);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.18);
}

.pki-select-value {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pki-select-value.is-placeholder { color: #a9adbf; }

.pki-select-caret {
    flex: 0 0 auto;
    color: var(--pki-primary);
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.pki-select.is-open .pki-select-caret { transform: rotate(180deg); }

.pki-select.is-locked .pki-select-btn {
    background: #eef1f8;
    border-color: transparent;
    color: #5a5c69;
    cursor: not-allowed;
}

.pki-select.is-locked .pki-select-caret { color: #a9adbf; transform: none; }

.pki-select.is-invalid .pki-select-btn { border-color: #e74a3b; }
.pki-select.is-invalid .pki-select-caret { color: #e74a3b; }
.pki-select.is-invalid ~ .invalid-feedback { display: block; }

.pki-select-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 100%;
    max-width: min(32rem, 90vw);
    z-index: 1050;
    padding: 0.35rem;
    border: 1px solid var(--pki-border);
    border-radius: 0.6rem;
    background: #fff;
    box-shadow: 0 0.75rem 2rem rgba(34, 74, 190, 0.18), 0 0.15rem 0.4rem rgba(0, 0, 0, 0.05);
    animation: pki-select-in 0.14s ease-out;
}

.pki-select.drop-up .pki-select-panel { top: auto; bottom: calc(100% + 0.35rem); }

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

.pki-select-panel[hidden] { display: none; }

.pki-select-search {
    position: relative;
    margin-bottom: 0.35rem;
}

.pki-select-search[hidden] { display: none; }

.pki-select-search i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a9adbf;
    font-size: 0.75rem;
}

.pki-select-search input {
    width: 100%;
    height: 2.2rem;
    padding: 0 0.7rem 0 2rem;
    border: 1px solid var(--pki-border);
    border-radius: 0.4rem;
    background: var(--pki-bg-soft);
    font-size: 0.82rem;
    color: var(--pki-text);
}

.pki-select-search input:focus { outline: none; border-color: var(--pki-primary); background: #fff; }

.pki-select-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    outline: none;
}

.pki-select-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.86rem;
    color: var(--pki-text);
    cursor: pointer;
    user-select: none;
}

.pki-select-option + .pki-select-option { margin-top: 1px; }
.pki-select-option.is-active { background: #f1f3fd; }
.pki-select-option.is-selected { color: var(--pki-primary); font-weight: 700; }
.pki-select-option.is-disabled { opacity: 0.45; cursor: not-allowed; }

.pki-select-option-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.pki-select-tick {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--pki-primary);
    visibility: hidden;
}

.pki-select-option.is-selected .pki-select-tick { visibility: visible; }

.pki-select-empty {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--pki-muted);
}

.pki-select-empty[hidden] { display: none; }

/* Variante pequeña: selects con .form-control-sm */
.pki-select-sm .pki-select-btn {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0 0.65rem;
    font-size: 0.82rem;
    border-radius: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
    .pki-select-btn, .pki-select-caret { transition: none; }
    .pki-select-panel { animation: none; }
}