/* css/editor-dark.css
   Rediseño del editor/planner principal
   Tema oscuro azul-negro Himagen con acentos de color vibrantes */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ===========================
   VARIABLES
   =========================== */
:root {
    --ed-bg: #1E2530;
    --ed-surface: #252d3a;
    --ed-surface-2: #2c3544;
    --ed-surface-3: #344050;
    --ed-input-bg: #1c2636;
    --ed-border: rgba(255,255,255,0.08);
    --ed-border-hover: rgba(255,255,255,0.15);
    --ed-text: #f0f2f5;
    --ed-text-2: rgba(255,255,255,0.7);
    --ed-text-muted: rgba(255,255,255,0.4);
    --ed-pink: #C9376F;
    --ed-pink-glow: rgba(201, 55, 111, 0.2);
    --ed-accent: #CDD74A;
    --ed-accent-glow: rgba(205, 215, 74, 0.15);
    --ed-blue: #5b8def;
    --ed-blue-glow: rgba(91, 141, 239, 0.15);
    --ed-orange: #f0983e;
    --ed-orange-glow: rgba(240, 152, 62, 0.15);
    --ed-red: #e74c3c;
    --ed-green: #2ecc71;
}

/* ===========================
   BODY OVERRIDE CUANDO PLANNER VISIBLE
   =========================== */
body {
    font-family: 'DM Sans', 'Quicksand', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ===========================
   PLANNER CONTAINER
   =========================== */
#planner-container {
    background: var(--ed-surface) !important;
    color: var(--ed-text) !important;
    border: 1px solid var(--ed-border);
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25) !important;
    padding: 32px 36px !important;
}

/* ===========================
   HEADER
   =========================== */
header h1 {
    color: var(--ed-text) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
}

.header-links {
    margin-bottom: 16px;
}

.papelera-link {
    color: var(--ed-text-2) !important;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--ed-surface-2);
    border: 1px solid var(--ed-border);
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-block;
}

.papelera-link:hover {
    background: var(--ed-surface-3);
    border-color: var(--ed-border-hover);
    color: var(--ed-text) !important;
    text-decoration: none !important;
}

.logout-button {
    background: var(--ed-surface-2) !important;
    color: var(--ed-red) !important;
    border: 1px solid rgba(231, 76, 60, 0.2) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    transition: all 0.2s ease;
}

.logout-button:hover {
    background: rgba(231, 76, 60, 0.12) !important;
    border-color: rgba(231, 76, 60, 0.35) !important;
}

/* Admin equipo button */
#btn-admin-equipos {
    background: var(--ed-blue-glow) !important;
    color: var(--ed-blue) !important;
    border: 1px solid rgba(91, 141, 239, 0.2) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
}

#btn-admin-equipos:hover {
    background: rgba(91, 141, 239, 0.2) !important;
}

/* ===========================
   PROJECT CONTROLS
   =========================== */
.project-controls {
    border-top: 1px solid var(--ed-border) !important;
    border-bottom: 1px solid var(--ed-border) !important;
    padding: 20px 0 !important;
    gap: 10px !important;
}

.project-controls input[type="text"] {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text) !important;
    border: 1.5px solid var(--ed-border) !important;
    border-radius: 10px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
}

.project-controls input[type="text"]:focus {
    border-color: var(--ed-pink) !important;
    box-shadow: 0 0 0 3px var(--ed-pink-glow) !important;
    outline: none;
}

.project-controls input[type="text"]::placeholder {
    color: var(--ed-text-muted);
}

/* Select de proyectos */
.project-controls select {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text) !important;
    border: 1.5px solid var(--ed-border) !important;
    border-radius: 10px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}

.project-controls select option {
    background: var(--ed-surface-2);
    color: var(--ed-text);
}

/* ===========================
   BOTONES - JERARQUÍA DE COLOR
   =========================== */
.project-controls button {
    border-radius: 10px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

/* Primarios: Guardar + Cargar → Rosa fuerte */
#update-button,
#load-button {
    background: var(--ed-pink) !important;
    color: #fff !important;
}

#update-button:hover,
#load-button:hover {
    background: #e04a80 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px var(--ed-pink-glow) !important;
}

/* Crear/Nuevo → Verde-amarillo (accent) */
#save-as-button,
#new-project-button {
    background: var(--ed-accent-glow) !important;
    color: var(--ed-accent) !important;
    border: 1px solid rgba(205, 215, 74, 0.2) !important;
}

#save-as-button:hover,
#new-project-button:hover {
    background: rgba(205, 215, 74, 0.22) !important;
    transform: translateY(-1px) !important;
}

/* Exportar → Azul */
#export-button,
#export-pdf-button {
    background: var(--ed-blue-glow) !important;
    color: var(--ed-blue) !important;
    border: 1px solid rgba(91, 141, 239, 0.2) !important;
}

#export-button:hover,
#export-pdf-button:hover {
    background: rgba(91, 141, 239, 0.22) !important;
    transform: translateY(-1px) !important;
}

/* Compartir → Naranja */
#share-button,
#share-feed-button {
    background: var(--ed-orange-glow) !important;
    color: var(--ed-orange) !important;
    border: 1px solid rgba(240, 152, 62, 0.2) !important;
}

#share-button:hover,
#share-feed-button:hover {
    background: rgba(240, 152, 62, 0.22) !important;
    transform: translateY(-1px) !important;
}

/* Descargar → Surface neutral */
#download-button {
    background: var(--ed-surface-2) !important;
    color: var(--ed-text-2) !important;
    border: 1px solid var(--ed-border) !important;
}

#download-button:hover {
    background: var(--ed-surface-3) !important;
    color: var(--ed-text) !important;
}

/* Eliminar → Rojo sutil */
#delete-button {
    background: rgba(231, 76, 60, 0.1) !important;
    color: var(--ed-red) !important;
    border: 1px solid rgba(231, 76, 60, 0.2) !important;
}

#delete-button:hover {
    background: rgba(231, 76, 60, 0.18) !important;
}

/* Disabled */
.project-controls button:disabled {
    background: var(--ed-surface-2) !important;
    color: var(--ed-text-muted) !important;
    border: 1px solid var(--ed-border) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Load section divider */
.load-project-section {
    border-top-color: var(--ed-border) !important;
    padding-top: 14px !important;
}

/* Autosave status */
#autosave-status {
    color: var(--ed-green);
    font-size: 12px;
    font-weight: 500;
}

/* ===========================
   GRID - PARRILLA
   =========================== */
.grid {
    gap: 16px !important;
}

.grid-slot {
    background: var(--ed-surface-2) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grid-slot:hover {
    border-color: var(--ed-border-hover) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Sortable ghost */
.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed var(--ed-pink) !important;
}

/* ===========================
   INPUTS DE CADA SLOT
   =========================== */
.post-title-input {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.post-title-input:focus {
    border-color: var(--ed-pink) !important;
    box-shadow: 0 0 0 2px var(--ed-pink-glow) !important;
    outline: none;
}

.post-title-input::placeholder { color: var(--ed-text-muted); }

.schedule-input {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text-2) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'DM Sans', sans-serif !important;
}

.schedule-input:focus {
    border-color: var(--ed-pink) !important;
    outline: none;
}

.formatted-date {
    color: var(--ed-text-muted) !important;
}

.drive-link-input {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text-2) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'DM Sans', sans-serif !important;
}

.drive-link-input:focus {
    border-color: var(--ed-pink) !important;
    outline: none;
}

.drive-link-input::placeholder { color: var(--ed-text-muted); }

/* Post Type Select */
.post-type-select {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
}

.post-type-select option {
    background: var(--ed-surface-2);
    color: var(--ed-text);
}

/* ===========================
   GRID ITEM (IMAGEN)
   =========================== */
.grid-item {
    border: 2px dashed rgba(255,255,255,0.12) !important;
    border-radius: 10px !important;
    background-color: var(--ed-input-bg) !important;
}

.grid-slot:hover .grid-item {
    border-color: var(--ed-pink) !important;
}

.grid-item.has-image {
    border-style: solid !important;
    border-color: var(--ed-border) !important;
}

/* Upload label */
.upload-label {
    background-color: rgba(30, 37, 48, 0.85) !important;
    color: var(--ed-text-2) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
}

.upload-label i {
    color: var(--ed-pink) !important;
    font-size: 36px !important;
}

.upload-label:hover {
    background-color: rgba(30, 37, 48, 0.95) !important;
    color: var(--ed-text) !important;
}

.upload-text {
    color: var(--ed-text-2);
}

/* Image action buttons */
.image-actions button {
    background-color: rgba(30, 37, 48, 0.85) !important;
    backdrop-filter: blur(4px);
}

.image-actions button:hover {
    background-color: var(--ed-pink) !important;
}

/* ===========================
   COPY SECTION (EDITOR)
   =========================== */
.copy-section {
    background: var(--ed-surface) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 10px !important;
}

.copy-section strong {
    color: var(--ed-text) !important;
    font-family: 'DM Sans', sans-serif !important;
}

.copy-input {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.copy-input:focus {
    border-color: var(--ed-pink) !important;
    box-shadow: 0 0 0 2px var(--ed-pink-glow);
    outline: none;
}

.copy-input::placeholder { color: var(--ed-text-muted); }

.copy-buttons button {
    background: var(--ed-surface-2) !important;
    color: var(--ed-text-2) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
}

.copy-buttons button:hover {
    background: var(--ed-pink) !important;
    color: #fff !important;
    border-color: var(--ed-pink) !important;
}

.clear-copy-button {
    background: rgba(231, 76, 60, 0.1) !important;
    color: var(--ed-red) !important;
    border: 1px solid rgba(231, 76, 60, 0.2) !important;
}

.clear-copy-button:hover {
    background: var(--ed-red) !important;
    color: #fff !important;
}

/* Copy overlay */
.overlay textarea {
    color: #fff !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ===========================
   COMMENTS (EDITOR)
   =========================== */
.comments-section {
    background: var(--ed-surface) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 10px !important;
}

.comments-section strong {
    color: var(--ed-text) !important;
    font-family: 'DM Sans', sans-serif !important;
}

.comments-display-planner .comment {
    border-bottom-color: var(--ed-border) !important;
}

.comment-text {
    color: var(--ed-text-2) !important;
}

.comment.is-resolved .comment-text {
    color: var(--ed-text-muted) !important;
}

.resolve-comment-button { color: var(--ed-text-muted) !important; }
.resolve-comment-button:hover { color: var(--ed-green) !important; }
.comment.is-resolved .resolve-comment-button { color: var(--ed-green) !important; }
.edit-comment-button { color: var(--ed-text-muted) !important; }
.edit-comment-button:hover { color: var(--ed-pink) !important; }
.delete-comment-button { color: var(--ed-text-muted) !important; }
.delete-comment-button:hover { color: var(--ed-red) !important; }

.comment-form textarea {
    background: var(--ed-input-bg) !important;
    color: var(--ed-text) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.comment-form textarea:focus {
    border-color: var(--ed-pink) !important;
    outline: none;
}

.comment-form textarea::placeholder { color: var(--ed-text-muted); }

.comment-form button[type="submit"] {
    background: var(--ed-pink) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}

.comment-form button[type="submit"]:hover {
    background: #e04a80 !important;
    box-shadow: 0 4px 12px var(--ed-pink-glow) !important;
}

/* ===========================
   VIDEO / CAROUSEL SECTIONS
   =========================== */
.video-input-section,
.carousel-input-section {
    background: var(--ed-surface) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-top: 8px;
}

.add-slide-btn {
    background: var(--ed-surface-2) !important;
    color: var(--ed-text-2) !important;
    border: 1px solid var(--ed-border) !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    transition: all 0.2s ease;
}

.add-slide-btn:hover {
    background: var(--ed-surface-3) !important;
    color: var(--ed-text) !important;
    border-color: var(--ed-border-hover) !important;
}

.slide-thumb {
    border-color: var(--ed-border) !important;
    border-radius: 6px !important;
}

.video-preview {
    color: var(--ed-text-2) !important;
}

.video-preview a {
    color: var(--ed-green) !important;
}

/* ===========================
   EXPORT TITLE
   =========================== */
#export-title {
    color: var(--ed-text) !important;
}

/* ===========================
   UPLOAD PROGRESS
   =========================== */
.upload-progress-container {
    background: var(--ed-surface) !important;
    border: 1px solid var(--ed-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.upload-progress-title {
    color: var(--ed-text) !important;
}

.upload-progress-title i {
    color: var(--ed-pink) !important;
}

/* ===========================
   FOOTER
   =========================== */
.client-footer {
    border-top-color: var(--ed-border) !important;
    color: var(--ed-text-muted) !important;
}

.client-footer a {
    color: var(--ed-pink) !important;
}

/* ===========================
   SCROLLBAR
   =========================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ed-bg); }
::-webkit-scrollbar-thumb { background: var(--ed-surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 768px) {
    #planner-container {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    .project-controls button {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    header h1 {
        font-size: 20px !important;
    }
}