/* =====================================================================
   CAPA DEFINITIVA DE LAYOUT
   Aísla el acceso administrativo de los estilos genéricos de tarjetas y
   estabiliza los módulos del panel en escritorio, tablet y móvil.
   ===================================================================== */

/* Reglas de seguridad global para contenido variable. */
:where(.admin-body, .login-body) :where(h1, h2, h3, p, strong, small, span, a, button, label, td, th, code) {
  min-width: 0;
}

:where(.admin-body, .login-body) :where(p, small, td, th, .management-copy, .reply-review-copy, .academic-note) {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   LOGIN: el formulario y el pie forman una única unidad centrada.
   La clase .login-card no debe heredar borde/sombra de las tarjetas del sitio.
   --------------------------------------------------------------------- */
.login-body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: #f5f9fb;
}

.login-layout {
  min-height: 100vh;
  min-height: 100svh;
}

.login-panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vh, 44px) clamp(28px, 4.5vw, 72px);
  overflow-x: hidden;
  overflow-y: auto;
}

.login-panel-content {
  width: min(100%, 470px);
  margin-block: auto;
}

.login-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.login-back {
  margin: 0 0 clamp(22px, 4vh, 38px);
  font-size: .72rem;
}

.login-card > .eyebrow {
  margin-bottom: 8px;
}

.login-card h2 {
  margin: 0 0 8px;
  font-size: clamp(2.65rem, 3.8vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.login-subtitle {
  margin: 0 0 clamp(22px, 3.2vh, 30px);
  font-size: .98rem;
  line-height: 1.45;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form .field {
  display: grid;
  gap: 6px;
  margin: 0;
  font-family: inherit;
}

.login-form .field > span {
  font-family: inherit;
  font-size: .72rem;
  font-weight: 760;
  line-height: 1.35;
}

.login-form .field .error:empty {
  display: none;
}

.login-form .field .error:not(:empty) {
  display: block;
  min-height: 0;
  margin: 0;
  font-size: .66rem;
  line-height: 1.35;
}

.login-input {
  width: 100%;
  min-width: 0;
}

.login-input input {
  min-height: 52px;
}

.login-form .button {
  min-height: 50px;
  white-space: normal;
}

.demo-credentials {
  width: 100%;
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.demo-credentials > div {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
}

.demo-credentials p {
  font-size: .7rem;
  line-height: 1.55;
}

.demo-credentials code {
  white-space: nowrap;
  overflow-wrap: normal;
}

.demo-credentials > small {
  margin: 9px 0 0 36px;
  font-size: .59rem;
  line-height: 1.45;
}

.login-footer {
  position: static;
  width: 100%;
  margin: 16px 0 0;
  text-align: center;
  font-size: .58rem;
  line-height: 1.4;
}

.login-visual-copy {
  bottom: clamp(28px, 5vh, 54px);
}

.login-visual-copy h1 {
  font-size: clamp(3rem, min(5vw, 8.5vh), 5.7rem);
  line-height: .94;
}

/* En alturas realmente reducidas se habilita scroll, sin encoger textos
   ni pegar el contenido a los bordes. */
@media (min-width: 981px) and (max-height: 620px) {
  .login-panel {
    align-items: flex-start;
    padding-block: 22px;
  }

  .login-panel-content {
    margin-block: 0;
  }

  .login-back {
    margin-bottom: 20px;
  }

  .login-card h2 {
    font-size: 2.65rem;
  }

  .login-subtitle {
    margin-bottom: 20px;
  }

  .login-visual-copy {
    bottom: 24px;
  }

  .login-security-note {
    margin-top: 18px;
  }
}

@media (max-width: 980px) {
  .login-panel {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-start;
    padding: 36px clamp(22px, 7vw, 54px);
  }

  .login-panel-content {
    margin-block: auto;
  }

  .login-mobile-mark {
    margin-bottom: 28px;
  }
}

@media (max-width: 520px) {
  .login-panel {
    padding: 24px 18px;
  }

  .login-panel-content {
    width: 100%;
  }

  .login-card h2 {
    font-size: clamp(2.35rem, 12vw, 2.85rem);
  }

  .login-subtitle {
    font-size: .9rem;
  }

  .demo-credentials > small {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------
   ADMINISTRACIÓN: módulos, comentarios, formularios y tablas.
   --------------------------------------------------------------------- */
.admin-main,
.admin-main .container,
.admin-panel,
.admin-lower-grid,
.admin-lower-grid > *,
.admin-section-head,
.admin-toolbar,
.admin-filters,
.chatbot-settings-grid,
.management-row,
.service-admin-card {
  min-width: 0;
}

.admin-workspace-nav {
  max-width: 100%;
  scrollbar-width: thin;
}

.admin-section-head > div,
.admin-title-row > div {
  min-width: 0;
}

.admin-section-head h2,
.admin-title-row h1 {
  overflow-wrap: normal;
}

.admin-panel :where(input, select, textarea, button, .button) {
  min-width: 0;
  max-width: 100%;
}

.table-wrap,
.users-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.admin-table {
  min-width: 760px;
}

/* Cada comentario queda contenido en una tarjeta: texto arriba y gestión
   debajo. Los botones conservan una sola línea en escritorio. */
.review-management #reviewReplyList {
  display: grid;
  gap: 14px;
  padding: 18px 20px 22px;
}

.review-management #reviewReplyList .reply-admin-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 172px !important;
  grid-template-areas:
    "review review"
    "editor actions";
  gap: 13px 14px;
  align-items: stretch !important;
  margin: 0;
  padding: 17px;
  border: 1px solid rgba(9, 75, 106, .12);
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #f8fcfe);
}

.review-management .reply-review-copy {
  grid-area: review;
  min-width: 0;
}

.review-management .reply-review-copy p {
  max-width: 72ch;
  margin-bottom: 4px;
}

.review-management .reply-editor {
  grid-area: editor;
  min-width: 0;
}

.review-management .reply-editor textarea {
  width: 100%;
  min-height: 90px;
  height: 100%;
  margin: 0;
  resize: vertical;
}

.review-management .reply-admin-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  min-width: 0;
}

.review-management .reply-admin-actions .button {
  width: 100%;
  min-height: 43px;
  padding-inline: 10px;
  font-size: .69rem;
  line-height: 1.2;
  white-space: nowrap;
}

.data-management,
.data-action-grid,
.academic-note {
  min-width: 0;
}

.academic-note span {
  display: block;
}

.chatbot-settings-grid .field,
.chatbot-settings-actions,
.chatbot-topic-list,
.chatbot-topic-card {
  min-width: 0;
}

.management-copy p,
.service-admin-card p,
.chatbot-topic-card p {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .admin-lower-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .admin-table {
    min-width: 680px;
  }

  .review-management #reviewReplyList {
    padding: 14px;
  }

  .review-management #reviewReplyList .reply-admin-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "review"
      "editor"
      "actions";
    padding: 15px;
  }

  .review-management .reply-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-management .reply-admin-actions .button {
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .review-management .reply-admin-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.dark-mode .review-management #reviewReplyList .reply-admin-item {
  border-color: rgba(176, 220, 233, .14);
  background: linear-gradient(135deg, #102630, #0d2028);
}

/* Ajuste final de la gestión de comentarios: neutraliza reglas heredadas
   que daban flex expansivo a los botones y mantenía el estado fuera de la tarjeta. */
.review-management .reply-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-management .reply-editor textarea {
  height: auto;
  flex: 1 1 auto;
}

.review-management .reply-editor .reply-status {
  display: block;
  margin: 0;
  line-height: 1.35;
}

.review-management .reply-admin-actions .button {
  flex: 0 0 auto !important;
}

@media (max-width: 900px) {
  .review-management #reviewReplyList .reply-admin-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "review"
      "editor"
      "actions";
  }

  .review-management .reply-admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-management .reply-admin-actions .button {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .review-management .reply-admin-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}