/* Project Sticky Notes - frontend styles */
.psn-root {
    border: 1px solid #e5e7eb;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
}

.psn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.psn-button {
    background: #111827;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 6px;
}

.psn-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    padding-top: 20px;
}

/* Estilo de la Nota */
.psn-note {
    min-width: 230px;
    max-width: 260px;
    flex: 0 0 auto;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    scroll-snap-align: start;
    position: relative;
    background: #fff;
}

.psn-note-inner {
    min-height: 180px;
    outline: none;
    white-space: pre-wrap;
    padding-bottom: 140px;
}

.psn-note-actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    top: auto;
    display: flex;
    gap: 6px;
}

/* Botones de acción */
.psn-note-actions .psn-save,
.psn-note-actions .psn-image {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.psn-note-actions .psn-delete {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    width: 32px !important;
    position: relative !important;
}

.psn-note-actions .psn-delete::after {
    content: "🗑️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    text-indent: 0;
}


/* --- DROPDOWN AHORA MODO POPUP GLOBAL --- */

.psn-images-dropdown {
    /* POSICIONAMIENTO CENTRAL FIJO (PC Y MOVIL) */
    position: fixed; /* Antes era absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Esto centra exacto */
    z-index: 999999;
    
    /* DIMENSIONES */
    width: 90vw; /* 90% del ancho de pantalla */
    max-width: 450px; /* Pero no más grande que 450px en PC */

    /* ALTO DINÁMICO Y SCROLLEABLE */
    max-height: 80vh; /* Altura máxima del 80% de la ventana */
    overflow-y: auto; 
    overflow-x: hidden;

    /* PADDING */
    padding: 20px; 

    /* ESTETICA */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    
    /* EFECTO SOMBRA Y FONDO OSCURO */
    /* La segunda sombra (0 0 0 9999px) crea el fondo negro transparente */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 0 0 9999px rgba(0,0,0,0.5);
    
    /* Por defecto oculto */
    display: none;
    flex-direction: column; 
}

/* Lista de imagenes */
.psn-images-dropdown .psn-image-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0; 
    border-bottom: 1px solid #eee;
    gap: 10px;
    flex-shrink: 0; 
    box-sizing: border-box;
}

.psn-images-dropdown .psn-image-row:last-of-type {
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 10px;
}

/* Nombre del archivo */
.psn-images-dropdown .psn-image-open {
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    flex-shrink: 1; 
    margin-right: 10px;
}

/* Botón Descargar */
.psn-images-dropdown .psn-image-download {
    background: #000;
    border: none;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 5px;
    flex-shrink: 0;
}

/* Botón Eliminar (Icono) */
.psn-images-dropdown .psn-image-delete {
    background: #000;
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    text-indent: -9999px;
    flex-shrink: 0;
}

.psn-images-dropdown .psn-image-delete::after {
    content: "🗑️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    text-indent: 0;
}

/* Sección de Subida (Inputs) */
.psn-images-dropdown input[type="file"] {
    width: 100%;
    margin-top: 5px;
    padding: 5px 0;
    flex-shrink: 0;
}

.psn-images-dropdown input[type="file"]::file-selector-button {
    background: #f3f4f6;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
    font-weight: 500;
}

.psn-images-dropdown .psn-upload-confirm {
    background: #000;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    font-weight: bold;
    flex-shrink: 0;
}

.psn-images-dropdown .psn-upload-cancel {
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Spinner */
.psn-upload-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #000;
    border-radius: 50%;
    animation: psn-spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes psn-spin { to { transform: rotate(360deg); } }

.psn-images-dropdown .psn-upload-confirm[disabled] { opacity: 0.5; }

/* Ocultar miniaturas viejas */
.psn-note-images { display: none; }

/* Modales */
.psn-modal {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.psn-modal-inner { background: #fff; padding: 16px; border-radius: 8px; min-width: 260px; }
.psn-modal-inner label { display: block; margin: 8px 0; }
.psn-color-popup { padding: 8px; border-radius: 6px; background: #fff; border: 1px solid #ddd; z-index: 9999; }

/* Responsive */
@media (max-width: 600px) {
    .psn-note { min-width: 160px; max-width: 200px; }
    /* Ya no necesitamos código especial para el dropdown aquí porque la clase principal ya es un popup centrado */
}