/*
-- ===================================================================================
-- Empresa: Preparatoria la Salle del Pedregal
-- Proyecto: Sistema Integral de la Preparatoria la Salle del Pedregal - Promoción
-- Módulo: Registro a examen de admisión (aspirantes)
-- Archivo: examen_admision_registro_aspirante.css
-- Autor: Ing. Rodrigo Bass Vega
-- Objetivo:
--   Definir el diseño visual del wizard de registro a examen de admisión,
--   incluyendo:
--     - Paleta de colores institucional SIPS.
--     - Estilos del contenedor principal del wizard.
--     - Estilos de pasos laterales, barra de progreso y botones.
--     - Estilos de las cards de campos del formulario.
--     - Ajustes visuales para Select2 (escuela de procedencia).
-- Última Modificación: [, ]
-- Realizó:
-- Observaciones:
--   - Este archivo se carga en:
--       Examen_Admision_Registro_Aspirante.php
--   - Depende de Bootstrap 5 y Select2.
-- ===================================================================================
*/

/* ==========================================================================
   1. Paleta de colores SIPS (variables CSS)
   --------------------------------------------------------------------------
   Se definen como variables para poder reutilizarlas en todo el layout del
   wizard: azul institucional, rojo institucional, dorado y neutros.
   ========================================================================== */
:root {
  --sips: rgb(3,62,140);

  /* Gama de rojos institucionales */
  --rojo-170: #7a0f0d;
  --rojo-160: #a11717;
  --rojo-150: #e2211c;
  --rojo-110: #fde6e5;

  /* Dorados de apoyo */
  --dorado-110: #A57F2C;
  --dorado-210: #E6D194;

  /* Escala de grises / neutros */
  --neutro-800: #161A1D;
  --neutro-700: #575B5E;
  --neutro-300: #F3F3F3;
  --neutro-100: #FFFFFF;
}

/* Fondo general suave de la página del wizard */
body {
  background: #f5f3f7;
}

/* Header azul que se usa en la parte superior de cards (título del paso) */
.bg-sips {
  background-color: var(--sips) !important;
}

/* ==========================================================================
   2. Contenedor general del wizard
   --------------------------------------------------------------------------
   .wizard-container engloba todo el contenido del formulario (pasos,
   barra de progreso y contenido de cada paso).
   ========================================================================== */
.wizard-container {
  background: var(--neutro-100);
  border-radius: 18px;
  padding: 2rem 2.5rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  min-height: 480px;
}

/* ==========================================================================
   3. Columna izquierda: pasos del wizard
   --------------------------------------------------------------------------
   .wizard-steps: contenedor de la lista de pasos.
   .wizard-step: cada fila que representa un paso.
   ========================================================================== */

/* Contenedor de los pasos (lado izquierdo) */
.wizard-steps {
  background: #F3F4F6;
  border-radius: 16px;
  padding: 1.8rem 1.2rem;
  position: relative;
}

/* Cada paso de la lista lateral (número + etiqueta) */
.wizard-step {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  opacity: .7;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
}

.wizard-step:last-child {
  margin-bottom: 0;
}

/* Línea vertical que conecta los pasos (timeline) */
.wizard-step::before {
  content: "";
  position: absolute;
  left: 14px;        /* alineado con el centro del círculo (28px) */
  top: -10px;
  bottom: -10px;
  width: 2px;
  background: #E5E7EB;
  z-index: 0;
}

/* Al primer paso no se dibuja línea por encima */
.wizard-step:first-child::before {
  content: none;
}

/* Círculo con el número de paso */
.wizard-step-circle {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #D1D5DB;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: .75rem;
  font-size: .8rem;
  font-weight: 600;
  color: #6B7280;
  position: relative;
  z-index: 1;  /* por encima de la línea vertical */
}

/* Texto con el nombre del paso */
.wizard-step-label {
  font-size: .9rem;
  font-weight: 500;
  color: #374151;
}

/* Aumenta opacidad al pasar el mouse sobre el paso */
.wizard-step:hover {
  opacity: 1;
}

/* Paso activo (resaltado en rojo institucional y texto azul) */
.wizard-step.active .wizard-step-circle {
  border-color: var(--rojo-150);
  background-color: var(--rojo-150);
  color: #FFFFFF;
}

.wizard-step.active .wizard-step-label {
  color: var(--sips); /* azul SIPS para título del paso activo */
  opacity: 1;
}

/* Paso completado (círculo en verde) */
.wizard-step.completed .wizard-step-circle {
  border-color: #16A34A;
  background-color: #16A34A;
  color: #FFFFFF;
}

.wizard-step.completed .wizard-step-label {
  color: #166534;
}

/* ==========================================================================
   4. Contenido de los pasos (paneles)
   --------------------------------------------------------------------------
   Cada .step-panel corresponde al contenido de un paso.
   Sólo el que tiene la clase .active es visible.
   ========================================================================== */

/* Por defecto los paneles están ocultos */
.step-panel {
  display: none;
  min-height: 420px;
}

/* Panel visible (paso activo) */
.step-panel.active {
  display: block;
}

/* ==========================================================================
   5. Header de progreso (texto + barra)
   --------------------------------------------------------------------------
   Muestra "Paso X de Y", título del paso actual y la barra de progreso.
   ========================================================================== */
.wizard-progress-wrapper {
  margin-bottom: 1.5rem;
}

/* Texto auxiliar ("Paso X de Y") */
.wizard-progress-text {
  font-size: .85rem;
  color: #6b7280;
}

/* Título del paso actual (parte derecha del header) */
.wizard-progress-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sips) !important;
}

/* Contenedor de la barra de progreso */
.wizard-progress-bar {
  height: 6px;
  border-radius: 999px;
  background-color: #f3f4f6;
  overflow: hidden;
}

/* Relleno de la barra de progreso (se mueve en JS) */
.wizard-progress-bar-inner {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dorado-110), var(--dorado-210));
  transition: width .25s ease;
}

/* ==========================================================================
   6. Footer del wizard (botones Anterior / Siguiente / Guardar)
   ========================================================================== */

/* Contenedor del pie del wizard: borde superior + flex en botones */
.wizard-footer {
  border-top: 1px solid #e2e8f0;
  margin-top: 1.5rem;
  padding-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

/* Botón principal (Siguiente) con estilo SIPS */
.btn-sips-primary {
  background-color: var(--sips);
  border-color: var(--sips);
  color: #fff;
  border-radius: 999px;
  padding: .4rem 1.6rem;
  font-size: .9rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Hover ligeramente más oscuro para Siguiente */
.btn-sips-primary:hover {
  background-color: #022c63; /* un poco más oscuro que #033e8c */
  border-color: #022c63;
}

/* Botón “Anterior” tipo outline secundario */
.btn-outline-secondary {
  border-radius: 999px;
  padding: .4rem 1.4rem;
  font-size: .9rem;
  color: #4a5568;
  border-color: #cbd5e0;
}

.btn-outline-secondary:hover {
  background-color: #edf2f7;
  border-color: #cbd5e0;
}

/* Unificamos tamaños de todos los botones del footer */
.btn-sips-primary,
.btn-sips-primary:disabled,
.btn-outline-secondary,
.btn-outline-secondary:disabled {
  font-size: .9rem !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
}

/* Ajuste de padding específico para cada tipo */
.btn-sips-primary,
.btn-sips-primary:disabled {
  padding: .4rem 1.6rem !important;
}

.btn-outline-secondary,
.btn-outline-secondary:disabled {
  padding: .4rem 1.4rem !important;
}

/* ==========================================================================
   7. Estilos de las cards internas de los campos
   --------------------------------------------------------------------------
   Aquí se "limpia" el diseño original de mini-cards para que luzca
   más tipo formulario moderno (label arriba, input abajo).
   ========================================================================== */

/* Reset general de cards internas (nido de cards dentro de .step-panel) */
.step-panel .card .card {
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: none;
  background-color: #FFFFFF;
}

/* Header de la mini-card: se usa como etiqueta del campo (label) */
.step-panel .card .card .card-header {
  background: transparent !important;
  border: none;
  padding: .15rem .35rem .1rem;
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  color: #6c757d; /* similar al text-muted de Bootstrap */
  text-align: left;
}

/* Si por herencia viene un background rosita inline, se elimina */
.step-panel .card .card .card-header[style*="rgba(227, 28, 51, 0.1)"] {
  background: transparent !important;
}

/* Asterisco rojo de obligatorio se mantiene visible */
.step-panel .card .card .card-header .text-danger b {
  font-weight: 700;
}

/* Cuerpo de la mini-card (contenedor del input/select) */
.step-panel .card .card .card-body {
  padding: .35rem .5rem .6rem;
}

/* Inputs y selects internos con tamaño y radio moderados */
.step-panel .card .card .card-body input,
.step-panel .card .card .card-body select {
  font-size: .85rem;
  text-align: center;
  border-radius: 6px;
}

/* Borde y sombra de foco azulada al enfocar campos */
.step-panel .card .card .card-body input:focus,
.step-panel .card .card .card-body select:focus {
  box-shadow: 0 0 0 .15rem rgba(3, 62, 140, .15);
  border-color: var(--sips);
}

/* ==========================================================================
   8. Card principal por paso y estructura tipo "ficha"
   --------------------------------------------------------------------------
   - Se ajusta la card de cada step-panel para que funcione sólo como
     contenedor y no se vea como una card "gorda".
   - Se normalizan márgenes y separación entre columnas.
   ========================================================================== */

/* Card que envuelve todos los campos de un paso */
.step-panel > .card {
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
  background: #ffffff;
}

/* Mini-cards internas se vuelven contenedores planos (sin borde) */
.step-panel > .card .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* Encabezado del campo (label) */
.step-panel > .card .card-header {
  background: transparent !important;
  border: 0;
  padding: 0 0 4px 0;
  font-size: .8rem;
  font-weight: 500;
  color: #6b7280;
  text-align: left !important;  /* evita centrado de texto */
}

/* Elimina de nuevo cualquier fondo rosita heredado inline */
.step-panel > .card .card-header[style*="rgba(227, 28, 51, 0.1)"] {
  background: transparent !important;
}

/* Cuerpo de mini-card sólo contiene el input sin marco extra */
.step-panel > .card .card-body {
  padding: 0;
}

/* Separación vertical uniforme entre columnas con campos */
.step-panel > .card .col-lg-2,
.step-panel > .card .col-lg-3,
.step-panel > .card .col-lg-4,
.step-panel > .card .col-lg-6 {
  margin-bottom: 0.75rem;
}

/* =========================================================
   8.1 Ocultar la card grande "antigua" para dejar sólo el contenido
   ---------------------------------------------------------------
   En algunas vistas originales se usaba una card grande con header azul.
   Aquí se fuerza a que actúe sólo como contenedor transparente.
   ========================================================= */

/* Card grande que envuelve inputs de cada paso (se hace invisible) */
.step-panel > .card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0;
  padding: 0;
}

/* Se oculta el header azul interno si existía (ya tenemos el título arriba) */
.step-panel > .card > .card-header {
  display: none !important;
}

/* =========================================================
   8.2 Asegurar estilo "ficha" para mini-cards internas
   ========================================================= */
.step-panel > .card .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.step-panel > .card .card .card-header {
  background: transparent !important;
  border: 0;
  padding: 0 0 4px 0;
  font-size: .8rem;
  font-weight: 500;
  color: #6b7280;
  text-align: left;
}

.step-panel > .card .card .card-header[style*="rgba(227, 28, 51, 0.1)"] {
  background: transparent !important;
}

.step-panel > .card .card .card-body {
  padding: 0;
}

.step-panel > .card .col-lg-2,
.step-panel > .card .col-lg-3,
.step-panel > .card .col-lg-4,
.step-panel > .card .col-lg-6 {
  margin-bottom: .75rem;
}

/* ==========================================================================
   9. Ajustes visuales para Select2 (combo de escuela)
   --------------------------------------------------------------------------
   Se busca que el Select2 luzca similar a un .form-control-sm de Bootstrap,
   alineado al centro para mantener consistencia con el resto de inputs.
   ========================================================================== */

/* Contenedor principal del select de una sola selección en Select2 */
.select2-container--default .select2-selection--single {
  height: 31px;              /* altura pareja a .form-control-sm */
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  display: flex;
  align-items: center;
}

/* Texto mostrado dentro del Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: .85rem;
  width: 100%;
  text-align: center;        /* alinea el texto al centro como los demás campos */
}

/* Flecha del Select2 ajustada a la altura total del componente */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}