styles.py

import streamlit as st

def apply_styles():
    return """
        <style>
        /* Remove top margin and reduce other margins */
        .main .block-container {
            padding-top: 1rem !important;
            margin-top: 0 !important;
            max-width: 95% !important;
        }
        
        h1, h3 {
            text-align: center;
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }
        
        .stButton > button {
            background-color: #FFD700 !important;
            color: black !important;
            border: 1px solid black !important;
            font-weight: bold !important;
            width: 80% !important;
            margin-left: 10% !important;
        }
        
        [data-testid="stDownloadButton"] {
            text-align: center;
            display: flex;
            justify-content: center;
            margin-top: 5px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }
        
        [data-testid="stDownloadButton"] button {
            width: 100%;
            border-radius: 5px;
            height: 3em;
            background: linear-gradient(to right, #00D100, #009900);
            color: white;
            font-weight: bold;
            transition: all 0.3s ease;
            border: none;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        [data-testid="stDownloadButton"] button:hover {
            background: linear-gradient(to right, #00C000, #008800);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .stButton > button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        /* Hide the hamburger menu and Streamlit footer */
        #MainMenu {visibility: hidden;}
        footer {visibility: hidden;}
        
        /* Creative Concept Styling */
        .concept-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #2c3e50;
            margin-top: 2rem;
            padding: 0.5rem;
            border-bottom: 2px solid #3498db;
        }
        
        .section-header {
            font-size: 1.2rem;
            font-weight: bold;
            color: #3498db;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
        }
        
        .analogy {
            color: #e74c3c;
            font-weight: bold;
        }
        
        .creative-concepts {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
        }
        </style>
    """
    st.markdown("""
        <style>
        .stTextArea > label {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .stSelectbox > label {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .stSlider > label {
            font-size: 1.2rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .stButton > button {
            background-color: #2c3e50;
            color: white;
            padding: 0.5rem 2rem;
            font-size: 1.1rem;
            font-weight: bold;
            border-radius: 5px;
        }
        
        .stButton > button:hover {
            background-color: #34495e;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        h3 {
            color: #34495e;
            font-size: 1.3rem;
            font-weight: normal;
            margin-bottom: 2rem;
        }
        
        .stMarkdown {
            font-size: 1.1rem;
        }
        
        .element-container {
            margin-bottom: 1rem;
        }
        </style>
    """, unsafe_allow_html=True)

def format_creative_response(response_text):
    """Format the creative response with custom styling"""
    if not response_text or response_text.startswith("Error") or response_text.startswith("Debes"):
        return response_text
    
    # Parse the response into sections
    sections = []
    current_concept = {"title": "", "content": []}
    current_section = None
    
    for line in response_text.split('\n'):
        line = line.strip()
        if not line:
            continue
            
        if line.startswith("CONCEPTO CREATIVO"):
            # Start a new concept
            if current_concept["title"]:
                sections.append(current_concept)
            current_concept = {"title": line, "content": []}
            current_section = None
        elif line.startswith("Concepto:"):
            current_section = "concept"
            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
        elif line.startswith("Creatividad:"):
            current_section = "creativity"
            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
        elif line.startswith("Ejemplo de Titular:"):
            current_section = "headline"
            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
        elif current_section:
            # Add content to the current section
            current_concept["content"][-1]["text"] = line
    
    # Add the last concept
    if current_concept["title"]:
        sections.append(current_concept)
    
    # Build the HTML
    html = ""
    for concept in sections:
        html += f'<div class="creative-concept-card">'
        html += f'<div class="concept-title">{concept["title"]}</div>'
        
        for item in concept["content"]:
            html += f'<div class="concept-section">'
            html += f'<div class="section-header">{item["header"]}</div>'
            
            # Apply special styling to analogy text
            if item["type"] == "creativity" and "es como" in item["text"] and "porque" in item["text"]:
                import re
                analogy_pattern = r'([^\.]+es como [^\.]+porque [^\.]+)'
                styled_text = re.sub(analogy_pattern, r'<span class="analogy">\1</span>', item["text"])
                html += f'<div class="section-content">{styled_text}</div>'
            else:
                html += f'<div class="section-content">{item["text"]}</div>'
            
            html += '</div>'
        
        html += '</div>'
    
    # Add custom CSS for the new layout
    css = """
    <style>
    .creative-concept-card {
        background-color: #f8f9fa;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        margin-top: 0.5rem;  /* Reduced top margin */
    }
    
    .concept-title {
        font-size: 1.5rem;
        font-weight: bold;
        color: #2c3e50;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #3498db;
        margin-bottom: 1.5rem;
        margin-top: 0;  /* Remove top margin from title */
    }
    
    /* Additional style to reduce space at the top of the output area */
    .stMarkdown {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure the first concept has minimal top margin */
    .creative-concept-card:first-child {
        margin-top: 0;
    }
    
    .concept-section {
        margin-bottom: 1.5rem;
    }
    
    .section-header {
        font-size: 1.2rem;
        font-weight: bold;
        color: #3498db;
        margin-bottom: 0.5rem;
    }
    
    .section-content {
        font-size: 1.1rem;
        line-height: 1.5;
    }
    
    .analogy {
        color: #e74c3c;
        font-weight: bold;
    }
    </style>
    """
    
    return css + html

def format_story_output(story_text):
    return f"""
        <div class="story-output">
            {story_text}
        </div>
    """