/* ═══════════════════════════════════════════════════════════════════════════════
   Zora Campus — Design System Base
   Estilos globales y overrides de Ant Design para el look "Zora Fresh".
   No imita Canvas LMS. Tipografía: Inter. Fondos limpios. Bordes suaves.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Brand color override por institución. AntD canvas-tokens.ts lee
   var(--brand-primary, '#1B3A6B') para que la institución pueda inyectar su
   color institucional desde /admin/settings sin tocar el theme. */
:root {
  --brand-primary: #1B3A6B;
  --canvas-nav-rail-bg: #0F1F2E;
  --canvas-link: #0F766E;
  --brand-accent: #14B89C;

  /* Escala de spacing basada en múltiplos de 8px (ritmo moderno) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Touch target mínimo */
  --touch-target-min: 44px;
}

/* ─── Utilidades responsive ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .desktop-only,
  .tablet-only { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-only,
  .desktop-only { display: none !important; }
}
@media (min-width: 1024px) {
  .mobile-only,
  .tablet-only { display: none !important; }
}

.touch-target {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .ant-btn:not(.ant-btn-sm):not(.ant-btn-icon-only) {
    min-height: var(--touch-target-min);
  }
  .ant-layout-content[role="main"] {
    padding: var(--space-4) !important;
  }
}

/* ─── Tablas responsive en mobile ───────────────────────────────────────
   En mobile (≤767) las tablas con .responsive-table usan scroll
   horizontal nativo en vez de convertirse en cards apiladas.
   El patrón "cards" generaba demasiado ruido visual (saltar de card
   a card). El scroll horizontal mantiene la legibilidad tabular. */
@media (max-width: 767px) {
  .responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .responsive-table .ant-table {
    min-width: 600px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color: #111827;
  background: #FAFBFC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reserva SIEMPRE el espacio de la barra de scroll vertical del documento, así
   el ancho del viewport NO cambia entre una página corta (sin scroll) y una
   alta (con scroll). Sin esto, todo el contenido centrado (incl. la nav del
   curso, que vive dentro del wrapper max-width centrado de AppLayout) se corre
   ~7-8px horizontalmente al navegar entre sub-páginas del curso. */
html {
  scrollbar-gutter: stable;
}

#root {
  height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Scrollbar moderna y sutil */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* A11y — High Contrast */
body.a11y-high-contrast {
  filter: contrast(1.4) saturate(1.2);
}

/* A11y — Dyslexia Font */
body.a11y-dyslexia-font,
body.a11y-dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Inter', sans-serif !important;
}

/* ─── Zora Fresh overrides ────────────────────────────────────────────── */

.ant-btn-default {
  box-shadow: none !important;
}
.ant-btn-default:hover {
  border-color: #D1D5DB !important;
  color: #0F766E !important;
  background: #F9FAFB !important;
}
.ant-btn-primary {
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28) !important;
}
.ant-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.35) !important;
}
.ant-btn {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

.ant-input,
.ant-input-affix-wrapper,
.ant-select-single .ant-select-selector,
.ant-picker {
  min-height: 40px;
}
.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-picker:hover,
.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  background: #FFFFFF;
}
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper-focused,
.ant-picker-focused,
.ant-select-focused .ant-select-selector {
  box-shadow: 0 0 0 3px rgba(20, 184, 156, 0.18) !important;
}

.ant-card {
  overflow: hidden;
}
.ant-table-wrapper .ant-table {
  border-radius: 14px;
}
.ant-table-wrapper .ant-table-thead > tr > th {
  font-weight: 600;
}
.ant-segmented {
  padding: 4px;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
}
.ant-segmented .ant-segmented-item {
  border-radius: 8px;
}

/* Modal */
.ant-modal .ant-modal-close {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  top: 16px;
  right: 16px;
}
.ant-modal .ant-modal-close:hover {
  border-color: #14B89C;
  color: #14B89C;
}
.ant-modal .ant-modal-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #E8EAED;
}

/* Drawer */
.ant-drawer .ant-drawer-close {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ant-drawer .ant-drawer-header {
  padding: 16px 24px;
  border-bottom: 1px solid #E8EAED;
}
.ant-drawer .ant-drawer-title {
  font-size: 18px;
  font-weight: 600;
}
.ant-drawer .ant-drawer-body {
  padding: 20px 24px;
}

/* Tabs */
.ant-tabs-top > .ant-tabs-nav::before {
  border-bottom-color: #E8EAED !important;
}

/* Table — Zora Fresh: sin zebra, solo separación sutil */
.ant-table-thead > tr > th {
  background: #F9FAFB !important;
  font-weight: 600 !important;
  color: #0B1220 !important;
}
.ant-table-tbody > tr > td {
  border-bottom: 1px solid #F0F0F0 !important;
}

/* Checkbox / Radio / Select */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #14B89C !important;
  border-color: #14B89C !important;
}

/* Popover */
.ant-popover-inner {
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.1) !important;
  border-radius: 12px !important;
}

/* Link button */
.ant-btn-link {
  color: #0F766E !important;
}
.ant-btn-link:hover {
  color: #0D5C56 !important;
}

/* Module item links */
.module-item-link {
  text-decoration: none;
}
.module-item-link:hover {
  text-decoration: underline;
}

/* Hover rows */
.module-item-row:hover,
.student-module-item:hover,
.assignment-row:hover {
  background-color: #F0FDF9;
}

/* Course sidebar buttons */
.course-sidebar-btn {
  background-color: #F5F5F5;
  transition: background-color 120ms ease;
}
.course-sidebar-btn:hover {
  background-color: #E5E5E5;
}

/* Announcement body responsive */
.announcement-body img,
.announcement-body video,
.announcement-body iframe {
  max-width: 100%;
  height: auto;
}
.announcement-body table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}
.announcement-body pre {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Modales fullscreen-ish en mobile ────────────────────────────────── */
@media (max-width: 767px) {
  .ant-modal {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    top: 0 !important;
    padding-bottom: 0 !important;
  }
  .ant-modal .ant-modal-body {
    padding: var(--space-4);
  }
  .ant-modal-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .ant-modal-footer .ant-btn {
    width: 100%;
    margin-inline-start: 0 !important;
  }
}

/* ─── Form items: inputs full-width en mobile ─────────────────────────── */
@media (max-width: 767px) {
  .ant-form-vertical .ant-form-item-control-input,
  .ant-form-vertical .ant-form-item-control-input-content > .ant-input,
  .ant-form-vertical .ant-form-item-control-input-content > .ant-input-affix-wrapper,
  .ant-form-vertical .ant-form-item-control-input-content > .ant-input-number,
  .ant-form-vertical .ant-form-item-control-input-content > .ant-picker,
  .ant-form-vertical .ant-form-item-control-input-content > .ant-select {
    width: 100% !important;
  }
}

/* ─── Tabs: scroll horizontal nativo en mobile ────────────────────────── */
@media (max-width: 767px) {
  .ant-tabs-nav {
    margin-bottom: 12px !important;
  }
  .ant-tabs-tab {
    padding: 8px 12px !important;
  }
}