/**
 * Cognitus responsive layer — FASE 1
 * Cargar DESPUÉS de AdminLTE, custom.css y login-custom.css.
 * Desktop (>=1200px): sin cambios visuales intencionales.
 * No modifica tema_detalle.css.
 */

:root {
  --cog-resp-pad-x: 16px;
  --cog-resp-touch-min: 44px;
  --cog-resp-overlay-z: 1038;
  --cog-resp-sidebar-z: 1040;
}

/* ---------- Safe area + anti-overflow base (all viewports, low impact) ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.cog-resp-scroll-lock {
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior: none;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* ---------- Below desktop: shell, drawer, spacing ---------- */
@media (max-width: 1199.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-wrapper {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-header.navbar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(var(--cog-resp-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--cog-resp-pad-x), env(safe-area-inset-right, 0px));
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-height: calc(var(--cog-resp-touch-min) + 0.5rem);
  }

  .app-header .navbar-toggler {
    min-width: var(--cog-resp-touch-min);
    min-height: var(--cog-resp-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
  }

  .app-header .navbar-nav .nav-link {
    min-height: var(--cog-resp-touch-min);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .app-header .navbar-text {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-main {
    padding-left: 0;
    padding-right: 0;
  }

  .app-content-header .container-fluid,
  .app-content .container-fluid {
    padding-left: max(var(--cog-resp-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--cog-resp-pad-x), env(safe-area-inset-right, 0px));
  }

  .app-content-header .row {
    row-gap: 0.35rem;
  }

  .app-content-header .breadcrumb {
    float: none !important;
    margin-bottom: 0;
    flex-wrap: wrap;
  }

  .app-content-header h3.mb-0 {
    font-size: clamp(1.05rem, 3.8vw, 1.35rem);
    line-height: 1.3;
    word-break: break-word;
  }

  /* Sidebar as drawer */
  .app-sidebar {
    z-index: var(--cog-resp-sidebar-z);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .sidebar-overlay {
    z-index: var(--cog-resp-overlay-z);
    background-color: rgba(15, 23, 42, 0.45);
  }

  .cog-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cog-resp-touch-min);
    min-height: var(--cog-resp-touch-min);
    margin-left: auto;
    border: 0;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .cog-sidebar-close:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
  }

  .sidebar-inst-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
  }

  .app-sidebar .sidebar-inst-link,
  .app-sidebar .nav-link {
    min-height: var(--cog-resp-touch-min);
    align-items: center;
  }

  /* Forms / touch */
  .btn,
  button.btn,
  .form-control,
  .form-select,
  .input-group .btn {
    min-height: var(--cog-resp-touch-min);
  }

  input.form-control,
  select.form-select,
  textarea.form-control {
    font-size: 16px; /* evita zoom iOS */
  }

  .btn {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  /* Cards / grids — home & cursos */
  .dash-campus-stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .dash-campus-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dash-quick-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .dash-quick-card {
    min-height: var(--cog-resp-touch-min);
    word-break: break-word;
  }

  .mc-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-left: 0;
    padding-right: 0;
  }

  .mc-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .mc-card,
  .mc-card__body,
  .mc-card__title,
  .mc-card__desc {
    min-width: 0;
    word-break: break-word;
  }

  .mc-card__img,
  .mc-card__media img,
  .card .card-img-top {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
  }

  .mc-card__actions,
  .card-body .btn {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mc-card__actions .btn,
  .card-body > .btn {
    width: 100%;
    justify-content: center;
  }

  /* empresa/cursos bootstrap cols → stack on phone, 2-col on tablet */
  .container.mt-4 .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Footer */
  .app-footer,
  .cognitus-pro-footer,
  .cognitus-pro-footer__inner {
    max-width: 100%;
    overflow-x: hidden;
    padding-left: max(var(--cog-resp-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--cog-resp-pad-x), env(safe-area-inset-right, 0px));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }

  /* Tables: allow internal scroll without page overflow */
  .table-responsive,
  .app-content .table {
    max-width: 100%;
  }

  .app-content table:not(.table-responsive table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Login via base.html card */
  .app-content .row.justify-content-center > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Phone */
@media (max-width: 575.98px) {
  :root {
    --cog-resp-pad-x: 14px;
  }

  .app-header .navbar-text.d-none.d-sm-inline {
    /* already hidden by Bootstrap; keep safe */
  }

  .dash-quick-grid {
    grid-template-columns: 1fr;
  }
}

/* Large phone / small tablet */
@media (min-width: 576px) and (max-width: 767.98px) {
  .dash-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dash-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .container.mt-4 .row > [class*="col-md-4"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Tablet landscape / small laptop */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .dash-campus-stage {
    flex-direction: row;
    align-items: stretch;
  }

  .dash-campus-col {
    flex: 1 1 50%;
  }

  .dash-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .container.mt-4 .row > [class*="col-md-4"] {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* ---------- Login page (base_login.html) ---------- */
@media (max-width: 1199.98px) {
  .login-page {
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px));
    min-height: 100dvh;
    box-sizing: border-box;
  }

  .login-box {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem auto;
    padding: 0;
  }

  .login-page .container {
    max-width: 100% !important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .login-page .d-flex.align-items-center.justify-content-center {
    height: auto !important;
    min-height: 100dvh;
    padding: 1rem 0;
  }

  .login-page .row.shadow.rounded.bg-white {
    margin-left: 0;
    margin-right: 0;
    flex-direction: column;
  }

  .login-page .row.shadow.rounded.bg-white > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    border-end: 0 !important;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .login-page .row.shadow.rounded.bg-white > [class*="col-"]:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .login-page img {
    max-width: min(180px, 55vw);
    height: auto;
  }

  .login-page .form-control,
  .login-page input[type="email"],
  .login-page input[type="password"],
  .login-page input[type="text"] {
    font-size: 16px;
    min-height: var(--cog-resp-touch-min);
  }

  .login-page .btn {
    min-height: var(--cog-resp-touch-min);
  }
}

@media (max-width: 575.98px) {
  .login-page .d-flex.align-items-center.justify-content-center.mb-4 {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .login-page .d-flex.align-items-center.justify-content-center.mb-4 img {
    margin-right: 0 !important;
  }

  .login-page .text-start {
    text-align: center !important;
  }
}

/* Desktop: keep current login-box width */
@media (min-width: 1200px) {
  .login-box {
    /* preserve login-custom.css width:400px */
  }

  .cog-sidebar-close {
    display: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar-overlay,
  .app-sidebar {
    animation: none !important;
    transition: none !important;
  }
}


/* ---------- Landing pública (/) ---------- */
@media (max-width: 1199.98px) {
  .cog-inst-page {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    max-width: 100%;
    overflow-x: hidden;
  }
  .cog-inst-header {
    flex-wrap: wrap;
    gap: 0.75rem;
    row-gap: 0.5rem;
  }
  .cog-inst-header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }
  .cog-inst-nav-link,
  .cog-inst-nav-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .cog-inst-logo-img {
    max-width: min(220px, 70vw);
    height: auto;
  }
  .cog-inst-hero-inner,
  .cog-inst-section {
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  .cog-inst-header-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .cog-inst-nav-link,
  .cog-inst-nav-cta {
    width: 100%;
    justify-content: center;
  }
}


/* ========== FASE 2: listados, tablas, formularios, cursos ========== */

/* Selects fluid (reemplazan min-width inline en asignaciones) */
.cog-select-fluid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1199.98px) {
  /* Forms generales */
  .app-content form .form-control,
  .app-content form .form-select,
  .app-content form textarea,
  .course-new-form .form-control,
  .course-new-form .form-select,
  .course-new-form textarea {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  .course-new-form .description-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .course-new-form .btn-ai-desc,
  .course-new-form button[type="submit"],
  .course-new-form .btn {
    min-height: var(--cog-resp-touch-min);
  }

  .course-new-form button[type="submit"] {
    width: 100%;
  }

  /* Asignaciones */
  .cog-assign-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .cog-assign-toolbar .flex-grow-1,
  .cog-assign-actions {
    width: 100%;
  }

  .cog-assign-actions .btn {
    width: 100%;
    min-height: var(--cog-resp-touch-min);
  }

  .form-asignar-individual {
    flex-wrap: wrap;
    width: 100%;
  }

  .form-asignar-individual .cog-select-fluid,
  .form-asignar-individual .form-select {
    flex: 1 1 100%;
    min-width: 0 !important;
    width: 100%;
  }

  /* Tablas */
  .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.5rem;
  }

  .table-responsive > table {
    margin-bottom: 0;
  }

  .table-responsive .btn,
  .table-responsive .btn-sm {
    min-height: var(--cog-resp-touch-min);
    min-width: var(--cog-resp-touch-min);
    padding: 0.4rem 0.65rem;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    font-size: 16px;
    min-height: var(--cog-resp-touch-min);
  }

  .dataTables_wrapper .row {
    --bs-gutter-x: 0.75rem;
  }

  /* Empresa cursos cards */
  .container.mt-4 .card.h-100 .card-title {
    word-break: break-word;
  }

  .container.mt-4 .card.h-100 .card-img-top {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
  }

  /* Course detail (empresa) */
  .course-lms {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }

  .course-hero {
    padding: 1.25rem 1rem !important;
    margin-left: 0;
    margin-right: 0;
  }

  .course-hero-actions {
    width: 100%;
  }

  .course-hero-actions .btn-hero,
  .course-hero-actions form {
    flex: 1 1 100%;
  }

  .course-hero-actions .btn-hero {
    width: 100%;
    white-space: normal;
    text-align: center;
    min-height: var(--cog-resp-touch-min);
  }

  .course-hero-cover {
    max-width: 100%;
  }

  .course-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #formEditarCurso .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #formEditarCurso .mt-3.d-flex {
    flex-direction: column;
  }

  #formEditarCurso .mt-3.d-flex .btn {
    width: 100%;
  }

  .topic-limit-form .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  .topic-limit-form .btn {
    min-height: var(--cog-resp-touch-min);
  }

  /* Syllabus alumno */
  .syllabus-page {
    max-width: 100%;
  }

  .syllabus-hero {
    display: flex;
    flex-direction: column;
  }

  .syllabus-hero__cover,
  .syllabus-hero__img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
  }

  .syllabus-topic-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .syllabus-topic-card__action,
  .syllabus-btn-study {
    width: 100%;
  }

  .syllabus-btn-study {
    min-height: var(--cog-resp-touch-min);
    justify-content: center;
  }

  .syllabus-topics__head--split {
    align-items: stretch;
  }

  .syllabus-export,
  .syllabus-btn-pdf {
    width: 100%;
  }

  .syllabus-btn-pdf {
    min-height: var(--cog-resp-touch-min);
    justify-content: center;
  }

  .syllabus-pdf-menu {
    left: 0;
    right: 0;
    width: auto;
  }

  /* Admin toolbars */
  .container.mt-4 .text-end.mb-3 {
    text-align: left !important;
  }

  .container.mt-4 .text-end.mb-3 .btn,
  .container.mt-4 > .btn.mb-3 {
    width: 100%;
    margin-left: 0 !important;
    margin-bottom: 0.5rem;
  }

  /* Historial */
  .quiz-history-table .btn,
  .historial .btn {
    min-height: var(--cog-resp-touch-min);
  }
}

/* Phone: card view for wide tables */
@media (max-width: 575.98px) {
  .table-responsive[data-cog-cards="1"].cog-cards-on > table,
  .table-responsive[data-cog-cards="1"].cog-cards-on > table thead {
    /* handled via .cog-cards-on class toggled by JS */
  }

  .table-responsive.cog-cards-on > table {
    border: 0;
  }

  .table-responsive.cog-cards-on > table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .table-responsive.cog-cards-on > table tbody tr {
    display: block;
    margin-bottom: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    padding: 0.35rem 0;
  }

  .table-responsive.cog-cards-on > table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0.55rem 0.85rem !important;
    white-space: normal;
    text-align: right;
    min-width: 0;
  }

  .table-responsive.cog-cards-on > table tbody td:last-child {
    border-bottom: 0 !important;
  }

  .table-responsive.cog-cards-on > table tbody td::before {
    content: attr(data-cog-label);
    font-weight: 600;
    color: #475569;
    text-align: left;
    flex: 0 0 42%;
    max-width: 42%;
  }

  .table-responsive.cog-cards-on > table tbody td .btn,
  .table-responsive.cog-cards-on > table tbody td .btn-sm {
    margin: 0.15rem;
  }

  .course-hero-actions .btn-hero {
    font-size: 0.9rem;
  }
}

/* Tablet: 2-col course cards already covered in FASE1; reinforce */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cog-assign-toolbar {
    flex-direction: row;
    align-items: flex-end !important;
  }

  .cog-assign-actions {
    width: auto;
  }

  .cog-assign-actions .btn {
    width: auto;
  }
}

/* Desktop intacto: no overrides agresivos >=1200 */
@media (min-width: 1200px) {
  .table-responsive.cog-cards-on > table thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}


/* ========== FASE 3: tema_detalle panels ========== */

.cog-study-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: rgba(15, 23, 42, 0.45);
  -webkit-tap-highlight-color: transparent;
}
.cog-study-panel-overlay.is-active {
  display: block;
}
.cog-study-toast {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 11000;
  max-width: min(92vw, 24rem);
  padding: 0.7rem 1rem;
  border-radius: 0.65rem;
  background: #0f2744;
  color: #fff;
  font-size: 0.875rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.cog-study-toast[hidden] { display: none !important; }

.study-actions-more {
  position: relative;
}
.study-actions-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  padding: 0.35rem;
  z-index: 50;
}
.study-actions-more__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 0;
  background: transparent;
  color: #0f2744;
  text-decoration: none;
  border-radius: 0.45rem;
  font-size: 0.9rem;
  text-align: left;
}
.study-actions-more__item:hover,
.study-actions-more__item:focus-visible {
  background: #f1f5f9;
  outline: none;
}

/* Desktop: show secondary buttons, hide More menu pattern preference */
@media (min-width: 1200px) {
  .study-actions-more { display: none !important; }
  .study-actions-desktop-only { display: inline-flex !important; }
  .cog-study-panel-overlay { display: none !important; }
}

@media (max-width: 1199.98px) {
  .study-workspace.cog-study-workspace {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    max-width: 100%;
    overflow-x: hidden;
  }

  .study-header {
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  }

  .study-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  .study-actions .study-btn,
  .study-actions .study-btn-primary,
  .study-actions .study-btn-accent,
  .study-actions .study-btn-ghost {
    min-height: 44px;
    flex: 1 1 auto;
  }

  .study-actions-desktop-only { display: none !important; }
  .study-actions-more { display: inline-flex; }

  .study-legacy-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .study-legacy-tools .btn {
    min-height: 44px;
  }

  .btn-open-resource-bar {
    min-height: 44px !important;
    width: 100%;
    justify-content: center;
  }

  /* Floating indices → bottom sheet */
  .cognitus-floating-panel,
  #panel-indice-notas.cognitus-floating-panel,
  #indice-expansiones.cognitus-floating-panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(78dvh, 78vh) !important;
    border-radius: 18px 18px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1065 !important;
  }

  .cognitus-floating-panel__header {
    cursor: default;
    min-height: 52px;
  }
  .cognitus-floating-panel__close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Chat Andrea → bottom sheet (height adjustable via --andrea-sheet-height) */
  #ventana-chat-ia.chat-assistant.chat-andrea--open,
  #ventana-chat-ia.chat-andrea.chat-andrea--open,
  #ventana-chat-ia.chat-andrea--sheet.chat-andrea--open {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--andrea-sheet-height, min(72dvh, 72vh)) !important;
    max-height: var(--andrea-sheet-height, min(72dvh, 72vh)) !important;
    border-radius: 16px 16px 0 0 !important;
    z-index: 1070 !important;
    transform: none !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  #ventana-chat-ia.ventana-chat-ia--expanded,
  #ventana-chat-ia.chat-andrea--expanded {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--cog-vv-height, 100dvh) !important;
    max-height: var(--cog-vv-height, 100dvh) !important;
    border-radius: 0 !important;
  }

  #ventana-chat-ia .chat-assistant-header,
  #ventana-chat-ia .chat-andrea__header {
    cursor: ns-resize;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    min-height: 52px;
    touch-action: none;
  }

  #ventana-chat-ia.chat-andrea--sheet .chat-andrea__header::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
  }

  #ventana-chat-ia .chat-andrea__messages,
  #ventana-chat-ia .chat-thread-wrap {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    min-height: 0;
  }

  #ventana-chat-ia .chat-assistant-btn,
  #ventana-chat-ia button,
  #ventana-chat-ia .btn {
    min-height: 44px;
    min-width: 44px;
  }

  #ventana-chat-ia textarea,
  #ventana-chat-ia input,
  #inputPreguntaIA {
    font-size: 16px !important;
    min-height: 44px;
  }

  #ventana-chat-ia .chat-composer,
  #ventana-chat-ia .chat-andrea__composer {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  }

  /* Quill notebook — neutralize min-width:380px */
  .cognitus-note-modal-host {
    z-index: 1080 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgba(15, 39, 68, 0.4) !important;
  }

  .cognitus-note-modal {
    /* documented !important: overrides tema_detalle min-width:380px */
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--cog-vv-height, 100dvh) !important;
    max-height: var(--cog-vv-height, 100dvh) !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .cognitus-note-modal-host--floating .cognitus-note-modal {
    left: 0 !important;
    top: 0 !important;
  }

  #cognitus-quill-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  #cognitus-quill-toolbar button,
  #cognitus-quill-toolbar .ql-picker {
    min-height: 44px;
    min-width: 44px;
  }

  .cognitus-note-modal__editor #quill-editor,
  .ql-container {
    font-size: 16px;
  }

  .cognitus-note-modal__footer,
  .cognitus-note-modal .modal-footer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .cognitus-note-modal__footer .btn,
  .cognitus-note-modal .modal-footer .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* Sheet pin lives on .resource-command-bar--sheet in tema_detalle.css (class-based). */
  .resource-command-bar.resource-command-bar--open {
    z-index: 1068 !important;
  }

  .study-selection-dock {
    z-index: 1070 !important;
  }


  .resource-highlight-swatch {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 44px;
    min-height: 44px;
  }

  .resource-highlight-swatches {
    padding-left: 0;
    justify-content: flex-start;
  }

  .resource-command-item,
  .resource-scope-chip,
  .resource-command-close {
    min-height: 44px;
  }

  .study-mark-popover {
    max-width: min(280px, calc(100vw - 16px)) !important;
  }

  .cognitus-result-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: min(78dvh, 78vh) !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    border-radius: 16px 16px 0 0 !important;
  }

  body.cog-study-panel-open {
    overflow: hidden !important;
  }

  /* Hide corner resize on touch; sheet height uses header drag instead */
  .resource-command-resize-handle,
  #ventana-chat-ia .chat-resize-handle,
  #ventana-chat-ia .chat-andrea__resize-handle,
  .cognitus-note-modal .resize-handle {
    display: none !important;
  }
}

/* Phone tighter */
@media (max-width: 575.98px) {
  .study-actions .study-btn {
    flex: 1 1 calc(50% - 0.5rem);
  }
  .study-title {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    word-break: break-word;
  }
}

/* Tablet landscape: allow side panel for chat when wide enough */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
  #ventana-chat-ia.chat-assistant.chat-andrea--open,
  #ventana-chat-ia.chat-andrea.chat-andrea--open {
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: min(420px, 46vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .cognitus-floating-panel,
  #panel-indice-notas.cognitus-floating-panel,
  #indice-expansiones.cognitus-floating-panel {
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: min(360px, 42vw) !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cognitus-floating-panel,
  #ventana-chat-ia,
  .cognitus-note-modal,
  .resource-command-bar {
    animation: none !important;
    transition: none !important;
  }
}


/* ========== FASE 4: canvas / diagramas / anotaciones / recursos ========== */
.cognitus-annotation-editor__live,
.cognitus-diagram__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cognitus-annotation-editor__touch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.45rem 0 0.55rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(15, 39, 68, 0.08);
}

.cognitus-annotation-editor__touch-actions[hidden] {
  display: none !important;
}

.cognitus-annotation-editor__touch-btn {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

.cognitus-annotation-editor--mode-move .cognitus-annotated-image__stage {
  touch-action: none;
  cursor: grabbing;
}

.cognitus-annotation-editor--mode-select .cognitus-annotated-image__stage {
  touch-action: pan-y;
}

.cognitus-diagram__viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.cognitus-diagram__view-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0 0 0.5rem;
  position: relative;
}

.cognitus-diagram__view-btn {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

.cognitus-diagram__scale-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a6d82;
  margin-left: 0.25rem;
}

.cognitus-diagram__scroller {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: min(70dvh, 70vh);
  border: 1px solid rgba(15, 39, 68, 0.08);
  border-radius: 10px;
  background: #fff;
  touch-action: pan-x pan-y;
}

.cognitus-diagram__zoom-spacer {
  position: relative;
}

.cognitus-diagram__zoom-inner {
  display: inline-block;
  transform-origin: 0 0;
  will-change: transform;
}

.cognitus-diagram__zoom-inner .cognitus-diagram__canvas {
  overflow: visible;
  max-width: none;
}

@media (max-width: 1199.98px) {
  .cognitus-generated-resource-card,
  .cognitus-generated-resource-card__body,
  .cognitus-annotated-image,
  .cognitus-annotated-image__stage,
  .cognitus-annotated-image__img,
  .cognitus-diagram,
  .cognitus-table-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .cognitus-annotated-image__img {
    width: 100%;
    height: auto;
  }

  .cognitus-generated-resource-card__actions,
  .cognitus-annotation-editor__toolbar,
  .cognitus-image-diagram-hint__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .cognitus-generated-resource-card__actions .btn,
  .cognitus-annotation-editor__toolbar .btn,
  .cognitus-image-diagram-hint__actions .btn,
  .btn-open-resource-bar {
    min-height: 44px;
    touch-action: manipulation;
  }

  .cognitus-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .cognitus-generated-table {
    min-width: 0;
  }

  .cognitus-generated-table th,
  .cognitus-generated-table td {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .cognitus-diagram__node,
  .cognitus-diagram__node--root,
  .cognitus-diagram__node--compare {
    min-width: min(7.5rem, 42vw) !important;
    max-width: min(14rem, 88vw);
  }

  .study-mark-popover {
    max-width: min(320px, calc(100vw - 16px)) !important;
    max-height: min(70dvh, 70vh);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .resource-command-bar {
    max-width: 100vw !important;
  }

  /* Larger effective hit area for annotation targets */
  .cognitus-annotated-image__target {
    width: 18px;
    height: 18px;
  }

  .cognitus-annotated-image__target::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
  }

  .cognitus-annotated-image__label--editing {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }

  .cognitus-annotation-editor__properties {
    max-height: min(38dvh, 38vh);
  }
}

@media (min-width: 1200px) {
  .cognitus-diagram__view-tools {
    opacity: 0.92;
  }
}