/* ========================================
   FORMULARIO DE INSCRIPCIÓN - TAQUILLERÍA
   Colores oficiales Canguro Matemático:
   Naranja: #FF6B35 | Azul: #004E89 | Amarillo: #FFD23F | Verde: #06A77D | Rojo: #D62828
   ======================================== */

/* Wrapper principal */
.inscripcion-wrapper {
    background: linear-gradient(135deg, #004E89 0%, #FF6B35 100%);
    min-height: 100vh;
    padding: 1rem 0 3rem;
}

/* Colores utilitarios */
.text-azul { color: #004E89; }
.text-naranja { color: #FF6B35; }
.text-verde { color: #06A77D; }
.text-rojo { color: #D62828; }
.text-amarillo { color: #FFD23F; }

.bg-azul { background-color: #004E89; }
.bg-naranja { background-color: #FF6B35; }
.bg-verde { background-color: #06A77D; }
.bg-rojo { background-color: #D62828; }

.btn-azul {
    background: linear-gradient(135deg, #004E89, #003d6b);
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 8px;
    font-weight: 600;
}
.btn-azul:hover { background: linear-gradient(135deg, #003d6b, #002d4f); color: white; transform: translateY(-1px); }

.btn-rojo {
    background: linear-gradient(135deg, #D62828, #b82222);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
}
.btn-rojo:hover { background: linear-gradient(135deg, #b82222, #9a1c1c); color: white; }

/* Indicador de Pasos */
.steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.5;
    transition: all 0.3s ease;
}
.step-item.active { opacity: 1; }
.step-item.completed { opacity: 1; }

.step-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #6c757d;
    transition: all 0.3s ease;
    border: 3px solid #e9ecef;
}
.step-item.active .step-circle {
    background: #004E89;
    color: white;
    border-color: #004E89;
    box-shadow: 0 0 15px rgba(0, 78, 137, 0.4);
}
.step-item.completed .step-circle {
    background: #06A77D;
    color: white;
    border-color: #06A77D;
}

.step-label {
    margin-top: 8px;
    font-weight: 600;
    font-size: 12px;
    color: #6c757d;
}
.step-item.active .step-label { color: #004E89; }
.step-item.completed .step-label { color: #06A77D; }

.step-line {
    width: 60px;
    height: 3px;
    background: #e9ecef;
    margin: 0 8px;
    position: relative;
    top: -15px;
}

/* Contenido de Pasos */
.paso-content {
    display: none;
    animation: fadeInPaso 0.4s ease;
}
.paso-content.active { display: block; }

@keyframes fadeInPaso {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Opciones del formulario (Paso 1) */
.opcion-formulario {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}
.opcion-formulario:hover {
    border-color: #004E89;
    box-shadow: 0 4px 12px rgba(0, 78, 137, 0.15);
    transform: translateY(-2px);
}
.opcion-formulario.selected {
    border-color: #004E89;
    background: linear-gradient(135deg, rgba(0, 78, 137, 0.05), rgba(255, 107, 53, 0.05));
}
.opcion-formulario input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #004E89;
}
.opcion-formulario label { cursor: pointer; margin-bottom: 0; }

/* Opciones de acompañante */
.opcion-acompanante {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.opcion-acompanante:hover { border-color: #06A77D; }
.opcion-acompanante.selected { border-color: #06A77D; background: rgba(6, 167, 125, 0.05); }
.opcion-acompanante input[type="radio"] { accent-color: #06A77D; }

/* Tarjeta de estudiante */
.estudiante-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    background: white;
    position: relative;
    transition: border-color 0.2s;
}
.estudiante-card:hover { border-color: #FFD23F; }
.estudiante-card .badge-numero {
    position: absolute;
    top: -10px;
    left: 15px;
    background: #004E89;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.estudiante-card .btn-eliminar-estudiante {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #D62828;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.6;
}
.estudiante-card .btn-eliminar-estudiante:hover { opacity: 1; }

/* Tarjeta de acompañante */
.acompanante-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    background: white;
    position: relative;
}
.acompanante-card:hover { border-color: #06A77D; }
.acompanante-card .badge-numero {
    position: absolute;
    top: -10px;
    left: 15px;
    background: #06A77D;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.acompanante-card .btn-eliminar-acompanante {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #D62828;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.6;
}
.acompanante-card .btn-eliminar-acompanante:hover { opacity: 1; }

/* Artículos */
.articulo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: white;
}
.articulo-item .articulo-info { flex: 1; }
.articulo-item .articulo-precio { font-weight: 700; color: #FF6B35; min-width: 100px; text-align: right; }
.articulo-item .articulo-cantidad {
    width: 70px;
    text-align: center;
    margin-left: 12px;
}

/* Sidebar resumen */
.sidebar-linea {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px dashed #eee;
}
.sidebar-linea:last-child { border-bottom: none; }
.sidebar-linea .linea-concepto { color: #555; flex: 1; }
.sidebar-linea .linea-monto { font-weight: 600; color: #333; white-space: nowrap; margin-left: 8px; }

/* Cards generales */
.card { border: none; border-radius: 15px; }
.card-header { border-radius: 15px 15px 0 0 !important; }

/* Inputs */
.form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    padding: 8px 12px;
}
.form-control:focus {
    border-color: #004E89;
    box-shadow: 0 0 0 0.2rem rgba(0, 78, 137, 0.2);
}

/* Evento checkbox estilizado */
.evento-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 14px;
    margin-right: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.evento-check:hover { border-color: #004E89; }
.evento-check.checked { border-color: #004E89; background: rgba(0, 78, 137, 0.08); }
.evento-check input[type="checkbox"] { accent-color: #004E89; }

/* PayPal container */
#paypal-button-container { max-width: 400px; margin: 0 auto; }

/* Responsive */
@media (max-width: 768px) {
    .inscripcion-wrapper { padding: 0.5rem 0 2rem; }
    .steps-indicator { padding: 8px 0; }
    .step-circle { width: 40px; height: 40px; font-size: 16px; }
    .step-line { width: 30px; top: -12px; }
    .step-label { font-size: 10px; }
    .estudiante-card, .acompanante-card { padding: 15px; }
}