/* ======================================================
   OPTIMIZACIÓN MÓVIL - Sistema de Electivos TISA
   Estilos responsive para admin y formulario
   ====================================================== */

/* ===== ESTILOS GENERALES RESPONSIVE ===== */

/* Breakpoint principal: Tablets y móviles */
@media (max-width: 768px) {
  
  /* CRÍTICO: Forzar que modales estén sobre header de la app */
  #selection-admin-panel,
  #selection-form-modal,
  #connected-users-modal {
    position: fixed !important;
    z-index: 999999 !important;
  }
  
  /* Header de la app - reducir z-index en móvil */
  .site-header,
  header,
  .header,
  [class*="header"] {
    z-index: 1000 !important;
  }
  
  /* ===== PANEL DE ADMINISTRACIÓN ===== */
  
  /* Modal de administración */
  #selection-admin-panel {
    padding: 0 !important;
  }
  
  #selection-admin-panel > div {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    position: relative !important;
  }
  
  /* Header del panel */
  #selection-admin-panel .admin-header,
  #selection-admin-panel > div > div:first-child {
    padding: 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  }
  
  #selection-admin-panel h2 {
    font-size: 18px !important;
  }
  
  #selection-admin-panel .admin-subtitle {
    font-size: 13px !important;
  }
  
  /* Tabs de curso */
  #selection-admin-panel button[style*="2° Medio"],
  #selection-admin-panel button[style*="3° Medio"] {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  /* Contenido del panel */
  #selection-admin-panel > div > div:last-child,
  #course-content {
    padding: 16px !important;
  }
  
  /* PARES DE ELECTIVOS - Grid responsive */
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  
  /* VS y botón swap - Mantener en medio */
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(2) {
    order: 0 !important;
    text-align: center !important;
    margin: 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  
  /* Opciones de pares */
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(1),
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(3) {
    padding: 10px !important;
  }
  
  /* Texto en opciones de pares */
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] p {
    font-size: 13px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Votos detallados - Wrap en móvil */
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] p[style*="font-size: 11px"] {
    font-size: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  /* Badges de área */
  #selection-admin-panel span[style*="border-radius: 4px"][style*="font-size: 11px"] {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  
  /* BOTONES DE ACCIÓN - Stack vertical */
  #selection-admin-panel [style*="display: flex"][style*="justify-content: flex-end"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  #selection-admin-panel [style*="display: flex"][style*="justify-content: flex-end"] > button {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  /* Checkbox de incluir 7° y 8° */
  #selection-admin-panel [style*="background: #fef3c7"] {
    padding: 10px !important;
  }
  
  #selection-admin-panel [style*="background: #fef3c7"] span {
    font-size: 13px !important;
  }
  
  /* Cards de configuración */
  #selection-admin-panel [style*="background: #f9fafb"][style*="border-radius: 12px"] {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  
  /* Títulos de secciones */
  #selection-admin-panel h3 {
    font-size: 16px !important;
  }
  
  #selection-admin-panel h4 {
    font-size: 15px !important;
  }
  
  /* Inputs y labels */
  #selection-admin-panel input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  
  #selection-admin-panel label {
    font-size: 14px !important;
    flex-wrap: wrap !important;
  }
  
  /* Toggle switches */
  #selection-admin-panel .toggle-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  
  /* Stats y números */
  #selection-admin-panel [style*="font-size: 32px"] {
    font-size: 24px !important;
  }
  
  #selection-admin-panel [style*="font-size: 28px"] {
    font-size: 20px !important;
  }
  
  /* Acciones rápidas */
  .quick-actions {
    padding: 16px !important;
  }
  
  .quick-actions h3 {
    font-size: 16px !important;
  }
  
  .quick-actions-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .quick-actions-grid button {
    padding: 14px !important;
    font-size: 14px !important;
  }
  
  /* ===== FORMULARIO DE ESTUDIANTE ===== */
  
  /* Modal de formulario */
  #selection-form-modal {
    padding: 10px !important;
  }
  
  #selection-form-modal > div {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    max-height: 95vh !important;
    position: relative !important;
  }
  
  /* Header del formulario */
  #selection-form-modal > div > div:first-child {
    padding: 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
  }
  
  #selection-form-modal h2 {
    font-size: 18px !important;
  }
  
  #selection-form-modal > div > div:first-child p {
    font-size: 13px !important;
  }
  
  /* Contenido del formulario */
  #selection-form-modal > div > div:nth-child(2) {
    padding: 16px !important;
  }
  
  /* Títulos de pares */
  #selection-form-modal h3 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Opciones de electivos (labels) */
  #selection-form-modal label[style*="padding: 16px"] {
    padding: 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  
  #selection-form-modal label input[type="radio"] {
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }
  
  #selection-form-modal label p {
    font-size: 14px !important;
    word-wrap: break-word !important;
  }
  
  /* Badges de área en formulario */
  #selection-form-modal span[style*="border-radius: 4px"][style*="font-size: 12px"] {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  
  #selection-form-modal span[style*="font-size: 12px"][style*="color: #6b7280"] {
    font-size: 11px !important;
  }
  
  /* Info de votos en formulario */
  #selection-form-modal p[style*="font-size: 13px"] {
    font-size: 12px !important;
  }
  
  /* Validación de electivos */
  #electivos-validation {
    font-size: 13px !important;
    padding: 10px !important;
    margin-bottom: 16px !important;
  }
  
  /* Sección de religión */
  #selection-form-modal h3[style*="Religión"] {
    font-size: 16px !important;
  }
  
  #selection-form-modal [style*="display: flex; gap: 16px"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  
  /* Alternativas a religión */
  #selection-form-modal [style*="background: #f9fafb"][style*="padding: 16px"] {
    padding: 12px !important;
  }
  
  #selection-form-modal h4 {
    font-size: 15px !important;
  }
  
  /* Botones del formulario - Stack vertical INVERTIDO */
  #selection-form-modal [style*="display: flex"][style*="gap: 12px"][style*="justify-content: flex-end"] {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    padding-top: 16px !important;
  }
  
  #selection-form-modal [style*="display: flex"][style*="gap: 12px"][style*="justify-content: flex-end"] button {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
  }
  
  /* Mensajes de estado */
  #selection-form-modal [style*="background: #fef3c7"][style*="font-weight: 600"] {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  #selection-form-modal [style*="background: #dbeafe"] {
    padding: 10px !important;
    font-size: 13px !important;
  }
  
  /* ===== MODAL DE USUARIOS CONECTADOS ===== */
  
  #connected-users-modal {
    padding: 10px !important;
  }
  
  #connected-users-modal > div {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    position: relative !important;
  }
  
  #connected-users-modal .modal-header {
    padding: 16px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }
  
  #connected-users-modal h2 {
    font-size: 18px !important;
  }
  
  #connected-users-modal .modal-content {
    padding: 16px !important;
  }
  
  #connected-users-modal .course-card {
    padding: 12px !important;
  }
  
  #connected-users-modal .user-item {
    padding: 10px !important;
    gap: 10px !important;
  }
  
  #connected-users-modal .user-name {
    font-size: 14px !important;
  }
  
  #connected-users-modal .user-email {
    font-size: 12px !important;
  }
  
  #connected-users-modal button {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
}

/* Breakpoint muy pequeño: Móviles pequeños */
@media (max-width: 480px) {
  
  /* Panel admin */
  #selection-admin-panel .admin-header,
  #selection-admin-panel > div > div:first-child {
    padding: 12px !important;
  }
  
  #selection-admin-panel h2 {
    font-size: 16px !important;
  }
  
  #selection-admin-panel > div > div:last-child,
  #course-content {
    padding: 12px !important;
  }
  
  #selection-admin-panel [style*="background: #f9fafb"][style*="border-radius: 12px"] {
    padding: 12px !important;
  }
  
  /* Pares más compactos */
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] > div {
    padding: 8px !important;
  }
  
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] p {
    font-size: 12px !important;
  }
  
  #selection-admin-panel [style*="grid-template-columns: 1fr auto 1fr"] p[style*="font-size: 11px"] {
    font-size: 9px !important;
  }
  
  /* Formulario estudiante */
  #selection-form-modal {
    padding: 5px !important;
  }
  
  #selection-form-modal > div {
    border-radius: 8px !important;
  }
  
  #selection-form-modal > div > div:first-child {
    padding: 12px !important;
  }
  
  #selection-form-modal h2 {
    font-size: 16px !important;
  }
  
  #selection-form-modal > div > div:nth-child(2) {
    padding: 12px !important;
  }
  
  #selection-form-modal h3 {
    font-size: 15px !important;
  }
  
  #selection-form-modal label[style*="padding: 16px"] {
    padding: 10px !important;
  }
  
  #selection-form-modal label p {
    font-size: 13px !important;
  }
}

/* Breakpoint landscape móvil */
@media (max-height: 600px) and (orientation: landscape) {
  
  /* Reducir alturas máximas en landscape */
  #selection-admin-panel > div,
  #selection-form-modal > div,
  #connected-users-modal > div {
    max-height: 95vh !important;
  }
  
  /* Headers más compactos en landscape */
  #selection-admin-panel .admin-header,
  #selection-form-modal > div > div:first-child,
  #connected-users-modal .modal-header {
    padding: 10px 16px !important;
  }
  
  /* Contenido con menos padding vertical */
  #selection-admin-panel > div > div:last-child,
  #selection-form-modal > div > div:nth-child(2),
  #connected-users-modal .modal-content {
    padding: 10px 16px !important;
  }
}

/* ===== UTILIDADES GENERALES ===== */

/* Evitar que el texto se salga */
@media (max-width: 768px) {
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Scroll suave en modales */
  #selection-admin-panel,
  #selection-form-modal,
  #connected-users-modal {
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Evitar zoom en inputs en iOS */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  
  /* Mejorar clickability de botones y enlaces */
  button,
  a,
  label {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Radio buttons y checkboxes más grandes */
  input[type="radio"],
  input[type="checkbox"] {
    min-width: 20px !important;
    min-height: 20px !important;
  }
}

/* ===== IMPRESIÓN (Desactivar responsive) ===== */
@media print {
  /* Remover todos los estilos responsive para impresión */
  #selection-admin-panel,
  #selection-form-modal,
  #connected-users-modal {
    padding: 0 !important;
    max-width: 100% !important;
  }
}