/**
 * Warhammer Reservas - Estilos Públicos Finales
 * Versión 4.0 - Código completo, refactorizado e incluyendo todos los componentes
 */

/* ==========================================================================
   1. ESTILOS BASE Y CONTENEDORES PRINCIPALES (Móvil Primero)
   ========================================================================== */

.warhammer-multistep-form {
    max-width: 900px;
    margin: 2em auto;
    background: #fff;
    padding: 20px 15px; /* Padding ajustado para móvil */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.form-layout-container {
    display: flex;
    flex-direction: column; /* Apilado por defecto (Móvil) */
}

.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.step-title { text-align: center; margin-bottom: 25px; font-size: 1.8em; }

/* ==========================================================================
   2. STEPPER DE PASOS (Móvil Primero)
   ========================================================================== */

.form-stepper {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
    width: 100%;
}
.form-stepper .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    color: #aaa;
    font-weight: 500;
    z-index: 1;
    flex: 1;
}
.form-stepper .step-label {
    display: none; /* Ocultamos el texto en móvil por defecto */
}
.form-stepper .step-icon {
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    transition: all 0.3s ease;
}
/* Estado activo: icono y texto en morado y negrita */
.form-stepper .step.active {
    color: #9d45b4;
    font-weight: bold;
}
/* Línea inferior para el paso activo en MÓVIL */
.form-stepper .step.active::after {
    content: '';
    position: absolute;
    bottom: -8px; /* Distancia de la línea al icono */
    height: 3px;
    width: 60%; /* Ancho de la línea */
    background-color: #9d45b4;
    border-radius: 2px;
}
.form-stepper .step.active .step-icon {
    color: #9d45b4;
}

/* ==========================================================================
   3. CONTENIDO DE LOS PASOS DEL FORMULARIO (Móvil Primero)
   ========================================================================== */

.category-selection-grid, .game-selection-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.category-card, .game-card { padding: 15px; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; }
.category-card:hover, .game-card:hover { border-color: #9d45b4; }
.category-card.selected, .game-card.selected { border-color: #9d45b4; background-color: #f9f2fc; }
.category-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; }
.category-card span { font-weight: bold; }
.game-card h5 { font-weight: bold; margin: 0 0 5px 0; }
.game-card p { margin: 0; font-size: 0.9em; color: #777; }

.date-time-container { display: flex; flex-direction: column; gap: 30px; }
#turnos-container, .turnos-selection, .turno-card { width: 100%; box-sizing: border-box; }
.turnos-selection { display: flex; flex-direction: column; gap: 10px; }
.turno-card { padding: 15px; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; text-align: center; font-weight: bold; transition: all 0.2s ease; }
.turno-card:hover:not(.disabled) { border-color: #9d45b4; }
.turno-card.selected { border-color: #9d45b4; background: #f9f2fc; }
.turno-card.disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; border-color: #eee; }

.players-details-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.player-column { background-color: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 20px; }
.player-column h4 { margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.form-field { margin-bottom: 15px; }
.form-field label { display: block; font-weight: bold; margin-bottom: 8px; color: #333; }
.form-field input[type="text"], .form-field select, .form-field textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 1em; box-sizing: border-box; }
.current-player-name { font-size: 1.1em; background: #f0f0f0; padding: 12px; border-radius: 5px; display: block; }

.form-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }
.button-link-style { background: none; border: none; padding: 0; color: #9d45b4; text-decoration: underline; cursor: pointer; font-size: 1em; }
.button-primary-style { background-color: #9d45b4; color: #ffffff; border: none; padding: 12px 24px; font-size: 1.1em; font-weight: bold; border-radius: 5px; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease; }
.button-primary-style:hover { background-color: #7b2e91; color: #ffffff; }

/* ==========================================================================
   4. ESTILOS DEL CALENDARIO FLATPICKR
   ========================================================================== */

.warhammer-multistep-form .flatpickr-calendar { width: 100%;
    max-width: 350px;
    padding: 15px 0; /* <-- Cambiado a 15px arriba/abajo y 0 a los lados */
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    font-family: sans-serif;
    box-sizing: border-box;
}
.warhammer-multistep-form .flatpickr-innerContainer { padding: 0 !important; }
.warhammer-multistep-form .flatpickr-rContainer { width: 100%; }
.warhammer-multistep-form .flatpickr-months { padding: 10px 0; margin-bottom: 10px; position: relative; text-align: center; }
.warhammer-multistep-form .flatpickr-current-month { font-weight: bold; font-size: 1.1em; color: #333; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.warhammer-multistep-form .flatpickr-prev-month, .warhammer-multistep-form .flatpickr-next-month { top: 10px; cursor: pointer; padding: 5px; border-radius: 4px; transition: background-color 0.2s ease; }
.warhammer-multistep-form .flatpickr-prev-month:hover, .warhammer-multistep-form .flatpickr-next-month:hover { background-color: #f9f2fc; }
.warhammer-multistep-form .flatpickr-prev-month svg, .warhammer-multistep-form .flatpickr-next-month svg { width: 14px; height: 14px; fill: #9d45b4; }
.warhammer-multistep-form .flatpickr-weekday { color: #777; font-size: 0.8em; text-transform: uppercase; font-weight: normal; display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columnas iguales */
    text-align: center;}
.warhammer-multistep-form .dayContainer { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
/* --- Celdas de los días ("las bolas") - Técnica Robusta --- */
.warhammer-multistep-form .flatpickr-day {
  border-radius: 50% !important; /* Fuerza la forma circular */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 35px; /* Altura de línea fija para crear el espacio */
    width: 35px;       /* Ancho fijo */
    height: 35px;      /* Alto fijo */
    padding: 0;        /* Sin padding que afecte el tamaño */
    margin: auto;      /* Centra la bola en la celda de la rejilla */
    border: 1px solid transparent;
    color: #444;
    transition: background-color 0.2s, color 0.2s;
}

/* Contenedor para centrar el número dentro de la "bola" */
.warhammer-multistep-form .flatpickr-day span.flatpickr-day-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}
/* -- Lógica de Colores y Estados -- */
.warhammer-multistep-form .flatpickr-day.dia-free { background: #e8f5e9 !important; color: #2e7d32 !important; }
.warhammer-multistep-form .flatpickr-day.dia-partial { background: #fff3e0 !important; color: #e65100 !important; }
.warhammer-multistep-form .flatpickr-day.dia-full { background: #ffebee !important; color: #b71c1c !important; }
.warhammer-multistep-form .flatpickr-day:not(.flatpickr-disabled):hover { background-color: #f9f2fc !important; }
.warhammer-multistep-form .flatpickr-day.today { border-color: #9d45b4; font-weight: normal; }
.warhammer-multistep-form .flatpickr-day.selected { background-color: #9d45b4 !important; border-color: #9d45b4 !important; color: #fff !important; }
.warhammer-multistep-form .flatpickr-day.selected:hover { background-color: #7b2e91 !important; border-color: #7b2e91 !important; }
.warhammer-multistep-form .flatpickr-day.flatpickr-disabled, .warhammer-multistep-form .flatpickr-day.flatpickr-disabled:hover { background: #f5f5f5 !important; color: #d0d0d0 !important; text-decoration: none; cursor: not-allowed; border-color: transparent !important; }

@media (max-width: 767px){
.warhammer-multistep-form .flatpickr-day {
    width: 30px;
    height: 30px;
    line-height: 30px; /* Asegura el centrado vertical del número */
    font-size: 0.8em;  /* Hacemos el número un poco más pequeño */
}
}


/* ==========================================================================
   5. LISTADO DE PARTIDAS (SHORTCODE)
   ========================================================================== */

.reservas-day-group { margin-bottom: 40px; }
.reservas-day-group h2 { display: flex; align-items: center; gap: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; }
.reservas-day-group h2 .dashicons { font-size: 28px; color: #555; }
.time-slot-group h3 { font-size: 1.2em; color: #555; margin-top: 0; }
.match-card { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 10px; background: #fff; border: 1px solid #ddd; border-left-width: 5px; border-radius: 5px; margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.match-card[data-category="age-of-sigmar"] { border-left-color: #f0ad4e; background-color: #fcf8e3; }
.match-card[data-category="warhammer-40k"] { border-left-color: #337ab7; background-color: #d9edf7; }
.match-card[data-category="the-old-world"] { border-left-color: #5cb85c; background-color: #dff0d8; }
.match-card[data-category="the-horus-heresy"] { border-left-color: #444444; background-color: #eeeeee; }
.player-info { flex-direction: column; gap: 8px; flex: 1; min-width: 0; display: flex; align-items: center; }
.player-details { order: 2; text-align: center; }
.army-icon-wrapper { order: 1; }
.player-name { font-weight: bold; font-size: 1em; color: #333; text-decoration: none; line-height: 1.2; }
.player-name:hover { text-decoration: underline; }
.player-army { color: #777; font-style: italic; font-size: 0.9em; }
.army-icon { width: 45px; height: 45px; object-fit: contain; border-radius: 50%; background: rgba(0,0,0,0.05); }
.game-info-center { text-align: center; padding: 0 5px; flex: 0.8; }
.game-category { display: block; font-size: 0.8em; text-transform: uppercase; color: #777; }
.game-name { display: block; font-weight: bold; font-size: 1.1em; }
.vs-separator { font-size: 1.5em; font-weight: bold; color: #aaa; margin: 8px 0; }


/* ==========================================================================
   6. PÁGINA DE RESUMEN DE RESERVA
   ========================================================================== */

.reserva-summary-container { max-width: 700px; margin: 2em auto; text-align: center; background: #fff; padding: 30px 15px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.summary-title { font-size: 2em; margin-bottom: 10px; color: #4CAF50; }
.summary-subtitle { font-size: 1.1em; color: #777; margin-bottom: 30px; }
.reserva-details { background-color: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 20px; margin-bottom: 20px; text-align: left; }
.reserva-details ul { list-style: none; padding: 0; margin: 0; }
.reserva-details li { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #e5e5e5; }
.reserva-details li:last-child { border-bottom: none; }
.reserva-details li strong { color: #333; margin-bottom: 5px; }
.reserva-details li span { color: #555; text-align: left; }
.summary-footer { font-size: 0.9em; color: #888; margin-bottom: 30px; }
.reserva-actions { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.reserva-actions .button { text-decoration: none; border: none; padding: 12px 24px; font-size: 1em; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.2s ease; width: 100%; box-sizing: border-box; }
.button-secondary-style { background-color: #f0f0f0; color: #555; border: 1px solid #ddd; }
.button-secondary-style:hover { background-color: #e0e0e0; color: #333; }
.button-cancel-style { background-color: transparent; color: #f44336; border: 1px solid #f44336; }
.button-cancel-style:hover { background-color: #fbe9e7; color: #d32f2f; border-color: #d32f2f; }


/* ==========================================================================
   6. VISTA DE ESCRITORIO (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {
    .warhammer-multistep-form {
        padding: 30px 40px;
    }
    
    /* --- Layout Principal en 2 columnas --- */
    .form-layout-container {
        flex-direction: row;
        gap: 40px;
    }
    #warhammer-reserva-form {
        flex-grow: 1;
        width: 100%;
        border-left: 1px solid #eee;
        padding-left: 40px;
    }

    /* --- Stepper Vertical --- */
    .form-stepper {
        flex-basis: 220px;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px; /* Menos espacio entre pasos */
        margin-bottom: 0;
        padding-top: 10px;
    }
    .form-stepper .step {
        flex-direction: row;
        gap: 15px;
    }
    .form-stepper .step-label {
        display: block;
    }
    .form-stepper .step.active .step-label {
        color: #333; /* Hacemos el texto del label activo más oscuro */
        border-bottom: 2px solid #9d45b4; /* Subrayado en el texto */
    padding-bottom: 2px; /* Espacio para que el subrayado respire */
    }
    .form-stepper .step.active::after {
    display: none; /* Ocultamos la línea inferior en la vista de escritorio */
}

    /* --- Contenido de los pasos en Escritorio --- */
    .category-selection-grid, .game-selection-grid, .players-details-grid {
        grid-template-columns: 1fr 1fr;
    }
    .date-time-container {
        flex-direction: row;
        justify-content: space-between;
        gap: 30px;
    }
    #calendario-inline + .flatpickr-calendar {
        flex-basis: 60%;
    }
    #turnos-container {
        flex-basis: 40%;
    }
    .players-details-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* --- Listado de Partidas en Escritorio --- */
    .match-card {
        padding: 20px;
    }
    .player-info {
        flex-direction: row;
        text-align: left;
    }
    .player-info.opponent .player-details {
        align-items: flex-end;
    }
    .player-details {
        order: initial;
    }
    .army-icon-wrapper {
        order: initial;
    }
    .player-name {
        font-size: 1.2em;
    }
    .army-icon {
        width: 60px;
        height: 60px;
    }


    /* --- Resumen de Reserva en Escritorio --- */
    .reserva-summary-container {
        padding: 40px 50px;
    }
    .summary-title {
        font-size: 2.5em;
    }
    .reserva-details li {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .reserva-details li strong {
        margin-bottom: 0;
    }
    .reserva-details li span {
        text-align: right;
    }
    .reserva-actions {
        flex-direction: row;
    }
    .reserva-actions .button {
        width: auto;
        flex-grow: 0;
    }
}