/* ==========================================================================
   AGILEPRESS APP - MASTER STYLESHEET (V2 - SaaS UI)
   ========================================================================== */

/* --- 1. VARIABLES (DESIGN SYSTEM) --- */
.ap-app, .ap-dashboard, .ap-builder-app, .ap-single-layout, .ap-settings-layout {
    /* Colors - Brand (Dark Navy/Slate from your mockup) */
    --ap-brand-main: #0f172a;
    --ap-brand-hover: #1e293b;
    --ap-brand-light: #f8fafc;
    
    /* Colors - Neutrals */
    --ap-bg-page: #f8fafc;
    --ap-surface: #ffffff;
    --ap-border: #e2e8f0;
    --ap-border-hover: #cbd5e1;
    
    /* Colors - Text */
    --ap-text-title: #0f172a;
    --ap-text-body: #475569;
    --ap-text-muted: #94a3b8;
    
    /* Colors - Semantic */
    --ap-success-bg: #dcfce7;
    --ap-success-text: #166534;
    --ap-warning-bg: #fef9c3;
    --ap-warning-text: #854d0e;
    --ap-danger-bg: #fee2e2;
    --ap-danger-text: #b91c1c;
    --ap-info-bg: #e0e7ff;
    --ap-info-text: #3730a3;
    --ap-external-bg: #f3e8ff; 
    --ap-external-text: #6b21a8;
    
    /* Radius & Shadows */
    --ap-radius-sm: 6px;
    --ap-radius-md: 8px;
    --ap-radius-lg: 12px;
    --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ap-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ap-text-body);
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

.ap-app *, .ap-dashboard *, .ap-builder-app *, .ap-single-layout *, .ap-settings-layout *,
.ap-app *:before, .ap-app *:after { box-sizing: inherit; }


/* --- 2. GLOBAL LAYOUTS --- */
.ap-dashboard, .ap-builder-app, .ap-single-layout, .ap-settings-layout {
    max-width: 1280px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* El Grid se aplica a los "layouts" internos, dejando las cabeceras libres */
.ap-dashboard, .ap-builder-layout, .ap-single-layout, .ap-settings-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .ap-dashboard, .ap-builder-layout, .ap-single-layout, .ap-settings-layout {
        grid-template-columns: 350px 1fr; /* Columna izquierda ensanchada a 350px */
    }
}

.ap-layout-sidebar, .ap-dashboard__sidebar, .ap-settings__sidebar {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Reducido para apretar los paneles del sidebar */
}

.ap-layout-main, .ap-dashboard__main, .ap-settings__main {
    min-width: 0; 
    display: flex;
    flex-direction: column;
    gap: 0; /* Puesto a 0 para matar el "espacio fantasma" entre cabecera y tabs */
}

/* Arreglo de Cabeceras (Compactas y ocupan todo el ancho) */
.ap-builder-header, .ap-single-header, .ap-main-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0.5rem; /* Margen inferior compacto */
    padding-bottom: 0.5rem; /* Relleno inferior compacto */
}
.ap-builder-header {
    border-bottom: 1px solid var(--ap-border);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .ap-builder-header, .ap-single-header, .ap-main-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* --- 3. TYPOGRAPHY & HEADERS --- */
.ap-app h1, .ap-app h2, .ap-app h3, .ap-app h4 {
    color: var(--ap-text-title);
    margin: 0;
    line-height: 1.2;
}

.ap-main-header__title, .ap-header-titles h1, .ap-builder-header h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ap-breadcrumbs {
    font-size: 0.85rem;
    color: var(--ap-text-muted);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.ap-breadcrumbs span { color: var(--ap-text-title); font-weight: 600; }


/* --- 4. BUTTONS --- */
button { font-family: inherit; cursor: pointer; }

.ap-btn-primary, .ap-btn--primary {
    background-color: var(--ap-brand-main);
    color: #fff;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: var(--ap-radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
    text-decoration: none;
}
.ap-btn-primary:hover, .ap-btn--primary:hover { background-color: var(--ap-brand-hover); color:#fff; }

.ap-btn-secondary, .ap-btn--outline {
    background-color: var(--ap-surface);
    color: var(--ap-text-title);
    border: 1px solid var(--ap-border);
    padding: 0.6rem 1.25rem;
    border-radius: var(--ap-radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
}
.ap-btn-secondary:hover, .ap-btn--outline:hover { background-color: var(--ap-brand-light); border-color: var(--ap-border-hover); }

.ap-btn-text {
    background: transparent;
    border: none;
    color: var(--ap-text-body);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
}
.ap-btn-text:hover { color: var(--ap-text-title); }

.ap-btn-icon, .ap-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-sm);
    color: var(--ap-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
}
.ap-btn-icon:hover, .ap-action-btn:hover { color: var(--ap-text-title); border-color: var(--ap-border-hover); background: var(--ap-brand-light); }
.ap-btn-icon--danger:hover { color: var(--ap-danger-text); background: var(--ap-danger-bg); border-color: #fca5a5; }


/* --- 5. FORMS & INPUTS --- */
.ap-form-group { margin-bottom: 1.25rem; }
.ap-form-group label, .ap-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ap-text-muted);
    margin-bottom: 0.5rem;
}
.ap-form-group input[type="text"], .ap-form-group input[type="url"], .ap-form-group textarea, .ap-form-group select, .ap-input {
    width: 100%;
    background-color: var(--ap-bg-page);
    border: 1px solid transparent;
    padding: 0.6rem 1rem;
    border-radius: var(--ap-radius-sm);
    font-size: 0.9rem;
    color: var(--ap-text-title);
    transition: all 0.2s;
    font-family: inherit;
    outline: none;
}
.ap-form-group input:focus, .ap-form-group textarea:focus, .ap-input:focus {
    border-color: var(--ap-border-hover);
    background-color: var(--ap-surface);
    box-shadow: var(--ap-shadow-sm);
}
.ap-form-group input:disabled, .ap-form-group textarea:disabled, .ap-input:disabled {
    opacity: 0.6; cursor: not-allowed;
}

.ap-main-header__search {
    position: relative;
    width: 100%;
    max-width: 350px;
}
.ap-main-header__search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ap-text-muted);
}
.ap-main-header__search input {
    width: 100%;
    background: var(--ap-bg-page);
    border: none;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border-radius: var(--ap-radius-sm);
    outline: none;
}
.ap-main-header__search input:focus { background: var(--ap-border); }


/* --- 6. TABS NAVIGATION --- */
.ap-main-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--ap-border);
    margin-bottom: 1rem; /* Espacio exacto hasta la primera tarjeta */
    overflow-x: auto;
}
.ap-tab-btn, .ap-tab-trigger {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ap-text-muted);
    transition: all 0.2s;
    white-space: nowrap;
}
.ap-tab-btn:hover, .ap-tab-trigger:hover { color: var(--ap-text-title); }
.ap-tab-btn.active, .ap-tab-trigger.active {
    color: var(--ap-text-title);
    border-bottom-color: var(--ap-text-title);
}
.ap-count {
    background: var(--ap-border);
    color: var(--ap-text-body);
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.25rem;
}


/* --- 7. BADGES & TAGS --- */
.ap-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.ap-badge--public, .ap-badge-public { background: var(--ap-success-bg); color: var(--ap-success-text); }
.ap-badge--private, .ap-badge-private { background: var(--ap-border); color: var(--ap-text-body); }

.ap-badge-source { font-size: 0.6rem; font-weight: 800; padding: 0.15rem 0.4rem; border-radius: 4px; }
.ap-badge-official { background: var(--ap-info-bg); color: var(--ap-info-text); }
.ap-badge-external { background: var(--ap-external-bg); color: var(--ap-external-text); }
.ap-pro-badge { background: var(--ap-brand-main); color: #fff; font-size: 0.55rem; padding: 0.1rem 0.3rem; border-radius: 3px; margin-left: 0.3rem; vertical-align: top; }

.ap-meta-tags, .ap-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ap-tag-sm, .ap-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ap-text-body);
    background: var(--ap-bg-page);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}
.ap-filter-tag-btn {
    background: var(--ap-bg-page);
    border: 1px solid transparent;
    color: var(--ap-text-body);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: var(--ap-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.ap-filter-tag-btn:hover { background: var(--ap-border); }
.ap-filter-tag-btn.active { background: var(--ap-info-bg); color: var(--ap-info-text); }


/* --- 8. DASHBOARD SIDEBAR (User & Filters) --- */
.ap-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ap-border);
    text-decoration: none;
}
.ap-user-profile__avatar {
    width: 2.5rem; height: 2.5rem;
    background: var(--ap-danger-bg); 
    color: var(--ap-danger-text);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem;
}
.ap-user-profile__name { font-size: 1rem; font-weight: 700; margin-bottom: 0.15rem; color: var(--ap-text-title); }
.ap-user-profile__plan { font-size: 0.65rem; font-weight: 800; background: var(--ap-border); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--ap-text-body); }

.ap-sidebar-usage__header { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 600; color: var(--ap-text-muted); margin-bottom: 0.5rem; }
.ap-sidebar-usage__bar { height: 6px; background: var(--ap-border); border-radius: 3px; overflow: hidden; }
.ap-sidebar-usage__fill { height: 100%; background: var(--ap-brand-main); border-radius: 3px; }
.ap-sidebar-usage__fill.ap-bg-danger { background: var(--ap-danger-text); }

/* Sidebar Nav & Filters */
.ap-sidebar-section { margin-bottom: 1.5rem; }
.ap-input-icon-wrap { position: relative; }
.ap-input-icon-wrap i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ap-text-muted); font-size: 1.1rem; }
.ap-input-icon-wrap input { width: 100%; background: var(--ap-surface); border: 1px solid var(--ap-border); padding: 0.6rem 1rem 0.6rem 2.5rem; border-radius: var(--ap-radius-sm); font-size: 0.85rem; outline: none; transition: border 0.2s; }
.ap-input-icon-wrap input:focus { border-color: var(--ap-border-hover); box-shadow: var(--ap-shadow-sm); }

.ap-sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.ap-filter-status-btn { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: var(--ap-radius-sm); background: transparent; border: none; font-size: 0.85rem; font-weight: 600; color: var(--ap-text-body); transition: background 0.2s; text-align: left; }
.ap-filter-status-btn span { display: flex; align-items: center; gap: 0.5rem; }
.ap-filter-status-btn i { font-size: 1.1rem; color: var(--ap-text-muted); }
.ap-filter-status-btn:hover { background: var(--ap-surface); color: var(--ap-text-title); }
.ap-filter-status-btn.active { background: var(--ap-surface); color: var(--ap-brand-main); box-shadow: var(--ap-shadow-sm); }
.ap-filter-status-btn.active i { color: var(--ap-brand-main); }
.ap-filter-count { background: var(--ap-border); font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 10px; color: var(--ap-text-body); }
.ap-filter-status-btn.active .ap-filter-count { background: var(--ap-brand-light); }

.ap-sidebar-filters__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.ap-sidebar-filters__header span { font-size: 0.75rem; font-weight: 700; color: var(--ap-text-muted); letter-spacing: 0.05em; }
.ap-btn-clear { background: none; border: none; color: var(--ap-text-title); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.ap-btn-clear:hover { text-decoration: underline; }
.ap-sidebar-filters__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }


/* --- 9. STACK LIST CARDS (Dashboard) --- */
.ap-stacks-list, .ap-items-list { 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; /* Distancia compacta entre tarjetas */
    margin-top: 0; /* Sin margen extra superior */
}

.ap-stack-item {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column; overflow: hidden;
}
.ap-stack-item:hover { border-color: var(--ap-border-hover); box-shadow: var(--ap-shadow-md); }
.ap-stack-item--vulnerable { border-color: #fca5a5; }

/* The main top part */
.ap-stack-item__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
@media (min-width: 768px) { .ap-stack-item__body { flex-direction: row; align-items: flex-start; gap: 1.5rem; } }

.ap-stack-item__status {
    width: 3rem; height: 3rem;
    border-radius: var(--ap-radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}
.ap-status-public { background: var(--ap-success-bg); color: var(--ap-success-text); }
.ap-status-private { background: var(--ap-border); color: var(--ap-text-muted); }
.ap-status-vuln { background: var(--ap-danger-bg); color: var(--ap-danger-text); }

.ap-stack-item__data { flex: 1; min-width: 0; }
.ap-stack-item__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.ap-stack-item__title { font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-stack-item__title a { color: inherit; text-decoration: none; }
.ap-stack-item__title a:hover { text-decoration: underline; color: var(--ap-brand-main); }

.ap-stack-item__desc { 
    font-size: 0.85rem; 
    color: var(--ap-text-body); 
    margin: 0.25rem 0 0.75rem 0; 
    line-height: 1.5; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

.ap-stack-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.75rem; color: var(--ap-text-muted); font-weight: 600; margin-top: 0.5rem; }
.ap-meta-stat { display: flex; align-items: center; gap: 0.25rem; }
.ap-stack-item__alert { margin-top: 0.75rem; font-size: 0.8rem; color: var(--ap-danger-text); font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }

/* The Footer Actions */
.ap-stack-item__footer {
    border-top: 1px solid var(--ap-border);
    padding: 0.75rem 1.25rem;
    background: var(--ap-bg-page);
    display: flex; justify-content: flex-end;
}
.ap-stack-item__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }


/* --- 10. BUILDER & SINGLE STACK LISTS (The Complex Rows) --- */

/* ==========================================================
   10.A SINGLE STACK VIEW (.ap-list-card)
   ========================================================== */
.ap-list-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    box-shadow: var(--ap-shadow-sm);
    margin-bottom: 0.75rem; /* Menos espacio entre tarjetas */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ap-card-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem; /* Menos relleno interno */
}
@media (min-width: 640px) {
    .ap-card-top { flex-direction: row; align-items: flex-start; }
}

.ap-card-icon {
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--ap-radius-md);
    background: var(--ap-bg-page);
    border: 1px solid var(--ap-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; 
    overflow: hidden;
}
.ap-card-icon--theme { width: 5rem; height: 3.5rem; }
.ap-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.ap-card-icon i { font-size: 1.5rem; color: var(--ap-text-muted); }

.ap-card-info { flex: 1; min-width: 0; }
.ap-card-title-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.ap-card-title-row h3 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--ap-text-title); }

.ap-card-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--ap-text-muted); font-weight: 500; align-items: center; }
.ap-card-meta span { display: flex; align-items: center; gap: 0.35rem; }

/* El nuevo diseño discreto para las notas */
.ap-card-notes-compact {
    padding: 0.75rem 1.25rem;
    background: var(--ap-bg-page);
    border-top: 1px solid var(--ap-border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ap-note-line {
    font-size: 0.85rem;
    color: var(--ap-text-body);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;
}
.ap-note-line i {
    color: var(--ap-text-muted);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}
.ap-note-line strong {
    color: var(--ap-text-title);
    font-weight: 600;
}
.ap-link-download {
    color: var(--ap-info-text);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.ap-link-download:hover { text-decoration: underline; }

/* ==========================================================
   10.B BUILDER VIEW (.ap-item-row)
   ========================================================== */
.ap-item-row { 
    background: var(--ap-surface); 
    border: 1px solid var(--ap-border); 
    border-radius: var(--ap-radius-lg); 
    padding: 1.25rem;
    box-shadow: var(--ap-shadow-sm);
    display: flex; flex-direction: column; gap: 1rem; 
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .ap-item-row { flex-direction: row; align-items: flex-start; }
}

.ap-item-icon {
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-bg-page);
    border: 1px solid var(--ap-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.ap-item-icon--theme { width: 5rem; height: 3.5rem; }
.ap-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.ap-item-icon i { font-size: 1.5rem; color: var(--ap-text-muted); }

.ap-item-content { flex: 1; min-width: 0; }
.ap-item-title-area { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.ap-item-title-area strong { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--ap-text-title); }

.ap-item-inputs-area { display: grid; gap: 0.75rem; margin-top: 0.75rem; border-top: 1px solid var(--ap-border); padding-top: 0.75rem; }
@media (min-width: 768px) { .ap-item-inputs-area { grid-template-columns: 1fr 1fr; border-top: none; padding-top: 0; } }

.ap-inline-input-group { position: relative; }
.ap-inline-input-group i { position: absolute; left: 0; top: 0.6rem; color: var(--ap-text-muted); font-size: 1rem; }
.ap-inline-input-group input, .ap-inline-input-group textarea { 
    width: 100%; border: none; background: transparent; 
    padding: 0.5rem 0.5rem 0.5rem 1.5rem; 
    font-size: 0.85rem; outline: none; color: var(--ap-text-body);
}
.ap-inline-input-group input:focus, .ap-inline-input-group textarea:focus { color: var(--ap-text-title); }

.ap-item-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end; }
@media (min-width: 768px) { .ap-item-actions { margin-top: 0; flex-direction: row; } }

.ap-btn-config {
    background: var(--ap-bg-page); border: 1px solid var(--ap-border); padding: 0.4rem 0.75rem; border-radius: var(--ap-radius-sm); font-size: 0.8rem; font-weight: 600; color: var(--ap-text-title); display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; cursor: pointer;
}
.ap-btn-config.active { background: var(--ap-success-bg); color: var(--ap-success-text); border-color: #bbf7d0; box-shadow: var(--ap-shadow-sm); }
.ap-btn-config.disabled { opacity: 0.5; cursor: not-allowed; }
.ap-vault-action { display: flex; align-items: center; gap: 0.5rem; }
.ap-btn-remove-vault { background: transparent; color: var(--ap-text-muted); border: 1px solid transparent; border-radius: 4px; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;}
.ap-btn-remove-vault:hover { background: var(--ap-danger-bg); color: var(--ap-danger-text); border-color: #fca5a5; }
.ap-btn-delete { background: transparent; color: var(--ap-text-muted); border: 1px solid transparent; border-radius: 4px; padding: 0.4rem 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.ap-btn-delete:hover { background: var(--ap-danger-bg); color: var(--ap-danger-text); border-color: #fca5a5;}

/* --- 11. SIDEBAR PANELS (Builder & Single Stack) --- */
.ap-sidebar-panel {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--ap-shadow-md);
}
.ap-sidebar-label { font-size: 0.7rem; font-weight: 800; color: var(--ap-text-muted); letter-spacing: 0.05em; display: block; margin-bottom: 0.5rem; text-transform: uppercase; }
.ap-sidebar-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; word-break: break-word; }
.ap-sidebar-curator { font-size: 0.85rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.4rem; }
.ap-sidebar-curator a { color: var(--ap-text-title); text-decoration: none; }
.ap-sidebar-curator a:hover { text-decoration: underline; }
.ap-sidebar-visibility { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ap-border); }
.ap-sidebar-section { margin-bottom: 1.5rem; }
.ap-sidebar-section:last-child { margin-bottom: 0; }
.ap-notes-text { font-size: 0.85rem; color: var(--ap-text-body); line-height: 1.5; font-style: italic; }

/* --- TEST INSTANTLY PANEL (SIDEBAR) --- */
.ap-test-panel { 
    background: var(--ap-bg-page); 
    border: 1px solid var(--ap-border); 
    border-radius: var(--ap-radius-lg); 
    padding: 1.5rem; 
    margin-top: 1.5rem;
}
.ap-test-header { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    font-size: 1rem; 
    color: var(--ap-text-title); 
    margin-bottom: 0.5rem; 
}
.ap-test-panel p { 
    font-size: 0.85rem; 
    color: var(--ap-text-muted); 
    margin: 0 0 1.25rem 0; 
    line-height: 1.4; 
}
.ap-test-actions { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
}
.ap-btn-test { 
    display: block;
    width: 100%;
    background: var(--ap-surface) !important; 
    border: 1px solid var(--ap-border) !important; 
    text-align: center; 
    padding: 0.75rem 1rem; 
    border-radius: var(--ap-radius-sm); 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: var(--ap-text-title) !important; 
    text-decoration: none !important; /* Quitamos el subrayado feo */
    transition: all 0.2s; 
    box-shadow: var(--ap-shadow-sm);
}
.ap-btn-test:hover { 
    background: var(--ap-bg-page) !important; 
    border-color: var(--ap-border-hover) !important; 
}

/* --- 12. SEARCH DROPDOWNS (Builder) --- */
.ap-search-area { position: relative; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .ap-search-area { flex-direction: row; align-items: center; } }
.ap-search-input-wrap { position: relative; flex: 1; }
.ap-search-input-wrap i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ap-text-muted); font-size: 1.1rem;}
.ap-search-input-wrap input { width: 100%; border: 1px solid var(--ap-border); background: var(--ap-surface); padding: 0.75rem 1rem 0.75rem 2.75rem; border-radius: var(--ap-radius-sm); font-size: 0.95rem; outline: none; }
.ap-search-input-wrap input:focus { border-color: var(--ap-border-hover); box-shadow: var(--ap-shadow-sm); }
.ap-search-results-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--ap-surface); border: 1px solid var(--ap-border); border-radius: var(--ap-radius-sm); box-shadow: var(--ap-shadow-md); z-index: 50; max-height: 300px; overflow-y: auto; margin-top: 0.5rem; }
.ap-search-result-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--ap-border); cursor: pointer; }
.ap-search-result-item:last-child { border-bottom: none; }
.ap-search-result-item:hover { background: var(--ap-bg-page); }
.ap-search-result-item img { width: 2rem; height: 2rem; border-radius: 4px; object-fit: cover; }
.ap-search-msg { padding: 1rem; font-size: 0.85rem; color: var(--ap-text-muted); text-align: center; }

/* --- 13. SNIPPETS STYLES --- */
.ap-snippet-row { background: var(--ap-surface); border: 1px solid var(--ap-border); border-radius: var(--ap-radius-lg); overflow: hidden; margin-bottom: 1rem;}
.ap-snippet-header { display: flex; align-items: center; padding: 1rem; background: var(--ap-bg-page); border-bottom: 1px solid var(--ap-border); gap: 1rem; }
.ap-snippet-title-input { flex: 1; border: none; background: transparent; font-weight: 700; font-size: 1rem; outline: none; color: var(--ap-text-title); }
.ap-snippet-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ap-snippet-desc-input { border: 1px solid var(--ap-border); padding: 0.5rem 0.75rem; border-radius: var(--ap-radius-sm); font-size: 0.85rem; width: 100%; outline: none; }
.ap-snippet-code-input { background: var(--ap-brand-main); color: #34d399; font-family: monospace; font-size: 0.85rem; padding: 1rem; border-radius: var(--ap-radius-sm); border: none; width: 100%; outline: none; resize: vertical; }


/* --- 14. SETTINGS PAGE STYLES --- */
.ap-settings-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.ap-settings-nav__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--ap-radius-sm); background: transparent; border: none; color: var(--ap-text-body); font-weight: 600; text-align: left; transition: background 0.2s; }
.ap-settings-nav__link:hover { background: var(--ap-bg-page); color: var(--ap-text-title); }
.ap-settings-nav__link.active { background: var(--ap-bg-page); color: var(--ap-text-title); font-weight: 700; }

.ap-settings-panel__header { margin-bottom: 2rem; border-bottom: 1px solid var(--ap-border); padding-bottom: 1rem; }
.ap-settings-panel__title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.25rem; }

.ap-settings-card { background: var(--ap-surface); border: 1px solid var(--ap-border); border-radius: var(--ap-radius-lg); margin-bottom: 1.5rem; overflow: hidden; }
.ap-settings-card__header { background: var(--ap-bg-page); padding: 1rem 1.5rem; border-bottom: 1px solid var(--ap-border); display: flex; justify-content: space-between; align-items: center; }
.ap-settings-card__body { padding: 1.5rem; }
.ap-table { width: 100%; border-collapse: collapse; text-align: left; }
.ap-table th { background: var(--ap-bg-page); padding: 0.75rem 1.5rem; font-size: 0.75rem; font-weight: 700; color: var(--ap-text-muted); text-transform: uppercase; border-bottom: 1px solid var(--ap-border); }
.ap-table td { padding: 1rem 1.5rem; font-size: 0.85rem; border-bottom: 1px solid var(--ap-border); }

/* --- 15. UTILITIES & HELPERS --- */
.ap-empty-dashboard, .ap-empty-state { text-align: center; padding: 4rem 1rem; background: var(--ap-surface); border: 1px dashed var(--ap-border-hover); border-radius: var(--ap-radius-lg); }
.ap-empty-dashboard__icon { width: 3rem; height: 3rem; background: var(--ap-bg-page); color: var(--ap-text-muted); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--ap-radius-sm); margin: 0 auto 1rem; }
.ap-status-msg { font-size: 0.85rem; font-weight: 600; }
.ap-status-msg.success { color: var(--ap-success-text); }
.ap-status-msg.error { color: var(--ap-danger-text); }