:root {
    /* Variables principales que JS modificará */
    --main-color: #007bff;
    --bg-color: #f4f7f6;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Nuevas variables de personalización */
    --date-color: #007bff;
    --title-color: #333333;
    --dot-fill-color: #ffffff;
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

.main-container {
    display: flex;
    width: 95%;
    max-width: 1400px;
}

/* --- Panel de Control --- */
.controls-panel {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 20px;
    position: sticky;
    top: 20px;
    z-index: 10;
    width: 300px;
    min-width: 280px;
    height: fit-content;
}

/* ... (Estilos de botones y inputs de control se mantienen) ... */
.control-group, .event-edit-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; font-size: 0.9em; }
input[type="color"], select, input[type="text"], textarea { width: 95%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
textarea { resize: vertical; height: 60px; }

.add-event-btn { width: 100%; padding: 10px; margin-top: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; background-color: #28a745; color: white; transition: background-color 0.3s; }
.export-buttons button { width: 100%; padding: 12px; margin-top: 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; background-color: var(--main-color); color: white; transition: background-color 0.3s; font-size: 1.1em; }
.export-buttons button:hover { background-color: color-mix(in srgb, var(--main-color) 80%, black); }
.delete-btn { background-color: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-top: 5px; font-size: 0.8em; }


/* --- Contenedor de la Línea de Tiempo (Previsualización) --- */
.timeline-container {
    flex-grow: 1;
    padding: 50px 0;
    max-width: 800px;
    margin: 20px auto;
    position: relative;
    /* Necesario para la exportación y el color de fondo */
    background-color: var(--bg-color); 
}

/* Línea Central */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--main-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 30px; 
}

/* MARCACIÓN (PUNTO/DOT) */
.timeline-dot {
    position: absolute;
    width: 26px; /* Tamaño base */
    height: 26px; /* Tamaño base */
    top: 20px;
    z-index: 1;
    
    /* Para centrar el contenido (el Ícono) */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px; /* Tamaño base para el Ícono/Número */
    overflow: hidden; 
    box-sizing: content-box;

    /* Propiedades de relleno y borde por defecto (para herencia) */
    background-color: var(--dot-fill-color);
    border: 3px solid var(--main-color); 
}


/* FORMAS DEL MARCADOR */
/* 1. Círculo (Forma por defecto) */
.dot-container-circle {
    border-radius: 50%;
}

/* 2. Cuadrado */
.dot-container-square {
    border-radius: 0;
}

/* 3. Hexágono */
.dot-container-hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* 4. Sin Forma (Solo Ícono) */
.dot-container-none {
    background-color: transparent !important;
    border: none !important;
    width: 30px; /* Tamaño ligeramente mayor para iconos flotantes */
    height: 30px;
    margin: -2px; /* Ajuste fino */
}

/* --- ESTILO DEL CONTENIDO (ÍCONO INTERNO) --- */

.timeline-dot .dot-icon {
    line-height: 1;
    /* El color del ícono se establece según el Color Principal */
    color: var(--main-color); 
    font-weight: bold;
    font-size: 16px; /* Tamaño base para la mayoría de los íconos */
}

/* Ajustes específicos para Íconos */
.dot-content-lightbulb .dot-icon {
    color: orange;
}

/* ESTILO PARA EL NÚMERO SIMPLE */
.dot-content-number .dot-icon {
    /* El número requiere un tamaño ligeramente mayor para centrarse y ser visible */
    font-size: 18px; 
    color: var(--main-color); /* Usamos el color principal para el número */
    font-weight: bold;
}

/* CONTENIDO DEL EVENTO */

.timeline-content {
    /* ... (Propiedades de base como posición, color de fondo predeterminado, padding) ... */
    padding: 15px;
    background-color: var(--content-bg-color, white); /* 'white' es un fallback seguro */
    border: 1px solid var(--content-border-color, #ccc); /* #ccc es el fallback */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave */
    /* ... */
}

/* 🟢 ESTILO: RECTÁNGULO REDONDEADO */
.timeline-content.content-rounded {
    border-radius: 8px; /* Aplica el redondeo */
}

/* ⚪ ESTILO: SOLO TEXTO (Sin forma visible) */
.timeline-content.content-none {
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    box-shadow: none; /* Sin sombra */
    padding: 5px 0; /* Menos padding para solo texto */
}

/* FORMAS DEL CONTENEDOR DE EVENTO */
.content-rounded {
    border-radius: 6px; /* Default */
}
.content-none {
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}


/* ESTILOS DE TEXTO */
.timeline-date {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--date-color); /* Usando nueva variable */
    margin-bottom: 5px;
}
.timeline-content h3 {
    margin-top: 0;
    color: var(--title-color); /* Usando nueva variable */
}
.timeline-content p {
    color: #666;
}


/* --- Estilo 1: Vertical Clásico --- */
.timeline-container.vertical .timeline-item {
    left: 0;
    width: 100%;
    padding-left: calc(50% + 40px); 
}
.timeline-container.vertical .timeline-dot {
    left: 50%;
    margin-left: -9px;
}
/* Estilos extra para formas complejas en Vertical Clásico */
.timeline-container.vertical .dot-star, .timeline-container.vertical .dot-heart {
    left: calc(50% - 14px); /* Centrar el ícono más grande */
}


/* --- Estilo 2: Alternado Creativo --- */
.timeline-container.alternating .timeline-item {
    width: 50%;
}
/* Lado Izquierdo (impares) */
.timeline-container.alternating .timeline-item:nth-child(odd) {
    left: 0;
    padding-left: 0;
    padding-right: 40px;
}
.timeline-container.alternating .timeline-item:nth-child(odd) .timeline-dot {
    left: auto;
    right: -9px; 
}
.timeline-container.alternating .timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
}
/* Lado Derecho (pares) */
.timeline-container.alternating .timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 40px;
    padding-right: 0;
}
.timeline-container.alternating .timeline-item:nth-child(even) .timeline-dot {
    left: -9px; 
    right: auto;
}
.timeline-container.alternating .timeline-item:nth-child(even) .timeline-content {
    text-align: left;
}
/* Estilos extra para formas complejas en Alternado Creativo */
.timeline-container.alternating .timeline-item:nth-child(odd) .dot-star, 
.timeline-container.alternating .timeline-item:nth-child(odd) .dot-heart {
    right: -14px; /* Centrar el ícono más grande a la izquierda de la línea */
}
.timeline-container.alternating .timeline-item:nth-child(even) .dot-star, 
.timeline-container.alternating .timeline-item:nth-child(even) .dot-heart {
    left: -14px; /* Centrar el ícono más grande a la derecha de la línea */
}


/* --- AJUSTES DE POSICIÓN PARA MODO ALTERNADO --- */

/* La línea central ahora se basa en el tamaño del contenedor (26px/2 = 13px) */
.timeline-container.vertical .timeline-dot {
    left: 50%;
    margin-left: -13px; /* Centrar dot-container-circle/square/hexagon */
}
/* Ajuste para la forma 'Sin Forma' (30px/2 = 15px) */
.timeline-container.vertical .dot-container-none {
    margin-left: -15px; 
}


/* Modo Alternado */
/* Lado Izquierdo (impares) */
.timeline-container.alternating .timeline-item:nth-child(odd) .timeline-dot {
    left: auto;
    right: -13px; /* Centrar dot-container-circle/square/hexagon */
}
.timeline-container.alternating .timeline-item:nth-child(odd) .dot-container-none {
    right: -15px; /* Ajuste para Sin Forma */
}

/* Lado Derecho (pares) */
.timeline-container.alternating .timeline-item:nth-child(even) .timeline-dot {
    left: -13px; /* Centrar dot-container-circle/square/hexagon */
    right: auto;
}
.timeline-container.alternating .timeline-item:nth-child(even) .dot-container-none {
    left: -15px; /* Ajuste para Sin Forma */
}

/* --- Estilos del Modal (Previsualización de Exportación) --- */

.modal {
    display: none; 
    position: fixed;
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); 
}

.modal-content {
    background-color: #ffffff;
    margin: 5% auto; 
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 900px; 
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    position: relative;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
}

#modal-timeline-content {
    padding: 20px;
    border: 1px dashed #aaa;
    margin-top: 15px;
    /* Usa el color de fondo personalizado del cuerpo para simular el esquema final */
    background-color: var(--bg-color); 
}

/* El clon dentro del modal debe heredar los estilos base */
#timeline-for-export {
    margin: 0 auto; /* Asegura el centrado */
}

.modal-actions {
    text-align: right;
    margin-top: 30px;
}