/* ============================================================
   Academia Quique Manager — Global CSS
   App mode + Responsive + Progreso + Buscador
   ============================================================ */

/* ----------------------------------------------------------
   CONSULTAS PROFESOR — lista de mensajes
   ---------------------------------------------------------- */
.aq-consulta-card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid #e8f0ec;
  background: #fff;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.aq-consulta-card:hover { border-color: #0f7f43; box-shadow: 0 2px 6px rgba(15,127,67,.08); }
.aq-consulta-card-active { border-color: #0f7f43 !important; background: #f0f9f4 !important; }

.aq-ccard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.aq-ccard-top strong { font-size: 14px; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.aq-badge-pending {
  display: inline-block;
  background: #fff3cd;
  color: #856404;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.aq-badge-replied {
  display: inline-block;
  background: #d4edda;
  color: #155724;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.aq-ccard-curso {
  font-size: 12px;
  color: #0f7f43;
  font-weight: 600;
  margin-bottom: 4px;
}
.aq-ccard-msg {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   BADGE "NUEVO" en tarjetas de curso
   ---------------------------------------------------------- */
.aq-course-card-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
.aq-new-badge { background: #e53e3e; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 20px; letter-spacing: .3px; white-space: nowrap; }

/* ----------------------------------------------------------
   PROGRESO — indicadores en lista de clases
   ---------------------------------------------------------- */
.aq-lesson-viewed { opacity: .72; }
.aq-viewed-check { color: #27ae60; font-weight: 900; font-size: 14px; margin-left: auto; min-width: 20px; text-align: right; }
.aq-new-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e53e3e; margin-left: auto; min-width: 8px; }

/* Botón marcar como vista en página de clase */
.aq-lesson-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 10px; }
.aq-lesson-header h2 { margin: 0; flex: 1; }
.aq-btn-viewed { border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; white-space: nowrap; }
.aq-btn-viewed-pending { background: #eef7f2; color: #0f7f43; border: 2px solid #0f7f43; }
.aq-btn-viewed-pending:hover { background: #0f7f43; color: #fff; }
.aq-btn-viewed-done { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; cursor: default; }

/* ----------------------------------------------------------
   BUSCADOR dentro del curso
   ---------------------------------------------------------- */
#aqCourseSearchWrap { margin-bottom: 20px; }
.aq-course-search-input { width: 100%; padding: 12px 16px; border: 1px solid var(--aq-border, #e3eee8); border-radius: 12px; font-size: 15px; outline: none; box-sizing: border-box; background: #fff; }
.aq-course-search-input:focus { border-color: #0f7f43; box-shadow: 0 0 0 3px rgba(15,127,67,.1); }

/* ----------------------------------------------------------
   PÁGINA DE CLASE — video, materiales, navegación
   ---------------------------------------------------------- */

/* Video responsive 16:9 */
.aq-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
}
.aq-video-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.aq-video-error {
  background: #fff3cd;
  color: #856404;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 16px;
}
.aq-video-error a { color: #0f7f43; font-weight: 700; }

/* Cuerpo de la clase */
.aq-lesson-body {
  padding: 20px 0 8px;
}
.aq-lesson-title { margin: 0; font-size: 22px; color: #1a1a2e; }
.aq-lesson-desc { color: #555; font-size: 15px; line-height: 1.6; margin: 12px 0 0; }

/* Sección con título */
.aq-lesson-section { margin-top: 24px; }
.aq-lesson-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #999; margin: 0 0 12px; }

/* Grid de materiales */
.aq-material-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.aq-material-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #e3eee8;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a2e;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
  min-width: 160px;
}
.aq-material-btn:hover { border-color: #0f7f43; box-shadow: 0 2px 8px rgba(15,127,67,.12); }
.aq-mat-icon { font-size: 20px; line-height: 1; }
.aq-mat-label { font-weight: 700; flex: 1; }
.aq-mat-dl { font-size: 11px; color: #0f7f43; white-space: nowrap; }

/* Navegación entre clases */
.aq-lesson-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #e8f0ec;
}
.aq-lesson-nav-side { flex: 1; }
.aq-nav-right { display: flex; justify-content: flex-end; }
.aq-lesson-nav-center {
  flex-shrink: 0;
  padding: 10px 18px;
  background: #f0f8f4;
  border: 1.5px solid #c8e6d4;
  border-radius: 8px;
  color: #0f7f43;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.aq-lesson-nav-center:hover { background: #0f7f43; color: #fff; }
.aq-lesson-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  border: 1.5px solid #e3eee8;
  background: #fff;
  color: #1a1a2e;
  font-size: 13px;
  max-width: 220px;
  transition: border-color .2s;
}
.aq-lesson-nav-btn:hover { border-color: #0f7f43; }
.aq-lesson-nav-disabled { opacity: .4; cursor: default; pointer-events: none; }
.aq-nav-arrow { font-size: 16px; font-weight: 700; color: #0f7f43; flex-shrink: 0; }
.aq-nav-label { display: flex; flex-direction: column; overflow: hidden; }
.aq-nav-label small { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: .4px; }
.aq-nav-label strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 600px) {
  .aq-lesson-nav { flex-direction: column; align-items: stretch; }
  .aq-lesson-nav-side { display: flex; }
  .aq-nav-right { justify-content: flex-start; }
  .aq-lesson-nav-center { text-align: center; }
  .aq-lesson-nav-btn { max-width: 100%; }
  .aq-material-btn { min-width: 0; flex: 1 1 calc(50% - 5px); }
}

/* ----------------------------------------------------------
   RECUPERAR CONTRASEÑA — formulario inline en login
   ---------------------------------------------------------- */
#aqForgotWrap { display: none; }
#aqForgotMsg { font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ----------------------------------------------------------
   0. PERFIL ALUMNO — password wrap con ojito
   ---------------------------------------------------------- */

.aq-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.aq-password-wrap input {
  width: 100%;
  padding-right: 44px !important;
  box-sizing: border-box;
}

.aq-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 16px;
  line-height: 1;
  color: #888;
  z-index: 2;
}

.aq-eye-btn:hover { color: #333; }
.aq-eye-icon { pointer-events: none; }

/* Perfil — datos */
.aq-profile-info-card,
.aq-profile-pass-card { display: flex; flex-direction: column; }

.aq-profile-row { display: flex; flex-direction: column; margin-bottom: 16px; }
.aq-profile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #aaa; font-weight: 600; margin-bottom: 4px; }
.aq-profile-value { font-size: 15px; color: #1a1a2e; font-weight: 600; }
.aq-profile-course-item { font-size: 14px; color: #333; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.aq-profile-course-item:last-child { border-bottom: none; }
.aq-profile-course-empty { font-size: 13px; color: #aaa; padding: 6px 0; list-style: none; }

.aq-profile-pass-card label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 14px 0 6px;
}

#aqPassMatchMsg { font-size: 12px; margin: 6px 0 0; min-height: 16px; }

/* Botón deshabilitado */
.aq-form-button:disabled,
button:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

/* ----------------------------------------------------------
   1. APP MODE — oculta el tema de WordPress en páginas internas
   ---------------------------------------------------------- */

body.aq-fullscreen {
  margin: 0 !important;
  padding: 0 !important;
  background: #f5f6fa !important;
}

/* Header del tema */
body.aq-fullscreen .site-header,
body.aq-fullscreen #site-header,
body.aq-fullscreen #header,
body.aq-fullscreen #masthead,
body.aq-fullscreen header.site-header,
body.aq-fullscreen header.header,
body.aq-fullscreen .header-main,
body.aq-fullscreen .main-header,
body.aq-fullscreen .wp-block-template-part[class*="header"],
body.aq-fullscreen [id="header"],
body.aq-fullscreen .elementor-location-header { display: none !important; }

/* Footer del tema */
body.aq-fullscreen .site-footer,
body.aq-fullscreen #site-footer,
body.aq-fullscreen #footer,
body.aq-fullscreen #colophon,
body.aq-fullscreen footer.site-footer,
body.aq-fullscreen footer.footer,
body.aq-fullscreen .footer-main,
body.aq-fullscreen .wp-block-template-part[class*="footer"],
body.aq-fullscreen [id="footer"],
body.aq-fullscreen .elementor-location-footer { display: none !important; }

/* Contenedor del tema */
body.aq-fullscreen #page,
body.aq-fullscreen .site,
body.aq-fullscreen #content,
body.aq-fullscreen .site-content,
body.aq-fullscreen #primary,
body.aq-fullscreen .content-area,
body.aq-fullscreen .entry-content,
body.aq-fullscreen .post-content,
body.aq-fullscreen .page-content,
body.aq-fullscreen main.site-main,
body.aq-fullscreen .container,
body.aq-fullscreen .container-fluid,
body.aq-fullscreen .wp-site-blocks { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; }

/* App ocupa toda la pantalla */
body.aq-fullscreen .aq-app {
  width: 100vw !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* Barra de admin de WordPress (solo cuando está logueado como admin) */
body.aq-fullscreen #wpadminbar { display: none !important; }
body.aq-fullscreen { margin-top: 0 !important; }


/* ----------------------------------------------------------
   2. RESPONSIVE — Mobile first para páginas alumno y profesor
   ---------------------------------------------------------- */

@media (max-width: 768px) {

  /* ── App layout ── */
  .aq-app {
    flex-direction: column !important;
  }

  /* ── Sidebar horizontal en mobile ── */
  .aq-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: row !important;
    padding: 10px 12px !important;
    align-items: center !important;
    overflow-x: auto !important;
    gap: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  .aq-sidebar-logo,
  .aq-sidebar img.aq-sidebar-logo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    margin-right: 10px !important;
  }

  .aq-sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    flex: 1 !important;
    overflow-x: auto !important;
    padding: 0 !important;
  }

  .aq-sidebar nav a {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
  }

  .aq-logout {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
    margin-left: auto !important;
  }

  /* ── Main ── */
  .aq-main {
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Header ── */
  .aq-app-header {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .aq-avatar {
    display: none !important;
  }

  /* ── Course grid — columna única ── */
  .aq-course-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Action grid — 2 columnas en mobile ── */
  .aq-action-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── Panel bottom (Resumen + Actividad) ── */
  .aq-panel-bottom {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .aq-summary-card,
  .aq-activity-card {
    width: 100% !important;
  }

  .aq-summary-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── Formularios ── */
  .aq-form-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .aq-form-card,
  .aq-preview-card,
  .aq-admin-form {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .aq-preview-card {
    display: none !important;
  }

  /* ── Consultas — dos columnas → una ── */
  .aq-consult-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .aq-consult-list {
    width: 100% !important;
    max-height: 320px !important;
    overflow-y: auto !important;
  }

  /* ── Tablas de alumnos ── */
  .aq-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .aq-student-table {
    min-width: 600px !important;
  }

  /* ── Botones táctiles ── */
  .aq-button,
  .aq-form-button,
  .aq-btn,
  .aq-nc-btn,
  .aq-reply-btn {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .aq-btn-sm {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* ── Modales ── */
  .aq-modal-inner,
  #aqStudentEditModal > div,
  #aqStudentCoursesModal > div {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  /* ── Acciones de tabla — stack vertical ── */
  .aq-td-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* ── Perfil ── */
  .aq-profile-info-card,
  .aq-profile-pass-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Password wrap ── */
  .aq-password-wrap input {
    font-size: 16px !important; /* evita zoom en iOS */
  }

  /* ── Inputs y textareas ── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* evita zoom en iOS */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Clase / video ── */
  .aq-video-frame iframe {
    width: 100% !important;
    height: 220px !important;
  }

  /* ── Navegación entre clases ── */
  .aq-class-nav {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .aq-nav-btn {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── No scroll horizontal ── */
  body, .aq-app, .aq-main {
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  .aq-action-grid {
    grid-template-columns: 1fr !important;
  }

  .aq-action-card {
    flex-direction: row !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .aq-action-icon {
    font-size: 24px !important;
    min-width: 32px !important;
  }

  .aq-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}