/**
 * STAGE DESIGN SYSTEM
 * Centralized styles for all stage templates
 * Created: 2026-01-06
 *
 * This file defines the official color palette, typography, and button styles
 * for all stages in the SAI system.
 */

/* ============================================
   COLOR PALETTE
   ============================================ */

:root {
  /* Primary Colors */
  --stage-primary-cyan: #00aaff;
  --stage-primary-blue-gray: #607d8b;
  --stage-primary-dark-blue: #356075;
  --stage-primary-dark: #003049;

  /* Secondary Colors */
  --stage-secondary-green: #529D58;
  --stage-secondary-red: #d9534f;
  --stage-secondary-teal: #009688;

  /* Circle Button Colors (Categorized by Service) */
  --circle-otras-atenciones: #D45602;  /* Orange */
  --circle-enfermeria: #5B2EA1;        /* Purple */
  --circle-vacunatorio: #02ABD4;       /* Cyan */
  --circle-farmacia: #228B22;          /* Green */
  --circle-leche: #E6B620;             /* Gold */
  --circle-medicina-general: #D42CFF;  /* Magenta */

  /* Text Colors */
  --stage-text-light: #dee5e9;         /* Light gray - for dark backgrounds */
  --stage-text-dark: #424242;          /* Dark gray - for light backgrounds */
  --stage-text-white: #ffffff;         /* Pure white */
  --stage-text-black: #000000;         /* Pure black */

  /* Background Colors */
  --stage-bg-light: #f8f9fa;           /* Light gray background */
  --stage-bg-white: #ffffff;           /* White background */
  --stage-bg-error: #d9534f;           /* Red for error cards */
}

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

/* Main Stage Titles (.title-flow) */
.stage-title-primary {
  font-size: 4rem;                     /* 64px - Desktop default */
  font-weight: 600;
  color: var(--stage-text-dark);
  text-align: center;
  margin-bottom: 40px;
}

/* Responsive Typography */
@media (max-width: 1024px) {
  .stage-title-primary {
    font-size: 3rem;                   /* 48px - Tablet */
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .stage-title-primary {
    font-size: 2.5rem;                 /* 40px - Mobile */
    margin-bottom: 20px;
  }
}

/* Secondary Stage Titles */
.stage-title-secondary {
  font-size: 2.5rem;                   /* 40px */
  font-weight: 400;
  color: var(--stage-text-dark);
  text-align: center;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .stage-title-secondary {
    font-size: 2rem;                   /* 32px - Mobile */
    margin-bottom: 20px;
  }
}

/* Stage Info/Help Text */
.stage-text-info {
  font-size: 1.5rem;                   /* 24px */
  font-weight: 400;
  color: var(--stage-text-dark);
  text-align: center;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .stage-text-info {
    font-size: 1.25rem;                /* 20px - Mobile */
  }
}

/* ============================================
   BUTTON STANDARDIZATION
   ============================================ */

/* Tier 1: Large Selection Buttons (1-2 options) */
.btn-stage-large {
  background-color: var(--stage-primary-cyan) !important;
  color: var(--stage-text-white) !important;
  font-size: 2.3rem;
  height: 8.7rem;
  margin-bottom: 1.8rem;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-stage-large:hover {
  background-color: var(--stage-primary-blue-gray) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-stage-large:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Tier 2: Medium Selection Buttons (3 options) */
.btn-stage-medium {
  background-color: var(--stage-primary-cyan) !important;
  color: var(--stage-text-white) !important;
  font-size: 2rem;
  height: 7rem;
  margin-bottom: 1.3rem;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-stage-medium:hover {
  background-color: var(--stage-primary-blue-gray) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Tier 3: Small Selection Buttons (4+ options) */
.btn-stage-small {
  background-color: var(--stage-primary-cyan) !important;
  color: var(--stage-text-white) !important;
  font-size: 1.7rem;
  height: 4.7rem;
  margin-bottom: 0.7rem;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-stage-small:hover {
  background-color: var(--stage-primary-blue-gray) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Keyboard Buttons (Standardized) */
.btn-stage-keyboard {
  background-color: var(--stage-primary-dark-blue) !important;
  color: var(--stage-text-white) !important;
  font-size: 2.1rem;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-stage-keyboard:hover {
  background-color: var(--stage-primary-blue-gray) !important;
  transform: scale(1.05);
}

.btn-stage-keyboard-ok {
  background-color: var(--stage-text-light) !important;
  color: var(--stage-primary-dark-blue) !important;
  font-size: 2.1rem;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-stage-keyboard-ok:hover {
  background-color: var(--stage-primary-cyan) !important;
  color: var(--stage-text-white) !important;
  transform: scale(1.05);
}

/* Circle Button Variants (Service Categories) */
.circle-btn-base {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.circle-btn-base:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.circle-otras-atenciones { background-color: var(--circle-otras-atenciones) !important; }
.circle-enfermeria { background-color: var(--circle-enfermeria) !important; }
.circle-vacunatorio { background-color: var(--circle-vacunatorio) !important; }
.circle-farmacia { background-color: var(--circle-farmacia) !important; }
.circle-leche { background-color: var(--circle-leche) !important; }
.circle-medicina-general { background-color: var(--circle-medicina-general) !important; }
.circle-priority { background-color: var(--stage-primary-cyan) !important; }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* Stage Container Base */
.stage-container-centered {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: calc(100vh - 100px);
  padding: 60px 20px 120px 20px;
}

/* Button Grid Layouts */
.stage-buttons-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}

@media (max-width: 768px) {
  .stage-buttons-grid-2col {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 100%;
  }
}

.stage-buttons-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
}

@media (max-width: 1024px) {
  .stage-buttons-grid-3col {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .stage-buttons-grid-3col {
    grid-template-columns: 1fr;
  }
}

/* Single Column Button Layout */
.stage-buttons-single-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Color Utilities */
.text-stage-light { color: var(--stage-text-light) !important; }
.text-stage-dark { color: var(--stage-text-dark) !important; }
.text-stage-white { color: var(--stage-text-white) !important; }

/* Background Color Utilities */
.bg-stage-primary { background-color: var(--stage-primary-cyan) !important; }
.bg-stage-secondary { background-color: var(--stage-primary-blue-gray) !important; }
.bg-stage-error { background-color: var(--stage-bg-error) !important; }

/* Spacing Utilities */
.stage-spacing-top { margin-top: 60px; }
.stage-spacing-bottom { margin-bottom: 60px; padding-bottom: 120px; }
.stage-spacing-sides { padding-left: 20px; padding-right: 20px; }

/* Hidden Elements (for navigation buttons) */
.element-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states for all interactive elements */
.btn-stage-large:focus,
.btn-stage-medium:focus,
.btn-stage-small:focus,
.btn-stage-keyboard:focus,
.btn-stage-keyboard-ok:focus {
  outline: 3px solid #FFD700 !important;
  outline-offset: 2px !important;
}

/* Touch-friendly minimum sizes */
.stage-option {
  min-height: 44px !important;
  min-width: 44px !important;
  touch-action: manipulation;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Mobile Optimizations */
@media (max-width: 768px) {
  .btn-stage-large {
    font-size: 1.8rem;
    height: 6.5rem;
    margin-bottom: 1.2rem;
  }

  .btn-stage-medium {
    font-size: 1.6rem;
    height: 5.5rem;
    margin-bottom: 1rem;
  }

  .btn-stage-small {
    font-size: 1.4rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
  }
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .btn-stage-large {
    font-size: 2rem;
    height: 7.5rem;
  }

  .btn-stage-medium {
    font-size: 1.8rem;
    height: 6rem;
  }
}