/*
Theme Name: Astra Child — Plataforma Escolar
Theme URI: https://misclases.cl/
Description: Tema hijo de Astra para la Plataforma Escolar Cerrada (MisClases Escolar). Branding del establecimiento, estilos del panel, comunicaciones y vistas de la suite libdig/mce. Sin elementos comerciales.
Author: MisClases / Rodrigo Cartes Vidal
Author URI: mailto:rodrigo.cartes@misclases.cl
Template: astra
Version: 0.2.25
Text Domain: astra-child-escolar
*/

/* ==========================================================
   Tokens escolares (alineados al tema Librin)
   ========================================================== */
:root {
  --mce-brand: #2563eb;
  --mce-brand-2: #7c3aed;
  --mce-brand-3: #f97316;
  --mce-sky: #06b6d4;
  --mce-ok: #10b981;
  --mce-warn: #f59e0b;
  --mce-alert: #ef4444;
  --mce-muted: #64748b;
  --mce-bg: #eef6ff;
  --mce-bg-2: #fff7ed;
  --mce-card: #ffffff;
  --mce-border: #dbeafe;
  --mce-radius: 18px;
  --mce-shadow: 0 14px 34px rgba(37, 99, 235, .10);
}

body.mce-escolar {
  background:
    radial-gradient(circle at 12% 8%, rgba(249, 115, 22, .16), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(124, 58, 237, .14), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, var(--mce-bg) 50%, #fff7ed 100%);
}

/* ==========================================================
   Panel escolar (página /panel y vistas ?m= de libdig)
   ========================================================== */
.mce-escolar .site-content .ast-container {
  max-width: 1200px;
}

.mce-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--mce-brand), var(--mce-brand-2) 58%, var(--mce-brand-3));
  box-shadow: var(--mce-shadow);
  color: #fff;
  border-radius: var(--mce-radius);
}
.mce-panel-header img.mce-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 4px;
}
.mce-panel-header .mce-est-nombre {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.mce-panel-header .mce-est-anio {
  font-size: 13px;
  opacity: .9;
}

/* Tarjetas y tablas de los módulos (libdig + mce) */
.mce-escolar .libdig-card,
.mce-escolar .mce-comunicados li,
.mce-escolar .mce-comunicado-detalle {
  background: var(--mce-card);
  border: 1px solid var(--mce-border);
  border-top: 4px solid var(--mce-brand-3);
  border-radius: var(--mce-radius);
  box-shadow: var(--mce-shadow);
}

.mce-escolar table.widefat,
.mce-escolar .entry-content table {
  border-collapse: collapse;
  width: 100%;
  background: var(--mce-card);
  border: 1px solid var(--mce-border);
  border-radius: var(--mce-radius);
  overflow: hidden;
}
.mce-escolar .entry-content table th {
  background: #eef2ff;
  color: #1e293b;
  text-align: left;
  padding: 10px 12px;
}
.mce-escolar .entry-content table td {
  padding: 9px 12px;
  border-top: 1px solid var(--mce-border);
}
.mce-escolar .entry-content table tr:nth-child(even) td {
  background: #f8fafc;
}

/* Botones coherentes con Astra pero con acento escolar */
.mce-escolar .entry-content .button,
.mce-escolar input[type="submit"],
.mce-escolar button[type="submit"] {
  background: var(--mce-brand);
  border-color: var(--mce-brand);
  color: #fff;
  border-radius: 10px;
}
.mce-escolar .entry-content .button:hover,
.mce-escolar input[type="submit"]:hover {
  background: #16337f;
}

/* Insignias de estado usadas por los módulos */
.mce-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}
.mce-badge--ok    { background: #d1fae5; color: #065f46; }
.mce-badge--warn  { background: #fef3c7; color: #92400e; }
.mce-badge--alert { background: #fee2e2; color: #991b1b; }
.mce-badge--info  { background: #dbeafe; color: #1e40af; }

/* ==========================================================
   Login institucional (página "acceso" y wp-login)
   ========================================================== */
.mce-escolar .mce-login-wrap {
  max-width: 420px;
  margin: 6vh auto;
  background: var(--mce-card);
  border: 1px solid var(--mce-border);
  border-radius: var(--mce-radius);
  padding: 28px;
  text-align: center;
}
.mce-escolar .mce-login-wrap img { max-height: 80px; margin-bottom: 10px; }
.mce-escolar .mce-login-wrap input[type="text"],
.mce-escolar .mce-login-wrap input[type="password"] {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--mce-border);
  padding: 10px 12px;
  margin-bottom: 12px;
}

/* wp-login.php con marca del establecimiento (ver functions.php) */
body.login.mce-login { background: var(--mce-bg); }
body.login.mce-login #login h1 a {
  background-size: contain;
  width: 220px;
  height: 90px;
}
body.login.mce-login .button-primary {
  background: var(--mce-brand);
  border-color: var(--mce-brand);
  border-radius: 10px;
}

/* ==========================================================
   Móvil
   ========================================================== */
@media (max-width: 782px) {
  .mce-panel-header { flex-direction: column; text-align: center; }
  .mce-escolar .entry-content table { display: block; overflow-x: auto; }
}

/* ==========================================================
   Ocultar cualquier residuo comercial (cinturón y tirantes)
   ========================================================== */
.mce-escolar .woocommerce,
.mce-escolar .cart-container,
.mce-escolar .ast-site-header-cart,
.mce-escolar [class*="checkout"],
.mce-escolar [class*="pp-marketplace"],
.mce-escolar [class*="pp-booking"] {
  display: none !important;
}

/* Impresión limpia de reportes desde el front */
@media print {
  .mce-escolar .site-header,
  .mce-escolar .site-footer,
  .mce-escolar .mce-no-print { display: none !important; }
}


/* ==========================================================
   Navegación persistente del panel
   ========================================================== */
.mce-panel-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 20px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: var(--mce-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  position: sticky;
  top: 0;
  z-index: 9;
}
.mce-panel-tabs .mce-panel-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--mce-border);
  background: #ffffff;
  color: var(--mce-brand);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.mce-panel-tabs .mce-panel-tab:hover,
.mce-panel-tabs .mce-panel-tab:focus,
.mce-panel-tabs .mce-panel-tab.is-active {
  background: var(--mce-brand);
  color: #ffffff;
  border-color: var(--mce-brand);
  text-decoration: none;
}
.mce-escolar .entry-content > .mce-panel-header:first-child,
.mce-escolar .entry-content > .mce-panel-tabs:first-child {
  margin-top: 0;
}
@media (max-width: 640px) {
  .mce-panel-tabs {
    position: static;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .mce-panel-tabs .mce-panel-tab {
    white-space: nowrap;
  }
}
@media print {
  .mce-no-print,
  .mce-panel-tabs,
  .main-header-bar,
  .site-header,
  .site-footer {
    display: none !important;
  }
  body.mce-escolar {
    background: #ffffff;
  }
}


/* ==========================================================
   Recursos visuales integrados en el tema
   ========================================================== */
.mce-visual-asset {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--mce-radius);
}


/* ==========================================================
   Portada escolar autoinstalable
   ========================================================== */
.mce-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 28px;
  align-items: center;
  padding: 24px;
  margin: 20px 0 34px;
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
  overflow: hidden;
}
.mce-home-hero .mce-home-copy {
  padding: 10px 10px 10px 18px;
}
.mce-home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  font-size: 13px;
  font-weight: 800;
}
.mce-home-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  color: #0f172a;
}
.mce-home-hero p {
  color: #475569;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.mce-home-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.mce-home-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}
.mce-home-actions .mce-home-primary {
  background: var(--mce-brand);
  color: #ffffff;
}
.mce-home-actions .mce-home-secondary {
  background: #f8fafc;
  color: var(--mce-brand);
  border: 1px solid var(--mce-border);
}
.mce-home-hero .mce-home-image img,
.mce-home-hero .mce-visual-asset {
  width: 100%;
  border-radius: 20px;
  box-shadow: none;
}
.mce-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 34px;
}
.mce-feature-card {
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}
.mce-feature-card strong {
  display: block;
  color: #0f172a;
  margin-bottom: 6px;
  font-size: 16px;
}
.mce-feature-card span {
  display: block;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .mce-home-hero { grid-template-columns: 1fr; }
  .mce-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mce-home-hero { padding: 16px; }
  .mce-feature-grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   Administración Escolar integrada
   ========================================================== */
.mce-panel-header {
  position: relative;
}
.mce-panel-header-actions {
  margin-left: auto;
}
.mce-panel-header-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  font-weight: 700;
  text-decoration: none;
}
.mce-panel-header-actions a:hover,
.mce-panel-header-actions a:focus {
  background: #fff;
  color: var(--mce-brand);
  text-decoration: none;
}
.mce-admin-gate,
.mce-admin-hero,
.mce-admin-section {
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: var(--mce-radius);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
  margin-bottom: 20px;
}
.mce-admin-gate {
  padding: 24px;
}
.mce-admin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  padding: 28px;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.16), transparent 34%),
    linear-gradient(135deg, #ffffff, #eff6ff);
}
.mce-admin-hero h1 {
  margin: 6px 0 10px;
  color: #0f172a;
}
.mce-admin-hero p {
  max-width: 720px;
  color: var(--mce-muted);
}
.mce-admin-hero-card {
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: 18px;
  padding: 18px;
}
.mce-admin-hero-card ol {
  margin: 10px 0 0 20px;
}
.mce-admin-section {
  padding: 22px;
}
.mce-admin-section h2 {
  margin-top: 0;
}
.mce-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.mce-admin-card {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 18px;
  background: #f8fafc;
  border: 1px solid var(--mce-border);
  border-radius: 16px;
  color: #0f172a;
  text-decoration: none;
}
.mce-admin-card:hover,
.mce-admin-card:focus {
  background: #eef2ff;
  border-color: var(--mce-brand);
  color: #0f172a;
  text-decoration: none;
}
.mce-admin-card .dashicons {
  color: var(--mce-brand);
  font-size: 26px;
  width: 26px;
  height: 26px;
}
.mce-admin-card span:last-child {
  color: var(--mce-muted);
  font-size: 14px;
}
@media (max-width: 782px) {
  .mce-admin-hero {
    grid-template-columns: 1fr;
  }
  .mce-panel-header-actions {
    margin-left: 0;
  }
}


/* ==========================================================
   Color escolar: menos institucional frío, más comunidad educativa
   ========================================================== */
.mce-escolar .site-header,
.mce-escolar .main-header-bar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(37,99,235,.12);
}
.mce-panel-tabs {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(37,99,235,.14);
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 10px 28px rgba(37,99,235,.08);
  margin: 0 0 22px;
}
.mce-panel-tab {
  border-radius: 999px;
  font-weight: 700;
  color: #334155;
}
.mce-panel-tab:hover,
.mce-panel-tab:focus {
  color: var(--mce-brand);
  background: #eef2ff;
}
.mce-panel-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--mce-brand), var(--mce-brand-2));
  box-shadow: 0 8px 18px rgba(37,99,235,.24);
}
.mce-home-hero,
.mce-admin-hero {
  border: 1px solid rgba(37,99,235,.16);
  box-shadow: var(--mce-shadow);
  background:
    radial-gradient(circle at 85% 18%, rgba(249,115,22,.22), transparent 30%),
    radial-gradient(circle at 12% 12%, rgba(6,182,212,.20), transparent 28%),
    linear-gradient(135deg, #ffffff, #eef2ff 55%, #fff7ed);
}
.mce-home-kicker {
  color: var(--mce-brand-2);
  letter-spacing: .06em;
  font-weight: 900;
}
.mce-home-primary,
.mce-escolar .entry-content .button,
.mce-escolar input[type="submit"],
.mce-escolar button[type="submit"] {
  background: linear-gradient(135deg, var(--mce-brand), var(--mce-brand-2));
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(37,99,235,.22);
}
.mce-home-secondary {
  border-color: rgba(249,115,22,.34);
  color: #c2410c;
  background: #fff7ed;
}
.mce-feature-card,
.mce-admin-card,
.mce-escolar .libdig-card {
  box-shadow: var(--mce-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mce-feature-card:hover,
.mce-admin-card:hover,
.mce-escolar .libdig-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(37,99,235,.15);
}
.mce-feature-card:nth-child(1) { border-top: 4px solid var(--mce-brand); }
.mce-feature-card:nth-child(2) { border-top: 4px solid var(--mce-ok); }
.mce-feature-card:nth-child(3) { border-top: 4px solid var(--mce-brand-3); }
.mce-feature-card:nth-child(4) { border-top: 4px solid var(--mce-brand-2); }
.mce-admin-card:nth-child(3n+1) { border-top: 4px solid var(--mce-brand); }
.mce-admin-card:nth-child(3n+2) { border-top: 4px solid var(--mce-brand-3); }
.mce-admin-card:nth-child(3n+3) { border-top: 4px solid var(--mce-ok); }

/* ==========================================================
   Pie de página escolar profesional
   ========================================================== */
.mce-school-footer {
  margin-top: 42px;
  background: linear-gradient(135deg, #0f172a, #1e3a8a 56%, #7c2d12);
  color: #fff;
  border-top: 4px solid #facc15;
}
.mce-school-footer__inner {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.mce-school-footer__brand {
  display: grid;
  gap: 3px;
}
.mce-school-footer__brand strong {
  font-size: 16px;
}
.mce-school-footer__brand span {
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.mce-school-footer__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mce-school-footer__links a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 800;
}
.mce-school-footer__links a:hover,
.mce-school-footer__links a:focus {
  background: #fff;
  color: #1e3a8a;
}
@media (max-width: 782px) {
  .mce-school-footer__inner { align-items: flex-start; }
  .mce-panel-tabs { border-radius: 18px; }
}


/* ==========================================================
   Accesos visuales por módulo (PAES / SIMCE / Convivencia / OV)
   ========================================================== */
.mce-module-layout {
  display: grid;
  grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 14px 0 28px;
}
.mce-module-layout__side {
  position: sticky;
  top: 84px;
}
.mce-module-layout__main {
  min-width: 0;
}
.mce-module-intro {
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: var(--mce-radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.mce-module-intro h2 {
  margin: 0 0 6px;
  color: #132a63;
}
.mce-module-intro p {
  margin: 0;
  color: var(--mce-muted);
}
.mce-module-empty {
  background: #ffffff;
  border: 1px dashed var(--mce-border);
  border-radius: var(--mce-radius);
  padding: 18px 20px;
  color: #334155;
}
.mce-module-empty strong {
  display: block;
  margin-bottom: 6px;
  color: #132a63;
}
.mce-module-access {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--mce-border);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  backdrop-filter: blur(6px);
}
.mce-module-access__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #132a63;
  margin-bottom: 12px;
}
.mce-module-access__stack {
  display: grid;
  gap: 14px;
}
.mce-module-access__card {
  display: block;
  text-decoration: none;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mce-module-access__card:hover,
.mce-module-access__card:focus {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(37, 99, 235, .15);
  border-color: rgba(37, 99, 235, .28);
  text-decoration: none;
}
.mce-module-access__card.is-active {
  border-color: var(--mce-brand);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10), 0 18px 30px rgba(37, 99, 235, .18);
}
.mce-module-access__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #f8fafc;
}
.mce-module-access__meta {
  display: block;
  padding: 12px 14px 14px;
}
.mce-module-access__meta strong {
  display: block;
  color: #132a63;
  font-size: 16px;
  line-height: 1.2;
}
.mce-module-access__meta small {
  display: block;
  margin-top: 6px;
  color: var(--mce-muted);
  font-size: 13px;
  line-height: 1.4;
}
@media (max-width: 980px) {
  .mce-module-layout {
    grid-template-columns: 1fr;
  }
  .mce-module-layout__side {
    position: static;
  }
  .mce-module-access__stack {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (max-width: 640px) {
  .mce-module-access {
    border-radius: 18px;
    padding: 12px;
  }
  .mce-module-access__stack {
    grid-template-columns: 1fr;
  }
  .mce-module-access__card {
    border-radius: 18px;
  }
}


/* ==========================================================
   Ubicación fina de shortcodes en páginas modulares 0.2.9
   ========================================================== */
.mce-module-layout__main > .pconv-box,
.mce-module-layout__main > .pvoc-box,
.mce-module-layout__main > .paes-wrap,
.mce-module-layout__main > .simce-wrap,
.mce-module-layout__main > .libdig-card {
  margin-top: 0;
}
.mce-module-layout__main .pconv-box,
.mce-module-layout__main .pvoc-box {
  border-color: var(--mce-border);
  border-radius: var(--mce-radius);
  box-shadow: var(--mce-shadow);
}
.mce-module-layout__main .pconv-btn,
.mce-module-layout__main .pvoc-btn {
  background: linear-gradient(135deg, var(--mce-brand), var(--mce-brand-2));
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .15);
}
.mce-module-layout__main .pconv-card,
.mce-module-layout__main .pvoc-card {
  border-color: var(--mce-border);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.mce-module-layout__main .pconv-scale label,
.mce-module-layout__main .pvoc-scale label {
  background: #fff;
  border-color: var(--mce-border);
}
.mce-module-layout__main .pconv-bar span,
.mce-module-layout__main .pvoc-bar span {
  background: linear-gradient(90deg, var(--mce-brand), var(--mce-brand-3));
}


/* ==========================================================
   Tarjetas visuales para dimensiones de Convivencia 0.2.10
   ========================================================== */
.mce-conv-question-cards {
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}
.mce-conv-question-cards__head {
  margin-bottom: 18px;
}
.mce-conv-question-cards__head h3 {
  margin: 0 0 6px;
  color: #132a63;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.mce-conv-question-cards__head p {
  margin: 0;
  color: var(--mce-muted);
}
.mce-conv-question-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.mce-conv-question-card {
  display: block;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
  text-decoration: none !important;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mce-conv-question-card:hover,
.mce-conv-question-card:focus {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .32);
  box-shadow: 0 22px 38px rgba(37, 99, 235, .18);
  text-decoration: none !important;
}
.mce-conv-question-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.mce-conv-question-card span {
  display: block;
  padding: 16px;
  font-weight: 800;
  color: #132a63;
}
.mce-conv-question-cards__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.mce-conv-question-cards__primary,
.mce-conv-question-cards__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none !important;
}
.mce-conv-question-cards__primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--mce-brand), var(--mce-brand-2));
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}
.mce-conv-question-cards__secondary {
  color: var(--mce-brand) !important;
  background: #fff;
  border: 1px solid var(--mce-border);
}
@media (max-width: 1180px) {
  .mce-conv-question-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .mce-conv-question-cards {
    padding: 14px;
    border-radius: 18px;
  }
  .mce-conv-question-cards__grid {
    grid-template-columns: 1fr;
  }
  .mce-conv-question-card {
    border-radius: 20px;
  }
}


/* ==========================================================
   Tarjetas visuales de cuestionarios / baterías
   ========================================================== */
.mce-question-cards {
  background: #ffffff;
  border: 1px solid var(--mce-border);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  padding: 18px;
}
.mce-question-cards__head {
  margin-bottom: 16px;
}
.mce-question-cards__head h3 {
  margin: 0 0 6px;
  color: #132a63;
}
.mce-question-cards__head p {
  margin: 0;
  color: var(--mce-muted);
}
.mce-question-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.mce-question-cards__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mce-question-card {
  display: block;
  text-decoration: none;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mce-question-card:hover,
.mce-question-card:focus {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 18px 34px rgba(37,99,235,.16);
  text-decoration: none;
}
.mce-question-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #f8fafc;
}
.mce-question-card__title {
  display: block;
  padding: 12px 14px;
  color: #132a63;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.mce-question-cards__actions {
  margin-top: 16px;
}
.mce-question-cards__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
  color: var(--mce-brand);
  border: 1px solid var(--mce-border);
  font-weight: 800;
}
.mce-question-cards__secondary:hover {
  background: #f8fafc;
  text-decoration: none;
}
@media (max-width: 1024px) {
  .mce-question-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .mce-question-cards {
    padding: 14px;
    border-radius: 18px;
  }
  .mce-question-cards__grid,
  .mce-question-cards__grid--two {
    grid-template-columns: 1fr;
  }
  .mce-question-card {
    border-radius: 18px;
  }
}


/* ==========================================================
   Portal Docente visual 0.2.13
   ========================================================== */
.mce-module-access__card[href*="portal-docente"] .mce-module-access__meta strong {
  color: #132a63;
}
.mce-module-access__card[href*="portal-docente"].is-active {
  border-color: var(--mce-brand-2);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .10), 0 18px 30px rgba(124, 58, 237, .18);
}
@media (min-width: 981px) {
  .mce-module-layout__side .mce-module-access__image {
    max-height: 260px;
  }
}


/* ==========================================================
   Atajos laterales globales 0.2.14
   ========================================================== */
.mce-module-layout {
  align-items: start;
}
.mce-module-layout__side {
  position: sticky;
  top: 18px;
  align-self: start;
}
.mce-module-layout__side .mce-module-access {
  margin-top: 0;
}
.mce-module-layout__main > *:first-child {
  margin-top: 0;
}
@media (max-width: 980px) {
  .mce-module-layout__side {
    position: static;
    top: auto;
  }
}


/* ==========================================================
   Portal Directivo visual 0.2.15
   ========================================================== */
.mce-module-access__card[href*="portal-directivo"] .mce-module-access__meta strong {
  color: #132a63;
}
.mce-module-access__card[href*="portal-directivo"].is-active {
  border-color: #0f172a;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, .10), 0 18px 30px rgba(15, 23, 42, .16);
}
.mce-module-access__card[href*="portal-directivo"] .mce-module-access__image {
  object-position: center center;
}


/* ==========================================================
   Portal Estudiante visual 0.2.16
   ========================================================== */
.mce-module-access__card[href*="portal-estudiante"] .mce-module-access__meta strong {
  color: #132a63;
}
.mce-module-access__card[href*="portal-estudiante"].is-active {
  border-color: var(--mce-brand);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10), 0 18px 30px rgba(37, 99, 235, .16);
}
.mce-module-access__card[href*="portal-estudiante"] .mce-module-access__image {
  object-position: center center;
}


/* ==========================================================
   Inicio por perfiles y navegación simplificada 0.2.18
   ========================================================== */
.mce-home-hero--profiles {
  margin-bottom: 22px;
}
.mce-profile-access {
  margin: 20px 0 34px;
}
.mce-profile-access__head {
  margin-bottom: 16px;
}
.mce-profile-access__head h2 {
  margin: 0 0 6px;
  color: #132a63;
  font-size: clamp(26px, 3vw, 40px);
}
.mce-profile-access__head p {
  margin: 0;
  color: var(--mce-muted);
  max-width: 760px;
}
.mce-profile-access__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.mce-profile-access__card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--mce-border);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mce-profile-access__card:hover,
.mce-profile-access__card:focus {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 22px 42px rgba(37,99,235,.16);
  text-decoration: none;
}
.mce-profile-access__image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #f8fafc;
}
.mce-profile-access__meta {
  display: block;
  padding: 14px 16px 16px;
}
.mce-profile-access__meta strong {
  display: block;
  color: #132a63;
  font-size: 18px;
  line-height: 1.2;
}
.mce-profile-access__meta small {
  display: block;
  color: var(--mce-muted);
  margin-top: 5px;
  line-height: 1.35;
}
@media (max-width: 1100px) {
  .mce-profile-access__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mce-profile-access__grid { grid-template-columns: 1fr; }
  .mce-profile-access__card { border-radius: 20px; }
}


/* ==========================================================
   PWA visible por perfiles 0.2.18
   ========================================================== */
.mce-home-pwa,
.mce-install-app-page,
.mce-install-app-buttons,
.mce-portal-pwa-install {
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 24px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
}
.mce-home-pwa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 24px;
  margin: 24px 0;
}
.mce-home-pwa__kicker {
  display: inline-flex;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mce-home-pwa h2,
.mce-install-app-page h1 {
  margin: 0 0 8px;
  color: #132a63;
}
.mce-home-pwa p,
.mce-install-app-page p {
  margin: 0;
  color: #64748b;
}
.mce-home-pwa__buttons,
.mce-install-app-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.mce-install-app-page {
  padding: 28px;
  margin-bottom: 18px;
}
.mce-install-app-buttons {
  padding: 18px;
  margin: 18px 0;
  justify-content: flex-start;
}
.mce-portal-pwa-install {
  padding: 14px 16px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
}
.mce-portal-pwa-install .mce-pwa-install-wrap,
.mce-home-pwa .mce-pwa-install-wrap,
.mce-install-app-buttons .mce-pwa-install-wrap {
  margin: 0;
}
@media (max-width: 820px) {
  .mce-home-pwa { grid-template-columns: 1fr; }
  .mce-home-pwa__buttons { justify-content: flex-start; }
}


/* 0.2.20 - Menú móvil simplificado por perfiles */
@media (max-width: 921px) {
  .main-header-menu .menu-link,
  .ast-mobile-popup-content .menu-link,
  .ast-mobile-header-content .menu-link {
    font-weight: 800;
  }
}


/* ==========================================================
   0.2.22 - Navegación móvil más clara
   En celular se ocultan las tarjetas laterales de módulos/perfiles
   para que el usuario no confunda esos accesos con el contenido
   del portal actual. La navegación principal queda arriba.
   ========================================================== */
@media (max-width: 768px) {
  .mce-module-layout,
  .mce-module-layout.mce-module-layout--with-sidebar {
    display: block !important;
  }

  .mce-module-layout__sidebar,
  .mce-module-access,
  .mce-module-access-cards,
  .mce-module-access__grid,
  aside.mce-module-sidebar {
    display: none !important;
  }

  .mce-module-layout__main,
  .mce-module-content,
  .mce-module-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mce-profile-access,
  .mce-profile-access-cards {
    margin-top: 16px;
  }
}

/* Encabezado: acceso de usuario más limpio */
.mce-user-access {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mce-user-access__name {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #eef2ff;
  color: #132a63;
  font-weight: 800;
  text-decoration: none;
}

.mce-user-access__logout,
.mce-user-access__login {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
}

.mce-user-access__logout {
  background: #0f172a;
}

@media (max-width: 768px) {
  .mce-user-access {
    width: 100%;
    padding: 8px 12px;
  }

  .mce-user-access__name,
  .mce-user-access__logout,
  .mce-user-access__login {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================
   0.2.23 - GUI superior más limpia y alineada
   - Menú principal en una sola línea en escritorio
   - Nombre de usuario inline junto al resto de opciones
   - Botón Salir más pequeño y con colores del tema
   - Encabezado más compacto y coherente con la identidad
   ========================================================== */

/* Header general */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  border-bottom: 1px solid rgba(37, 99, 235, 0.10);
}

.ast-site-title-wrap,
.site-branding {
  white-space: nowrap;
}

/* Mantener el menú principal en una sola línea en escritorio */
@media (min-width: 769px) {
  .main-header-menu,
  .ast-desktop .main-header-menu,
  .ast-desktop .ast-builder-menu-1 .main-header-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .main-header-menu > .menu-item,
  .ast-desktop .main-header-menu > .menu-item {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }

  .main-header-menu > .menu-item > a,
  .ast-desktop .main-header-menu > .menu-item > a {
    padding: 8px 10px !important;
    line-height: 1.2 !important;
    border-radius: 999px;
    transition: all .2s ease;
  }

  .main-header-menu > .menu-item > a:hover,
  .ast-desktop .main-header-menu > .menu-item > a:hover {
    background: rgba(37, 99, 235, 0.08);
  }

  /* área de usuario inline */
  .main-header-menu > .menu-item.mce-user-access,
  .ast-desktop .main-header-menu > .menu-item.mce-user-access {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 10px !important;
    padding-left: 8px !important;
    border-left: 1px solid rgba(37, 99, 235, 0.12);
  }

  .main-header-menu > .menu-item.mce-user-access > a,
  .ast-desktop .main-header-menu > .menu-item.mce-user-access > a {
    padding: 7px 12px !important;
  }
}

/* nombre de usuario */
.mce-user-access {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  vertical-align: middle;
}

.mce-user-access__name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #16336f !important;
  font-weight: 700;
  text-decoration: none !important;
  border: 1px solid rgba(37, 99, 235, 0.12);
  box-shadow: none;
}

.mce-user-access__name:hover {
  background: rgba(37, 99, 235, 0.14);
  color: #0f2555 !important;
}

/* botón acceder / salir con look del tema, no negro */
.mce-user-access__login,
.mce-user-access__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  border: 0;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.mce-user-access__login:hover,
.mce-user-access__logout:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.22);
  opacity: .96;
}

.mce-user-access__login {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.mce-user-access__logout {
  background: linear-gradient(135deg, #7c3aed, #f97316);
}

/* si el usuario está logueado, el botón salir más pequeño */
.mce-user-access--logged .mce-user-access__logout {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 13px;
}

/* móvil: mantener compacto sin confusión visual */
@media (max-width: 768px) {
  .main-header-menu,
  .ast-mobile-popup-content .main-header-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mce-user-access {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .mce-user-access__name,
  .mce-user-access__login,
  .mce-user-access__logout {
    width: auto;
    min-width: 0;
  }

  .site-branding,
  .ast-site-title-wrap {
    max-width: 100%;
  }
}