/* === Reset Básico y Configuración General === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #121212; color: #e0e0e0; line-height: 1.7; overflow-x: hidden; min-height: 100vh; position: relative; }
body.body-editor-active { /* Estilos cuando editor activo */ }
[hidden] { display: none !important; } /* Regla importante para controlar visibilidad con JS */

/* === Layout Principal === */
.editor-layout { display: flex; flex-grow: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; gap: 30px; position: relative; }

/* === Lienzo de Escritura === */
.writing-canvas { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: 5vh 0; width: 100%; min-width: 0; }

/* === Secciones === */
.writing-section { width: 100%; max-width: 750px; margin: 0 auto 30px auto; display: flex; flex-direction: column; align-items: center; }

/* Animación FadeIn */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#body-writing-section:not([hidden]),
.side-panel:not([hidden]) {
    animation: fadeIn 0.6s ease-out forwards;
}


/* === Sección Inicial SOLO TÍTULO (MEJORADA) === */
.initial-setup { min-height: calc(100vh - 10vh); justify-content: center; text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center; transition: background-color 0.5s ease; }
.initial-setup:focus-within { background-color: rgba(255, 255, 255, 0.015); }
.initial-setup .form-group { width: 100%; margin-bottom: 10px; position: relative; }
.initial-setup .form-group.highlight::after { content: ''; position: absolute; inset: -6px; border: 2px solid #e87a00; border-radius: 8px; animation: pulse-glow 1.5s infinite alternate; pointer-events: none; z-index: -1; opacity: 0.6; }
@keyframes pulse-glow { from { opacity: 0.2; } to { opacity: 0.7; } }
#article-title-input { font-size: 3.5em; font-weight: 700; letter-spacing: -0.5px; color: #e8e8e8; background: transparent; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.15); padding: 15px 0; text-align: center; width: 100%; outline: none; transition: border-color 0.4s ease, text-shadow 0.4s ease; caret-color: #e87a00; }
#article-title-input:focus { border-color: rgba(232, 122, 0, 0.7); text-shadow: 0 0 15px rgba(232, 122, 0, 0.2); }
#article-title-input::placeholder { color: #4d4d4d; font-weight: 500; transition: color 0.3s ease; }
#article-title-input:focus::placeholder { color: #3a3a3a; }
/* Sugerencias de Título */
#title-suggestions { margin-top: 15px; margin-bottom: 20px; min-height: 25px; overflow: hidden; text-align: center; }
#title-suggestions span { display: inline-block; color: #666; font-size: 0.85em; font-style: italic; margin: 0 8px; opacity: 0; animation: suggestions-fade-in 0.8s ease-out forwards; }
#title-suggestions span:nth-child(1) { animation-delay: 0.5s; }
#title-suggestions span:nth-child(2) { animation-delay: 0.8s; }
#title-suggestions span:nth-child(3) { animation-delay: 1.1s; }
@keyframes suggestions-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Prompt Enter */
.title-prompt { color: #888; font-size: 0.95em; font-weight: 500; opacity: 0; transition: opacity 0.6s ease 0.2s; letter-spacing: 0.5px; }
#article-title-input:not(:placeholder-shown) ~ .title-prompt { opacity: 1; }


/* === Sección Escritura === */
#body-writing-section { align-items: stretch; }

/* === Título Display (Editable) === */
#article-title-display { font-size: 2.2em; font-weight: bold; color: #e0e0e0; margin-bottom: 20px; padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; text-align: left; width: 100%; line-height: 1.3; }
#article-title-display:hover { background-color: rgba(255, 255, 255, 0.05); }
#article-title-display.editing { background-color: rgba(0, 0, 0, 0.3); outline: 2px solid #e87a00; cursor: text; }

/* === BARRA DE HERRAMIENTAS FIJA (ESCRITORIO) === */
.fixed-toolbar { /* display: none; Controlado por JS/[hidden] */ position: sticky; top: 10px; z-index: 200; width: 100%; background-color: #1f1f1f; border: 1px solid #333; border-radius: 6px; padding: 8px 10px; box-shadow: 0 3px 8px rgba(0,0,0,0.4); display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; justify-content: flex-start; margin-bottom: 25px; transition: opacity 0.3s ease; }
.fixed-toolbar:not([hidden]) { display: flex; }

/* ... (Estilos internos toolbar .toolbar button, .toolbar .toolbar-separator, etc. sin cambios) ... */
.toolbar button { background: none; border: none; color: #ccc; font-size: 1em; padding: 7px 9px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .toolbar button:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; } .toolbar button.active { background-color: #e87a00; color: #121212; } .toolbar .toolbar-separator { width: 1px; height: 22px; background-color: #444; margin: 0 5px; align-self: center; } .toolbar button[data-value="h3"], .toolbar button[data-value="p"] { font-weight: bold; min-width: 35px; font-size: 0.9em; } .toolbar button:disabled { color: #666; cursor: not-allowed; opacity: 0.5; }


/* === Editor Principal === */
.editor-wrapper { position: relative; width: 100%; }
#article-body-editor { min-height: 50vh; padding: 25px 20px; background-color: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #ccc; font-size: 1.05em; line-height: 1.8; outline: none; transition: border-color 0.3s ease, background-color 0.3s ease; caret-color: #e87a00; word-wrap: break-word; }
#article-body-editor:focus { border-color: #e87a00; background-color: rgba(0, 0, 0, 0.1); }
.editor-placeholder { position: absolute; top: 25px; left: 20px; color: #555; pointer-events: none; font-size: 1.05em; display: none; }
#article-body-editor:not(:empty) + .editor-placeholder { display: none; }
#article-body-editor:empty + .editor-placeholder { display: block; }


/* === Panel Lateral (Escritorio) === */
.side-panel { /* display: none; Controlado por JS/[hidden] */ width: 280px; flex-shrink: 0; padding-top: calc(5vh + 10px); position: sticky; /* Ajustar top según altura real de la toolbar fija + padding */ top: 85px; /* Valor fijo tentativo, ajustar si es necesario */ max-height: calc(100vh - 100px); /* Ajustar para que no se solape con footer */ overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 #2a2a2a; }
.side-panel:not([hidden]) { display: block; animation: fadeIn 0.6s ease-out forwards; }
.side-panel::-webkit-scrollbar { width: 8px; }
.side-panel::-webkit-scrollbar-track { background: #2a2a2a; border-radius: 4px; }
.side-panel::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; border: 2px solid #2a2a2a; }
.side-panel.highlight-initial { animation: panel-pulse 1.8s 1 ease-in-out, fadeIn 0.6s ease-out forwards; }
@keyframes panel-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 122, 0, 0); } 50% { box-shadow: 0 0 15px 3px rgba(232, 122, 0, 0.3); } }
.side-panel-content { display: flex; flex-direction: column; gap: 25px; }
.side-panel-section { background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 15px 20px; }
.side-panel-section h3 { color: #b0a89a; font-size: 0.85em; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.7px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.side-panel-section h3 i { color: #888; font-size: 0.9em; }
/* Sección Póster Panel */
.poster-upload-area .poster-drop-area.side-style { border: 2px dashed rgba(255, 255, 255, 0.2); aspect-ratio: 16 / 9; padding: 15px; background-color: rgba(0,0,0,0.2); position: relative; border-radius: 6px; cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.poster-upload-area .poster-drop-area.side-style:hover, .poster-upload-area .poster-drop-area.side-style.dragover { border-color: #e87a00; background-color: rgba(232, 122, 0, 0.1); }
#side-poster-instructions { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #888; text-align: center; position: absolute; inset: 0; z-index: 0; transition: opacity 0.3s ease; }
.poster-placeholder-icons { font-size: 1.8em; color: #555; margin-bottom: 8px; display: flex; gap: 10px; }
#side-poster-instructions p { font-size: 0.9em; color: #aaa; margin-bottom: 3px; }
#side-poster-instructions small { font-size: 0.75em; color: #777; }
.poster-preview.side-style { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; border-radius: 4px; opacity: 0; transition: opacity 0.3s ease; }
.poster-upload-area .poster-drop-area.has-preview #side-poster-instructions { opacity: 0; pointer-events: none; }
.poster-upload-area .poster-drop-area.has-preview .poster-preview.side-style { opacity: 1; }
/* Contador Palabras Panel */
.word-counter .word-count-display { font-size: 1.1em; font-weight: 500; color: #e0e0e0; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; min-height: 25px; }
#word-count-number span#word-count { font-weight: bold; color: #e87a00; font-size: 1.2em; }
#goal-icon { color: #4CAF50; font-size: 1.5em; animation: goal-pulse 1.5s infinite ease-in-out; display: inline-block; }
.word-counter.goal-reached #word-count-number { display: none; }
.word-counter.goal-reached .goal-note { color: #4CAF50; font-weight: bold; }
.word-counter progress { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: none; border-radius: 4px; overflow: hidden; background-color: rgba(255, 255, 255, 0.1); margin-bottom: 8px; }
.word-counter progress::-webkit-progress-bar { background-color: rgba(255, 255, 255, 0.1); }
.word-counter progress::-webkit-progress-value { background-color: #e87a00; border-radius: 4px; transition: width 0.3s ease, background-color 0.3s ease; }
.word-counter progress::-moz-progress-bar { background-color: #e87a00; border-radius: 4px; transition: width 0.3s ease, background-color 0.3s ease; }
.word-counter progress.goal-reached::-webkit-progress-value { background-color: #4CAF50; }
.word-counter progress.goal-reached::-moz-progress-bar { background-color: #4CAF50; }
.word-counter .goal-note { font-size: 0.8em; color: #888; text-align: right; }
/* Checklist Panel */
.professionalism-checker ul { list-style: none; padding: 0; margin: 0; font-size: 0.9em; color: #ccc; }
.professionalism-checker li { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; transition: color 0.3s ease; }
.professionalism-checker li .status-icon { font-size: 0.9em; color: #666; transition: color 0.3s ease, transform 0.2s ease, content 0s; width: 18px; text-align: center; font-family: "Font Awesome 6 Free"; font-weight: 400; }
.professionalism-checker li.completed { color: #8a8a8a; text-decoration: line-through; }
.professionalism-checker li.completed .status-icon { color: #4CAF50; font-weight: 900; font-size: 1em; transform: scale(1.1); }
.professionalism-checker li:not(.completed) .status-icon::before { content: "\f111"; }
.professionalism-checker li.completed .status-icon::before { content: "\f058"; }
.professionalism-checker li small { color: #888; font-style: italic; margin-left: auto; }
.pro-progress-container { margin-top: 15px; }
.pro-progress-container label { font-size: 0.8em; color: #888; display: block; margin-bottom: 5px; }
.pro-progress-container progress { width: 100%; height: 6px; appearance: none; -webkit-appearance: none; border: none; border-radius: 3px; overflow: hidden; background-color: rgba(255, 255, 255, 0.1); }
.pro-progress-container progress::-webkit-progress-bar { background-color: rgba(255, 255, 255, 0.1); }
.pro-progress-container progress::-webkit-progress-value { background: linear-gradient(90deg, #e87a00, #ffc107); border-radius: 3px; transition: width 0.5s ease; }
.pro-progress-container progress::-moz-progress-bar { background: linear-gradient(90deg, #e87a00, #ffc107); border-radius: 3px; transition: width 0.5s ease; }
/* Notas Panel */
.research-notes textarea { width: 100%; min-height: 150px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 10px; color: #ccc; font-family: inherit; font-size: 0.95em; resize: vertical; outline: none; transition: border-color 0.3s ease, background-color 0.3s ease; }
.research-notes textarea:focus { border-color: #e87a00; background-color: rgba(0, 0, 0, 0.3); }


/* === Estilos Contenido Editor === */
#article-body-editor h3 { font-size: 1.5em; color: #e87a00; margin-top: 1.5em; margin-bottom: 0.8em; line-height: 1.3; font-weight: 600; } #article-body-editor p { margin-bottom: 1.2em; } #article-body-editor a { color: #4dabf7; text-decoration: none; border-bottom: 1px dotted #4dabf7; transition: color 0.2s ease, border-color 0.2s ease; } #article-body-editor a:hover { color: #74c0fc; border-bottom-style: solid; } #article-body-editor blockquote { border-left: 4px solid #e87a00; margin: 1.5em 0 1.5em 10px; padding: 10px 20px; background-color: rgba(232, 122, 0, 0.05); color: #b0a89a; font-style: italic; } #article-body-editor blockquote p { margin-bottom: 0; } #article-body-editor ul, #article-body-editor ol { margin-left: 30px; margin-bottom: 1.2em; padding-left: 1em; } #article-body-editor li { margin-bottom: 0.5em; } #article-body-editor img { max-width: 100%; height: auto; border-radius: 4px; margin: 1em auto; display: block; } #article-body-editor pre { background-color: #212121; border: 1px solid #333; border-radius: 4px; padding: 15px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; overflow-x: auto; color: #bababa; margin: 1em 0; white-space: pre-wrap; word-wrap: break-word; } #article-body-editor hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 2em 0; } #article-body-editor iframe { max-width: 100%; border-radius: 4px; margin: 1em auto; display: block; aspect-ratio: 16 / 9; height: auto; }

/* === Modal Pre-Publicación === */
.modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .modal-overlay:not([hidden]) { opacity: 1; pointer-events: auto; } .modal-content { background-color: #242424; padding: 30px 40px; border-radius: 8px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); max-width: 650px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; transform: scale(0.95); transition: transform 0.3s ease; display: flex; flex-direction: column; } .modal-overlay:not([hidden]) .modal-content { transform: scale(1); } .modal-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #aaa; font-size: 1.8em; cursor: pointer; padding: 5px; line-height: 1; z-index: 1; } .modal-close-btn:hover { color: #fff; } .modal-content h2 { color: #e87a00; margin-bottom: 10px; font-size: 1.8em; text-align: center; } .modal-content > p { color: #ccc; margin-bottom: 30px; font-size: 1.05em; text-align: center; } .modal-form-content { display: flex; flex-direction: column; gap: 25px; margin-bottom: 30px; flex-grow: 1; } .modal-section { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 20px 25px; transition: border-color 0.3s ease; } .modal-section.invalid { border-color: #e53935; } .modal-section h4 { color: #b0a89a; font-size: 0.9em; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; display: flex; align-items: center; gap: 8px; } .modal-section h4 i { color: #888; font-size: 1.1em; } .form-field { margin-bottom: 20px; } .form-field:last-child { margin-bottom: 0; } .form-field label { display: block; color: #bbb; margin-bottom: 8px; font-size: 0.95em; font-weight: 500; } .form-field label .required { color: #e87a00; margin-left: 3px; } .form-field input[type="text"], .form-field select { width: 100%; padding: 12px 15px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: #e0e0e0; font-size: 1em; outline: none; transition: border-color 0.3s ease, background-color 0.3s ease; } .form-field input[type="text"]:focus, .form-field select:focus { border-color: #e87a00; background-color: rgba(0, 0, 0, 0.4); } .form-field input[type="text"].invalid, .form-field select.invalid { border-color: #e53935; } .form-field select { appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 15px center; background-size: .65em auto; padding-right: 40px; cursor: pointer; } .form-field select option[disabled] { color: #666; } .form-field .field-hint { font-size: 0.8em; color: #888; display: block; margin-top: 5px; } .checkbox-field { display: flex; align-items: center; gap: 10px; background-color: rgba(0,0,0,0.1); padding: 10px 15px; border-radius: 4px; } .checkbox-field input[type="checkbox"] { width: auto; height: 18px; width: 18px; accent-color: #e87a00; cursor: pointer; flex-shrink: 0; margin: 0; } .checkbox-field label { margin-bottom: 0; cursor: pointer; color: #ccc; font-weight: normal; flex-grow: 1; } .checkbox-field .field-hint { margin-top: 0; margin-left: auto; text-align: right; flex-shrink: 0; } .poster-section { text-align: center; } .poster-preview-modal { width: 100%; max-width: 350px; aspect-ratio: 16 / 9; background-color: rgba(0,0,0,0.3); border: 1px dashed rgba(255,255,255,0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px auto; overflow: hidden; position: relative; transition: border-color 0.3s ease; } .poster-section.invalid .poster-preview-modal { border-color: #e53935; } #poster-final-img { display: block; width: 100%; height: 100%; object-fit: cover; } #poster-final-placeholder { color: #777; font-size: 0.9em; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; } #poster-final-placeholder i { font-size: 2em; color: #555; } .btn-small { padding: 8px 15px !important; font-size: 0.9em !important; font-weight: 500 !important; } #btn-change-poster-modal { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; } .poster-hint { display: block; margin: 5px auto 0 auto; max-width: 350px; } .modal-actions { margin-top: auto; display: flex; justify-content: space-between; gap: 15px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .modal-actions .btn { flex-grow: 1; }

/* === Botones Acción Footer (Escritorio) === */
.action-buttons { /* display: none; Controlado por JS/[hidden] */ position: sticky; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(18, 18, 18, 1) 30%, rgba(18, 18, 18, 0)); padding: 15px 5vw; justify-content: flex-end; align-items: center; gap: 15px; z-index: 15; opacity: 0; pointer-events: none; transition: opacity 0.5s ease 0.2s; }
.action-buttons:not([hidden]) { display: flex; }
.action-buttons.visible { opacity: 1; pointer-events: auto; }
/* ... (Estilos internos .btn, save-status sin cambios) ... */
.btn { padding: 10px 25px; border-radius: 5px; cursor: pointer; font-size: 1em; font-weight: bold; transition: background-color 0.3s ease, transform 0.1s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease; border: none; text-align: center; } .btn:active { transform: translateY(1px); } .btn-primary { background-color: #e87a00; color: #121212; } .btn-primary:hover { background-color: #ff9d2a; } .btn-primary:disabled { background-color: #7c4a00; color: #555; cursor: not-allowed; opacity: 0.6; } .btn-secondary { background-color: rgba(255, 255, 255, 0.1); color: #e0e0e0; border: 1px solid rgba(255, 255, 255, 0.2); } .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); } #btn-save-draft:disabled { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #666; cursor: not-allowed; opacity: 0.6; } .save-status { font-size: 0.85em; color: #888; margin-right: auto; padding: 5px 10px; border-radius: 4px; opacity: 0; transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease; } .save-status.visible { opacity: 1; } .save-status.pending { color: #aaa; } .save-status.saving { color: #ffc107; } .save-status.saved { color: #4CAF50; } .save-status.error { color: #f44336; background-color: rgba(244, 67, 54, 0.1); }


/* === ESTILOS ESPECÍFICOS PARA MÓVIL === */
/* ... (Estilos .mobile-header, .mobile-editor-toolbar, .mobile-panel-sheet, .mobile-panel-overlay sin cambios) ... */
.mobile-header, .mobile-editor-toolbar, .mobile-panel-sheet, .mobile-panel-overlay { display: none; position: fixed; left: 0; width: 100%; background-color: #1f1f1f; z-index: 50; box-shadow: 0 -2px 10px rgba(0,0,0,0.3); } .mobile-header { top: 0; justify-content: space-between; align-items: center; padding: 8px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 10px rgba(0,0,0,0.3); } .btn-mobile-header { background: none; border: none; color: #ccc; font-size: 1.2em; padding: 8px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; } .btn-mobile-header:hover { background-color: rgba(255, 255, 255, 0.1); } .btn-mobile-header.primary { color: #e87a00; } .btn-mobile-header:disabled { color: #555; cursor: not-allowed; opacity: 0.5; } .mobile-save-status { font-size: 0.8em; color: #888; flex-grow: 1; text-align: center; opacity: 0; transition: opacity 0.3s ease, color 0.3s ease; } .mobile-save-status.visible { opacity: 1; } .mobile-save-status.saved { color: #4CAF50; } .mobile-save-status.pending { color: #aaa; } .mobile-save-status.saving { color: #ffc107; } .mobile-editor-toolbar { bottom: 0; justify-content: space-around; align-items: center; padding: 8px 5px; border-top: 1px solid rgba(255, 255, 255, 0.1); transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 55; } .mobile-editor-toolbar.visible { transform: translateY(0%); } .mobile-editor-toolbar button { position: relative; background: none; border: none; color: #ccc; font-size: 1.3em; padding: 8px 10px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; flex-grow: 1; text-align: center; } .mobile-editor-toolbar button:hover { background-color: rgba(255, 255, 255, 0.1); } .mobile-editor-toolbar button.active { background-color: #e87a00; color: #121212; } .mobile-editor-toolbar .toolbar-separator { height: 20px; background-color: rgba(255, 255, 255, 0.1); margin: 0 3px; } #mobile-open-panel-button.has-pending::after { content: ''; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; background-color: #ffc107; border-radius: 50%; box-shadow: 0 0 5px rgba(255, 193, 7, 0.7); animation: pulse-indicator 1.5s infinite ease-in-out; } @keyframes pulse-indicator { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } .mobile-panel-sheet { bottom: 0; max-height: 75vh; background-color: #242424; border-top-left-radius: 12px; border-top-right-radius: 12px; overflow-y: auto; flex-direction: column; transform: translateY(100%); transition: transform 0.35s ease-out; z-index: 60; } .mobile-panel-sheet.visible { transform: translateY(0%); } .mobile-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 0; background-color: #242424; z-index: 1; } .mobile-panel-header h4 { margin: 0; font-size: 1.1em; color: #e0e0e0; } .mobile-close-panel-button { background: none; border: none; color: #aaa; font-size: 1.8em; cursor: pointer; padding: 0 5px; line-height: 1; } .mobile-panel-content { padding: 20px; display: flex; flex-direction: column; gap: 20px; } .mobile-panel-content .side-panel-section { margin-bottom: 0; background-color: rgba(255, 255, 255, 0.02); } .mobile-panel-content .side-panel-section h3 { font-size: 0.8em; } .mobile-poster-upload .poster-drop-area.side-style { aspect-ratio: 16 / 10; } .mobile-insert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; } .mobile-insert-grid button { background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #ccc; padding: 12px 10px; border-radius: 4px; font-size: 0.9em; text-align: center; cursor: pointer; transition: background-color 0.2s; display: flex; flex-direction: column; align-items: center; gap: 5px; } .mobile-insert-grid button i { font-size: 1.3em; margin-bottom: 3px; } .mobile-insert-grid button:hover { background-color: rgba(255, 255, 255, 0.15); } .mobile-panel-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 59; opacity: 0; transition: opacity 0.35s ease-out; pointer-events: none; display: none; } .mobile-panel-overlay.visible { opacity: 1; pointer-events: auto; }


/* === Media Query para Móviles (<= 768px) === */
@media (max-width: 768px) {
    /* Ocultar elementos de Escritorio */
    #side-panel,
    #fixed-editor-toolbar,
    #action-buttons-footer {
        display: none !important;
    }
    /* Mostrar elementos móviles (JS controla [hidden]) */
    .mobile-header:not([hidden]) { display: flex; }
    .mobile-editor-toolbar:not([hidden]) { display: flex; }
    .mobile-panel-sheet:not([hidden]) { display: flex; }
    .mobile-panel-overlay:not([hidden]) { display: block; }

    /* Ajustes layout */
    .editor-layout { flex-direction: column; padding: 0 10px; gap: 0; }
    .writing-canvas { padding: 60px 0 70px 0; width: 100%; max-width: 100%; }
    /* Título inicial móvil */
    .initial-setup { min-height: calc(100vh - 60px - 70px); }
    #article-title-input { font-size: 2.8em; }
    #title-suggestions span { font-size: 0.8em; margin: 0 5px; }
    .title-prompt { font-size: 0.9em; }
    /* Editor móvil */
    #body-writing-section { max-width: 100%; }
    body.body-editor-active #article-title-display { font-size: 1.4em; margin-bottom: 15px; }
    #article-body-editor { padding: 20px 15px; min-height: calc(100vh - 60px - 70px - 50px - 30px); }
    .editor-placeholder { top: 20px; left: 15px; width: calc(100% - 30px); }
    /* Modal móvil */
    .modal-content { max-width: 95%; padding: 25px 20px; max-height: 85vh; }
    .modal-section { padding: 15px 20px; }
    .modal-actions { flex-direction: column-reverse; gap: 10px; }
    .modal-actions .btn { width: 100%; }
}

/* Ajustes pantallas muy pequeñas (<= 480px) */
@media (max-width: 480px) {
     #article-title-input { font-size: 2.2em; }
     #title-suggestions { margin-top: 10px; margin-bottom: 15px; }
     #title-suggestions span { font-size: 0.75em; margin: 0 4px; }
     .title-prompt { font-size: 0.85em; }
     body.body-editor-active #article-title-display { font-size: 1.3em; }
     .mobile-header { padding: 5px 10px; }
     .btn-mobile-header { font-size: 1.1em; padding: 6px;}
     .mobile-editor-toolbar { padding: 5px; }
     .mobile-editor-toolbar button { font-size: 1.2em; padding: 6px 8px;}
     .modal-content { padding: 20px 15px; }
     .modal-actions .btn { font-size: 0.9em; padding: 12px 15px; }
     .mobile-insert-grid { grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); gap: 8px; }
     .mobile-insert-grid button { padding: 10px 5px; font-size: 0.8em; }
     .checkbox-field .field-hint { display: none; }
}