/* --- Variables y Estilos Globales --- */
:root {
    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --glow-pending: 0 0 15px rgba(255, 165, 0, 0.6);
    --color-pending: #FFA500;
    --glow-approved: 0 0 15px rgba(0, 255, 127, 0.6);
    --color-approved: #00FF7F;
    --glow-changes: 0 0 15px rgba(255, 69, 58, 0.7);
    --color-changes: #FF453A;
    --font-main: 'Inter', sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
}

body { 
    background-color: var(--color-background); 
    color: var(--color-text-primary); 
    font-family: var(--font-main); 
    padding: 2rem; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    box-sizing: border-box;
}

#app { 
    width: 100%; 
    max-width: 1200px; 
    overflow-y: auto; 
    height: 100%;
    padding-bottom: 2rem;
}

header { text-align: center; }
.logo-container { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.logo-container img { max-height: 200px; width: auto; }
.title-container { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 1rem; }
#main-title { font-size: 2.5rem; margin: 0; }
.nav-arrow { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--color-text-primary); width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: all 0.3s ease; }
.nav-arrow:hover { background-color: rgba(255, 255, 255, 0.1); border-color: var(--color-text-primary); }

#legend { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; }
.legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.color-dot { width: 15px; height: 15px; border-radius: 50%; }
.status-pending { background-color: var(--color-pending); box-shadow: var(--glow-pending); }
.status-approved { background-color: var(--color-approved); box-shadow: var(--glow-approved); }
.status-changes-requested { background-color: var(--color-changes); box-shadow: var(--glow-changes); }

#calendar-container { background-color: var(--color-surface); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1rem; }
#calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.day-header { text-align: center; padding-bottom: 0.5rem; color: var(--color-text-secondary); font-weight: bold; }
.calendar-day { position: relative; aspect-ratio: 1 / 1; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 8px; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.day-number { position: absolute; top: 6px; right: 8px; font-size: 0.8rem; color: var(--color-text-secondary); }
.calendar-day.pending, .calendar-day.changes-requested { cursor: pointer; }
.calendar-day.pending { box-shadow: var(--glow-pending); border: 1px solid var(--color-pending); }
.calendar-day.approved { box-shadow: var(--glow-approved); border: 1px solid var(--color-approved); }
.calendar-day.changes-requested { box-shadow: var(--glow-changes); border: 1px solid var(--color-changes); }
.calendar-day:not(.other-month):hover { transform: scale(1.05); background-color: rgba(255, 255, 255, 0.1); }

.calendar-day.today {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.calendar-day.today .day-number {
    color: var(--color-text-primary);
    font-weight: bold;
}

.social-icons { flex-grow: 1; display: flex; justify-content: center; align-items: center; width: 100%; }
.social-icons img { width: 100%; max-width: 30px; height: auto; }

.multi-post-indicator {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    background-color: var(--color-text-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(230, 230, 230, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#title-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

#loader {
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-left-color: var(--color-text-primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- ESTILOS DEL MODAL --- */

#modal-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out;
}
#modal-container:not(.hidden) { opacity: 1; pointer-events: auto; }

#modal-content {
    background-color: var(--color-surface);
    width: 80%; max-width: 900px; max-height: 80vh;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 45px rgba(0, 191, 255, 0.3);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}
#modal-container:not(.hidden) #modal-content { transform: scale(1); }

#modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

#modal-counter {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

#modal-close-btn {
    font-size: 2.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}
#modal-close-btn:hover { color: var(--color-text-primary); }

#modal-main-content {
    display: flex;
    flex: 1;
    gap: 2rem;
    overflow: hidden;
    position: relative;
}

#modal-image-container {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-media-container {
    width: 100%;
    height: 100%;
}

#modal-media-container img,
#modal-media-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.modal-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-nav-arrow:hover { background-color: rgba(0, 0, 0, 0.7); border-color: white; }

#modal-prev-btn { left: -60px; }
#modal-next-btn { right: -60px; }

#modal-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: visible;
}

#modal-title-network {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.75rem;
}

#modal-copy { flex-grow: 1; white-space: pre-wrap; }
#modal-actions { margin-top: 1rem; display: flex; gap: 1rem; }
.modal-btn { padding: 10px 20px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: transparent; color: var(--color-text-primary); font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.modal-btn:hover, .modal-btn:focus-visible { background-color: rgba(255, 255, 255, 0.05); outline: none; }
#approve-btn:hover, #approve-btn:focus-visible { color: var(--color-approved); border-color: var(--color-approved); box-shadow: var(--glow-approved); }
#request-changes-btn:hover, #request-changes-btn:focus-visible, #submit-changes-btn:hover, #submit-changes-btn:focus-visible { color: var(--color-pending); border-color: var(--color-pending); box-shadow: var(--glow-pending); }

#changes-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
#changes-textarea { width: 90%; min-height: 100px; background-color: var(--color-background); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 10px; color: var(--color-text-primary); font-family: var(--font-main); font-size: 0.9rem; resize: vertical; }
#changes-textarea:focus { outline: none; border-color: var(--color-pending); box-shadow: var(--glow-pending); }
#submit-changes-btn { align-self: flex-end; }

#confirmation-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 18, 18, 0.9); display: flex; justify-content: center; align-items: center; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity 0.4s ease-in-out; }
#confirmation-overlay.show { opacity: 1; }
#confirmation-message { background-color: var(--color-surface); color: var(--color-text-primary); padding: 2rem 3rem; border-radius: 12px; font-size: 1.2rem; font-weight: 600; text-align: center; border: 1px solid var(--color-approved); box-shadow: var(--glow-approved); }
.hidden { display: none !important; }


/* --- Media Queries --- */

/* Para pantallas medianas y móviles, movemos las flechas DENTRO */
@media screen and (max-width: 1100px) {
    #modal-prev-btn { left: 10px; }
    #modal-next-btn { right: 10px; }
}

/* Para pantallas pequeñas (móviles), cambiamos el layout a vertical */
@media screen and (max-width: 768px) {
    body { padding: 1rem; }
    .logo-container img { max-height: 80px; }
    .title-container { gap: 1rem; }
    #main-title { font-size: 1.1rem; }
    .nav-arrow { width: 35px; height: 35px; font-size: 1.2rem; }
    #legend { flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; }
    
    /* --- ¡REGLAS FINALES PARA EL MODAL MÓVIL! --- */
	
	.calendar-day { position: relative; aspect-ratio: 1 / 1; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 8px; transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
    
    #modal-content { 
        width: 80vw; 
        overflow-y: auto;
        flex-shrink: 0;
		display: block;
	}
    
    #modal-main-content { 
        /* Lo convertimos en un bloque simple para que se apile naturalmente */
        display: block;
    }
    
    #modal-image-container {
        /* La imagen simplemente ocupa su espacio */
        width: 80%;
        margin-top: 1.5rem;
		margin-bottom: 1.5em;
    }
    
    #modal-media-container img,
    #modal-media-container video {
        /* La imagen/video se ajusta para mantener su proporción */
        width: 100%;
        height: auto;
    }
    
    #modal-details { 
        /* Los detalles simplemente ocupan su espacio */
        width: 100%;
    }
	div#modal-actions {
		margin-bottom: 40px !important;
		display: flex !important;
		visibility: visible !important;

        width: 90vw; 
        overflow-y: auto;
        flex-shrink: 0;
		display: block;

	}
	.modal-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
    .social-icons img { 
        max-width: 40px; 
        padding-top: 10px; 
    }
    
    .day-header .day-long-name { 
        display: none; 
    }
	 .social-icons img { max-width: 10px; padding-top: 10px; }
	
}