/* ============================================================
   Panel móvil (M7b) — Páginas adaptadas.
   REGLAS: todo dentro de @media (max-width: 991.98px).
   Cada selector empieza por html[data-vzt-nivel="Adaptada"].
   Cada !important necesita un comentario justificativo en su misma línea.
   Las vistas Redisenada y SoloOrdenador quedan fuera de esta hoja.
   Spec: docs/superpowers/specs/2026-10-19-movil-m7b-repaso-adaptadas-design.md
   Patrones T3: contexto-tareas.md y auditoría de partida de M7b.
   ============================================================ */

@media (max-width: 991.98px) {
  /* a. Acciones pequeñas del contenido y de la barra de título (fuera del
     contenido). Los mínimos ganan también al width/height de 16px en línea
     de AvisarAComponent, sin cambiar colores, bordes ni radios. :where no añade
     especificidad: los mínimos de 44px de 02-patrones siguen mandando. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content, #kt_app_toolbar) :is(.btn-sm, .iconbtn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  /* b. Con objetivos mayores, la ventana de páginas puede necesitar otra fila. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content, #kt_app_toolbar) .pagination {
    flex-wrap: wrap;
  }

  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content, #kt_app_toolbar) .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  /* c. Nombres en tablas convertidas en fichas y en tarjetas de detalle.
     El texto conserva su tipografía; crece la superficie vertical del enlace. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content, #kt_app_toolbar) table[data-vzt-fichas] td a,
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content, #kt_app_toolbar) .card a.text-hover-primary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Pestañas de ProductoDetalle y ProfesionalForm: crece el área vertical,
     conservando el borde de línea y los estilos activo/inactivo de Metronic. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) :is(.nav-tabs, .nav-line-tabs) .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px; /* «Datos» y «Stock» miden 32-34 px de texto */
  }

  /* d. Cabeceras de tarjeta/página con acciones, incluido el flex-stack que
     envuelve título y botones en InformeWeb. Solo grupos que contienen acciones. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) :is(.card-header.d-flex, .card-header .d-flex, .app-toolbar .d-flex, .flex-stack):has(:is(.btn, .iconbtn)) {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  /* e. Un select debe poder encoger tanto en una columna como en un input-group.
     No se oculta el desbordamiento: la caja cabe en el espacio disponible. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) select {
    min-width: 0;
    max-width: 100%;
  }

  @media (max-width: 575.98px) {
    /* Columnas fijas de filas con campos; incluye Previsualizar.w-100 junto
       al select de /resumen-confirmaciones. Una fila solo de botones no apila.
       Las columnas con breakpoint conservan su contrato responsive. */
    html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .row:has(:is(input, select, textarea)) > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]):not([class*="col-xxl-"]):has(:is(input, select, textarea, button.w-100, .btn.w-100)) {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
    }
  }

  /* f. El buscador kb no usa form-control. Se excluyen los controles especiales
     nativos como en 02-patrones, para conservar su tamaño y presentación. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) :is(input:not(:is([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], .form-control-color)), select, textarea) {
    font-size: 16px;
  }

  /* g. FullCalendar genera su propio marcado. Al crecer sus objetivos, su barra
     y sus grupos también pueden envolver; se mantienen los estilos del plugin. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .fc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .fc .fc-toolbar,
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .fc .fc-toolbar-chunk,
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .fc .fc-button-group {
    flex-wrap: wrap;
    max-width: 100%;
  }

  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .fc .fc-toolbar-chunk {
    display: flex;
    align-items: center;
  }

  /* /registros-mensajeria: los identificadores de Cliente y Reserva (celdas
     5/6) son enlaces cortos sin clase. La tabla se reconoce por su enlace de
     detalle, sin ampliar enlaces de otras páginas ni cambiar su tipografía. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) table:has(a[href^="/registro-mensajeria-detalle-"]) > tbody > tr > :is(td:nth-child(5), td:nth-child(6)) > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  /* /manuales y /ayuda: la columna no toma como mínimo una ruta sin espacios.
     Los resultados conservan icono/fecha y el resumen limitado a dos líneas. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .kb-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .kb-layout > :is(aside.kb-sidebar, section) {
    min-width: 0;
  }

  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .kb-layout .kb-result,
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) .kb-layout .kb-result :is(.kb-result__body, .kb-result__title-row, .kb-result__title, .kb-result__resumen) {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* /control-gastos: los tres envoltorios conservan sus 250px en línea cuando
     caben. El canvas también se limita antes de que Chart.js ajuste su tamaño. */
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) div:has(> canvas:is(#chartReservas, #chartWhatsapp, #chartSms)),
  html[data-vzt-nivel="Adaptada"] :where(#kt_app_content) canvas:is(#chartReservas, #chartWhatsapp, #chartSms) {
    max-width: 100%;
  }
}