/* ═══════════ Mastering Academy — tema oscuro + celeste neón ═══════════ */
:root {
  --bg: #05080f;
  --bg-2: #080d18;
  --card: #0d1523;
  --card-2: #111b2d;
  --linea: #1b2740;
  --linea-2: #26375a;
  --texto: #eef4fb;
  --suave: #93a3bd;
  --tenue: #8595ae;   /* contraste 5,7:1 (antes 3,6:1) */
  --neon: #22e3ff;
  --neon-2: #00b4d8;
  --neon-glow: rgba(34, 227, 255, .35);
  --neon-bg: rgba(34, 227, 255, .08);
  --ok: #34d399;
  --warn: #fbbf24;
  --mal: #f87171;
  --rojo: #ff2d3c;
  --oro: #f5c451;
  --oro-bg: rgba(245, 196, 81, .1);
  --violeta: #7c5cff;
  --grad: linear-gradient(120deg, #22e3ff, #7c5cff);
  --radio: 14px;
  --sidebar: 248px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--texto); font-size: 15px; line-height: 1.55;
  background-image: radial-gradient(1200px 500px at 70% -10%, rgba(34, 227, 255, .07), transparent 60%),
                    radial-gradient(900px 400px at -10% 100%, rgba(0, 180, 216, .05), transparent 60%);
  background-attachment: fixed;
}
a { color: var(--neon); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; color: #fff; }
h1 { font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.35rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
.neon { color: var(--neon); text-shadow: 0 0 14px var(--neon-glow); }
.suave { color: var(--suave); }
.tenue { color: var(--tenue); font-size: .85rem; }
.ic { width: 18px; height: 18px; flex: none; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 24px 0; }
code { background: var(--card-2); padding: 2px 6px; border-radius: 6px; color: var(--neon); font-size: .9em; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer; text-decoration: none !important;
  transition: transform .12s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.deshabilitado { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-neon { background: var(--neon); color: #03141b; box-shadow: 0 0 0 0 var(--neon-glow); }
.btn-neon:hover { box-shadow: 0 0 22px var(--neon-glow); background: #5beaff; }
.btn-ghost { background: transparent; color: var(--neon); border-color: var(--linea-2); }
.btn-ghost:hover { border-color: var(--neon); background: var(--neon-bg); }
.btn-gris { background: var(--card-2); color: var(--texto); border-color: var(--linea); }
.btn-gris:hover { border-color: var(--linea-2); }
.btn-peligro { background: transparent; color: var(--mal); border-color: rgba(248, 113, 113, .35); }
.btn-peligro:hover { background: rgba(248, 113, 113, .1); }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-xs { padding: 4px 10px; font-size: .78rem; }
.btn-block { width: 100%; }
.btn-icon { background: none; border: 0; color: var(--texto); padding: 8px; cursor: pointer; border-radius: 10px; display: inline-flex; }
.btn-icon:hover { background: var(--card-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Layout con sidebar ── */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: var(--bg-2);
  border-right: 1px solid var(--linea); display: flex; flex-direction: column; padding: 18px 14px; z-index: 40;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 1.08rem; text-decoration: none !important; padding: 4px 8px 18px; }
.brand img { width: 38px; height: auto; }
.brand > span { white-space: nowrap; }
.sidebar .brand { font-size: .9rem; gap: 8px; padding-left: 4px; padding-right: 4px; }
.marca { font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.marca .m-master { color: #ffffff; }
.marca .m-ing { color: #ffffff; }  /* logo nuevo (2026-10-24): la marca va de un solo color */
/* Logotipo MASTER\NG (logo nuevo, 2026-10-24): un solo color, toma el color del texto */
.mg-wm{display:inline-block;height:0.749em;aspect-ratio:9.2484;vertical-align:baseline;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1415 153%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M1099,3 L1099,148 L1100,149 L1139,149 L1139,70 L1140,69 L1180,115 L1180,116 L1197,135 L1197,136 L1203,142 L1203,143 L1209,149 L1242,149 L1243,4 L1242,3 L1203,3 L1203,80 L1202,81 L1181,57 L1181,56 L1161,34 L1161,33 L1134,3Z M980,3 L1039,147 L1041,149 L1084,149 L1084,147 L1080,140 L1080,138 L1075,128 L1075,126 L1073,123 L1071,116 L1068,111 L1068,109 L1066,106 L1064,99 L1061,94 L1061,92 L1059,89 L1057,82 L1049,65 L1049,63 L1047,60 L1045,53 L1042,48 L1042,46 L1040,43 L1038,36 L1035,31 L1035,29 L1033,26 L1033,24 L1031,21 L1031,19 L1029,16 L1029,14 L1027,11 L1025,4 L1024,3Z M841,3 L841,149 L882,149 L882,109 L883,108 L906,108 L935,149 L979,149 L950,105 L947,102 L949,99 L956,95 L963,89 L968,82 L974,67 L974,62 L975,61 L975,49 L974,48 L974,44 L973,43 L973,40 L972,39 L971,34 L966,25 L957,16 L947,10 L945,10 L942,8 L940,8 L936,6 L933,6 L932,5 L928,5 L927,4 L919,4 L918,3Z M882,36 L883,35 L915,35 L926,39 L931,44 L933,48 L934,58 L933,59 L933,63 L927,71 L917,75 L913,75 L912,76 L883,76 L882,75Z M698,3 L698,147 L697,148 L698,149 L818,149 L818,117 L740,117 L739,116 L739,90 L740,89 L806,89 L806,59 L740,59 L739,58 L739,35 L740,34 L742,34 L743,35 L744,34 L747,34 L748,35 L814,35 L815,34 L815,3Z M545,3 L545,35 L590,35 L591,36 L591,148 L592,149 L632,149 L632,36 L636,34 L639,34 L640,35 L678,35 L679,34 L679,3Z M0,147 L0,149 L49,149 L50,148 L50,145 L54,134 L54,131 L55,130 L56,123 L58,119 L60,108 L62,104 L63,97 L67,86 L70,71 L72,68 L74,70 L79,81 L81,83 L87,96 L89,98 L94,109 L96,111 L109,137 L135,137 L140,130 L156,98 L158,96 L171,69 L173,67 L174,68 L175,75 L177,79 L177,82 L179,86 L179,89 L182,96 L182,99 L184,103 L184,106 L186,110 L186,113 L189,121 L190,128 L191,129 L191,131 L193,135 L193,138 L197,149 L272,149 L275,144 L275,142 L278,137 L280,130 L285,120 L348,120 L352,127 L352,129 L355,134 L355,136 L359,143 L359,145 L361,149 L404,149 L403,145 L392,123 L392,121 L384,106 L384,104 L378,93 L378,91 L374,84 L374,82 L366,67 L366,65 L359,52 L359,50 L355,43 L355,41 L348,28 L348,26 L337,3 L295,3 L293,7 L293,9 L290,14 L290,16 L285,25 L285,27 L277,43 L277,45 L273,52 L273,54 L268,63 L268,65 L256,90 L256,92 L252,99 L252,101 L248,108 L248,110 L244,117 L244,119 L240,125 L239,124 L239,122 L237,118 L237,115 L234,108 L234,105 L230,95 L230,92 L225,79 L225,76 L221,66 L221,63 L219,59 L219,56 L217,52 L215,42 L211,32 L211,29 L206,16 L204,6 L202,3 L167,3 L166,4 L149,39 L147,41 L137,62 L135,64 L126,83 L124,85 L120,80 L117,73 L115,71 L110,60 L108,58 L104,49 L102,47 L98,38 L96,36 L90,23 L88,21 L80,5 L78,3 L43,3 L41,8 L41,11 L39,15 L39,18 L37,22 L37,25 L34,32 L34,35 L31,42 L31,45 L28,52 L26,63 L22,73 L20,83 L17,90 L17,93 L16,94 L16,96 L14,100 L14,103 L11,110 L11,113 L8,120 L6,130 L5,131 L5,133 L3,137 L3,140Z M316,44 L317,45 L318,50 L320,53 L320,55 L325,65 L325,67 L327,70 L327,72 L329,75 L332,85 L334,88 L333,90 L299,90 L298,89 L298,87 L300,84 L304,71 L306,68 L307,63 L309,60 L311,53 L314,48 L314,46Z M1292,18 L1281,29 L1276,38 L1274,40 L1273,44 L1269,52 L1269,55 L1267,60 L1267,65 L1266,66 L1266,88 L1267,89 L1267,93 L1268,94 L1268,97 L1269,98 L1271,106 L1278,119 L1290,132 L1291,132 L1295,136 L1310,144 L1312,144 L1322,148 L1332,149 L1333,150 L1341,150 L1342,151 L1356,151 L1357,150 L1365,150 L1366,149 L1371,149 L1372,148 L1380,147 L1381,146 L1392,143 L1411,133 L1412,131 L1411,130 L1412,129 L1412,115 L1411,114 L1411,73 L1374,73 L1374,110 L1372,112 L1366,115 L1357,116 L1356,117 L1339,116 L1338,115 L1332,114 L1323,109 L1315,101 L1311,95 L1311,93 L1309,90 L1309,87 L1308,86 L1308,82 L1307,81 L1307,71 L1308,70 L1308,65 L1309,64 L1310,59 L1315,50 L1326,40 L1334,36 L1340,35 L1341,34 L1359,34 L1360,35 L1364,35 L1365,36 L1370,37 L1380,42 L1388,49 L1389,49 L1414,26 L1414,25 L1410,21 L1399,13 L1387,7 L1385,7 L1382,5 L1379,5 L1375,3 L1364,2 L1363,1 L1335,1 L1334,2 L1328,2 L1327,3 L1320,4 L1319,5 L1314,6 L1311,8 L1309,8 L1301,12Z M449,4 L448,5 L440,7 L429,13 L422,19 L417,26 L415,30 L415,32 L413,36 L413,40 L412,41 L412,53 L413,54 L414,61 L417,67 L423,74 L430,79 L440,84 L442,84 L446,86 L449,86 L453,88 L456,88 L457,89 L460,89 L461,90 L464,90 L465,91 L480,94 L493,99 L497,104 L497,110 L492,116 L488,118 L485,118 L484,119 L462,119 L461,118 L451,117 L450,116 L439,113 L422,105 L419,111 L419,113 L415,120 L413,127 L410,132 L410,135 L423,142 L425,142 L428,144 L430,144 L437,147 L445,148 L446,149 L451,149 L452,150 L459,150 L460,151 L484,151 L485,150 L496,149 L497,148 L500,148 L501,147 L504,147 L507,145 L509,145 L525,136 L530,131 L534,125 L534,123 L536,120 L537,114 L538,113 L538,97 L534,86 L524,75 L511,68 L509,68 L506,66 L503,66 L499,64 L496,64 L492,62 L488,62 L487,61 L484,61 L483,60 L468,57 L458,53 L453,47 L453,41 L457,36 L464,33 L467,33 L468,32 L488,32 L489,33 L493,33 L494,34 L501,35 L502,36 L510,38 L517,42 L519,42 L527,25 L527,23 L529,20 L531,13 L522,8 L517,7 L514,5 L511,5 L506,3 L502,3 L501,2 L495,2 L494,1 L465,1 L464,2 L457,2 L456,3Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1415 153%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M1099,3 L1099,148 L1100,149 L1139,149 L1139,70 L1140,69 L1180,115 L1180,116 L1197,135 L1197,136 L1203,142 L1203,143 L1209,149 L1242,149 L1243,4 L1242,3 L1203,3 L1203,80 L1202,81 L1181,57 L1181,56 L1161,34 L1161,33 L1134,3Z M980,3 L1039,147 L1041,149 L1084,149 L1084,147 L1080,140 L1080,138 L1075,128 L1075,126 L1073,123 L1071,116 L1068,111 L1068,109 L1066,106 L1064,99 L1061,94 L1061,92 L1059,89 L1057,82 L1049,65 L1049,63 L1047,60 L1045,53 L1042,48 L1042,46 L1040,43 L1038,36 L1035,31 L1035,29 L1033,26 L1033,24 L1031,21 L1031,19 L1029,16 L1029,14 L1027,11 L1025,4 L1024,3Z M841,3 L841,149 L882,149 L882,109 L883,108 L906,108 L935,149 L979,149 L950,105 L947,102 L949,99 L956,95 L963,89 L968,82 L974,67 L974,62 L975,61 L975,49 L974,48 L974,44 L973,43 L973,40 L972,39 L971,34 L966,25 L957,16 L947,10 L945,10 L942,8 L940,8 L936,6 L933,6 L932,5 L928,5 L927,4 L919,4 L918,3Z M882,36 L883,35 L915,35 L926,39 L931,44 L933,48 L934,58 L933,59 L933,63 L927,71 L917,75 L913,75 L912,76 L883,76 L882,75Z M698,3 L698,147 L697,148 L698,149 L818,149 L818,117 L740,117 L739,116 L739,90 L740,89 L806,89 L806,59 L740,59 L739,58 L739,35 L740,34 L742,34 L743,35 L744,34 L747,34 L748,35 L814,35 L815,34 L815,3Z M545,3 L545,35 L590,35 L591,36 L591,148 L592,149 L632,149 L632,36 L636,34 L639,34 L640,35 L678,35 L679,34 L679,3Z M0,147 L0,149 L49,149 L50,148 L50,145 L54,134 L54,131 L55,130 L56,123 L58,119 L60,108 L62,104 L63,97 L67,86 L70,71 L72,68 L74,70 L79,81 L81,83 L87,96 L89,98 L94,109 L96,111 L109,137 L135,137 L140,130 L156,98 L158,96 L171,69 L173,67 L174,68 L175,75 L177,79 L177,82 L179,86 L179,89 L182,96 L182,99 L184,103 L184,106 L186,110 L186,113 L189,121 L190,128 L191,129 L191,131 L193,135 L193,138 L197,149 L272,149 L275,144 L275,142 L278,137 L280,130 L285,120 L348,120 L352,127 L352,129 L355,134 L355,136 L359,143 L359,145 L361,149 L404,149 L403,145 L392,123 L392,121 L384,106 L384,104 L378,93 L378,91 L374,84 L374,82 L366,67 L366,65 L359,52 L359,50 L355,43 L355,41 L348,28 L348,26 L337,3 L295,3 L293,7 L293,9 L290,14 L290,16 L285,25 L285,27 L277,43 L277,45 L273,52 L273,54 L268,63 L268,65 L256,90 L256,92 L252,99 L252,101 L248,108 L248,110 L244,117 L244,119 L240,125 L239,124 L239,122 L237,118 L237,115 L234,108 L234,105 L230,95 L230,92 L225,79 L225,76 L221,66 L221,63 L219,59 L219,56 L217,52 L215,42 L211,32 L211,29 L206,16 L204,6 L202,3 L167,3 L166,4 L149,39 L147,41 L137,62 L135,64 L126,83 L124,85 L120,80 L117,73 L115,71 L110,60 L108,58 L104,49 L102,47 L98,38 L96,36 L90,23 L88,21 L80,5 L78,3 L43,3 L41,8 L41,11 L39,15 L39,18 L37,22 L37,25 L34,32 L34,35 L31,42 L31,45 L28,52 L26,63 L22,73 L20,83 L17,90 L17,93 L16,94 L16,96 L14,100 L14,103 L11,110 L11,113 L8,120 L6,130 L5,131 L5,133 L3,137 L3,140Z M316,44 L317,45 L318,50 L320,53 L320,55 L325,65 L325,67 L327,70 L327,72 L329,75 L332,85 L334,88 L333,90 L299,90 L298,89 L298,87 L300,84 L304,71 L306,68 L307,63 L309,60 L311,53 L314,48 L314,46Z M1292,18 L1281,29 L1276,38 L1274,40 L1273,44 L1269,52 L1269,55 L1267,60 L1267,65 L1266,66 L1266,88 L1267,89 L1267,93 L1268,94 L1268,97 L1269,98 L1271,106 L1278,119 L1290,132 L1291,132 L1295,136 L1310,144 L1312,144 L1322,148 L1332,149 L1333,150 L1341,150 L1342,151 L1356,151 L1357,150 L1365,150 L1366,149 L1371,149 L1372,148 L1380,147 L1381,146 L1392,143 L1411,133 L1412,131 L1411,130 L1412,129 L1412,115 L1411,114 L1411,73 L1374,73 L1374,110 L1372,112 L1366,115 L1357,116 L1356,117 L1339,116 L1338,115 L1332,114 L1323,109 L1315,101 L1311,95 L1311,93 L1309,90 L1309,87 L1308,86 L1308,82 L1307,81 L1307,71 L1308,70 L1308,65 L1309,64 L1310,59 L1315,50 L1326,40 L1334,36 L1340,35 L1341,34 L1359,34 L1360,35 L1364,35 L1365,36 L1370,37 L1380,42 L1388,49 L1389,49 L1414,26 L1414,25 L1410,21 L1399,13 L1387,7 L1385,7 L1382,5 L1379,5 L1375,3 L1364,2 L1363,1 L1335,1 L1334,2 L1328,2 L1327,3 L1320,4 L1319,5 L1314,6 L1311,8 L1309,8 L1301,12Z M449,4 L448,5 L440,7 L429,13 L422,19 L417,26 L415,30 L415,32 L413,36 L413,40 L412,41 L412,53 L413,54 L414,61 L417,67 L423,74 L430,79 L440,84 L442,84 L446,86 L449,86 L453,88 L456,88 L457,89 L460,89 L461,90 L464,90 L465,91 L480,94 L493,99 L497,104 L497,110 L492,116 L488,118 L485,118 L484,119 L462,119 L461,118 L451,117 L450,116 L439,113 L422,105 L419,111 L419,113 L415,120 L413,127 L410,132 L410,135 L423,142 L425,142 L428,144 L430,144 L437,147 L445,148 L446,149 L451,149 L452,150 L459,150 L460,151 L484,151 L485,150 L496,149 L497,148 L500,148 L501,147 L504,147 L507,145 L509,145 L525,136 L530,131 L534,125 L534,123 L536,120 L537,114 L538,113 L538,97 L534,86 L524,75 L511,68 L509,68 L506,66 L503,66 L499,64 L496,64 L492,62 L488,62 L487,61 L484,61 L483,60 L468,57 L458,53 L453,47 L453,41 L457,36 L464,33 L467,33 L468,32 L488,32 L489,33 L493,33 L494,34 L501,35 L502,36 L510,38 L517,42 L519,42 L527,25 L527,23 L529,20 L531,13 L522,8 L517,7 L514,5 L511,5 L506,3 L502,3 L501,2 L495,2 L494,1 L465,1 L464,2 L457,2 L456,3Z%22/%3E%3C/svg%3E") center/contain no-repeat}

.brand b { color: var(--neon); font-weight: 800; margin-left: 2px; text-shadow: 0 0 12px var(--neon-glow); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--suave); font-weight: 600; font-size: .92rem; text-decoration: none !important;
  background: none; border: 0; width: 100%; font-family: inherit; cursor: pointer; text-align: left;
}
.nav-item:hover { color: #fff; background: var(--card); }
.nav-item.activo { color: var(--neon); background: var(--neon-bg); box-shadow: inset 3px 0 0 var(--neon); }
.nav-titulo { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); padding: 18px 12px 6px; font-weight: 700; }
.sidebar-pie { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 10px; }
.sidebar-pie form { margin: 0; }
.main { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 14px 28px; background: rgba(5, 8, 15, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea);
}
.buscador { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--linea); border-radius: 12px; padding: 0 14px; color: var(--tenue); }
.buscador:focus-within { border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-bg); }
.buscador input[type=search] { flex: 1; background: none; border: 0; box-shadow: none; color: var(--texto); padding: 10px 0; font: inherit; outline: none; min-width: 0; border-radius: 0; }
.topbar-der { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.usuario { display: flex; align-items: center; gap: 8px; color: var(--texto); font-weight: 600; text-decoration: none !important; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--neon), #0077b6); color: #03141b; font-weight: 800; font-size: .8rem; }
.contenido { padding: 28px; flex: 1; width: 100%; max-width: 1280px; }
.pie { padding: 22px 28px; color: var(--tenue); font-size: .8rem; border-top: 1px solid var(--linea); }
.sidebar-velo { display: none; }
.solo-movil { display: none !important; }

/* ── Público ── */
/* Logo animado MASTER\NG → MI al bajar (2026-10-24). La caja se angosta; el dibujo no se achica. */
.mg-marca{display:block;height:var(--mg-alto,17px);overflow:hidden;width:calc(var(--mg-alto,17px) * 1427 / 152.5);transition:width .55s cubic-bezier(.6,0,.2,1)}
.mg-anim{height:100%;width:auto;display:block;overflow:visible}
.mg-anim path{transition:transform .55s cubic-bezier(.6,0,.2,1),opacity .3s ease}
.mg-compacto .mg-marca{width:calc(var(--mg-alto,17px) * 340.75 / 152.5)}
.mg-compacto .mg-anim .mg-sale{transform:translateX(var(--dx));opacity:0}
.mg-compacto .mg-anim .mg-barra{transform:translateX(var(--dx))}
@media (prefers-reduced-motion:reduce){.mg-marca,.mg-anim path{transition:none}}
.pub-header .brand { gap: 9px; align-items: baseline; --mg-alto: 16px; }
.pub-header .mg-marca { align-self: center; }
.mg-academy { transition: opacity .3s ease, max-width .55s cubic-bezier(.6,0,.2,1); max-width: 120px; overflow: hidden; }
.mg-compacto .mg-academy { opacity: 0; max-width: 0; margin: 0 !important; }

.pub-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px; border-bottom: 1px solid var(--linea); background: rgba(5, 8, 15, .7); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30; }
.pub-header .brand { padding: 0; }
.pub-nav { display: flex; align-items: center; gap: 10px; }
.link-sutil { color: var(--suave); font-weight: 600; font-size: .9rem; }
.pub-main { max-width: 1180px; margin: 0 auto; padding: 36px 20px 60px; min-height: calc(100vh - 150px); }
.caja-auth { max-width: 460px; margin: 20px auto; }
.caja-auth.ancha { max-width: 680px; }

/* ── Tarjetas y grillas ── */
.card { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; }
.card + .card { margin-top: 18px; }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-titulo h2, .card-titulo h3 { margin: 0; }
.seccion { margin: 34px 0 16px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.seccion h2 { margin: 0; }
.seccion a { font-size: .85rem; font-weight: 600; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid-2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.grid-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.stat { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.stat b { display: block; font-size: 1.9rem; color: var(--neon); text-shadow: 0 0 16px var(--neon-glow); line-height: 1.1; }
.stat span { color: var(--suave); font-size: .85rem; }

.curso-card { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; color: var(--texto); text-decoration: none !important; }
.curso-card:hover { border-color: var(--neon-2); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 1px var(--neon-bg); }
.curso-card .cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.curso-card h3 { margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--suave); font-size: .82rem; align-items: center; }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.meta .ic { width: 14px; height: 14px; }

.portada {
  aspect-ratio: 16 / 7; display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 30% 20%, rgba(34, 227, 255, .35), transparent 55%), linear-gradient(135deg, #07233a, #06101d 60%, #0a0f1c);
  border-bottom: 1px solid var(--linea);
}
.portada::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(34, 227, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 227, 255, .06) 1px, transparent 1px); background-size: 22px 22px; }
.portada span { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; color: var(--neon); border: 2px solid var(--neon); background: rgba(3, 20, 27, .7); box-shadow: 0 0 24px var(--neon-glow), inset 0 0 14px var(--neon-bg); }
.portada span.con-sello { padding: 10px; }
.portada span.con-sello img { width: 100%; height: 100%; object-fit: contain; }
.portada.mini { aspect-ratio: auto; width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--linea-2); flex: none; }
.portada.mini span { width: 40px; height: 40px; font-size: .95rem; border-radius: 10px; }

.barra { height: 6px; background: var(--linea); border-radius: 99px; overflow: hidden; }
.barra > div { height: 100%; background: linear-gradient(90deg, var(--neon-2), var(--neon)); box-shadow: 0 0 10px var(--neon-glow); border-radius: 99px; }
.fila-prog { display: flex; justify-content: space-between; font-size: .8rem; color: var(--suave); margin-top: 6px; gap: 10px; }

.banner-continuar { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, var(--card-2), var(--card)); border: 1px solid var(--linea-2); border-radius: 18px; padding: 22px; flex-wrap: wrap; }
.banner-continuar .info { flex: 1; min-width: 220px; }
.banner-continuar h3 { font-size: 1.25rem; margin-bottom: 2px; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: .74rem; font-weight: 700; background: var(--card-2); color: var(--suave); border: 1px solid var(--linea); white-space: nowrap; }
.chip-neon { color: var(--neon); border-color: rgba(34, 227, 255, .35); background: var(--neon-bg); }
.chip-ok { color: var(--ok); border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); }
.chip-warn { color: var(--warn); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); }
.chip-mal { color: var(--mal); border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .08); }

/* ── Hero público ── */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 30px 0 50px; }
.hero h1 { font-size: 2.8rem; letter-spacing: -.02em; }
.hero p.lead { font-size: 1.12rem; color: var(--suave); max-width: 560px; }
.hero-visual { background: var(--card); border: 1px solid var(--linea-2); border-radius: 22px; padding: 26px; box-shadow: 0 0 60px rgba(34, 227, 255, .08); }
.hero-visual img { width: 100%; max-width: 280px; display: block; margin: 0 auto 14px; }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.paso { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; }
.paso .num { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--neon-bg); color: var(--neon); font-weight: 800; border: 1px solid rgba(34, 227, 255, .35); margin-bottom: 12px; }

/* ── Formularios ── */
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: #dfe8f5; }
.campo { margin-bottom: 16px; }
.campo small { color: var(--tenue); display: block; margin-top: 5px; font-size: .78rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], input[type=tel], select, textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--linea-2); color: var(--texto);
  padding: 11px 13px; border-radius: 10px; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 3px var(--neon-bg); }
textarea { min-height: 100px; resize: vertical; }
input[type=file] { color: var(--suave); font: inherit; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--suave); cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--neon); width: 16px; height: 16px; flex: none; }
.fila { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.fila-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid; font-size: .92rem; }
.alert-ok { background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .35); color: #a7f3d0; }
.alert-error { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .35); color: #fecaca; }
.alert-info { background: var(--neon-bg); border-color: rgba(34, 227, 255, .3); color: #bff5ff; }
.alert-warn { background: rgba(251, 191, 36, .08); border-color: rgba(251, 191, 36, .35); color: #fde68a; }

/* ── Logos de herramientas ── */
.logos-elegir { display: flex; flex-wrap: wrap; gap: 10px; }
.logo-op { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.logo-op input { accent-color: var(--neon); width: 16px; height: 16px; }
.logo-op span, .logos-curso span { background: #fff; border-radius: 10px; padding: 7px 12px; display: inline-flex; align-items: center; height: 40px; border: 2px solid transparent; }
.logo-op input:checked + span { border-color: var(--neon); box-shadow: 0 0 12px var(--neon-glow); }
.logo-op img, .logos-curso img { height: 22px; width: auto; max-width: 140px; object-fit: contain; }
.logos-curso { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── Tablas ── */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; color: var(--suave); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-2); }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .015); }
td form { display: inline; margin: 0; }

/* ── Curso / temario ── */
.curso-hero { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
.modulo { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-bottom: 12px; background: var(--card); }
.modulo summary { list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.modulo summary::-webkit-details-marker { display: none; }
.modulo summary::after { content: "▾"; color: var(--neon); transition: transform .2s; }
.modulo[open] summary::after { transform: rotate(180deg); }
.clase-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--linea); color: var(--texto); text-decoration: none !important; }
.clase-item:hover { background: var(--card-2); }
.clase-item.actual { background: var(--neon-bg); box-shadow: inset 3px 0 0 var(--neon); }
.clase-item .estado { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linea-2); color: var(--suave); flex: none; }
.clase-item .estado .ic { width: 13px; height: 13px; }
.clase-item.hecha .estado { background: var(--ok); border-color: var(--ok); color: #03140d; }
.clase-item .t { flex: 1; font-size: .9rem; }
.clase-item .d { color: var(--tenue); font-size: .8rem; }

/* ── Reproductor ── */
.clase-layout { display: grid; grid-template-columns: 1fr 350px; gap: 22px; align-items: start; }
.player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); }
.player-frame iframe, .player-frame video, .player-frame > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-vacio { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--card); border: 1px dashed var(--linea-2); border-radius: var(--radio); color: var(--suave); font-size: 1.1rem; }
.clase-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.lista-clases { max-height: calc(100vh - 140px); overflow-y: auto; position: sticky; top: 80px; }

/* ── Seguimiento de visualización y pregunta sorpresa ── */
.visto-caja { display: flex; flex-direction: column; gap: 5px; min-width: 190px; font-size: .85rem; font-weight: 700; color: var(--neon); }
.visto-barra { height: 5px; }
.sorpresa-velo { position: fixed; inset: 0; z-index: 60; background: rgba(2, 6, 12, .82); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); }
.sorpresa-caja { max-width: 520px; width: 100%; border-color: var(--neon); box-shadow: 0 0 40px rgba(34, 227, 255, .15); }
.sorpresa-op { width: 100%; text-align: left; background: var(--bg-2); color: var(--texto); font: inherit; }
.aviso-flotante { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: var(--card-2); border: 1px solid var(--warn); color: #fde68a; padding: 10px 16px; border-radius: 12px; font-size: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* ── Examen ── */
.pregunta { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; margin-bottom: 14px; }
.pregunta h3 { font-weight: 600; font-size: 1rem; line-height: 1.5; }
.pregunta .n { color: var(--neon); font-weight: 800; margin-right: 6px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 10px; margin-top: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.opcion:hover { border-color: var(--linea-2); background: var(--card-2); }
.opcion input { margin-top: 4px; accent-color: var(--neon); flex: none; }
.opcion:has(input:checked) { border-color: var(--neon); background: var(--neon-bg); }
.opcion.correcta { border-color: rgba(52, 211, 153, .55); background: rgba(52, 211, 153, .08); }
.opcion.incorrecta { border-color: rgba(248, 113, 113, .55); background: rgba(248, 113, 113, .08); }
.timer { position: sticky; top: 74px; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: rgba(13, 21, 35, .95); border: 1px solid var(--linea-2); border-radius: 14px; padding: 12px 18px; margin-bottom: 18px; backdrop-filter: blur(8px); }
.timer b { font-size: 1.35rem; color: var(--neon); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px var(--neon-glow); }
.timer.urgente b { color: var(--mal); text-shadow: none; }
.resultado { text-align: center; padding: 34px 22px; }
.resultado .nota { font-size: 3.6rem; font-weight: 800; line-height: 1; margin: 10px 0; }
.resultado.aprobado .nota { color: var(--ok); text-shadow: 0 0 24px rgba(52, 211, 153, .4); }
.resultado.desaprobado .nota { color: var(--mal); }

.vacio { text-align: center; padding: 40px 20px; color: var(--suave); }
.oculto { display: none !important; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .clase-layout, .curso-hero { grid-template-columns: 1fr; }
  .lista-clases { position: static; max-height: none; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
  body.menu-abierto .sidebar { transform: none; }
  body.menu-abierto .sidebar-velo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 35; }
  .main { margin-left: 0; }
  .solo-movil { display: inline-flex !important; }
  .solo-escritorio { display: none; }
  .topbar { padding: 12px 16px; }
  .contenido { padding: 20px 16px; }
  .hero { grid-template-columns: 1fr; gap: 26px; }
  .hero h1 { font-size: 2.1rem; }
  .pasos, .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fila, .fila-3 { grid-template-columns: 1fr; }
  .pub-header { padding: 12px 16px; }
  .pub-header .mg-academy, .link-sutil { display: none; }
  .pub-main { padding: 24px 16px 50px; }
  h1 { font-size: 1.55rem; }
  .card { padding: 18px; }
  th, td { padding: 9px 10px; }
}


/* ═════════════════ v2 · Pulido visual, pensado primero para el celular ═════════════════ */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], input[type=tel], select, textarea { font-size: 16px; }   /* evita el zoom automático del iPhone */
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.btn, .nav-item, .opcion, .ni { -webkit-tap-highlight-color: transparent; }
.texto-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.chip-oro { color: var(--oro); border-color: rgba(245, 196, 81, .4); background: var(--oro-bg); }
.btn-oro { background: var(--oro); color: #1d1402; }
.btn-oro:hover { box-shadow: 0 0 22px rgba(245, 196, 81, .35); }

/* Portada con el color de cada curso */
.portada { background: radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--c, #22e3ff) 42%, transparent), transparent 58%),
                        radial-gradient(circle at 85% 90%, rgba(124, 92, 255, .22), transparent 55%),
                        linear-gradient(135deg, #07192b, #06101d 60%, #0a0f1c); }
.portada span { border-color: var(--c, var(--neon)); color: var(--c, var(--neon));
  box-shadow: 0 0 26px color-mix(in srgb, var(--c, #22e3ff) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--c, #22e3ff) 15%, transparent); }

/* Anillo de avance */
.anillo { flex: none; }
.anillo-fondo { fill: none; stroke: var(--linea-2); stroke-width: 3; }
.anillo-valor { fill: none; stroke: var(--neon); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.anillo text { font-size: 7.5px; font-weight: 800; fill: var(--texto); font-family: inherit; }

/* Miniaturas de clases */
.miniatura { position: relative; flex: none; width: 104px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--card-2); border: 1px solid var(--linea); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .55)); color: #fff; }
.miniatura .play .ic { width: 22px; height: 22px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
.clase-item .miniatura { width: 88px; }
.clase-item.hecha .miniatura::after { content: "✓"; position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #03140d; font-size: 11px; font-weight: 800; }
.banner-continuar .miniatura { width: 200px; border-radius: 12px; }
.banner-continuar .miniatura .play .ic { width: 38px; height: 38px; }

/* Estadísticas del alumno */
.stats-alumno { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 6px; }
.stat-mini { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.stat-mini b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--neon); }
.stat-mini.oro b { color: var(--oro); }
.stat-mini span { color: var(--suave); font-size: .8rem; }

/* Logros / certificados en dorado */
.card-logro { border-color: rgba(245, 196, 81, .35); background: linear-gradient(160deg, rgba(245, 196, 81, .07), var(--card) 45%); }
.resultado.aprobado .nota { color: var(--oro); text-shadow: 0 0 28px rgba(245, 196, 81, .45); }

/* Banner para instalar la app */
.banner-instalar { display: none; align-items: center; gap: 14px; background: linear-gradient(120deg, rgba(34, 227, 255, .12), rgba(124, 92, 255, .12)); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 14px 16px; margin: 16px 0; }
.banner-instalar.visible { display: flex; }
.banner-instalar img { width: 44px; height: 44px; border-radius: 12px; }
.banner-instalar div { flex: 1; font-size: .88rem; color: var(--suave); }
.banner-instalar b { color: #fff; display: block; font-size: .95rem; }

/* Confeti */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }

/* Pie */
.pie-fila { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.pie-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pie-links a { color: var(--suave); font-weight: 600; }

/* Página de inicio: celular de muestra */
.telefono { width: 270px; margin: 0 auto; aspect-ratio: 9 / 18.5; border-radius: 38px; padding: 12px; background: #0a0f1a;
  border: 1px solid var(--linea-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 6px #111b2d, 0 0 60px rgba(34, 227, 255, .12); position: relative; overflow: hidden; }
.telefono::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 80px; height: 20px; border-radius: 12px; background: #000; z-index: 2; }
.tel-pantalla { height: 100%; border-radius: 28px; background: var(--bg); padding: 40px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: .72rem; color: var(--suave); }
.tel-video { aspect-ratio: 16 / 9; border-radius: 12px; background: radial-gradient(circle at 30% 30%, rgba(217, 119, 87, .5), transparent 60%), linear-gradient(135deg, #1a2440, #0b1220); display: grid; place-items: center; border: 1px solid var(--linea); }
.tel-video .ic { width: 34px; height: 34px; color: #fff; }
.tel-card { background: var(--card); border: 1px solid var(--linea); border-radius: 12px; padding: 10px; }
.tel-card b { color: #fff; font-size: .78rem; display: block; margin-bottom: 6px; }
.tel-cert { background: linear-gradient(150deg, #fff, #e9f2f8); color: #0b1a2e; border-radius: 12px; padding: 10px; text-align: center; box-shadow: 0 0 0 1px rgba(245, 196, 81, .6); }
.tel-cert small { display: block; font-size: .58rem; letter-spacing: .12em; color: #5f6f8a; }
.tel-cert strong { font-size: .9rem; letter-spacing: .06em; }
.beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.beneficio { background: var(--card); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.beneficio .ic { width: 26px; height: 26px; color: var(--neon); margin-bottom: 10px; }
.beneficio h3 { font-size: .98rem; margin-bottom: 4px; }
.beneficio p { color: var(--suave); font-size: .86rem; margin: 0; }
.cta-final { text-align: center; padding: 36px 22px; border-radius: 20px; margin-top: 34px; border: 1px solid var(--linea-2);
  background: radial-gradient(circle at 50% 0%, rgba(34, 227, 255, .16), transparent 60%), radial-gradient(circle at 100% 100%, rgba(124, 92, 255, .16), transparent 55%), var(--card); }

/* Páginas de texto (legales, error, sin conexión) */
.texto-legal { max-width: 780px; margin: 0 auto; }
.texto-legal h2 { font-size: 1.1rem; margin-top: 26px; }
.texto-legal p, .texto-legal li { color: var(--suave); line-height: 1.7; }
.pagina-error { text-align: center; padding: 50px 16px; }
.pagina-error .num { font-size: 5rem; font-weight: 800; line-height: 1; }

.nav-inferior { display: none; }

/* ════════ Celular y tablet ════════ */
@media (max-width: 900px) {
  #btn-menu { display: none !important; }
  .nav-inferior { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(8, 13, 24, .96); backdrop-filter: blur(14px);
    border-top: 1px solid var(--linea); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .ni { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 5px; font-size: .68rem; font-weight: 700;
    color: var(--suave); background: none; border: 0; font-family: inherit; text-decoration: none !important; border-radius: 12px; min-height: 52px; justify-content: center; cursor: pointer; }
  .ni .ic { width: 23px; height: 23px; }
  .ni.activo { color: var(--neon); }
  .ni.activo .ic { filter: drop-shadow(0 0 8px var(--neon-glow)); }
  .con-sidebar .main { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .contenido { padding: 16px 14px 24px; }
  .stats-alumno { gap: 8px; }
  .stat-mini { padding: 12px; }
  .stat-mini b { font-size: 1.3rem; }
  .stat-mini span { font-size: .72rem; }
  .banner-continuar { flex-direction: column; align-items: stretch; padding: 14px; gap: 12px; }
  .banner-continuar .miniatura { width: 100%; }
  .banner-continuar .btn { width: 100%; }
  .beneficios { grid-template-columns: 1fr 1fr; }
  .telefono { width: 230px; }
  /* Clase y examen: la barra inferior se reemplaza por los controles de la página */
  .en-clase .nav-inferior, .en-examen .nav-inferior { display: none; }
  .en-clase .main, .en-examen .main { padding-bottom: 0; }
  .en-clase .clase-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; margin: 0; flex-wrap: nowrap; gap: 8px;
    background: rgba(8, 13, 24, .97); backdrop-filter: blur(14px); border-top: 1px solid var(--linea); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .en-clase .clase-barra .acciones { flex: 1; flex-wrap: nowrap; min-width: 0; }
  .en-clase .clase-barra .btn { padding: 11px 14px; }
  .en-clase .visto-caja { min-width: 0; flex: 1; }
  .en-clase .contenido { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .en-clase .player-frame { margin: 0 -14px; border-radius: 0; border-left: 0; border-right: 0; }
  .en-clase .pie { display: none; }
  .clase-item .miniatura { width: 76px; }
  .pie { padding: 18px 14px; }
}
@media (max-width: 600px) {
  .beneficios { grid-template-columns: 1fr; }
  .hero { padding-top: 6px; }
  .grid { grid-template-columns: 1fr; }
  .txt-largo { display: none; }
  .hero h1 { font-size: 1.9rem; }
  .chip { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}