@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --bg: linear-gradient(160deg, #FFF5E4 0%, #FFE4F0 50%, #E4F0FF 100%);
  --white: #fff;
  --text: #2D1B69;
  --muted: #7B6B99;
  --border: #E0D8F0;
  --shadow: 0 4px 20px rgba(0,0,0,.07);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.13);
  --r: 20px; --r-sm: 12px; --r-xs: 8px;
  --font: 'Nunito', system-ui, sans-serif;
  --purple: #7C3AED; --purple-dark: #5B21B6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); min-height: 100vh; color: var(--text); }

/* ── Header ── */
.header { background: #fff; padding: 14px 24px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo h1 { font-size: 20px; font-weight: 900; }
.logo p { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ── Buttons ── */
.btn { padding: 10px 20px; border-radius: var(--r-sm); border: none; font-family: var(--font); font-weight: 800; font-size: 14px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; }
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.btn-secondary { background: #fff; color: var(--muted); border: 2px solid var(--border); }
.btn-secondary:hover { border-color: #C4B5FD; color: var(--text); }
.btn-danger { background: #FEF2F2; color: #DC2626; border: 2px solid #FECACA; }
.btn-danger:hover { background: #DC2626; color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 16px; }
.btn-full { width: 100%; justify-content: center; }

/* ── Cards ── */
.card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 24px; }

/* ── Subject grid ── */
.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.subject-card { background: #fff; border-radius: var(--r); padding: 22px 14px; cursor: pointer; transition: all .25s; box-shadow: var(--shadow); border: 2px solid var(--border); text-align: center; position: relative; overflow: hidden; }
.subject-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.subject-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.subject-card:hover::before { opacity: 1; }
.subject-card:hover .sc-name, .subject-card:hover .sc-sub { color: #fff !important; }
.subject-card .sc-icon { font-size: 42px; margin-bottom: 10px; position: relative; z-index: 1; }
.subject-card .sc-name { font-size: 15px; font-weight: 900; margin-bottom: 3px; transition: color .25s; position: relative; z-index: 1; }
.subject-card .sc-sub { font-size: 12px; font-weight: 600; color: var(--muted); transition: color .25s; position: relative; z-index: 1; }
.subject-card .sc-scores { display: flex; gap: 5px; justify-content: center; margin-top: 8px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ── Vocab section ── */
.vocab-section { margin-top: 32px; }
.section-title { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.section-sub { color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.bim-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.bim-tab { padding: 8px 18px; border-radius: 12px; border: 2px solid var(--border); background: #fff; font-family: var(--font); font-weight: 800; font-size: 14px; cursor: pointer; color: var(--muted); transition: all .2s; }
.bim-tab.active { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; border-color: transparent; }
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.vocab-card { background: #fff; border-radius: var(--r); padding: 14px 10px; text-align: center; cursor: pointer; transition: all .2s; box-shadow: var(--shadow); border: 2px solid var(--border); }
.vocab-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #C4B5FD; }
.vocab-card img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 6px; }
.vocab-card .vc-word { font-size: 14px; font-weight: 900; }
.vocab-card .vc-icon { font-size: 18px; margin-top: 4px; }
.vocab-set-card { background: #fff; border-radius: var(--r); padding: 16px 18px; cursor: pointer; transition: all .2s; box-shadow: var(--shadow); border: 2px solid var(--border); }
.vocab-set-card:hover { border-color: var(--purple); transform: translateY(-2px); }

/* ── Bimestre selector ── */
.bim-selector { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; max-width: 480px; margin: 0 auto; }
.bim-card { background: #fff; border-radius: var(--r); padding: 28px 20px; text-align: center; cursor: pointer; transition: all .25s; box-shadow: var(--shadow); border: 2px solid var(--border); }
.bim-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.bim-card .bim-num { font-size: 36px; font-weight: 900; margin-bottom: 4px; }
.bim-card .bim-lbl { font-size: 14px; font-weight: 700; color: var(--muted); }
.bim-final { grid-column: span 2; background: linear-gradient(135deg, #1E1B4B, #312E81); color: #fff; }
.bim-final .bim-lbl { color: rgba(255,255,255,.75); }

/* ── Mode selector ── */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-card { background: #fff; border-radius: var(--r); padding: 24px 16px; text-align: center; cursor: pointer; transition: all .25s; box-shadow: var(--shadow); border: 2px solid var(--border); }
.mode-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mode-card .mode-icon { font-size: 38px; margin-bottom: 8px; }
.mode-card .mode-name { font-size: 18px; font-weight: 900; }
.mode-card .mode-desc { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--r-sm); font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text); background: #fff; transition: border-color .2s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--purple); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237B6B99' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.form-textarea { resize: vertical; min-height: 90px; }

/* ── Alerts ── */
.alert { padding: 12px 16px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.alert-error { background: #FEF2F2; color: #DC2626; border: 2px solid #FECACA; }
.alert-success { background: #F0FDF4; color: #16A34A; border: 2px solid #BBF7D0; }
.alert-info { background: #EFF6FF; color: #1D4ED8; border: 2px solid #BFDBFE; }

/* ── Quiz ── */
.quiz-wrap { max-width: 600px; margin: 0 auto; padding: 20px; }
.pb-track { flex: 1; height: 10px; background: var(--border); border-radius: 10px; overflow: hidden; }
.pb-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg,var(--purple),#EC4899); transition: width .4s; }
.q-card { background: #fff; border-radius: var(--r); padding: 26px 22px; box-shadow: var(--shadow); margin-bottom: 12px; }
.q-topic { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.q-text { font-size: 19px; font-weight: 800; line-height: 1.4; }
.opt-btn { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--border); background: #fff; color: var(--text); font-weight: 700; font-size: 15px; text-align: left; cursor: pointer; font-family: var(--font); transition: all .15s; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.opt-btn:hover:not(:disabled) { border-color: var(--purple); background: #FAF5FF; }
.opt-btn.correct { background: #F0FDF4; border-color: #4ADE80; color: #15803D; }
.opt-btn.wrong { background: #FEF2F2; border-color: #F87171; color: #DC2626; }
.opt-lbl { width: 28px; height: 28px; border-radius: 8px; background: #F5F0FF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: #6D4C9F; flex-shrink: 0; }
.opt-btn.correct .opt-lbl { background: #4ADE80; color: #fff; }
.opt-btn.wrong .opt-lbl { background: #F87171; color: #fff; }
.btn-next { width: 100%; padding: 15px; border-radius: 16px; border: none; color: #fff; font-weight: 900; font-size: 16px; cursor: pointer; font-family: var(--font); margin-top: 4px; }
.timer-ok { background: #F0FDF4; color: #16A34A; border: 2px solid #BBF7D0; padding: 5px 16px; border-radius: 20px; font-weight: 900; font-size: 15px; }
.timer-warn { background: #FEF2F2; color: #DC2626; border: 2px solid #FECACA; padding: 5px 16px; border-radius: 20px; font-weight: 900; font-size: 15px; }
.streak { background: #FFF7ED; color: #EA580C; border: 2px solid #FED7AA; padding: 4px 12px; border-radius: 14px; font-weight: 800; font-size: 13px; display: inline-block; }

/* ── Reading ── */
.story-wrap { max-width: 680px; margin: 0 auto; }
.story-text { font-size: 17px; line-height: 1.9; font-weight: 600; white-space: pre-line; }
.ppm-bar { background: linear-gradient(135deg, #7C3AED, #EC4899); color: #fff; border-radius: 14px; padding: 16px 20px; display: flex; gap: 24px; flex-wrap: wrap; }
.ppm-stat { text-align: center; }
.ppm-stat .val { font-size: 28px; font-weight: 900; }
.ppm-stat .lbl { font-size: 11px; font-weight: 700; opacity: .8; text-transform: uppercase; }

/* ── Result ── */
.result-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.result-card { background: #fff; border-radius: 28px; padding: 40px 32px; max-width: 460px; width: 100%; text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,.10); }

/* ── Admin ── */
.tabs { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.tab { padding: 9px 18px; border-radius: 12px; border: 2px solid var(--border); background: #fff; font-family: var(--font); font-weight: 800; font-size: 14px; cursor: pointer; color: var(--muted); transition: all .2s; }
.tab.active { background: linear-gradient(135deg,var(--purple),var(--purple-dark)); color: #fff; border-color: transparent; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th,td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
th { font-weight: 900; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
tr:hover td { background: #FAF5FF; }

/* ── Chips ── */
.chip { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 800; }
.chip-green { background: #F0FDF4; color: #16A34A; }
.chip-blue { background: #EFF6FF; color: #2563EB; }
.chip-red { background: #FEF2F2; color: #DC2626; }
.chip-purple { background: #FAF5FF; color: var(--purple); }
.chip-yellow { background: #FFFBEB; color: #92400E; }
.chip-gray { background: #F3F4F6; color: #6B7280; }

/* ── Loading ── */
.loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
.spinner { width: 46px; height: 46px; border: 5px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Confetti ── */
@keyframes fall { 0%{transform:translateY(-20px) rotate(0);opacity:1} 100%{transform:translateY(110vh) rotate(720deg);opacity:0} }
.confetti { position: fixed; width: 10px; height: 10px; border-radius: 2px; animation: fall linear forwards; pointer-events: none; z-index: 9999; }

/* ── Modal ── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: var(--r); padding: 28px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; }

/* ── Utils ── */
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.flex { display: flex; } .fc { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.p-main { padding: 28px 20px; }
.hidden { display: none !important; }
.text-muted { color: var(--muted); } .text-center { text-align: center; } .fw-9 { font-weight: 900; }
@media(max-width:600px){ .subject-grid{grid-template-columns:repeat(2,1fr)} .mode-grid{grid-template-columns:1fr 1fr} .bim-selector{grid-template-columns:1fr 1fr} .header{padding:12px 14px} .q-text{font-size:16px} }