@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

:root {
  --ju-bg: #f3f4f6;
  --ju-white: #ffffff;
  --ju-text: #1f2937;
  --ju-muted: #6b7280;
  --ju-border: #c9d4de;

  --ju-accent: #55847e;
  --ju-accent-strong: #3f6b65;
  --ju-accent-soft: #b8d0cc;
  --ju-accent-faint: #d7e6e3;
  --ju-accent-text: #ffffff;

  --ju-panel-dark: #304744;
  --ju-panel-mid: #5f7e7a;
  --ju-panel-light: #eef4f3;
  --ju-panel-faint: #f6faf9;
  --ju-panel-border: #c9d4de;
  --ju-panel-text: #ffffff;

  --metro-blue: #3b82f6;
  --metro-green: #22c55e;
  --metro-purple: #a855f7;
  --metro-orange: #f97316;
  --metro-red: #ef4444;
  --metro-slate: #475569;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: 'Ubuntu', Arial, sans-serif;
  background: var(--ju-bg);
  color: var(--ju-text);
}

body {
  display: flex;
  flex-direction: column;
}

body.teacher-admin-body {
  height: 100vh;
  overflow: hidden;
}

.chaflan,
.ju-card,
.ju-login-side,
.ju-login-card,
.ju-mini-stat,
.ju-pill,
.cuenta,
#bandejas a,
#mensajes article,
.email,
.metro-tile,
.answer-modal,
.metro-hero,
.metro-save-status,
.teacher-empty,
.ju-alert {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

/* jocarsa-iu shell */
#topbar {
  min-height: 68px;
  background: var(--ju-panel-dark);
  color: var(--ju-panel-text);
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
}

#marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

#marca h1 {
  margin: 0;
  font-size: 20px;
}

#marca p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

.ju-logo {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  font-size: 20px;
  font-weight: 700;
  text-transform: lowercase;
}

.ju-logo-large {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

#herramientas,
.ju-button-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color:black;
}

.search-btn,
.search-clear,
.toolbtn-link,
.ju-btn {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  border: none;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  transition: .2s ease;
}

.search-btn,
.search-clear {
  height: 42px;
  padding: 0 14px;
  background: rgba(255,255,255,.10);
  color: var(--ju-white);
}

.search-btn:hover,
.search-clear:hover,
.toolbtn-link:hover {
  background: rgba(255,255,255,.18);
}

.toolbtn-link {
  height: 39px;
  padding: 10px 14px;
  background: var(--ju-panel-mid);
  color: var(--ju-white);
}

.toolbtn-link.primario,
.ju-btn-primary {
  background: var(--ju-accent);
  color: var(--ju-accent-text);
}

.ju-btn-primary:hover,
.toolbtn-link.primario:hover {
  background: var(--ju-accent-strong);
}

.ju-btn-secondary {
  background: var(--ju-panel-mid);
  color: var(--ju-white);
}

.ju-btn-ghost {
  background: transparent;
  color: var(--ju-panel-dark);
  border: 1px solid var(--ju-border);
}

.ju-btn {
  padding: 11px 16px;
  min-width: 110px;
}

#search-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

#search-input,
.ju-form-grid input,
.ju-form-grid textarea {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  width: 100%;
  border: 1px solid var(--ju-border);
  background: var(--ju-white);
  color: var(--ju-text);
  padding: 12px 14px;
  border-radius: 0;
  outline: none;
  font: inherit;
}

#search-input {
  height: 42px;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: var(--ju-white);
}

#search-input::placeholder {
  color: rgba(255,255,255,.60);
}

/* login */
.ju-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background:
    radial-gradient(circle at top left, var(--ju-accent-faint), transparent 35%),
    linear-gradient(180deg, #eef2f7, #e5ebf3);
}

.ju-login-screen {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.ju-login-layout {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 520px);
  gap: 24px;
  align-items: stretch;
}

.ju-login-side,
.ju-login-card,
.ju-mini-stat,
.ju-card,
.email {
  background: var(--ju-white);
  border: 1px solid #dfe4ea;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.ju-login-side {
  background: linear-gradient(180deg, var(--ju-panel-dark), var(--ju-panel-mid));
  color: var(--ju-white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: none;
}

.ju-login-side h3,
.ju-login-side h4,
.ju-login-side p {
  color: var(--ju-white);
}

.ju-login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ju-login-brand h3 {
  font-size: 24px;
  margin: 0 0 6px;
}

.ju-login-side-copy h4 {
  margin: 0 0 10px;
  font-size: 18px;
}

.ju-login-side-kpis {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ju-mini-stat {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
  color: var(--ju-white);
}

.ju-mini-stat strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 6px;
}

.ju-mini-stat span {
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.ju-login-card {
  padding: 28px;
  background: var(--ju-white);
}

.ju-login-card-head h3 {
  font-size: 28px;
  margin: 0 0 8px;
}

.ju-login-card-head p {
  margin: 0;
  color: var(--ju-muted);
}

.ju-login-form {
  margin-top: 18px;
}

.ju-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.ju-form-grid.single {
  grid-template-columns: 1fr;
}

.ju-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.ju-login-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.ju-login-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  margin-top: 18px;
  border-top: 1px solid #eceff5;
  color: var(--ju-muted);
  font-size: 13px;
}

.ju-alert {
  padding: 12px;
  margin-top: 16px;
  background: #fee2e2;
  color: #991b1b;
}

.ju-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--ju-accent-soft);
  color: var(--ju-accent-strong);
}

/* Student Metro */
.student-metro-body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, var(--ju-accent-faint), transparent 30%),
    linear-gradient(135deg, var(--ju-panel-light), #ffffff);
}

.student-progress-top {
  display: grid;
  gap: 7px;
}

.student-progress-line {
  height: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  overflow: hidden;
  width: min(420px, 42vw);
}

#progressBar {
  width: 0%;
  height: 100%;
  background: var(--ju-accent-soft);
  transition: width .25s ease;
}

#progressText {
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

#studentWorkspace {
  padding: 24px;
  transition: filter .34s ease, transform .34s ease;
}

body.modal-open #studentWorkspace,
body.modal-open #topbar {
  filter: blur(7px);
}

.metro-hero {
  min-height: 210px;
  padding: 28px;
  margin-bottom: 24px;
  color: white;
  background:
    linear-gradient(135deg, rgba(48,71,68,.96), rgba(95,126,122,.88)),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.20), transparent 34%);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
  box-shadow: 0 18px 44px rgba(31,41,55,.16);
}

.metro-hero h2 {
  max-width: 900px;
  margin: 16px 0 10px;
  font-size: clamp(32px, 5vw, 72px);
  letter-spacing: -.055em;
  line-height: .93;
}

.metro-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 17px;
  line-height: 1.55;
}

.metro-save-status {
  background: rgba(255,255,255,.12);
  padding: 16px;
  font-weight: 800;
  min-width: 160px;
  text-align: center;
}

.metro-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  grid-auto-rows: 118px;
  gap: 16px;
}

.metro-tile {
  position: relative;
  border: 0;
  padding: 16px;
  color: black !important;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  background: var(--metro-slate);
  box-shadow: 0 12px 28px rgba(31,41,55,.12);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.metro-tile:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 18px 38px rgba(31,41,55,.18);
}

.metro-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, transparent, rgba(0,0,0,.16));
  pointer-events: none;
}

.metro-tile > * {
  position: relative;
  z-index: 2;
  color: black !important;
}

.metro-tile h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.15;
}

.metro-tile p {
  margin: 8px 0 0;
 color: black !important;
  line-height: 1.35;
  font-size: 13px;
}

.metro-tile .tile-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

.metro-tile.is-complete .tile-status {
  color: #ffffff;
  font-weight: 800;
}

.metro-tile.size-wide {
  grid-column: span 2;
}

.metro-tile.size-large {
  grid-column: span 2;
  grid-row: span 2;
}

.metro-tile.color-0 { background: #3f6b65; }
.metro-tile.color-1 { background: #3b82f6; }
.metro-tile.color-2 { background: #a855f7; }
.metro-tile.color-3 { background: #f97316; }
.metro-tile.color-4 { background: #0f766e; }
.metro-tile.color-5 { background: #475569; }
.metro-tile.color-6 { background: #be123c; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15,23,42,.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.answer-modal {
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: rgba(255,255,255,.96);
  border: 1px solid #dfe4ea;
  box-shadow: 0 36px 90px rgba(15,23,42,.35);
  padding: 28px;
  transform-origin: center;
  transform: translateY(24px) scale(.92);
  opacity: 0;
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}

.modal-overlay.is-open .answer-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-overlay.is-closing .answer-modal {
  transform: translateY(24px) scale(.92);
  opacity: 0;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--ju-panel-dark);
  color: white;
  font-size: 26px;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.modal-section {
  display: inline-flex;
  padding: 6px 10px;
  margin-bottom: 12px;
  background: var(--ju-accent-soft);
  color: var(--ju-accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.answer-modal h2 {
  margin: 0 48px 10px 0;
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ju-panel-dark);
}

#modalQuestion {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.45;
  color: #111827;
}

#modalHelper {
  margin: 0 0 18px;
  color: var(--ju-muted);
  line-height: 1.55;
}

#modalAnswer {
  width: 100%;
  min-height: 320px;
  padding: 18px;
  resize: vertical;
  border: 1px solid var(--ju-border);
  outline: none;
  font: inherit;
  line-height: 1.6;
  color: var(--ju-text);
  background: #f8fafc;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

#modalAnswer:focus {
  border-color: var(--ju-accent);
  box-shadow: 0 0 0 4px rgba(85,132,126,.16);
  background: white;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

#modalCounter {
  display: block;
  color: var(--ju-panel-dark);
}

#modalMinWords {
  color: var(--ju-muted);
  font-size: 13px;
}


/* Student filters */
.student-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.student-filters select {
  height: 42px;
  min-width: 170px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: var(--ju-white);
  padding: 0 12px;
  font: inherit;
  font-weight: 600;
  outline: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.student-filters select option {
  color: #111827;
  background: #ffffff;
}

body.modal-opening #studentWorkspace,
body.modal-opening #topbar {
  filter: blur(7px);
}

/* Dense Metro: tries to backfill holes created by irregular tile sizes */
.metro-grid {
  grid-auto-flow: dense;
  align-items: stretch;
}

.metro-empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.86);
  border: 1px dashed var(--ju-border);
  color: var(--ju-muted);
  font-weight: 700;
}

.metro-tile.is-animating-source {
  opacity: .08;
  transform: scale(.98);
}

/* FLIP card-to-modal animation */
.flip-ghost {
  position: fixed;
  z-index: 70;
  padding: 16px;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, var(--ju-panel-mid), var(--ju-panel-dark));
  box-shadow: 0 24px 70px rgba(15,23,42,.34);
  overflow: hidden;
  pointer-events: none;
  transition:
    left .34s cubic-bezier(.2,.8,.2,1),
    top .34s cubic-bezier(.2,.8,.2,1),
    width .34s cubic-bezier(.2,.8,.2,1),
    height .34s cubic-bezier(.2,.8,.2,1),
    border-radius .34s cubic-bezier(.2,.8,.2,1),
    opacity .22s ease;
  will-change: left, top, width, height;
}

.flip-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, transparent, rgba(0,0,0,.16));
  pointer-events: none;
}

.flip-ghost > * {
  position: relative;
  z-index: 2;
}

.flip-ghost h3 {
  margin: 12px 0 8px;
  font-size: clamp(18px, 2.4vw, 38px);
  line-height: 1.05;
}

.flip-ghost p {
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}

.flip-ghost .tile-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,.78);
  z-index: 3;
}

.flip-ghost.is-modal-shape {
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.90)),
    radial-gradient(circle at top right, var(--ju-accent-faint), transparent 36%);
  color: var(--ju-panel-dark);
  border: 1px solid #dfe4ea;
}

.flip-ghost.is-modal-shape p,
.flip-ghost.is-modal-shape .tile-meta {
  color: var(--ju-muted);
}

.modal-overlay.instant-modal .answer-modal {
  transition: none;
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

.modal-overlay.is-closing .answer-modal {
  transform: translateY(0) scale(1);
  opacity: 0;
  transition: opacity .12s ease;
}

/* Teacher admin */
#app {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
}

#bandejas,
#mensajes,
#contenido {
  min-height: 0;
}

#bandejas {
  width: 260px;
  background: var(--ju-panel-dark);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  overflow-x: visible;
  direction: rtl;
}

#bandejas > * {
  direction: ltr;
}

#bandejas a {
  color: var(--ju-white);
  text-decoration: none;
  background: rgba(255,255,255,.08);
  padding: 14px 16px;
  display: block;
  font-weight: 700;
  position: relative;
  transition: .25s ease;
}

#bandejas a:hover {
  background: rgba(255,255,255,.18);
  transform: translateX(4px);
}

#bandejas a.activo {
  background: var(--ju-panel-mid);
  width: calc(100% + 20px);
  right: -20px;
  z-index: 3;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  clip-path: none;
}

.folder-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.folder-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.14);
}

.cuenta {
  margin-top: auto;
  background: rgba(255,255,255,.05);
  color: #e6e9f2;
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
}

#mensajes {
  width: 420px;
  background: var(--ju-panel-mid);
  padding: 20px 20px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  overflow-x: visible;
  direction: rtl;
  position: relative;
}

#mensajes > * {
  direction: ltr;
}

#mensajes article {
  background: var(--ju-panel-light);
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  position: relative;
  transition: .25s ease;
  overflow: visible;
  cursor: pointer;
}

#mensajes article:hover {
  transform: translateX(4px);
}

#mensajes article.activo {
  right: -20px;
  width: calc(100% + 20px);
  z-index: 4;
  box-shadow: 0 0 0 4px rgba(126,139,184,.12), 0 12px 26px rgba(0,0,0,.10);
  clip-path: none;
}

.asunto-linea,
.linea1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

#mensajes h3,
.ju-card h3 {
  margin: 0;
  font-size: 16px;
  color: #111827;
}

.email-preview,
.thread-meta,
.ju-subtle,
.ju-card p,
.email-body p {
  color: var(--ju-muted);
}

.thread-meta,
.ju-subtle {
  font-size: 12px;
}

#contenido {
  flex: 1;
  background: var(--ju-panel-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#cabecera-contenido {
  padding: 20px 24px;
  border-bottom: 1px solid var(--ju-border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}

#cabecera-contenido h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

#cabecera-contenido p {
  margin: 0;
  color: var(--ju-muted);
  font-size: 13px;
}

#panel {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.teacher-empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  color: var(--ju-muted);
  background: white;
  border: 1px dashed var(--ju-border);
}

.teacher-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.teacher-kpis .ju-mini-stat {
  color: var(--ju-text);
  background: linear-gradient(180deg, #ffffff, #f4f7fb);
  border: 1px solid #e2e8f0;
}

.teacher-kpis .ju-mini-stat span {
  color: var(--ju-muted);
}

.teacher-section {
  margin-bottom: 18px;
}

.teacher-section h3 {
  margin: 18px 0 12px;
}

.answer-card {
  background: white;
  border: 1px solid #dfe4ea;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.answer-card h4 {
  margin: 0 0 8px;
}

.answer-card .prompt {
  margin: 0 0 12px;
  color: var(--ju-muted);
}

.answer-card .answer {
  white-space: pre-wrap;
  line-height: 1.6;
}

.code-box {
  white-space: pre-wrap;
  background: #111827;
  color: #f9fafb;
  padding: 18px;
  overflow: auto;
  max-height: 620px;
  line-height: 1.45;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

@media (max-width: 1280px) {
  .metro-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

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

@media (max-width: 1100px) {
  #topbar {
    grid-template-columns: 1fr;
  }

  .student-progress-line {
    width: 100%;
  }

  .metro-hero {
    grid-template-columns: 1fr;
  }

  .metro-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    grid-auto-rows: 130px;
  }

  .metro-tile.size-wide,
  .metro-tile.size-large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .ju-login-layout {
    grid-template-columns: 1fr;
  }

  body.teacher-admin-body {
    height: auto;
    overflow: auto;
  }

  #app {
    flex-direction: column;
    overflow: visible;
  }

  #bandejas,
  #mensajes,
  #contenido {
    width: 100%;
  }

  #mensajes article.activo,
  #bandejas a.activo {
    right: 0;
    width: 100%;
  }

  #cabecera-contenido {
    grid-template-columns: 1fr;
  }

  .teacher-kpis {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .metro-grid {
    grid-template-columns: 1fr;
  }

  .metro-tile.size-wide,
  .metro-tile.size-large {
    grid-column: span 1;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-footer .ju-btn {
    width: 100%;
  }
}


/* =========================================================
   STUDENT COMPACT FULL-VIEW VERSION
   ========================================================= */

body.student-metro-body {
  height: 100vh;
  overflow: hidden;
}

.student-metro-body #topbar {
  min-height: 56px;
  height: 56px;
  grid-template-columns: minmax(230px, 330px) minmax(180px, 280px) 1fr auto;
  gap: 12px;
  padding: 6px 14px;
}

.student-metro-body .ju-logo {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

.student-metro-body #marca h1 {
  font-size: 17px;
  line-height: 1.05;
}

.student-metro-body #marca p {
  font-size: 11px;
}

.student-progress-top {
  gap: 4px;
}

.student-progress-line {
  height: 7px;
  width: 100%;
}

#progressText {
  font-size: 10px;
}

.student-filters {
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.filter-group {
  display: inline-flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}

.filter-group::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex: 0 0 auto;
  height: 34px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.filter-chip:hover {
  background: rgba(255,255,255,.16);
}

.filter-chip.active {
  background: var(--ju-accent-soft);
  color: var(--ju-accent-strong);
  border-color: var(--ju-accent-soft);
}

.filter-types {
  max-width: min(710px, 46vw);
}

.student-metro-body #herramientas .toolbtn-link {
  height: 34px;
  padding: 8px 11px;
  font-size: 12px;
}

#studentWorkspace {
  height: calc(100vh - 56px);
  overflow: hidden;
  padding: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.metro-hero {
  min-height: 76px;
  height: 76px;
  padding: 12px 16px;
  margin-bottom: 0;
  grid-template-columns: 1fr auto;
  box-shadow: 0 8px 22px rgba(31,41,55,.12);
}

.metro-hero .ju-pill {
  font-size: 9px;
  padding: 2px 6px;
}

.metro-hero h2 {
  margin: 6px 0 3px;
  font-size: clamp(22px, 2.7vw, 42px);
  letter-spacing: -.04em;
}

.metro-hero p {
  font-size: 12px;
  line-height: 1.25;
}

.metro-save-status {
  padding: 10px 12px;
  min-width: 110px;
  font-size: 12px;
}

.metro-grid {
  height: 100%;
  min-height: 0;
  overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  grid-auto-rows: minmax(86px, 1fr);
  gap: 8px;
  padding-bottom: 2px;
  align-content: stretch;
}

.metro-tile {
  min-height: 86px;
  padding: 10px 11px;
  box-shadow: 0 7px 18px rgba(31,41,55,.10);
}

.metro-tile:hover {
  transform: translateY(-2px) scale(1.008);
}

.metro-tile h3 {
  font-size: 14px;
  line-height: 1.1;
  margin-top: 4px;
}

.metro-tile p {
  font-size: 11px;
  line-height: 1.18;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.metro-tile .ju-pill {
  font-size: 9px;
  padding: 2px 5px;
}

.metro-tile .tile-meta {
  left: 11px;
  right: 11px;
  bottom: 8px;
  font-size: 10px;
}

.metro-tile.size-wide {
  grid-column: span 2;
}

.metro-tile.size-large {
  grid-column: span 2;
  grid-row: span 2;
}

.metro-tile.size-tall {
  grid-row: span 2;
}

.answer-modal {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 22px;
}

.answer-modal h2 {
  font-size: clamp(24px, 3.2vw, 44px);
}

#modalQuestion {
  font-size: 17px;
}

#modalAnswer {
  min-height: 260px;
}

@media (max-width: 1400px) {
  .filter-types {
    max-width: 38vw;
  }

  .metro-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    grid-auto-rows: minmax(80px, 1fr);
  }

  .metro-tile {
    min-height: 80px;
  }

  .metro-tile h3 {
    font-size: 13px;
  }

  .metro-tile p {
    font-size: 10px;
  }
}

@media (max-width: 1100px) {
  body.student-metro-body {
    height: auto;
    overflow: auto;
  }

  .student-metro-body #topbar {
    height: auto;
    grid-template-columns: 1fr;
  }

  .filter-types {
    max-width: 100%;
  }

  #studentWorkspace {
    height: auto;
    overflow: visible;
  }

  .metro-hero {
    height: auto;
    min-height: 88px;
  }

  .metro-grid {
    height: auto;
    overflow: visible;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    grid-auto-rows: 98px;
  }
}

@media (max-width: 720px) {
  .metro-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .metro-tile.size-wide,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}


/* =========================================================
   V4: better browser space usage + colored categories
   ========================================================= */

.student-metro-body #topbar {
  grid-template-columns: minmax(210px, 310px) minmax(180px, 260px) minmax(0, 1fr) auto;
  min-height: 50px;
  height: 50px;
  padding: 5px 10px;
}

.student-metro-body .ju-logo {
  width: 38px;
  height: 38px;
}

.student-metro-body #marca h1 {
  font-size: 16px;
}

.student-metro-body #marca p {
  font-size: 10px;
}

.student-progress-line {
  height: 6px;
}

.filter-chip {
  height: 31px;
  padding: 0 9px;
  font-size: 11px;
}

.filter-types {
  max-width: min(900px, 56vw);
}

.student-metro-body #herramientas .toolbtn-link {
  height: 31px;
  padding: 7px 10px;
}

#studentWorkspace {
  height: calc(100vh - 50px);
  padding: 6px;
  gap: 6px;
}

.metro-hero {
  height: 48px;
  min-height: 48px;
  padding: 7px 12px;
  align-items: center;
}

.metro-hero .ju-pill {
  display: none;
}

.metro-hero h2 {
  margin: 0;
  font-size: clamp(18px, 2vw, 31px);
  line-height: 1;
}

.metro-hero p {
  display: none;
}

.metro-save-status {
  padding: 7px 10px;
  min-width: 92px;
  font-size: 11px;
}

.metro-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: minmax(74px, 1fr);
  gap: 6px;
}

.metro-tile {
  min-height: 74px;
  padding: 8px 9px;
}

.metro-tile h3 {
  font-size: 12px;
  line-height: 1.08;
  margin-top: 4px;
}

.metro-tile p {
  font-size: 9.5px;
  line-height: 1.16;
  margin-top: 4px;
  -webkit-line-clamp: 2;
}

.metro-tile .tile-meta {
  left: 9px;
  right: 9px;
  bottom: 6px;
  font-size: 9px;
}

.metro-tile .ju-pill {
  font-size: 8px;
  padding: 1px 5px;
  max-width: 100%;
}

.metro-tile.size-wide {
  grid-column: span 2;
}

.metro-tile.size-tall {
  grid-row: span 2;
}

.metro-tile.size-large {
  grid-column: span 2;
  grid-row: span 2;
}

.filter-chip[data-value="identidad"],
.metro-tile.color-0 .ju-pill,
.flip-ghost .ju-pill {
  background: #b8d0cc;
  color: #244c47;
}

.filter-chip[data-value="aprendizaje"],
.metro-tile.color-4 .ju-pill {
  background: #99f6e4;
  color: #115e59;
}

.filter-chip[data-value="motivacion"],
.metro-tile.color-1 .ju-pill {
  background: #bfdbfe;
  color: #1d4ed8;
}

.filter-chip[data-value="emocional"],
.metro-tile.color-2 .ju-pill {
  background: #e9d5ff;
  color: #7e22ce;
}

.filter-chip[data-value="contexto"],
.metro-tile.color-5 .ju-pill {
  background: #cbd5e1;
  color: #334155;
}

.filter-chip[data-value="intereses"] {
  background: rgba(153,246,228,.18);
}

.filter-chip[data-value="relacional"],
.metro-tile.color-3 .ju-pill {
  background: #fed7aa;
  color: #c2410c;
}

.filter-chip[data-value="feedback"] {
  background: rgba(191,219,254,.18);
}

.filter-chip[data-value="objetivos"] {
  background: rgba(233,213,255,.18);
}

.filter-chip[data-value="expresion"] {
  background: rgba(203,213,225,.18);
}

.filter-chip[data-value="opinion"],
.metro-tile.color-6 .ju-pill {
  background: #fecdd3;
  color: #be123c;
}

.filter-chip[data-value="procedimiento"],
.filter-chip[data-value="explicacion"],
.filter-chip[data-value="apoyo"],
.filter-chip[data-value="mensaje_libre"] {
  background: rgba(184,208,204,.18);
}

.filter-chip.active[data-value] {
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.34);
  filter: saturate(1.1);
}

@media (min-width: 1600px) {
  .metro-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    grid-auto-rows: minmax(78px, 1fr);
  }
}

@media (max-width: 1400px) {
  .filter-types {
    max-width: 48vw;
  }

  .metro-grid {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    grid-auto-rows: minmax(70px, 1fr);
  }

  .metro-tile {
    min-height: 70px;
  }

  .metro-tile h3 {
    font-size: 11.5px;
  }

  .metro-tile p {
    font-size: 9px;
  }
}



/* =========================================================
   V6 FULL: no holes, compact browser-fit layout,
   category switches with clear opacity
   ========================================================= */

body.student-metro-body {
  height: 100vh;
  overflow: hidden;
  background: #eef4f3;
}

.student-metro-body #topbar {
  min-height: 46px !important;
  height: 46px !important;
  grid-template-columns: minmax(210px, 300px) minmax(150px, 240px) minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 4px 8px !important;
}

.student-metro-body .ju-logo {
  width: 36px !important;
  height: 36px !important;
  font-size: 15px !important;
}

.student-metro-body #marca {
  gap: 8px !important;
}

.student-metro-body #marca h1 {
  font-size: 15px !important;
  line-height: 1 !important;
}

.student-metro-body #marca p {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.student-progress-top {
  gap: 3px !important;
}

.student-progress-line {
  height: 6px !important;
}

#progressText {
  font-size: 10px !important;
}

.student-filters {
  justify-content: flex-end !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.filter-group {
  display: inline-flex !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  scrollbar-width: none !important;
}

.filter-group::-webkit-scrollbar {
  display: none !important;
}

.filter-types {
  max-width: min(980px, 60vw) !important;
}

.filter-chip {
  flex: 0 0 auto !important;
  height: 30px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.10) !important;
  padding: 0 8px !important;
  font: inherit !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  opacity: .38 !important;
  transform: translateY(0) scale(.98) !important;
  transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%) !important;
}

.filter-chip:hover {
  opacity: .78 !important;
  transform: translateY(-1px) scale(1) !important;
}

.filter-chip.active {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.20),
    inset 0 -3px 0 rgba(255,255,255,.30) !important;
  filter: saturate(1.2) brightness(1.05) !important;
}

#studentStatusFilter .filter-chip {
  background: rgba(255,255,255,.12) !important;
 color:black !important;
}

#studentStatusFilter .filter-chip.active {
  background: var(--ju-accent-soft) !important;
  color: var(--ju-accent-strong) !important;
}

.category-chip.type-identidad,
.metro-tile.type-identidad,
.flip-ghost.type-identidad {
  background: linear-gradient(135deg,#5f8f88,#3f6b65) !important;
}

.category-chip.type-aprendizaje,
.metro-tile.type-aprendizaje,
.flip-ghost.type-aprendizaje {
  background: linear-gradient(135deg,#14b8a6,#0f766e) !important;
}

.category-chip.type-motivacion,
.metro-tile.type-motivacion,
.flip-ghost.type-motivacion {
  background: linear-gradient(135deg,#60a5fa,#2563eb) !important;
}

.category-chip.type-emocional,
.metro-tile.type-emocional,
.flip-ghost.type-emocional {
  background: linear-gradient(135deg,#c084fc,#9333ea) !important;
}

.category-chip.type-contexto,
.metro-tile.type-contexto,
.flip-ghost.type-contexto {
  background: linear-gradient(135deg,#64748b,#475569) !important;
}

.category-chip.type-intereses,
.metro-tile.type-intereses,
.flip-ghost.type-intereses {
  background: linear-gradient(135deg,#22c55e,#15803d) !important;
}

.category-chip.type-relacional,
.metro-tile.type-relacional,
.flip-ghost.type-relacional {
  background: linear-gradient(135deg,#fb923c,#ea580c) !important;
}

.category-chip.type-feedback,
.metro-tile.type-feedback,
.flip-ghost.type-feedback {
  background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important;
}

.category-chip.type-objetivos,
.metro-tile.type-objetivos,
.flip-ghost.type-objetivos {
  background: linear-gradient(135deg,#c084fc,#7e22ce) !important;
}

.category-chip.type-expresion,
.metro-tile.type-expresion,
.flip-ghost.type-expresion {
  background: linear-gradient(135deg,#64748b,#334155) !important;
}

.category-chip.type-opinion,
.metro-tile.type-opinion,
.flip-ghost.type-opinion {
  background: linear-gradient(135deg,#e11d48,#be123c) !important;
}

.category-chip.type-procedimiento,
.metro-tile.type-procedimiento,
.flip-ghost.type-procedimiento {
  background: linear-gradient(135deg,#6b908c,#4b706c) !important;
}

.category-chip.type-explicacion,
.metro-tile.type-explicacion,
.flip-ghost.type-explicacion {
  background: linear-gradient(135deg,#60a5fa,#2563eb) !important;
}

.category-chip.type-apoyo,
.metro-tile.type-apoyo,
.flip-ghost.type-apoyo {
  background: linear-gradient(135deg,#d8b4fe,#9333ea) !important;
}

.category-chip.type-mensaje_libre,
.metro-tile.type-mensaje_libre,
.flip-ghost.type-mensaje_libre {
  background: linear-gradient(135deg,#fb923c,#f97316) !important;
}

#studentWorkspace {
  height: calc(100vh - 46px) !important;
  overflow: hidden !important;
  padding: 5px !important;
  display: grid !important;
  grid-template-rows: 34px 1fr !important;
  gap: 5px !important;
}

.metro-hero {
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  box-shadow: none !important;
}

.metro-hero .ju-pill,
.metro-hero p {
  display: none !important;
}

.metro-hero h2 {
  margin: 0 !important;
  font-size: clamp(17px, 1.7vw, 26px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.metro-save-status {
  padding: 5px 9px !important;
  min-width: 82px !important;
  font-size: 10px !important;
}

.metro-grid {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
  grid-auto-rows: minmax(74px, 1fr) !important;
  grid-auto-flow: dense !important;
  gap: 5px !important;
  padding: 0 !important;
  align-content: stretch !important;
}

.metro-tile,
.metro-tile.size-tall,
.metro-tile.size-large {
  grid-row: span 1 !important;
  min-height: 74px !important;
}

.metro-tile.size-large {
  grid-column: span 1 !important;
}

.metro-tile.size-wide {
  grid-column: span 2 !important;
}

.metro-tile {
  padding: 8px 9px !important;
  box-shadow: 0 5px 14px rgba(31,41,55,.10) !important;
  overflow: hidden !important;
}

.metro-tile:hover {
  transform: translateY(-1px) scale(1.006) !important;
  box-shadow: 0 9px 20px rgba(31,41,55,.16) !important;
}

.metro-tile .ju-pill {
  font-size: 7.5px !important;
  padding: 1px 4px !important;
  max-width: 100% !important;
  background: rgba(255,255,255,.72) !important;
  color: rgba(15,23,42,.72) !important;
}

.metro-tile h3 {
  font-size: 11.5px !important;
  line-height: 1.05 !important;
  margin: 4px 0 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.metro-tile p {
  font-size: 8.8px !important;
  line-height: 1.13 !important;
  margin: 3px 0 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.metro-tile .tile-meta {
  left: 9px !important;
  right: 9px !important;
  bottom: 5px !important;
  font-size: 8.5px !important;
}

.answer-modal {
  width: min(900px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 28px) !important;
  padding: 20px !important;
}

.answer-modal h2 {
  font-size: clamp(23px, 3vw, 42px) !important;
}

#modalQuestion {
  font-size: 16px !important;
}

#modalAnswer {
  min-height: 255px !important;
}

@media (min-width: 1700px) {
  .metro-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    grid-auto-rows: minmax(78px, 1fr) !important;
  }
}

@media (max-width: 1450px) {
  .filter-types {
    max-width: 48vw !important;
  }

  .metro-grid {
    grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)) !important;
    grid-auto-rows: minmax(70px, 1fr) !important;
  }

  .metro-tile,
  .metro-tile.size-tall,
  .metro-tile.size-large {
    min-height: 70px !important;
  }

  .metro-tile h3 {
    font-size: 10.8px !important;
  }

  .metro-tile p {
    font-size: 8.3px !important;
  }
}

@media (max-width: 1100px) {
  body.student-metro-body {
    height: auto !important;
    overflow: auto !important;
  }

  .student-metro-body #topbar {
    height: auto !important;
    grid-template-columns: 1fr !important;
  }

  .filter-types {
    max-width: 100% !important;
  }

  #studentWorkspace {
    height: auto !important;
    overflow: visible !important;
  }

  .metro-grid {
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    grid-auto-rows: 86px !important;
  }
}

@media (max-width: 720px) {
  .metro-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }

  .metro-tile.size-wide {
    grid-column: span 1 !important;
  }
}


/* =========================================================
   V7: 1920x1080 optimized grid policy + readable compact text
   ========================================================= */

/*
   Goal:
   - Never stretch cards into huge vertical slabs.
   - Fit a 25-question set cleanly on a 1920x1080 viewport.
   - Keep cards readable but compact.
   - Use many columns, fixed row heights, and scroll only if needed.
*/

body.student-metro-body {
  background: #eef4f3 !important;
}

/* Header: compact but not cramped */
.student-metro-body #topbar {
  min-height: 48px !important;
  height: 48px !important;
  grid-template-columns: 320px 250px minmax(0, 1fr) 58px !important;
  gap: 8px !important;
  padding: 5px 8px !important;
}

.student-metro-body .ju-logo {
  width: 38px !important;
  height: 38px !important;
}

.student-metro-body #marca h1 {
  font-size: 16px !important;
  line-height: 1 !important;
}

.student-metro-body #marca p {
  font-size: 10px !important;
}

.student-metro-body #herramientas .toolbtn-link {
  width: 52px !important;
  min-width: 52px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 11px !important;
}

.student-progress-line {
  height: 6px !important;
}

#progressText {
  font-size: 10px !important;
}

/* Filters: keep one-row feel on 1920px, horizontally scroll when needed */
.student-filters {
  overflow: hidden !important;
}

.filter-types {
  max-width: calc(100vw - 780px) !important;
}

.filter-chip {
  height: 31px !important;
  padding: 0 9px !important;
  font-size: 10.5px !important;
  letter-spacing: -.01em !important;
}

/* Workspace: fixed vertical budget */
#studentWorkspace {
  height: calc(100vh - 48px) !important;
  padding: 5px !important;
  gap: 5px !important;
  grid-template-rows: 32px 1fr !important;
}

.metro-hero {
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 10px !important;
}

.metro-hero h2 {
  font-size: 22px !important;
}

.metro-save-status {
  min-width: 88px !important;
  height: 24px !important;
  padding: 5px 8px !important;
  font-size: 10px !important;
}

/*
   Grid policy for 1920x1080:
   Available height after browser+header+hero is roughly 870-900 px.
   We use fixed rows around 128px and 12 columns.
   25 cards become about 3 rows, using width well and avoiding tall columns.
*/
.metro-grid {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: 128px !important;
  grid-auto-flow: dense !important;
  gap: 6px !important;
  align-content: start !important;
  justify-content: stretch !important;
  padding: 0 !important;
}

/* Default card is 2 columns wide: 6 cards per row */
.metro-tile,
.metro-tile.size-large,
.metro-tile.size-tall {
  grid-column: span 2 !important;
  grid-row: span 1 !important;
  min-height: 128px !important;
}

/* Occasional wide card: 4 columns, still one row high */
.metro-tile.size-wide {
  grid-column: span 4 !important;
  grid-row: span 1 !important;
}

/* Font and content distribution optimized for card reading */
.metro-tile {
  padding: 10px 11px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  box-shadow: 0 5px 14px rgba(31,41,55,.10) !important;
}

.metro-tile .ju-pill {
  align-self: flex-start !important;
  font-size: 8px !important;
  line-height: 1 !important;
  padding: 2px 5px !important;
  max-width: 100% !important;
}

.metro-tile h3 {
  font-size: 14px !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  letter-spacing: -.012em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.metro-tile p {
  font-size: 10.5px !important;
  line-height: 1.22 !important;
  margin: 0 !important;
  opacity: .88 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.metro-tile .tile-meta {
  position: absolute !important;
  left: 11px !important;
  right: 11px !important;
  bottom: 8px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
}

/* When only a few filtered cards are visible, avoid huge stretched columns */
.metro-grid:has(.metro-tile:nth-child(1):last-child),
.metro-grid:has(.metro-tile:nth-child(2):last-child),
.metro-grid:has(.metro-tile:nth-child(3):last-child),
.metro-grid:has(.metro-tile:nth-child(4):last-child),
.metro-grid:has(.metro-tile:nth-child(5):last-child),
.metro-grid:has(.metro-tile:nth-child(6):last-child),
.metro-grid:has(.metro-tile:nth-child(7):last-child),
.metro-grid:has(.metro-tile:nth-child(8):last-child) {
  grid-auto-rows: 132px !important;
  align-content: start !important;
}

.metro-grid:has(.metro-tile:nth-child(1):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(2):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(3):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(4):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(5):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(6):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(7):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(8):last-child) .metro-tile {
  grid-column: span 3 !important;
  min-height: 132px !important;
}

/* 1366-1600 range */
@media (max-width: 1650px) {
  .student-metro-body #topbar {
    grid-template-columns: 290px 220px minmax(0, 1fr) 58px !important;
  }

  .filter-types {
    max-width: calc(100vw - 710px) !important;
  }

  .metro-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-auto-rows: 118px !important;
  }

  .metro-tile,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 2 !important;
    min-height: 118px !important;
  }

  .metro-tile.size-wide {
    grid-column: span 4 !important;
  }

  .metro-tile h3 {
    font-size: 13px !important;
  }

  .metro-tile p {
    font-size: 9.8px !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* Laptop range */
@media (max-width: 1350px) {
  .student-metro-body #topbar {
    grid-template-columns: 260px 190px minmax(0, 1fr) 58px !important;
  }

  .filter-types {
    max-width: calc(100vw - 640px) !important;
  }

  .filter-chip {
    font-size: 10px !important;
    padding: 0 7px !important;
  }

  .metro-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-rows: 112px !important;
  }

  .metro-tile,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 2 !important;
    min-height: 112px !important;
  }

  .metro-tile.size-wide {
    grid-column: span 4 !important;
  }

  .metro-tile h3 {
    font-size: 12.2px !important;
  }

  .metro-tile p {
    font-size: 9.2px !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Tablet/small */
@media (max-width: 1100px) {
  body.student-metro-body {
    height: auto !important;
    overflow: auto !important;
  }

  .student-metro-body #topbar {
    height: auto !important;
    grid-template-columns: 1fr !important;
  }

  .filter-types {
    max-width: 100% !important;
  }

  #studentWorkspace {
    height: auto !important;
    overflow: visible !important;
  }

  .metro-grid {
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 120px !important;
  }

  .metro-tile,
  .metro-tile.size-wide,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 2 !important;
    min-height: 120px !important;
  }
}

@media (max-width: 720px) {
  .metro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 118px !important;
  }

  .metro-tile,
  .metro-tile.size-wide,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 1 !important;
  }
}
/* =========================================================
   V8: readability pass
   Slightly larger typography without breaking 1920x1080 layout
   ========================================================= */

/* Header readability */
.student-metro-body #topbar {
  min-height: 50px !important;
  height: 50px !important;
  grid-template-columns: 330px 260px minmax(0, 1fr) 60px !important;
}

.student-metro-body #marca h1 {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

.student-metro-body #marca p {
  font-size: 11px !important;
}

#progressText {
  font-size: 11px !important;
}

.filter-chip {
  font-size: 11.5px !important;
  height: 32px !important;
  padding: 0 10px !important;
}

.student-metro-body #herramientas .toolbtn-link {
  font-size: 12px !important;
  height: 34px !important;
}

/* Workspace adjusted to new 50px header */
#studentWorkspace {
  height: calc(100vh - 50px) !important;
  grid-template-rows: 34px 1fr !important;
}

.metro-hero {
  height: 34px !important;
  min-height: 34px !important;
}

.metro-hero h2 {
  font-size: 25px !important;
}

.metro-save-status {
  font-size: 11px !important;
  height: 26px !important;
}

/* 1920x1080 optimized card layout with clearer text */
.metro-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: 132px !important;
  gap: 6px !important;
  align-content: start !important;
}

/* Normal card: 2 columns. Wide card: 4 columns. No vertical spans. */
.metro-tile,
.metro-tile.size-large,
.metro-tile.size-tall {
  grid-column: span 2 !important;
  grid-row: span 1 !important;
  min-height: 132px !important;
}

.metro-tile.size-wide {
  grid-column: span 4 !important;
  grid-row: span 1 !important;
}

.metro-tile {
  padding: 12px 13px !important;
  gap: 6px !important;
}

.metro-tile .ju-pill {
  font-size: 9px !important;
  line-height: 1 !important;
  padding: 2px 6px !important;
}

.metro-tile h3 {
  font-size: 16px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.014em !important;
  margin: 0 !important;
  -webkit-line-clamp: 2 !important;
}

.metro-tile p {
  font-size: 11.4px !important;
  line-height: 1.28 !important;
  opacity: .92 !important;
  -webkit-line-clamp: 3 !important;
}

.metro-tile .tile-meta {
  font-size: 10.5px !important;
  left: 13px !important;
  right: 13px !important;
  bottom: 9px !important;
}

/* A few filtered cards: readable, not enormous */
.metro-grid:has(.metro-tile:nth-child(1):last-child),
.metro-grid:has(.metro-tile:nth-child(2):last-child),
.metro-grid:has(.metro-tile:nth-child(3):last-child),
.metro-grid:has(.metro-tile:nth-child(4):last-child),
.metro-grid:has(.metro-tile:nth-child(5):last-child),
.metro-grid:has(.metro-tile:nth-child(6):last-child),
.metro-grid:has(.metro-tile:nth-child(7):last-child),
.metro-grid:has(.metro-tile:nth-child(8):last-child) {
  grid-auto-rows: 142px !important;
}

.metro-grid:has(.metro-tile:nth-child(1):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(2):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(3):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(4):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(5):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(6):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(7):last-child) .metro-tile,
.metro-grid:has(.metro-tile:nth-child(8):last-child) .metro-tile {
  grid-column: span 3 !important;
  min-height: 142px !important;
}

/* Modal readability */
.answer-modal h2 {
  font-size: clamp(28px, 3.4vw, 48px) !important;
}

#modalQuestion {
  font-size: 20px !important;
  line-height: 1.42 !important;
}

#modalHelper {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

#modalAnswer {
  font-size: 18px !important;
  line-height: 1.65 !important;
  min-height: 310px !important;
}

#modalCounter {
  font-size: 15px !important;
}

#modalMinWords {
  font-size: 14px !important;
}

/* 1366-1600 range */
@media (max-width: 1650px) {
  .student-metro-body #topbar {
    grid-template-columns: 300px 230px minmax(0, 1fr) 60px !important;
  }

  .metro-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-auto-rows: 126px !important;
  }

  .metro-tile,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 2 !important;
    min-height: 126px !important;
  }

  .metro-tile.size-wide {
    grid-column: span 4 !important;
  }

  .metro-tile h3 {
    font-size: 15px !important;
  }

  .metro-tile p {
    font-size: 10.8px !important;
  }

  .metro-tile .tile-meta {
    font-size: 10px !important;
  }
}

/* Laptop range */
@media (max-width: 1350px) {
  .student-metro-body #topbar {
    grid-template-columns: 270px 200px minmax(0, 1fr) 60px !important;
  }

  .filter-chip {
    font-size: 10.5px !important;
    padding: 0 8px !important;
  }

  .metro-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-rows: 120px !important;
  }

  .metro-tile,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 2 !important;
    min-height: 120px !important;
  }

  .metro-tile.size-wide {
    grid-column: span 4 !important;
  }

  .metro-tile h3 {
    font-size: 14px !important;
  }

  .metro-tile p {
    font-size: 10px !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* Small screens */
@media (max-width: 1100px) {
  .student-metro-body #topbar {
    height: auto !important;
    grid-template-columns: 1fr !important;
  }

  #studentWorkspace {
    height: auto !important;
  }

  .metro-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 128px !important;
  }

  .metro-tile,
  .metro-tile.size-wide,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 2 !important;
    min-height: 128px !important;
  }
}

@media (max-width: 720px) {
  .metro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 124px !important;
  }

  .metro-tile,
  .metro-tile.size-wide,
  .metro-tile.size-large,
  .metro-tile.size-tall {
    grid-column: span 1 !important;
  }

  .metro-tile h3 {
    font-size: 13.5px !important;
  }

  .metro-tile p {
    font-size: 10px !important;
  }
}
/* =========================================================
   V9: subtle metro tones + Apple translucent glass modal
   ========================================================= */

:root {
  --metro-identidad: #557c76;
  --metro-aprendizaje: #347f78;
  --metro-motivacion: #5f8fe0;
  --metro-emocional: #9a72d5;
  --metro-contexto: #5b6678;
  --metro-intereses: #4b8d62;
  --metro-relacion: #d08a51;
  --metro-feedback: #5f86d6;
  --metro-objetivos: #8d6bd0;
  --metro-expresion: #566276;
  --metro-opinion: #ae5a73;
  --metro-procedimiento: #5f807a;
  --metro-explicacion: #5f86d6;
  --metro-apoyo: #9a72d5;
  --metro-mensaje: #d08a51;
}

/* Softer category colors */
.category-chip.type-identidad,
.metro-tile.type-identidad,
.flip-ghost.type-identidad {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-identidad) 86%, white), var(--metro-identidad)) !important;
}

.category-chip.type-aprendizaje,
.metro-tile.type-aprendizaje,
.flip-ghost.type-aprendizaje {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-aprendizaje) 86%, white), var(--metro-aprendizaje)) !important;
}

.category-chip.type-motivacion,
.metro-tile.type-motivacion,
.flip-ghost.type-motivacion {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-motivacion) 86%, white), var(--metro-motivacion)) !important;
}

.category-chip.type-emocional,
.metro-tile.type-emocional,
.flip-ghost.type-emocional {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-emocional) 86%, white), var(--metro-emocional)) !important;
}

.category-chip.type-contexto,
.metro-tile.type-contexto,
.flip-ghost.type-contexto {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-contexto) 86%, white), var(--metro-contexto)) !important;
}

.category-chip.type-intereses,
.metro-tile.type-intereses,
.flip-ghost.type-intereses {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-intereses) 86%, white), var(--metro-intereses)) !important;
}

.category-chip.type-relacional,
.metro-tile.type-relacional,
.flip-ghost.type-relacional {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-relacion) 86%, white), var(--metro-relacion)) !important;
}

.category-chip.type-feedback,
.metro-tile.type-feedback,
.flip-ghost.type-feedback {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-feedback) 86%, white), var(--metro-feedback)) !important;
}

.category-chip.type-objetivos,
.metro-tile.type-objetivos,
.flip-ghost.type-objetivos {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-objetivos) 86%, white), var(--metro-objetivos)) !important;
}

.category-chip.type-expresion,
.metro-tile.type-expresion,
.flip-ghost.type-expresion {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-expresion) 86%, white), var(--metro-expresion)) !important;
}

.category-chip.type-opinion,
.metro-tile.type-opinion,
.flip-ghost.type-opinion {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-opinion) 86%, white), var(--metro-opinion)) !important;
}

.category-chip.type-procedimiento,
.metro-tile.type-procedimiento,
.flip-ghost.type-procedimiento {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-procedimiento) 86%, white), var(--metro-procedimiento)) !important;
}

.category-chip.type-explicacion,
.metro-tile.type-explicacion,
.flip-ghost.type-explicacion {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-explicacion) 86%, white), var(--metro-explicacion)) !important;
}

.category-chip.type-apoyo,
.metro-tile.type-apoyo,
.flip-ghost.type-apoyo {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-apoyo) 86%, white), var(--metro-apoyo)) !important;
}

.category-chip.type-mensaje_libre,
.metro-tile.type-mensaje_libre,
.flip-ghost.type-mensaje_libre {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--metro-mensaje) 86%, white), var(--metro-mensaje)) !important;
}

/* Subtle, premium tile treatment */
.metro-tile {
  filter: saturate(.82) contrast(.98) !important;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.metro-tile:hover {
  filter: saturate(.95) contrast(1.02) brightness(1.02) !important;
}

.metro-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.05) 38%,
      rgba(255,255,255,0) 70%
    );
}

.metro-tile::after {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(0,0,0,.12)) !important;
}

/* Softer pills inside cards */
.metro-tile .ju-pill {
  background: rgba(255,255,255,.56) !important;
  color: rgba(15,23,42,.68) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Glass overlay */
.modal-overlay {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.20), transparent 34%),
    rgba(20,25,35,.18) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
}

/* Apple-style translucent glass modal */
.answer-modal {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.74),
      rgba(255,255,255,.56) 48%,
      rgba(255,255,255,.46)
    ) !important;
  backdrop-filter: blur(34px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(185%) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow:
    0 32px 90px rgba(15,23,42,.24),
    0 8px 24px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.28) !important;
}

.answer-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.68), transparent 32%),
    radial-gradient(circle at 90% 12%, rgba(184,208,204,.42), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}

/* Modal typography and fields on glass */
.modal-section {
  background: rgba(255,255,255,.50) !important;
  color: rgba(48,71,68,.92) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

.answer-modal h2 {
  color: rgba(31,41,55,.92) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

#modalQuestion {
  color: rgba(17,24,39,.90) !important;
}

#modalHelper {
  color: rgba(75,85,99,.88) !important;
}

#modalAnswer {
  background: rgba(255,255,255,.44) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(255,255,255,.30),
    0 10px 26px rgba(15,23,42,.08) !important;
}

#modalAnswer:focus {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(85,132,126,.58) !important;
  box-shadow:
    0 0 0 4px rgba(85,132,126,.18),
    inset 0 1px 0 rgba(255,255,255,.82),
    0 12px 30px rgba(15,23,42,.10) !important;
}

/* Glass close button */
.modal-close {
  background: rgba(48,71,68,.74) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 18px rgba(15,23,42,.16) !important;
}

.modal-close:hover {
  background: rgba(48,71,68,.88) !important;
}

/* FLIP ghost gets same soft treatment */
.flip-ghost {
  filter: saturate(.84) contrast(.98) !important;
  box-shadow:
    0 26px 70px rgba(15,23,42,.28),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.flip-ghost.is-modal-shape {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.52)
    ) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  color: rgba(31,41,55,.92) !important;
}


/* =========================================================
   AUTH REGISTER V1
   Login + self-registration
   ========================================================= */

.ju-login-layout-register {
  grid-template-columns: minmax(280px, 390px) minmax(360px, 620px);
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding: 6px;
  background: rgba(48,71,68,.06);
  border: 1px solid rgba(48,71,68,.10);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.auth-tab {
  flex: 1;
  height: 42px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  color: var(--ju-panel-dark);
  background: rgba(255,255,255,.48);
  transition: .18s ease;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.auth-tab:hover {
  background: rgba(255,255,255,.78);
}

.auth-tab.active {
  background: var(--ju-panel-dark);
  color: var(--ju-panel-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 18px rgba(15,23,42,.12);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.ju-form-full {
  grid-column: 1 / -1;
}

.ju-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 12px;
  background: rgba(85,132,126,.08);
  border: 1px solid rgba(85,132,126,.16);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.ju-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ju-accent);
  flex: 0 0 auto;
}

.ju-check span {
  line-height: 1.35;
  color: var(--ju-text);
}

.ju-alert.danger {
  background: rgba(254,226,226,.86);
  color: #991b1b;
  border: 1px solid rgba(153,27,27,.14);
}

@media (max-width: 1280px) {
  .ju-login-layout-register {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .auth-tabs {
    flex-direction: column;
  }

  .ju-form-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   GROUPS ADMIN V1
   CRUD de grupos y asignación de alumnos
   ========================================================= */

.teacher-group-assign {
  align-items: center;
}

.ju-select-small,
.student-group-inline,
.group-student-card select {
  height: 38px;
  border: 1px solid var(--ju-border);
  background: rgba(255,255,255,.86);
  color: var(--ju-text);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  min-width: 130px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.student-group-inline {
  height: 32px;
  min-width: 120px;
  max-width: 160px;
  font-size: 11px;
}

.teacher-student-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: var(--ju-muted);
  font-size: 12px;
}

.group-list-item {
  cursor: pointer;
}

.group-create-item {
  background: rgba(255,255,255,.82) !important;
  border: 1px dashed rgba(48,71,68,.28);
}

.group-color-dot {
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 0 0 1px rgba(15,23,42,.12);
  flex: 0 0 auto;
}

.group-color-dot.large {
  width: 34px;
  height: 34px;
}

.group-admin-panel {
  display: grid;
  gap: 20px;
}

.group-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(48,71,68,.10);
  padding: 18px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.group-admin-header h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.group-admin-header p {
  margin: 0;
  color: var(--ju-muted);
}

.group-form {
  display: grid;
  gap: 14px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(48,71,68,.10);
  padding: 18px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.group-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
}

.group-form input[type="text"],
.group-form input[type="color"],
.group-form textarea {
  width: 100%;
  border: 1px solid var(--ju-border);
  background: rgba(255,255,255,.88);
  color: var(--ju-text);
  padding: 12px;
  font: inherit;
  outline: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.group-form input[type="color"] {
  height: 48px;
  padding: 4px;
}

.group-form textarea {
  resize: vertical;
  min-height: 100px;
}

.group-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.danger-soft {
  background: #ae5a73 !important;
  color: white !important;
}

.group-students {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(48,71,68,.10);
  padding: 18px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.group-students h4 {
  margin: 0 0 14px;
  font-size: 18px;
}

.group-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.group-student-card {
  background: rgba(238,244,243,.86);
  border: 1px solid rgba(48,71,68,.10);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.group-student-card strong {
  color: var(--ju-text);
}

.group-student-card span {
  color: var(--ju-muted);
  font-size: 12px;
}


/* =========================================================
   ANALYTICS ADMIN V1
   Estadísticas y analítica del panel docente
   ========================================================= */

.analytics-dashboard {
  display: grid;
  gap: 18px;
}

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.analytics-kpi {
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  border: 1px solid rgba(48,71,68,.10);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.analytics-kpi span {
  display: block;
  color: var(--ju-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.analytics-kpi strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1;
  color: var(--ju-panel-dark);
}

.analytics-kpi small {
  display: block;
  margin-top: 8px;
  color: var(--ju-muted);
  font-size: 12px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

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

.analytics-card {
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.68));
  border: 1px solid rgba(48,71,68,.10);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  overflow: hidden;
}

.analytics-card.wide {
  grid-column: 1 / -1;
}

.analytics-card h3 {
  margin: 0 0 14px;
  font-size: 20px;
  color: var(--ju-panel-dark);
}

.analytics-table.compact {
  display: grid;
  gap: 9px;
}

.analytics-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.3fr) minmax(100px, 2fr) minmax(54px, auto);
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.analytics-row > span {
  min-width: 0;
  color: var(--ju-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-row strong {
  text-align: right;
  color: var(--ju-panel-dark);
  font-size: 13px;
}

.analytics-row small {
  display: block;
  margin-top: 3px;
  color: var(--ju-muted);
  font-size: 11px;
  font-weight: 400;
}

.analytics-bar {
  height: 10px;
  background: rgba(48,71,68,.10);
  overflow: hidden;
  border: 1px solid rgba(48,71,68,.08);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}

.analytics-bar span {
  display: block;
  height: 100%;
  background:
    linear-gradient(90deg, var(--ju-accent), var(--ju-accent-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
}

.analytics-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.analytics-data-table th,
.analytics-data-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(48,71,68,.10);
  text-align: left;
  vertical-align: top;
}

.analytics-data-table th {
  color: var(--ju-panel-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(48,71,68,.06);
}

.analytics-data-table td {
  color: var(--ju-text);
}

.analytics-data-table td .analytics-bar {
  margin-bottom: 4px;
}

.student-rank-row {
  grid-template-columns: minmax(170px, 1.4fr) minmax(100px, 2fr) minmax(70px, auto);
}

.answer-samples {
  display: grid;
  gap: 12px;
}

.answer-sample {
  padding: 14px;
  background: rgba(238,244,243,.80);
  border: 1px solid rgba(48,71,68,.10);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.answer-sample header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.answer-sample header strong {
  color: var(--ju-panel-dark);
}

.answer-sample header span {
  color: var(--ju-muted);
  font-size: 12px;
}

.answer-sample h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.answer-sample p {
  margin: 0 0 8px;
  color: var(--ju-text);
  line-height: 1.45;
}

.answer-sample small {
  color: var(--ju-muted);
}

@media (max-width: 1280px) {
  .analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-grid,
  .analytics-grid.two {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.teacher-admin-body {
    height: auto;
    overflow: visible;
  }

  #topbar,
  #bandejas,
  #mensajes,
  #cabecera-contenido .ju-button-row {
    display: none !important;
  }

  #app,
  #contenido,
  #panel {
    display: block;
    overflow: visible;
    width: 100%;
  }

  .analytics-dashboard {
    gap: 12px;
  }

  .analytics-card,
  .analytics-kpi {
    break-inside: avoid;
    box-shadow: none;
  }
}


/* =========================================================
   GLOBAL ANALYTICS V2
   Dashboard global de todos los alumnos
   ========================================================= */

.global-analytics-dashboard {
  display: grid;
  gap: 18px;
}

.global-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(48,71,68,.96), rgba(95,126,122,.86)),
    radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 32%);
  color: white;
  box-shadow: 0 14px 34px rgba(15,23,42,.14);
}

.global-hero h3 {
  margin: 10px 0 8px;
  font-size: clamp(34px, 4vw, 68px);
  line-height: .95;
  letter-spacing: -.05em;
}

.global-hero p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 15px;
}

.global-ring {
  --value: 0;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    conic-gradient(var(--ju-accent-soft) calc(var(--value) * 1%), rgba(255,255,255,.16) 0);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    0 16px 34px rgba(15,23,42,.16);
}

.global-ring::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: rgba(48,71,68,.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.global-ring strong,
.global-ring span {
  position: relative;
  z-index: 1;
}

.global-ring strong {
  font-size: 30px;
  line-height: 1;
}

.global-ring span {
  margin-top: 32px;
  position: absolute;
  font-size: 11px;
  color: rgba(255,255,255,.70);
}

.global-kpis .analytics-kpi {
  min-height: 126px;
}

.global-progress-stack {
  display: grid;
  gap: 14px;
}

.global-progress-item {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(140px, 2fr) minmax(110px, auto);
  gap: 12px;
  align-items: center;
}

.global-progress-item span {
  font-weight: 800;
  color: var(--ju-text);
}

.global-progress-item strong {
  text-align: right;
  color: var(--ju-panel-dark);
}

.global-alerts {
  display: grid;
  gap: 12px;
}

.global-alert {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: rgba(238,244,243,.80);
  border: 1px solid rgba(48,71,68,.10);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.global-alert strong {
  display: grid;
  place-items: center;
  min-height: 54px;
  font-size: 26px;
  color: var(--ju-panel-dark);
  background: rgba(255,255,255,.68);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.global-alert span {
  display: block;
  font-weight: 900;
  color: var(--ju-text);
}

.global-alert small {
  display: block;
  margin-top: 4px;
  color: var(--ju-muted);
}

.global-alert.warning strong {
  color: #9f580a;
  background: rgba(254,243,199,.86);
}

.global-alert.ok strong {
  color: #166534;
  background: rgba(220,252,231,.80);
}

.field-global-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 2fr) minmax(74px, auto);
}

.field-global-row small {
  display: block;
  color: var(--ju-muted);
  font-size: 11px;
  font-weight: 400;
}

@media (max-width: 1100px) {
  .global-hero {
    grid-template-columns: 1fr;
  }

  .global-ring {
    width: 126px;
    height: 126px;
  }

  .global-progress-item {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   V15: student front translucent cards + pending opacity
   ========================================================= */

.student-metro-body .metro-tile {
  --tile-accent: rgba(255,255,255,.36);
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
  border: 1.5px solid var(--tile-accent) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 14px 32px rgba(15,23,42,.14) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  opacity: 1;
  transition:all 1s;
}

.student-metro-body .metro-tile::after {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--tile-accent) 40%, transparent), transparent 38%),
    linear-gradient(135deg, transparent, rgba(0,0,0,.08)) !important;
}

.student-metro-body .metro-tile.is-pending {
  opacity: .1 !important;
}

.student-metro-body .metro-tile.is-complete {
  opacity: 1 !important;
}

.student-metro-body .metro-tile:hover,
.student-metro-body .metro-tile.is-pending:hover {
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--tile-accent) 78%, white) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 18px 42px rgba(15,23,42,.22) !important;
}

.student-metro-body .metro-tile.type-identidad { --tile-accent: var(--metro-identidad); }
.student-metro-body .metro-tile.type-aprendizaje { --tile-accent: var(--metro-aprendizaje); }
.student-metro-body .metro-tile.type-motivacion { --tile-accent: var(--metro-motivacion); }
.student-metro-body .metro-tile.type-emocional { --tile-accent: var(--metro-emocional); }
.student-metro-body .metro-tile.type-contexto { --tile-accent: var(--metro-contexto); }
.student-metro-body .metro-tile.type-intereses { --tile-accent: var(--metro-intereses); }
.student-metro-body .metro-tile.type-relacional { --tile-accent: var(--metro-relacion); }
.student-metro-body .metro-tile.type-feedback { --tile-accent: var(--metro-feedback); }
.student-metro-body .metro-tile.type-objetivos { --tile-accent: var(--metro-objetivos); }
.student-metro-body .metro-tile.type-expresion { --tile-accent: var(--metro-expresion); }
.student-metro-body .metro-tile.type-opinion { --tile-accent: var(--metro-opinion); }
.student-metro-body .metro-tile.type-procedimiento { --tile-accent: var(--metro-procedimiento); }
.student-metro-body .metro-tile.type-explicacion { --tile-accent: var(--metro-explicacion); }
.student-metro-body .metro-tile.type-apoyo { --tile-accent: var(--metro-apoyo); }
.student-metro-body .metro-tile.type-mensaje_libre { --tile-accent: var(--metro-mensaje); }

/* Keep category filter chips coloured and readable; only the student cards become glass-like. */
.student-metro-body .category-chip.type-identidad { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-identidad) 86%, white), var(--metro-identidad)) !important; }
.student-metro-body .category-chip.type-aprendizaje { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-aprendizaje) 86%, white), var(--metro-aprendizaje)) !important; }
.student-metro-body .category-chip.type-motivacion { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-motivacion) 86%, white), var(--metro-motivacion)) !important; }
.student-metro-body .category-chip.type-emocional { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-emocional) 86%, white), var(--metro-emocional)) !important; }
.student-metro-body .category-chip.type-contexto { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-contexto) 86%, white), var(--metro-contexto)) !important; }
.student-metro-body .category-chip.type-intereses { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-intereses) 86%, white), var(--metro-intereses)) !important; }
.student-metro-body .category-chip.type-relacional { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-relacion) 86%, white), var(--metro-relacion)) !important; }
.student-metro-body .category-chip.type-feedback { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-feedback) 86%, white), var(--metro-feedback)) !important; }
.student-metro-body .category-chip.type-objetivos { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-objetivos) 86%, white), var(--metro-objetivos)) !important; }
.student-metro-body .category-chip.type-expresion { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-expresion) 86%, white), var(--metro-expresion)) !important; }
.student-metro-body .category-chip.type-opinion { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-opinion) 86%, white), var(--metro-opinion)) !important; }
.student-metro-body .category-chip.type-procedimiento { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-procedimiento) 86%, white), var(--metro-procedimiento)) !important; }
.student-metro-body .category-chip.type-explicacion { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-explicacion) 86%, white), var(--metro-explicacion)) !important; }
.student-metro-body .category-chip.type-apoyo { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-apoyo) 86%, white), var(--metro-apoyo)) !important; }
.student-metro-body .category-chip.type-mensaje_libre { background: linear-gradient(135deg, color-mix(in srgb, var(--metro-mensaje) 86%, white), var(--metro-mensaje)) !important; }


/* =========================================================
   V16 FIX: restore software backgrounds, lighten ONLY student cards
   ========================================================= */

/* Restore global/admin shell backgrounds. These are NOT student cards. */
body:not(.student-metro-body) {
  background: var(--ju-bg) !important;
  color: var(--ju-text) !important;
}

body.teacher-admin-body #topbar,
body:not(.student-metro-body) #topbar {
  background: var(--ju-panel-dark) !important;
  color: var(--ju-panel-text) !important;
}

body.teacher-admin-body #marca,
body.teacher-admin-body #marca h1,
body.teacher-admin-body #marca p,
body.teacher-admin-body #herramientas,
body.teacher-admin-body .toolbtn-link,
body:not(.student-metro-body) #marca,
body:not(.student-metro-body) #marca h1,
body:not(.student-metro-body) #marca p,
body:not(.student-metro-body) #herramientas,
body:not(.student-metro-body) .toolbtn-link {
  color: var(--ju-white) !important;
}

body.teacher-admin-body .ju-logo,
body:not(.student-metro-body) .ju-logo {
  background: rgba(255,255,255,.12) !important;
  color: var(--ju-white) !important;
}

body.teacher-admin-body #bandejas,
body:not(.student-metro-body) #bandejas {
  background: var(--ju-panel-dark) !important;
}

body.teacher-admin-body #bandejas a,
body:not(.student-metro-body) #bandejas a {
  background: rgba(255,255,255,.08) !important;
  color: var(--ju-white) !important;
}

body.teacher-admin-body #bandejas a:hover,
body:not(.student-metro-body) #bandejas a:hover {
  background: rgba(255,255,255,.18) !important;
}

body.teacher-admin-body #bandejas a.activo,
body:not(.student-metro-body) #bandejas a.activo {
  background: var(--ju-panel-mid) !important;
  color: var(--ju-white) !important;
}

body.teacher-admin-body .cuenta,
body:not(.student-metro-body) .cuenta {
  background: rgba(255,255,255,.05) !important;
  color: #e6e9f2 !important;
}

body.teacher-admin-body #mensajes,
body:not(.student-metro-body) #mensajes {
  background: var(--ju-panel-mid) !important;
}

body.teacher-admin-body #mensajes article,
body:not(.student-metro-body) #mensajes article {
  background: var(--ju-panel-light) !important;
  color: var(--ju-text) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

body.teacher-admin-body #contenido,
body:not(.student-metro-body) #contenido {
  background: var(--ju-panel-light) !important;
}

body.teacher-admin-body #cabecera-contenido,
body:not(.student-metro-body) #cabecera-contenido {
  background: var(--ju-panel-light) !important;
  border-bottom: 1px solid var(--ju-border) !important;
}

body.teacher-admin-body #panel,
body:not(.student-metro-body) #panel {
  background: var(--ju-panel-light) !important;
}

body.teacher-admin-body .ju-card,
body.teacher-admin-body .email,
body.teacher-admin-body .answer-card,
body:not(.student-metro-body) .ju-card,
body:not(.student-metro-body) .email,
body:not(.student-metro-body) .answer-card {
  background: var(--ju-white) !important;
  color: var(--ju-text) !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.05) !important;
}

/* Restore login backgrounds. */
body.ju-login-page {
  background:
    radial-gradient(circle at top left, var(--ju-accent-faint), transparent 35%),
    linear-gradient(180deg, #eef2f7, #e5ebf3) !important;
}

body.ju-login-page .ju-login-side {
  background: linear-gradient(180deg, var(--ju-panel-dark), var(--ju-panel-mid)) !important;
  color: var(--ju-white) !important;
  border: none !important;
}

body.ju-login-page .ju-login-card {
  background: var(--ju-white) !important;
  color: var(--ju-text) !important;
  border: 1px solid #dfe4ea !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.05) !important;
}

body.ju-login-page .ju-mini-stat {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--ju-white) !important;
}

/* Student front: ONLY these cards become translucent. */
body.student-metro-body .metro-tile,
body.student-metro-body .metro-tile.type-identidad,
body.student-metro-body .metro-tile.type-aprendizaje,
body.student-metro-body .metro-tile.type-motivacion,
body.student-metro-body .metro-tile.type-emocional,
body.student-metro-body .metro-tile.type-contexto,
body.student-metro-body .metro-tile.type-intereses,
body.student-metro-body .metro-tile.type-relacional,
body.student-metro-body .metro-tile.type-feedback,
body.student-metro-body .metro-tile.type-objetivos,
body.student-metro-body .metro-tile.type-expresion,
body.student-metro-body .metro-tile.type-opinion,
body.student-metro-body .metro-tile.type-procedimiento,
body.student-metro-body .metro-tile.type-explicacion,
body.student-metro-body .metro-tile.type-apoyo,
body.student-metro-body .metro-tile.type-mensaje_libre {
  background: rgba(255,255,255,.075) !important;
  border: 1.5px solid var(--tile-accent, rgba(85,132,126,.65)) !important;
  color: #1f2937 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 8px 20px rgba(15,23,42,.12) !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}

body.student-metro-body .metro-tile.type-identidad { --tile-accent: #557c76; }
body.student-metro-body .metro-tile.type-aprendizaje { --tile-accent: #347f78; }
body.student-metro-body .metro-tile.type-motivacion { --tile-accent: #5f8fe0; }
body.student-metro-body .metro-tile.type-emocional { --tile-accent: #9a72d5; }
body.student-metro-body .metro-tile.type-contexto { --tile-accent: #5b6678; }
body.student-metro-body .metro-tile.type-intereses { --tile-accent: #4b8d62; }
body.student-metro-body .metro-tile.type-relacional { --tile-accent: #d08a51; }
body.student-metro-body .metro-tile.type-feedback { --tile-accent: #5f86d6; }
body.student-metro-body .metro-tile.type-objetivos { --tile-accent: #8d6bd0; }
body.student-metro-body .metro-tile.type-expresion { --tile-accent: #566276; }
body.student-metro-body .metro-tile.type-opinion { --tile-accent: #ae5a73; }
body.student-metro-body .metro-tile.type-procedimiento { --tile-accent: #5f807a; }
body.student-metro-body .metro-tile.type-explicacion { --tile-accent: #5f86d6; }
body.student-metro-body .metro-tile.type-apoyo { --tile-accent: #9a72d5; }
body.student-metro-body .metro-tile.type-mensaje_libre { --tile-accent: #d08a51; }

body.student-metro-body .metro-tile > *,
body.student-metro-body .metro-tile h3,
body.student-metro-body .metro-tile p,
body.student-metro-body .metro-tile .tile-meta {
  color: #1f2937 !important;
}

body.student-metro-body .metro-tile::after {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.34), transparent 38%),
    linear-gradient(135deg, transparent, rgba(0,0,0,.035)) !important;
}

body.student-metro-body .metro-tile.is-pending,
body.student-metro-body .metro-tile.pending,
body.student-metro-body .metro-tile.not-completed,
body.student-metro-body .metro-tile[data-complete="0"] {
  opacity: .2 !important;
}

body.student-metro-body .metro-tile.is-complete,
body.student-metro-body .metro-tile.completed,
body.student-metro-body .metro-tile[data-complete="1"] {
  opacity: 1 !important;
}

body.student-metro-body .metro-tile:hover,
body.student-metro-body .metro-tile.is-pending:hover,
body.student-metro-body .metro-tile.pending:hover {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.008) !important;
}