/* ======= VARIABLES DE COLORES ======= */
:root {
    --color-bg: #0a0a0a;             /* Fondo general */
    --color-text: #e0e0e0;           /* Texto principal */
    --color-header-start: #111111;   /* Degradado header inicio */
    --color-header-end: #181818;     /* Degradado header fin */
    --color-nav-bg: #121212;         /* Fondo nav */
    --color-nav-text: #e6e6e6;       /* Texto nav */
    --color-section-bg: #141414;     /* Fondo secciones */
    --color-section-border: #202020; /* Borde secciones */
    --color-btn-primary: #ffcc00;    /* Botón principal → dorado */
    --color-btn-primary-hover: #e6b800; /* Botón principal hover */
    --color-btn-secondary: #1e1e1e;  /* Botón secundario */
    --color-btn-secondary-hover: #292929; /* Botón secundario hover */
    --color-card-bg: #181818;        /* Fondo cards precios */
    --color-input-bg: #0f0f0f;       /* Inputs y textarea fondo */
    --color-input-border: #2a2a2a;   /* Inputs borde */
    --color-error: #ff4c4c;          /* Mensajes error */
    --color-success: #2ecc71;        /* Mensajes éxito */
    --color-footer-bg: #0e0e0e;      /* Footer fondo */
    --color-footer-text: #d9d9d9;    /* Footer texto */
}

/* ======= ESTILO GENERAL ======= */

body{
    margin:0;
    font-family: Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

/* ======= HEADER ======= */

.main-header{
    background: linear-gradient(120deg, var(--color-header-start), var(--color-header-end));
    color:white;
    padding:50px 20px;
    text-align:center;
    border-bottom:5px solid var(--color-btn-primary);
}

.main-header h1{
    margin:0;
    font-size:36px;
}

.main-header p{
    color:#bfbfbf;
}

/* ======= NAVEGACIÓN ======= */

.main-nav{
    background: var(--color-nav-bg);
    padding:15px;
    text-align:center;
    border-bottom:3px solid var(--color-btn-primary);
}

.main-nav a{
    color: var(--color-nav-text);
    margin:0 15px;
    text-decoration:none;
    font-weight:bold;
}

.main-nav a:hover{
    color: var(--color-btn-primary);
}

/* ======= CONTENIDO ======= */

.container{
    max-width:1100px;
    margin:auto;
    padding:30px;
}

.section{
    margin-top:40px;
    background: var(--color-section-bg);
    padding:25px;
    border-radius:10px;
    box-shadow:0 0 15px rgba(0,0,0,0.4);
    border:1px solid var(--color-section-border);
}

.section h2{
    color: var(--color-btn-primary);
    border-bottom:2px solid var(--color-btn-primary);
    padding-bottom:10px;
}

/* ======= BOTONES ======= */

.btn-primary{
    background: var(--color-btn-primary);
    color:black;
    padding:12px 20px;
    text-decoration:none;
    border:none;
    border-radius:5px;
    cursor:pointer;
    font-weight:bold;
}

.btn-primary:hover{
    background: var(--color-btn-primary-hover);
}

.btn-secondary{
    background: var(--color-btn-secondary);
    color:black;
    padding:12px 20px;
    border:1px solid #333;
    border-radius:5px;
    cursor:pointer;
    font-weight:bold;
}

.btn-secondary:hover{
    background: var(--color-btn-secondary-hover);
}

.btn-link{
    color: var(--color-btn-primary);
    text-decoration:none;
}

/* ======= PRECIOS ======= */

.pricing{
    display:flex;
    justify-content:center;
}

.pricing .card{
    border:2px solid var(--color-btn-primary);
    padding:30px;
    width:100%;
    text-align:center;
    border-radius:10px;
    background: var(--color-card-bg);
}

/* ======= WEBSITES ======= */

.websites{
    justify-content:center;
	padding: 0 20px;
}

/* ======= FORMULARIOS ======= */

.form-box{
    margin-top:15px;
	text-align: center;
}

input, textarea{
    width:66.6%;
    padding:12px;
    margin:10px 0;
    border:1px solid var(--color-input-border);
    border-radius:5px;
    background: var(--color-input-bg);
    color: var(--color-text);
}

textarea{
    min-height:120px;
}

/* ======= LOGIN ======= */

.login-container{
    max-width:420px;
    margin:50px auto;
    background: var(--color-section-bg);
    padding:30px;
    border-radius:10px;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
    text-align:center;
    border-top:5px solid var(--color-btn-primary);
    border:1px solid var(--color-section-border);
}

.login-container h2{
    color: var(--color-btn-primary);
}

/* ======= MENSAJES ======= */

.error{
    color: var(--color-error);
    font-weight:bold;
}

.success{
    color: var(--color-success);
    font-weight:bold;
}

/* ======= FOOTER ======= */

.main-footer{
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    text-align:center;
    padding:25px;
    margin-top:40px;
    border-top:5px solid var(--color-btn-primary);
}

/* ======= RESPONSIVE ======= */

@media(max-width:768px){
    .pricing{
        flex-direction:column;
    }
    .websites{
        flex-direction:column;
    }
    .main-header h1{
        font-size:26px;
    }
}

/* ===== DASHBOARD ===== */

.dashboard-grid{
    display:flex;
    gap:30px;
    margin-top:30px;
    flex-wrap:wrap;
}

.dashboard-left, .dashboard-right{
    flex:1;
    min-width:300px;
}

.card{
    background: var(--color-section-bg);
    padding:20px;
    border-radius:10px;
    box-shadow:0 0 15px rgba(0,0,0,0.6);
    margin-bottom:20px;
}

.card h2{
    color: var(--color-btn);
    border-bottom:2px solid var(--color-btn);
    padding-bottom:5px;
}

input, textarea, select{
    width:100%;
    padding:10px;
    margin:8px 0;
    border-radius:6px;
    border:1px solid #666;
    background: var(--color-input-bg);
    color: var(--color-text);
}

#preview{
    border-radius:10px;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:100%;
    min-height:350px;
    box-shadow:0 0 15px rgba(0,0,0,0.6);
}

#preview div:first-child{
    font-size:40px;
}

#chat-messages{
    border-radius:10px;
    padding:10px;
    background:#222;
    height:200px;
    overflow-y:auto;
}

#chat-messages div{
    margin:5px 0;
}

#chat-input{
    display:flex;
    gap:5px;
}

#chat-input input{
    flex:1;
    padding:10px;
    border-radius:5px;
    border:1px solid #666;
    background:#111;
    color:white;
}

#chat-input button{
    background: var(--color-btn);
    border:none;
    color:white;
    border-radius:5px;
    padding:10px 15px;
    cursor:pointer;
    font-weight:bold;
}

#chat-input button:hover{
    background:#b58900;
}

.qa-list li{
    background:#222;
    margin:5px 0;
    padding:10px;
    border-radius:6px;
}

/* ===== ESTADÍSTICAS ===== */
.stats-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.stats-card{
    background: var(--color-section-bg);
    border-radius:10px;
    padding:20px;
    text-align:center;
    box-shadow:0 0 15px rgba(0,0,0,0.5);
}

.stats-card h3{
    color: var(--color-btn);
    margin:0;
}

.stats-card p{
    font-size:24px;
    font-weight:bold;
    margin:5px 0;
}