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

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  /* ... estilos existentes ... */

  /* Botón scroll más compacto en móvil */
  .btn-scroll-bottom {
    bottom: 12px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .btn-scroll-bottom span {
    display: none;
    /* Ocultar texto en móvil */
  }

  .btn-scroll-bottom svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .container {
    max-width: 100%;
    padding: 0 8px;
  }

  h1 {
    font-size: 28px;
  }

  .subtitle {
    font-size: 14px;
  }

  .card {
    padding: 16px;
  }

  .tabs {
    overflow-x: auto;
  }

  .tab {
    font-size: 14px;
    padding: 10px 16px;
    white-space: nowrap;
  }

  .controles {
    flex-direction: column;
    gap: 8px;
  }

  input[type="text"],
  .search-listas {
    width: 100%;
    min-width: 0;
  }

  .btn-group {
    width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    display: flex;
  }

  .btn-secondary {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .btn-accion-rapida {
    padding: 8px 8px;
    font-size: 9px;
    gap: 4px;
    min-width: 0;
    max-width: 100px;
  }

  .btn-accion-rapida svg {
    width: 14px;
    height: 14px;
  }

  .stats {
    flex-direction: row;
    gap: 8px;
    padding: 12px 8px;
  }

  .stat {
    flex: 1;
    min-width: 0;
    padding: 8px;
  }

  .stat-value {
    font-size: 18px;
  }

  .stat-label {
    font-size: 10px;
  }

  #terminos-contenedor {
    max-height: 400px;
  }

  .pdf-config {
    padding: 12px;
  }

  .pdf-config .row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pdf-config .pdf-config-row-2cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  .pdf-config .pdf-config-row-2cols .form-group {
    min-width: 0;
  }

  .pdf-config .pdf-config-row-2cols select,
  .pdf-config .pdf-config-row-2cols .btn-fecha {
    font-size: 12px;
    padding: 8px 6px;
  }

  .pdf-config label {
    font-size: 11px;
  }

  .pdf-config input,
  .pdf-config select,
  .btn-fecha {
    height: 44px;
    min-height: 44px;
    font-size: 13px;
    width: 100%;
    max-width: 100%;
  }

  .btn-fecha {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .checkbox-group {
    padding: 8px 10px;
    min-height: 44px;
    height: 44px;
    display: flex;
    align-items: center;
  }

  .checkbox-group label {
    font-size: 13px;
    line-height: 1;
  }

  .btn-primary {
    font-size: 15px;
    padding: 12px 20px;
  }

  /* Botones de sesión en móvil - expandir a todo el ancho */
  .session-actions {
    width: 100% !important;
  }

  .session-actions button,
  .session-actions>div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Forzar elementos dentro de session-actions a ocupar todo el ancho */
  .session-actions .btn-primary {
    width: calc(100% + 532px) !important;

  }

  .session-actions>div[style*="background: var(--bg-tertiary)"] {
    width: calc(100% + 532px) !important;

  }

  .barra-filtros-categorias {
    overflow-x: auto;
    gap: 6px;
  }

  .filtro-cat {
    flex-shrink: 0;
  }

  .lista-item {
    font-size: 12px;
    padding: 8px;
  }

  /* Botón filtro nivel */
  .btn-filtro-nivel-fijo {
    right: 60px !important;
  }

  .btn-filtro-nivel-fijo .texto-filtro {
    display: none;
  }

  /* Ajustes de botones superiores */
  #hsk-stats,
  .niveles-hsk,
  .hsk-badges {
    margin-top: 20px !important;
  }

  .btn-filtro-nivel-fijo,
  .btn-borrar-todo {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-filtro-nivel-fijo svg,
  .btn-borrar-todo svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Selector de idioma */
  .selector-idioma-simple {
    top: 10px;
    right: 14px;
    font-size: 13px;
    opacity: 0.6;
  }

  .selector-idioma-simple::after {
    font-size: 11px;
  }

  .idioma-opcion {
    padding: 3px 6px;
  }

  /* Botón de tema */
  #theme-toggle {
    top: 14px;
    right: auto;
    left: 14px;
    width: 28px;
    height: 28px;
  }

  #theme-toggle svg {
    width: 18px;
    height: 18px;
  }

  /* Botón de ayuda */
  .help-button {
    top: 54px;
    right: 14px;
    left: auto;
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  /* Botón de menú - Ocultar texto en móvil */
  #menu-btn span:last-child {
    display: none;
  }

  /* Menú filtro HSK */
  .menu-filtro-hsk {
    top: 60px;
    right: 12px;
    left: 12px;
    min-width: auto;
  }

  .menu-filtro-hsk::before,
  .menu-filtro-hsk::after {
    right: 12px;
  }

  /* Botón scroll */
  .btn-scroll-bottom {
    bottom: 12px;
    right: 12px;
    padding: 8px 14px;
    font-size: 12px;
  }

  /* Tour */
  .tour-tooltip {
    max-width: calc(100vw - 32px);
    padding: 20px;
    font-size: 14px;
  }

  .tour-tooltip h3 {
    font-size: 18px;
  }

  .tour-tooltip p {
    font-size: 13px;
  }

  .tour-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  /* Modal búsqueda */
  .busqueda-modal {
    max-height: 90vh;
    padding: 16px;
  }

  /* Preview */
  .btn-preview span {
    display: none;
  }

  .btn-preview {
    padding: 14px;
    min-width: 50px;
    justify-content: center;
  }

  /* Modo lectura */
  .modo-lectura-btn {
    padding: 6px 8px;
    gap: 4px;
  }

  .modo-icon {
    font-size: 11px;
  }

  .modo-text {
    font-size: 11px;
  }

  /* Modal de feedback detallado - más espacio en móvil */
  #detailedFeedbackModal .modal-content {
    max-width: 95% !important;
    max-height: 95vh !important;
    margin: 10px;
  }

  /* Botones de feedback más grandes */
  .btn-quick {
    padding: 10px 14px !important;
    font-size: 14px !important;
    min-height: 44px;
  }

  /* Acciones rápidas en fila (lado a lado) */
  .term-quick-actions {
    width: 100%;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .term-quick-actions .btn-quick {
    flex: 1;
    justify-content: center;
  }



  /* Botones de feedback individuales más espaciados */
  .detailed-feedback-term {
    padding: 20px 15px !important;
  }

  .term-header {
    margin-bottom: 15px !important;
  }


  .term-info {
    margin-bottom: 10px !important;
  }

  /* Botones del footer del modal de feedback detallado */
  #detailedFeedbackModal .modal-body>div:last-child {
    flex-direction: row !important;
    gap: 10px !important;
  }

  #detailedFeedbackModal .modal-body>div:last-child .btn-secondary,
  #detailedFeedbackModal .modal-body>div:last-child .btn-primary {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Botones de acción de sesión - 2 filas en móvil */
  /* Botones de acción de sesión - 2 filas en móvil */
  .session-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Cuando hay 2 botones (evaluaciones), usar grid */
  .session-actions:has(button + button) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .session-actions button {
    width: 100% !important;
    padding: 12px 10px !important;
    font-size: 13px !important;
    min-height: 44px !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  /* Tarjetas de estadísticas horizontales en móvil */
  .session-stat-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .session-stat-card>div:first-child {
    font-size: 20px !important;
  }

  .session-stat-card>div:last-child {
    font-size: 13px !important;
  }

  /* Botón de guardar progreso del quiz en móvil */
  .btn-guardar-progreso-quiz {
    bottom: 12px;
    right: 12px;
    padding: 8px 16px;
    font-size: 13px;
  }

}



@media (max-width: 480px) {
  h1 {
    font-size: 24px;
  }

  .stats {
    gap: 4px;
    padding: 8px 6px;
  }

  .stat {
    padding: 6px 4px;
  }

  .stat-value {
    font-size: 16px;
  }

  .stat-label {
    font-size: 9px;
  }

  .btn-filtro-nivel-fijo {
    right: 56px;
  }

  /* Ocultar texto en botones muy pequeños */
  .btn-icono-texto .btn-texto {
    display: none;
  }

  .btn-icono-texto {
    padding: 8px;
    min-width: 36px;
    justify-content: center;
  }

  /* Excepción: mantener texto en botón A-Z */
  #ordenar-alfabetico .btn-texto {
    display: inline !important;
  }

  #ordenar-alfabetico svg {
    display: none;
  }

  /* Modo lectura responsive extremo */
  .modo-text {
    display: none;
  }

  .modo-lectura-btn {
    padding: 10px;
  }

  .modo-icon {
    font-size: 15px;
  }
}

@media (max-width: 380px) {
  .modo-text {
    display: none;
  }

  .modo-lectura-btn {
    padding: 10px;
  }

  .modo-icon {
    font-size: 15px;
  }
}

/* Modal de detalle del plan - más grande en móvil */
@media (max-width: 768px) {
  .modal-overlay-custom {
    padding: 8px !important;
  }

  .modal-content-custom {
    max-width: 100% !important;
    width: 98% !important;
    max-height: 95vh !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Título del plan más compacto */
  #modal-detalle-plan h2 {
    font-size: 20px !important;
  }

  #modal-detalle-plan p {
    font-size: 12px !important;
  }

  /* Contenido del plan */
  #detalle-plan-contenido {
    max-height: calc(95vh - 100px) !important;
  }

  /* Cards de semana más compactas */
  #detalle-plan-contenido details {
    margin-bottom: 12px !important;
  }

  #detalle-plan-contenido summary {
    padding: 12px !important;
    font-size: 15px !important;
  }

  /* Ajustar paddings para que session-actions llegue a los bordes en móvil */
  #detalle-plan-contenido details>div {
    padding: 16px 8px !important;
  }

  #detalle-plan-contenido details>div>div[style*="border: 1px solid"] {
    padding: 16px 8px !important;
  }

  #detalle-plan-contenido .session-actions {
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}
/* Celular: la barra de pestañas de index se esconde (en las demás páginas lo
   hace nav-tabs.js); las secciones viven en el menú sándwich. */
@media (max-width: 640px) {
  .tabs {
    display: none;
  }
}
/* Celular: el logo y el título de index se alinean a la izquierda y se encogen
   para no quedar debajo del botón "Menú" (absoluto, arriba a la derecha). */
@media (max-width: 640px) {
  .brand-row {
    justify-content: flex-start;
    text-align: left;
    padding: 0 112px 0 4px;
  }
  .brand-logo {
    height: 48px;
  }
  .brand-row h1 {
    font-size: 28px;
    margin-bottom: 4px;
  }
}
/* Celular: los botones del encabezado de Mazos ocupan todo el ancho, en dos
   columnas, en vez de quedar apretados a la derecha (reporte del 30-oct). */
@media (max-width: 640px) {
  .mazo-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }
  .mazo-header-actions {
    flex-wrap: wrap;
  }
  .mazo-header-actions > button {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    min-height: 44px;
    font-size: 14px !important;
  }
}