/**
 * AGH Matricula Form Styles
 */

/* ========== Base ========== */
html { scroll-behavior: smooth; }
.agh-root { min-height:100vh; padding:24px 0; background: radial-gradient(ellipse at center, #f1f5f9 0%, #ffffff 70%); font-family:'Roboto Condensed',Arial,sans-serif!important; }

/* ========== Header ========== */
.agh-form-header { font-family:'Roboto Condensed',Arial,sans-serif!important; text-align:center; margin-bottom:28px; }
.agh-form-header h1 { font-family:'Roboto Condensed',Arial,sans-serif!important; font-size:2.8em; font-weight:900; letter-spacing:-1px; margin:0 0 10px 0; color:#1453a7; text-shadow: 0 2px 4px rgba(20,83,167,0.08); }
.agh-form-header p, .agh-form-header { color:#64748b; font-size:1.1em; }

/* ========== Stepper ========== */
.agh-stepper-wrap { display:flex; justify-content:center; width:100%; margin-bottom:20px; padding: 0 16px; box-sizing: border-box; }
.agh-stepper { display:flex; align-items:center; justify-content:center; width:80%; max-width:480px; min-width:280px; position:relative; gap:0; }
.agh-step { display:flex; flex-direction:column; align-items:center; flex:1 1 0; position:relative; }
.agh-step-circle {
  width:52px; height:52px;
  border:3px solid #e2e8f0;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  color:#94a3b8;
  font-size:1.4em; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; z-index:2; position:relative; box-sizing:content-box;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.agh-step-circle.active {
  border-color:#1684d6;
  background: linear-gradient(145deg, #eaf3ff 0%, #dbeafe 100%);
  color:#1684d6;
  box-shadow: 0 0 0 4px rgba(22,132,214,0.15), 0 4px 12px rgba(22,132,214,0.2);
  transform: scale(1.08);
  animation: stepPulse 2s ease-in-out infinite;
}
.agh-step-circle.done {
  border-color:#10b981;
  background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
  color:#059669;
  box-shadow: 0 2px 8px rgba(16,185,129,0.2);
}
.agh-step-bar {
  position:absolute; top:50%; left:100%;
  height:4px; width:calc(100% - 10px);
  background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 100%);
  z-index:0; transform:translateY(-50%);
  border-radius:4px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.agh-step:last-child .agh-step-bar { display:none; }
.agh-step-label {
  margin-top:10px; font-size:0.95em; color:#64748b; font-weight:600;
  text-align:center; letter-spacing:.02em; width:fit-content;
  transition: all 0.3s ease;
}
.agh-step-circle.active + .agh-step-label,
.agh-step-circle.active ~ .agh-step-label { color:#1684d6; font-weight:700; }
.agh-step-circle.done + .agh-step-label { color:#059669; }

/* ========== Card Containers ========== */
.agh-enroll-main {
  background:#fff; border-radius:20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.02), 0 10px 30px rgba(22,132,214,0.08);
  max-width:800px; width:92vw; margin:0 auto 40px;
  padding:32px 36px; border-left:6px solid #1684d6; box-sizing:border-box;
  transition: box-shadow 0.3s ease;
}
.agh-enroll-main:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.03), 0 14px 40px rgba(22,132,214,0.12); }
.agh-enroll-step { display:none; animation: fadeIn 0.4s ease; }
.agh-enroll-step.active { display:block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== Step 1 fields grid ========== */
.agh-enroll-fields { display:grid; grid-template-columns:1fr 1fr; row-gap:12px; column-gap:16px; margin-bottom:10px; }
.agh-enroll-field { display:flex; flex-direction:column; gap:8px; }
.agh-enroll-field label { font-weight:700; font-size:1em; color:#1684d6; margin-bottom:0; }
.agh-enroll-field input, .agh-enroll-field select {
  padding:12px 14px; border:2px solid #e2e8f0; border-radius:10px;
  background:#fafbfc; color:#181b1e; font-size:1em; box-sizing:border-box;
  transition: all 0.25s ease;
}
.agh-enroll-field input:hover, .agh-enroll-field select:hover { border-color:#cbd5e1; background:#fff; }
.agh-enroll-field input:focus, .agh-enroll-field select:focus { border-color:#1684d6; outline:none; box-shadow:0 0 0 4px rgba(22,132,214,0.1); background:#fff; }

/* Errors */
.error-message { color:#d90000; font-size:.85em; min-height:18px; margin-top:2px; }

/* Radios inline */
.agh-radio-row { display:flex; align-items:center; gap:12px; flex-direction:row; width:100%; margin:0; padding:8px 0; }
.agh-radio-row > label { min-width:180px; font-weight:700; color:#1684d6; margin:0; }
.agh-radio-opt { display:flex; flex-direction:row; gap:16px; align-items:center; }
.agh-radio-opt label { display:flex; align-items:center; gap:6px; white-space:nowrap; color:#222 !important; font-weight:400; cursor:pointer; }
.agh-radio-opt input[type="radio"] { width:18px; height:18px; cursor:pointer; }

/* ========== Step 2 rows/cols ========== */
.agh-enroll-row { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.agh-enroll-col { flex:1 1 200px; background:#f8fafc; border-radius:10px; box-shadow:0 1px 4px rgba(20,83,167,0.06); padding:16px; box-sizing:border-box; border:1px solid #e8f0f8; }
.agh-enroll-col label { margin-bottom:8px; display:block; font-weight:700; color:#1684d6; }
.agh-enroll-col select { width:100%; padding:10px 12px; border:1.5px solid #dde6f4; border-radius:8px; background:#fff; font-size:1em; cursor:pointer; transition:border-color .15s; }
.agh-enroll-col select:focus { border-color:#1684d6; outline:none; box-shadow:0 0 0 3px rgba(22,132,214,0.12); }

/* Checkboxes (courses) */
.agh-checkbox-list { display:flex; gap:12px; margin:8px 0; }
.agh-checkbox-list label { display:flex; align-items:center; gap:6px; font-weight:600; color:#222; cursor:pointer; }
.agh-checkbox-list input[type="checkbox"] { width:18px; height:18px; cursor:pointer; }

/* Subjects lists/cards */
.agh-subjects-block { margin-top:16px; }
.agh-subject-group { margin-bottom:20px; }
.agh-subject-group-title { font-size:1.25em; font-weight:800; color:#1453a7; margin-bottom:14px; margin-left:6px; }
.agh-subjects-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.agh-subject-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border:2px solid #e2e8f0; border-radius:12px; padding:14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02), 0 4px 8px rgba(20,83,167,0.04);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor:pointer;
}
.agh-subject-card:hover {
  border-color:#1684d6;
  box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 8px 20px rgba(22,132,214,0.12);
  transform: translateY(-3px);
}
.agh-subject-card.selected {
  border-color:#1684d6; border-width:2.5px;
  background: linear-gradient(145deg, #eef6ff 0%, #dbeafe 100%);
  box-shadow: 0 0 0 3px rgba(22,132,214,0.1), 0 4px 12px rgba(22,132,214,0.15);
}
.agh-subject-title { font-weight:700; color:#1684d6; font-size:0.95em; text-align:center; }
.agh-modalidad-list { display:flex; gap:15px; }

/* ========== Actions (buttons) ========== */
.agh-enroll-actions { display:flex; justify-content:flex-end; gap:14px; margin-top:28px; }
.agh-enroll-next, .agh-enroll-back {
  padding:14px 32px; border:none; border-radius:12px;
  font-weight:700; font-size:1.05em; cursor:pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; overflow: hidden;
}
.agh-enroll-back {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  color:#1684d6; border:2px solid #e2e8f0;
}
.agh-enroll-back:hover {
  background: linear-gradient(145deg, #f0f7ff 0%, #e0ebff 100%);
  border-color:#1684d6; transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 8px 16px rgba(22,132,214,0.1);
}
.agh-enroll-next {
  background: linear-gradient(135deg, #1684d6 0%, #22a8ee 50%, #1684d6 100%);
  background-size: 200% 100%;
  color:#fff; border:2px solid transparent;
}
.agh-enroll-next:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 8px 20px rgba(22,132,214,0.3);
  background-position: 100% 0;
}
.agh-enroll-next:disabled { background:#cbd5e1; color:#94a3b8; cursor:not-allowed; box-shadow:none; }

/* ========== Step 4 review / confirm ========== */
.agh-review-wrap {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border:2px solid #e2e8f0; border-radius:16px; padding:24px;
}
.agh-review-title { font-weight:800; color:#1453a7; margin:0 0 18px 0; font-size:1.15em; }
.agh-review-pre {
  background:#fff; border:2px solid #e2e8f0; padding:20px; border-radius:12px;
  white-space:pre-wrap; font-family:inherit; line-height:1.7; font-size:0.95em;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.agh-review-note {
  margin-top:20px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border:2px dashed #fbbf24; padding:16px 18px; border-radius:12px;
  font-weight:500; line-height:1.6; color:#92400e;
}
.agh-review-actions { display:flex; justify-content:flex-end; gap:14px; margin-top:24px; }

/* Final confirm */
.agh-enroll-confirm-block { padding:28px 20px; text-align:center; }
.agh-enroll-confirm-block .icon-done {
  font-size:4em; color:#10b981; margin-bottom:16px; display:block;
  animation: bounceIn 0.6s ease;
}
@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.agh-enroll-confirm-block h2 { color:#059669; font-size:1.5em; margin:0 0 20px 0; font-weight:800; }
.agh-pay-info {
  background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
  color:#1e293b; padding:20px; border-radius:14px; display:block;
  font-weight:500; margin:20px 0; line-height:1.7;
  border:2px solid #fbbf24; text-align:left;
  box-shadow: 0 4px 12px rgba(251,191,36,0.15);
}

/* ========== Discover section ========== */
.agh-discover-block { margin-top:8px; display:flex; flex-direction:column; gap:12px; }
.agh-who-block { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.agh-who-block input { padding:10px 12px; border:1.5px solid #dde6f4; border-radius:8px; background:#fff; font-size:1em; }
.agh-who-block input:focus { border-color:#1684d6; outline:none; box-shadow:0 0 0 3px rgba(22,132,214,0.12); }
.agh-enroll-fields .agh-radio-row { grid-column:span 2; }
.agh-enroll-fields #agh-discover-block { grid-column:span 2; }
.agh-discover-checks { display:flex; flex-wrap:wrap; gap:10px 24px; max-width:100%; margin:0; width:100%; }
.agh-discover-checks label { display:flex; align-items:center; gap:8px; color:#222 !important; font-weight:400; white-space:normal; word-break:break-word; width:calc(50% - 12px); min-width:150px; margin:0; cursor:pointer; }
.agh-discover-checks input[type="checkbox"] { width:18px; height:18px; cursor:pointer; flex-shrink:0; }

/* Tip above subjects */
.agh-subjects-tip{
  display:none;
  text-align:center;
  color:#64748b;
  font-size:.95em;
  margin:8px 0 16px;
  padding:10px;
  background:#f8fafc;
  border-radius:8px;
  border:1px dashed #dde6f4;
}

/* Step 3 Options */
.agh-options-header h3 { margin:0 0 6px 0; }
.agh-options-header p { margin:0; }
#agh-options-wrapper { margin-top:16px; }

/* ========== Course Type Selector (inline in Step 1) ========== */
.agh-type-cards { display:flex; gap:12px; }
.agh-type-card { flex:1; background:#fff; border:2px solid #e2e8f0; border-radius:12px; padding:14px 10px; cursor:pointer; transition:all 0.2s ease; text-align:center; }
.agh-type-card:hover { border-color:#1684d6; transform:translateY(-2px); box-shadow:0 4px 16px rgba(22,132,214,0.12); }
.agh-type-card.selected { border-color:#1684d6; background:linear-gradient(135deg,#f0f7ff 0%,#e0efff 100%); box-shadow:0 4px 16px rgba(22,132,214,0.18); }
.agh-type-icon { font-size:1.6em; margin-bottom:4px; }
.agh-type-card h3 { font-size:1em; font-weight:800; color:#1453a7; margin:0; }
.agh-type-card[data-type="intensivo"]:hover { border-color:#f97316; }
.agh-type-card[data-type="intensivo"].selected { border-color:#f97316; background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%); box-shadow:0 4px 16px rgba(249,115,22,0.15); }
.agh-type-card[data-type="intensivo"] h3 { color:#c2410c; }

/* Active step pulse animation */
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(22,132,214,0.15), 0 4px 12px rgba(22,132,214,0.2); }
  50% { box-shadow: 0 0 0 8px rgba(22,132,214,0.1), 0 4px 16px rgba(22,132,214,0.25); }
}

/* ========== Mobile ========== */
@media(max-width:700px){
  .agh-root { padding: 20px 0; }
  .agh-form-header { margin-bottom: 20px; }
  .agh-form-header h1 { font-size: 2.2em; }
  .agh-stepper-wrap { margin-bottom: 20px; }
  .agh-stepper { max-width:100%; min-width:0; width:95%; }
  .agh-step-circle { width:40px; height:40px; font-size:1.1em; }
  .agh-step-circle.active { transform: scale(1.05); }
  .agh-step-bar { height:3px; width:calc(100% - 6px); }
  .agh-step-label { font-size:.8em; margin-top:6px; }
  .agh-enroll-main { width:94vw; padding:20px 16px; border-radius:16px; }
  .agh-enroll-fields { grid-template-columns:1fr !important; row-gap:16px; }
  .agh-enroll-field { grid-column:auto !important; width:100%; }
  .agh-radio-row { grid-column:auto !important; width:100%; flex-direction:column; align-items:flex-start; gap:10px; padding:10px 0; }
  .agh-radio-row > label { min-width:auto; margin-bottom:4px; }
  .agh-radio-opt { margin-top:0; }
  .agh-enroll-row { flex-direction:column; gap:12px; }
  .agh-enroll-col { flex:0 0 auto; padding:14px; margin-bottom:0; }
  .agh-enroll-col label { margin:0 0 10px; }
  .agh-checkbox-list { margin:10px 0; flex-wrap:wrap; }
  .agh-subjects-list { grid-template-columns:1fr; gap:10px; }
  .agh-subject-card { padding:16px 14px; }
  .agh-enroll-actions { flex-direction:column; gap:12px; margin-top:20px; }
  .agh-enroll-next, .agh-enroll-back { width:100%; margin:0; padding:16px 24px; }
  .agh-discover-checks { flex-direction:column; gap:12px; }
  .agh-discover-checks label { width:100%; }
  .agh-type-card { padding:12px 8px; }
  .agh-type-icon { font-size:1.3em; }
  .agh-type-card h3 { font-size:0.9em; }
}

/* Placeholders color */
::-webkit-input-placeholder { color:#a1a6ab!important; }
::-moz-placeholder { color:#a1a6ab!important; }
:-ms-input-placeholder { color:#a1a6ab!important; }
::placeholder { color:#a1a6ab!important; }