/* ========================================
   PROMPTARCHITECT - REDISEÑO CSS
   Solo estilos visuales, sin afectar funcionalidad
   ======================================== */

/* === MEJORAS GENERALES === */
body {
    font-family: 'Inter', sans-serif;
}

.logo-font {
    font-family: 'Space Grotesk', sans-serif;
}

/* === CONTENEDOR PRINCIPAL === */
#constructor-view .bg-white.dark\:bg-gray-800 {
    background: linear-gradient(to bottom right, rgb(255, 255, 255), rgb(248, 250, 252)) !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

html.dark #constructor-view .bg-white.dark\:bg-gray-800 {
    background: linear-gradient(to bottom right, rgb(31, 41, 55), rgb(17, 24, 39)) !important;
}

/* === PASOS NUMERADOS === */
.space-y-3>.flex>.rounded-full {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* === BARRA DE PROGRESO (si decides agregarla más adelante) === */
.progress-indicator {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgb(248, 250, 252);
    border-radius: 0.75rem;
    border: 1px solid rgb(226, 232, 240);
}

html.dark .progress-indicator {
    background: rgb(17, 24, 39);
    border-color: rgb(55, 65, 81);
}

/* === TABS DE TIPO DE PROMPT === */
#prompt-type-tabs {
    gap: 0.5rem;
    padding-bottom: 0;
    border-bottom: 2px solid rgb(226, 232, 240);
}

html.dark #prompt-type-tabs {
    border-bottom-color: rgb(55, 65, 81);
}

.prompt-tab {
    padding: 2rem 4rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    color: rgb(107, 114, 128);
}

html.dark .prompt-tab {
    color: rgb(156, 163, 175);
}

.prompt-tab.active {
    border-bottom-color: rgb(79, 70, 229);
    color: rgb(79, 70, 229);
    font-weight: 600;
    background: rgb(238, 242, 255);
    border-radius: 0.5rem 0.5rem 0 0;
}

html.dark .prompt-tab.active {
    border-bottom-color: rgb(129, 140, 248);
    color: rgb(129, 140, 248);
    background: rgb(55, 65, 81);
}

/* === CAMPOS DE FORMULARIO EN 2 COLUMNAS === */
#prompt-type-general .grid.md\:grid-cols-2,
#prompt-type-image .grid.md\:grid-cols-2,
#prompt-type-video .grid.md\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Responsivo - 1 columna en móvil */
@media (max-width: 768px) {

    #prompt-type-general .grid.md\:grid-cols-2,
    #prompt-type-image .grid.md\:grid-cols-2,
    #prompt-type-video .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* === ALTURA REDUCIDA DE TEXTAREAS EN GRID === */
#prompt-type-general .grid.md\:grid-cols-2 textarea,
#prompt-type-image .grid.md\:grid-cols-2 textarea {
    min-height: 90px;
    font-size: 0.875rem;
}

/* === LABELS MÁS COMPACTOS === */
#prompt-type-general .grid.md\:grid-cols-2 label,
#prompt-type-image .grid.md\:grid-cols-2 label {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

/* === MEJORAS EN INPUTS Y TEXTAREAS === */
textarea,
input[type="text"],
input[type="email"],
select {
    transition: all 0.15s ease-in-out;
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
    transform: translateY(-1px);
}

/* === OBJETIVO TAGS (Pills) === */
.objective-tag {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid transparent;
    font-weight: 500;
    padding: 0.5rem 1rem;
    width: 31%;
    text-align: center;
}

.objective-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.objective-tag:active {
    transform: translateY(0);
}

/* === BOTÓN MEJORAR CON IA === */
#enhance-btn-general,
#enhance-btn-image,
#enhance-btn-video {
    background: linear-gradient(to right, rgb(99, 102, 241), rgb(168, 85, 247)) !important;
    box-shadow: 0 4px 6px -1px rgb(99 102 241 / 0.4);
    transition: all 0.2s ease-in-out;
}

#enhance-btn-general:hover,
#enhance-btn-image:hover,
#enhance-btn-video:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(99 102 241 / 0.4);
}

/* === RESULTADO FINAL - ÁREA MEJORADA === */
#prompt-to-export {
    border-radius: 0.75rem;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

#prompt-result {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(51, 65, 85);
}

html.dark #prompt-result {
    color: rgb(203, 213, 225);
}

/* === BOTONES DE ACCIÓN FINALES - GRID DE 4 === */
#constructor-view .flex.flex-col.sm\:flex-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

@media (max-width: 640px) {
    #constructor-view .flex.flex-col.sm\:flex-row {
        grid-template-columns: 1fr;
    }
}

/* Estilos mejorados para botones de acción */
#test-prompt-btn-footer,
#copy-prompt-btn-footer,
#export-pdf-btn {
    background: rgb(226, 232, 240) !important;
    color: rgb(51, 65, 85) !important;
    border: 1px solid rgb(203, 213, 225) !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.15s ease-in-out;
}

html.dark #test-prompt-btn-footer,
html.dark #copy-prompt-btn-footer,
html.dark #export-pdf-btn {
    background: rgb(55, 65, 81) !important;
    color: rgb(243, 244, 246) !important;
    border-color: rgb(75, 85, 99) !important;
}

#test-prompt-btn-footer:hover,
#copy-prompt-btn-footer:hover,
#export-pdf-btn:hover {
    background: rgb(203, 213, 225) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

html.dark #test-prompt-btn-footer:hover,
html.dark #copy-prompt-btn-footer:hover,
html.dark #export-pdf-btn:hover {
    background: rgb(75, 85, 99) !important;
}

#save-prompt-btn-footer {
    background: linear-gradient(to right, rgb(79, 70, 229), rgb(168, 85, 247)) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgb(79 70 229 / 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
}

#save-prompt-btn-footer:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(79 70 229 / 0.4);
}

/* === ESPACIADO ENTRE SECCIONES === */
#prompt-form-container>.prompt-type-content>.space-y-8>div,
#prompt-form-container>.prompt-type-content>.space-y-4>div {
    padding: 1.5rem;
    background: rgb(248, 250, 252);
    border-radius: 0.75rem;
    border: 1px solid rgb(226, 232, 240);
    transition: all 0.2s ease-in-out;
}

html.dark #prompt-form-container>.prompt-type-content>.space-y-8>div,
html.dark #prompt-form-container>.prompt-type-content>.space-y-4>div {
    background: rgb(31, 41, 55);
    border-color: rgb(55, 65, 81);
}

#prompt-form-container>.prompt-type-content>.space-y-8>div:hover,
#prompt-form-container>.prompt-type-content>.space-y-4>div:hover {
    border-color: rgb(203, 213, 225);
}

html.dark #prompt-form-container>.prompt-type-content>.space-y-8>div:hover,
html.dark #prompt-form-container>.prompt-type-content>.space-y-4>div:hover {
    border-color: rgb(75, 85, 99);
}

/* === TOOLTIPS === */
.tooltip {
    background-color: rgb(31, 41, 55) !important;
    color: white !important;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

html.dark .tooltip {
    background-color: rgb(55, 65, 81) !important;
}

/* === BOTÓN DE COPIAR EN RESULTADO === */
#copy-prompt-btn-main {
    transition: all 0.15s ease-in-out;
}

#copy-prompt-btn-main:hover {
    transform: scale(1.1);
}

/* === CAMPOS CON ICONO DE INFO === */
label .tooltip-container {
    display: inline-flex;
    align-items: center;
}

/* === SELECTS === */
select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* === ESTILOS PARA CAMPOS REQUERIDOS === */
label span.text-red-500 {
    color: rgb(239, 68, 68) !important;
    font-weight: 700;
}

/* === ANIMACIÓN SUAVE PARA CAMBIOS === */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* === MEJORAS EN HEADER === */
header h2 {
    background: linear-gradient(to right, rgb(79, 70, 229), rgb(168, 85, 247));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.dark header h2 {
    background: linear-gradient(to right, rgb(129, 140, 248), rgb(196, 181, 253));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === BOTONES EN HEADER === */
#test-prompt-btn-header,
#save-prompt-btn-header {
    font-weight: 600;
    transition: all 0.15s ease-in-out;
}

#test-prompt-btn-header:hover,
#save-prompt-btn-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

#save-prompt-btn-header {
    background: linear-gradient(to right, rgb(79, 70, 229), rgb(168, 85, 247)) !important;
    box-shadow: 0 4px 6px -1px rgb(79 70 229 / 0.4);
}

/* === MENSAJE DE LÍMITE === */
.limit-reached-msg {
    border-radius: 0.5rem;
    border: 1px solid rgb(251, 191, 36);
}

html.dark .limit-reached-msg {
    border-color: rgb(217, 119, 6);
}

/* === ESTILOS RESPONSIVE MEJORADOS === */
@media (max-width: 768px) {

    #prompt-form-container>.prompt-type-content>.space-y-8>div,
    #prompt-form-container>.prompt-type-content>.space-y-4>div {
        padding: 1rem;
    }

    .objective-tag {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* === BOTONES DE OBJETIVO EN HOVER === */
#general-objective-tags .objective-tag.bg-sky-100:hover {
    background-color: rgb(125, 211, 252) !important;
}

#general-objective-tags .objective-tag.bg-lime-100:hover {
    background-color: rgb(190, 242, 100) !important;
}

#general-objective-tags .objective-tag.bg-amber-100:hover {
    background-color: rgb(252, 211, 77) !important;
}

#general-objective-tags .objective-tag.bg-violet-100:hover {
    background-color: rgb(196, 181, 253) !important;
}

#general-objective-tags .objective-tag.bg-rose-100:hover {
    background-color: rgb(252, 165, 165) !important;
}

#general-objective-tags .objective-tag.bg-teal-100:hover {
    background-color: rgb(153, 246, 228) !important;
}

/* Dark mode hover states */
html.dark #general-objective-tags .objective-tag.dark\:bg-sky-900:hover {
    background-color: rgb(12, 74, 110) !important;
}

html.dark #general-objective-tags .objective-tag.dark\:bg-lime-900:hover {
    background-color: rgb(54, 83, 20) !important;
}

html.dark #general-objective-tags .objective-tag.dark\:bg-amber-900:hover {
    background-color: rgb(120, 53, 15) !important;
}

html.dark #general-objective-tags .objective-tag.dark\:bg-violet-900:hover {
    background-color: rgb(76, 29, 149) !important;
}

html.dark #general-objective-tags .objective-tag.dark\:bg-rose-900:hover {
    background-color: rgb(136, 19, 55) !important;
}

html.dark #general-objective-tags .objective-tag.dark\:bg-teal-900:hover {
    background-color: rgb(19, 78, 74) !important;
}

/* === ESTILOS PARA BIBLIOTECA === */
.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    background: rgb(226, 232, 240);
    color: rgb(51, 65, 85);
    border: 2px solid transparent;
}

html.dark .filter-btn {
    background: rgb(55, 65, 81);
    color: rgb(243, 244, 246);
}

.filter-btn.active {
    background: rgb(79, 70, 229);
    color: white;
    border-color: rgb(79, 70, 229);
}

html.dark .filter-btn.active {
    background: rgb(99, 102, 241);
    border-color: rgb(99, 102, 241);
}

.filter-btn:hover:not(.active) {
    background: rgb(203, 213, 225);
    transform: translateY(-1px);
}

html.dark .filter-btn:hover:not(.active) {
    background: rgb(75, 85, 99);
}

/* Búsqueda en biblioteca */
#library-search-input {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

#library-search-input:focus {
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1);
}

#clear-search-btn {
    transition: all 0.2s ease-in-out;
}

#clear-search-btn:hover {
    transform: scale(1.1);
}

.no-results-message {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.prompt-card {
    transition: all 0.2s ease-in-out;
}

.prompt-card:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.prompt-header {
    transition: background-color 0.2s ease-in-out;
}

.prompt-header:hover {
    background-color: rgb(249, 250, 251);
}

html.dark .prompt-header:hover {
    background-color: rgb(31, 41, 55);
}

.expand-icon {
    transition: transform 0.3s ease-in-out;
}

.prompt-content {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
    }
}

/* === AJUSTES FINALES === */
.space-y-8>*+* {
    margin-top: 2rem;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

/* === SCROLL SUAVE === */
html {
    scroll-behavior: smooth;
}

/* === FOCUS VISIBLE === */
*:focus-visible {
    outline: 2px solid rgb(79, 70, 229);
    outline-offset: 2px;
}

html.dark *:focus-visible {
    outline-color: rgb(129, 140, 248);
}

/* === ANÁLISIS DE IMAGEN === */
#image-upload-area {
    transition: all 0.3s ease;
}

#image-upload-area:hover {
    background-color: rgb(249, 250, 251);
}

html.dark #image-upload-area:hover {
    background-color: rgb(31, 41, 55);
}

#image-preview {
    transition: opacity 0.3s ease;
}

#image-preview-container {
    animation: fadeIn 0.3s ease-in;
}

#analyze-image-btn:disabled {
    cursor: not-allowed;
}