:root {
    --azul: #1565C0;
    --azul-claro: #42A5F5;
    --rojo: #E53935;
    --amarillo: #FDD835;
    --verde: #43A047;
    --naranja: #FB8C00;
    --morado: #6A1B9A;
    --fondo: #F0F7FF;
    --gris: #607D8B;
    --texto: #1A237E;
    --sombra: 0 4px 20px rgba(21,101,192,0.15);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Nunito', sans-serif; background: var(--fondo); color: var(--texto); min-height: 100vh; }

  header { background: linear-gradient(135deg, var(--azul) 0%, #1976D2 50%, var(--azul-claro) 100%); color: white; padding: 18px 20px; text-align: center; position: relative; overflow: hidden; }
  header::before { content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px; background:rgba(255,255,255,0.08); border-radius:50%; }
  header h1 { font-family:'Baloo 2',cursive; font-size:clamp(1.4rem,5vw,2.2rem); font-weight:800; letter-spacing:-0.5px; position:relative; }
  header p { font-size:0.95rem; opacity:0.9; margin-top:4px; position:relative; }
  .flag-strip { display:flex; height:6px; width:100%; }
  .flag-strip span { flex:1; }
  .flag-strip span:nth-child(1),.flag-strip span:nth-child(5) { background:var(--azul); }
  .flag-strip span:nth-child(2),.flag-strip span:nth-child(4) { background:white; }
  .flag-strip span:nth-child(3) { background:var(--rojo); }

  nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:14px 12px; background:white; box-shadow:var(--sombra); position:sticky; top:0; z-index:100; }
  nav button { background:none; border:2.5px solid var(--azul-claro); color:var(--azul); padding:8px 18px; border-radius:50px; font-family:'Nunito',sans-serif; font-size:0.9rem; font-weight:700; cursor:pointer; transition:all 0.2s; }
  nav button:hover, nav button.active { background:var(--azul); color:white; border-color:var(--azul); transform:translateY(-1px); box-shadow:0 4px 12px rgba(21,101,192,0.25); }
  nav button#logout-btn { background:rgba(229,57,53,0.12); border-color:var(--rojo); color:var(--rojo); }
  nav button#logout-btn:hover { background:var(--rojo); color:white; border-color:var(--rojo); }

  main { max-width:920px; margin:0 auto; padding:20px 14px 50px; }
  .screen { display:none; }
  .screen.active { display:block; }

  .welcome-banner { background:linear-gradient(135deg,#E3F2FD,#FFF8E1); border:2px solid var(--azul-claro); border-radius:20px; padding:24px; text-align:center; margin-bottom:28px; }
  .welcome-banner .emoji { font-size:3.5rem; display:block; margin-bottom:10px; }
  .welcome-banner h2 { font-family:'Baloo 2',cursive; font-size:1.6rem; color:var(--azul); margin-bottom:8px; }
  .welcome-banner p { color:#546E7A; line-height:1.6; font-size:1rem; }
  .cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
  .subject-card { background:white; border-radius:18px; padding:24px 18px; text-align:center; cursor:pointer; transition:all 0.25s; box-shadow:var(--sombra); position:relative; overflow:hidden; }
  .subject-card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; }
  .subject-card.mat::before { background:var(--azul); }
  .subject-card.esp::before { background:var(--verde); }
  .subject-card.cien::before { background:var(--naranja); }
  .subject-card.soc::before { background:var(--rojo); }
  .subject-card.ciud::before { background:var(--morado); }
  .subject-card:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(21,101,192,0.2); }
  .subject-card .icon { font-size:3rem; margin-bottom:12px; display:block; }
  .subject-card h3 { font-family:'Baloo 2',cursive; font-size:1.15rem; margin-bottom:6px; }
  .subject-card p { font-size:0.82rem; color:var(--gris); }
  .actions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
  .action-btn { padding:18px 14px; border:none; border-radius:16px; font-family:'Baloo 2',cursive; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.2s; color:white; text-align:center; box-shadow:var(--sombra); }
  .action-btn:hover { transform:translateY(-3px); filter:brightness(1.1); }
  .action-btn.guia { background:var(--verde); }
  .action-btn.quiz { background:var(--naranja); }
  .action-btn.examen { background:var(--rojo); }
  h2.section-title { font-family:'Baloo 2',cursive; font-size:1.5rem; color:var(--azul); margin-bottom:18px; padding-bottom:8px; border-bottom:3px solid var(--amarillo); display:inline-block; }
  .tip-box { background:linear-gradient(135deg,#FFF8E1,#FFF3CD); border:2px dashed var(--amarillo); border-radius:14px; padding:16px; margin-top:16px; font-size:0.9rem; }
  .tip-box strong { color:var(--naranja); }
  .info-banner { background:linear-gradient(135deg,#E8F5E9,#F1F8E9); border:2px solid #A5D6A7; border-radius:14px; padding:14px 18px; margin-bottom:20px; font-size:0.92rem; color:#2E7D32; }

  /* TABS */
  .materia-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .mat-tab { padding:9px 20px; border:2px solid #ddd; background:white; border-radius:50px; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:700; font-size:0.9rem; transition:all 0.2s; }
  .mat-tab.active,.mat-tab:hover { color:white; border-color:transparent; }
  .mat-tab[data-mat="mat"].active,.mat-tab[data-mat="mat"]:hover { background:var(--azul); }
  .mat-tab[data-mat="esp"].active,.mat-tab[data-mat="esp"]:hover { background:var(--verde); }
  .mat-tab[data-mat="cien"].active,.mat-tab[data-mat="cien"]:hover { background:var(--naranja); }
  .mat-tab[data-mat="soc"].active,.mat-tab[data-mat="soc"]:hover { background:var(--rojo); }
  .mat-tab[data-mat="ciud"].active,.mat-tab[data-mat="ciud"]:hover { background:var(--morado); }
  .guia-content { display:none; }
  .guia-content.active { display:block; }

  /* TOPIC CARDS */
  .topic-card { background:white; border-radius:18px; margin-bottom:16px; box-shadow:0 3px 14px rgba(0,0,0,0.08); overflow:hidden; border:1px solid #e8f0fe; }
  .topic-header { display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; user-select:none; }
  .topic-header.mat-h { background:linear-gradient(135deg,#E3F2FD,#BBDEFB); border-left:5px solid var(--azul); }
  .topic-header.esp-h { background:linear-gradient(135deg,#E8F5E9,#C8E6C9); border-left:5px solid var(--verde); }
  .topic-header.cien-h { background:linear-gradient(135deg,#FFF8E1,#FFE0B2); border-left:5px solid var(--naranja); }
  .topic-header.soc-h { background:linear-gradient(135deg,#FFEBEE,#FFCDD2); border-left:5px solid var(--rojo); }
  .topic-header.ciud-h { background:linear-gradient(135deg,#F3E5F5,#E1BEE7); border-left:5px solid var(--morado); }
  .topic-icon { font-size:1.8rem; flex-shrink:0; }
  .topic-header h3 { font-family:'Baloo 2',cursive; font-size:1.1rem; flex:1; }
  .toggle-arrow { font-size:1.1rem; color:var(--gris); transition:transform 0.3s; }
  .topic-card.open .toggle-arrow { transform:rotate(180deg); }
  .topic-body { display:none; padding:0 20px 20px; border-top:1px solid #f0f0f0; }
  .topic-card.open .topic-body { display:block; }

  .explain-box { background:#F8FEFF; border-left:4px solid var(--azul-claro); border-radius:0 10px 10px 0; padding:14px 16px; margin:14px 0; font-size:0.95rem; line-height:1.7; }
  .explain-box p { margin-bottom:8px; }
  .explain-box p:last-child { margin-bottom:0; }
  .example-box { background:#F0FFF4; border:2px solid #A5D6A7; border-radius:12px; padding:14px 16px; margin:12px 0; font-size:0.93rem; line-height:1.65; }
  .example-box .ex-title { font-weight:800; color:var(--verde); margin-bottom:8px; display:block; }
  .trick-box { background:linear-gradient(135deg,#FFF8E1,#FFFDE7); border:2px dashed #FFD54F; border-radius:12px; padding:14px 16px; margin:12px 0; font-size:0.93rem; line-height:1.65; }
  .trick-box .trick-title { font-weight:800; color:#F57F17; margin-bottom:8px; display:block; }
  .key-list { margin:12px 0; list-style:none; }
  .key-list li { padding:5px 0 5px 26px; position:relative; font-size:0.93rem; border-bottom:1px solid #f5f5f5; line-height:1.55; }
  .key-list li:last-child { border-bottom:none; }
  .key-list li::before { content:'✅'; position:absolute; left:0; font-size:0.8rem; top:7px; }

  /* RECURSOS */
  .recursos-section { margin-top:18px; border-top:2px dashed #e0e0e0; padding-top:14px; }
  .recursos-title { font-family:'Baloo 2',cursive; font-size:1rem; color:var(--azul); margin-bottom:10px; }
  .recursos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
  .recurso-link { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px; text-decoration:none; color:inherit; font-size:0.85rem; font-weight:700; transition:all 0.2s; border:2px solid; }
  .recurso-link:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
  .recurso-link.youtube { background:#FFF3F3; border-color:#FFCDD2; color:#C62828; }
  .recurso-link.youtube:hover { background:#FFEBEE; }
  .recurso-link.web { background:#E8F5E9; border-color:#A5D6A7; color:#1B5E20; }
  .recurso-link.web:hover { background:#F1F8E9; }
  .r-icon { font-size:1.3rem; flex-shrink:0; }
  .r-text { line-height:1.3; }
  .r-text small { display:block; font-weight:400; font-size:0.75rem; opacity:0.75; }

  /* QUIZ */
  .quiz-setup { background:white; border-radius:20px; padding:24px; box-shadow:var(--sombra); text-align:center; }
  .quiz-setup h2 { font-family:'Baloo 2',cursive; font-size:1.5rem; margin-bottom:10px; color:var(--azul); }
  .materia-select { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:20px 0; }
  .mat-select-btn { padding:14px; border:3px solid #e0e0e0; background:white; border-radius:14px; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:700; font-size:0.9rem; transition:all 0.2s; }
  .mat-select-btn:hover,.mat-select-btn.selected { border-color:var(--azul); background:var(--azul); color:white; }
  .mat-select-btn .icon { display:block; font-size:2rem; margin-bottom:6px; }
  .start-btn { background:var(--azul); color:white; border:none; padding:14px 40px; border-radius:50px; font-family:'Baloo 2',cursive; font-size:1.1rem; cursor:pointer; transition:all 0.2s; margin-top:10px; box-shadow:0 4px 15px rgba(21,101,192,0.3); }
  .start-btn:hover { transform:translateY(-2px); filter:brightness(1.1); }
  .start-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
  .quiz-active { display:none; }
  .quiz-active.show { display:block; }
  .quiz-progress { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
  .progress-bar-wrap { flex:1; background:#e0e0e0; border-radius:50px; height:10px; overflow:hidden; }
  .progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--azul),var(--azul-claro)); border-radius:50px; transition:width 0.4s; }
  .progress-txt { font-weight:700; font-size:0.85rem; color:var(--gris); white-space:nowrap; }
  .question-card { background:white; border-radius:20px; padding:24px; box-shadow:var(--sombra); margin-bottom:16px; }
  .question-subject-tag { display:inline-block; padding:4px 14px; border-radius:50px; font-size:0.78rem; font-weight:700; margin-bottom:12px; color:white; }
  .tag-mat{background:var(--azul);}.tag-esp{background:var(--verde);}.tag-cien{background:var(--naranja);}.tag-soc{background:var(--rojo);}.tag-ciud{background:var(--morado);}
  .question-text { font-size:1.05rem; line-height:1.65; margin-bottom:20px; font-weight:600; }
  .question-context { background:#F5F5F5; border-left:4px solid var(--azul-claro); padding:12px 16px; border-radius:0 10px 10px 0; font-size:0.9rem; margin-bottom:14px; font-style:italic; line-height:1.6; white-space:pre-line; }
  .options-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
  .option-item { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:2.5px solid #E0E0E0; border-radius:14px; cursor:pointer; transition:all 0.2s; font-size:0.95rem; line-height:1.5; }
  .option-item:hover:not(.disabled) { border-color:var(--azul-claro); background:#E3F2FD; }
  .option-item.correct { border-color:var(--verde)!important; background:#E8F5E9!important; }
  .option-item.wrong { border-color:var(--rojo)!important; background:#FFEBEE!important; }
  .option-item.disabled { cursor:default; }
  .option-letter { background:#E0E0E0; border-radius:8px; width:28px; height:28px; min-width:28px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; font-family:'Baloo 2',cursive; }
  .option-item.correct .option-letter { background:var(--verde); color:white; }
  .option-item.wrong .option-letter { background:var(--rojo); color:white; }
  .explanation-box { margin-top:14px; padding:14px; background:#F1F8E9; border-radius:12px; border-left:4px solid var(--verde); font-size:0.9rem; line-height:1.6; display:none; }
  .explanation-box.show { display:block; }
  .nav-btns { display:flex; gap:12px; justify-content:flex-end; margin-top:16px; }
  .nav-btn { padding:11px 28px; border:none; border-radius:50px; font-family:'Baloo 2',cursive; font-size:1rem; cursor:pointer; transition:all 0.2s; font-weight:700; }
  .nav-btn.primary { background:var(--azul); color:white; box-shadow:0 4px 12px rgba(21,101,192,0.3); }
  .nav-btn.secondary { background:#ECEFF1; color:var(--texto); }
  .nav-btn:hover { transform:translateY(-1px); }
  .nav-btn:disabled { opacity:0.3; cursor:not-allowed; transform:none; }
  .results-card { background:white; border-radius:20px; padding:30px; text-align:center; box-shadow:var(--sombra); }
  .score-circle { width:140px; height:140px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
  .score-inner { width:110px; height:110px; background:white; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .score-num { font-family:'Baloo 2',cursive; font-size:2rem; font-weight:800; color:var(--azul); line-height:1; }
  .score-label { font-size:0.75rem; color:var(--gris); }
  .result-level { display:inline-block; padding:8px 24px; border-radius:50px; font-weight:700; font-size:1rem; margin:12px 0; }
  .level-avanzado{background:#E8F5E9;color:var(--verde);}.level-intermedio{background:#FFF8E1;color:var(--naranja);}.level-basico{background:#FFEBEE;color:var(--rojo);}
  .result-breakdown { text-align:left; margin-top:20px; }
  .result-breakdown h4 { font-family:'Baloo 2',cursive; margin-bottom:12px; color:var(--azul); }
  .breakdown-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f0f0; font-size:0.95rem; }
  .breakdown-item .subject-name { font-weight:700; }
  .score-badge { padding:4px 14px; border-radius:50px; font-weight:700; font-size:0.85rem; }
  .badge-verde{background:#E8F5E9;color:var(--verde);}.badge-naranja{background:#FFF8E1;color:var(--naranja);}.badge-rojo{background:#FFEBEE;color:var(--rojo);}
  .retry-btn { background:var(--azul); color:white; border:none; padding:13px 36px; border-radius:50px; font-family:'Baloo 2',cursive; font-size:1.05rem; cursor:pointer; margin-top:20px; transition:all 0.2s; box-shadow:0 4px 15px rgba(21,101,192,0.3); }
  .retry-btn:hover { transform:translateY(-2px); filter:brightness(1.1); }

  @media(max-width:480px){
    .cards-grid{grid-template-columns:1fr 1fr;}
    .actions-grid{grid-template-columns:1fr;}
    .materia-select{grid-template-columns:1fr 1fr;}
    nav button{font-size:0.8rem;padding:7px 12px;}
    .recursos-grid{grid-template-columns:1fr;}
  }


  /* ═══ AUTH DIALOG ═══ */
  dialog#auth-dialog{border:none;padding:0;margin:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;background:linear-gradient(135deg,#0D47A1 0%,#1565C0 45%,#1976D2 75%,#1E88E5 100%);display:flex;align-items:center;justify-content:center;overflow-y:auto;flex-direction:column;}
  dialog#auth-dialog::backdrop{background:#0D47A1;}
  .auth-bg-circles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
  .auth-bg-circles span{position:absolute;display:block;border-radius:50%;background:rgba(255,255,255,0.05);animation:floatUp linear infinite;}
  .auth-bg-circles span:nth-child(1){width:80px;height:80px;left:10%;animation-duration:22s;}
  .auth-bg-circles span:nth-child(2){width:50px;height:50px;left:30%;animation-duration:17s;animation-delay:3s;}
  .auth-bg-circles span:nth-child(3){width:120px;height:120px;left:55%;animation-duration:25s;animation-delay:1s;}
  .auth-bg-circles span:nth-child(4){width:40px;height:40px;left:75%;animation-duration:14s;animation-delay:5s;}
  .auth-bg-circles span:nth-child(5){width:90px;height:90px;left:88%;animation-duration:20s;animation-delay:2s;}
  @keyframes floatUp{0%{bottom:-150px;opacity:0}10%{opacity:1}90%{opacity:1}100%{bottom:110%;opacity:0}}
  .auth-card{background:white;border-radius:28px;padding:38px 34px;width:100%;max-width:480px;position:relative;z-index:1;box-shadow:0 32px 80px rgba(0,0,0,0.4);animation:cardIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;font-family:'Nunito',sans-serif;}
  @keyframes cardIn{from{opacity:0;transform:translateY(50px) scale(0.93)}to{opacity:1;transform:translateY(0) scale(1)}}
  .auth-logo{text-align:center;margin-bottom:26px;}
  .auth-flag{display:flex;height:5px;width:70px;margin:0 auto 14px;border-radius:99px;overflow:hidden;}
  .auth-flag span{flex:1;}
  .auth-flag span:nth-child(1),.auth-flag span:nth-child(5){background:#1565C0;}
  .auth-flag span:nth-child(2),.auth-flag span:nth-child(4){background:#BDBDBD;}
  .auth-flag span:nth-child(3){background:#E53935;}
  .auth-logo h1{font-family:'Baloo 2',cursive;font-size:1.45rem;font-weight:800;color:#0D47A1;line-height:1.2;margin:0;}
  .auth-logo p{color:#78909C;font-size:0.84rem;margin:3px 0 0;}
  .auth-panel{display:none;}.auth-panel.active{display:flex;flex-direction:column;animation:panelIn 0.3s ease both;}
  @keyframes panelIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
  .auth-panel h2{font-family:'Baloo 2',cursive;font-size:1.35rem;color:#0D47A1;margin:0 0 4px;}
  .auth-sub{color:#78909C;font-size:0.85rem;margin:0 0 20px;}
  .auth-back{display:inline-flex;align-items:center;gap:5px;color:#78909C;font-size:0.83rem;font-weight:700;cursor:pointer;margin-bottom:16px;padding:4px 0;border:none;background:none;font-family:'Nunito',sans-serif;}
  .auth-back:hover{color:#1565C0;}
  .welcome-btns{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
  .w-btn{display:flex;align-items:center;gap:14px;padding:16px 20px;border:none;border-radius:18px;cursor:pointer;font-family:'Baloo 2',cursive;font-size:1.05rem;font-weight:700;color:white;text-align:left;transition:all 0.22s;box-shadow:0 4px 16px rgba(0,0,0,0.18);width:100%;}
  .w-btn:hover{transform:translateY(-3px);filter:brightness(1.08);}
  .w-btn .w-icon{font-size:1.9rem;flex-shrink:0;}
  .w-btn small{display:block;font-family:'Nunito',sans-serif;font-weight:400;font-size:0.77rem;opacity:0.88;margin-top:1px;}
  .w-btn.btn-ingresar{background:linear-gradient(135deg,#1565C0,#1E88E5);}
  .w-btn.btn-registro{background:linear-gradient(135deg,#2E7D32,#43A047);}
  .w-btn.btn-admin{background:linear-gradient(135deg,#4A148C,#7B1FA2);font-size:0.92rem;padding:12px 18px;}
  .a-field{margin-bottom:14px;}
  .a-field label{display:block;font-size:0.82rem;font-weight:700;color:#37474F;margin-bottom:5px;}
  .a-field input{width:100%;padding:11px 14px;border:2px solid #E8EAF6;border-radius:12px;font-family:'Nunito',sans-serif;font-size:0.93rem;color:#1A237E;background:#FAFBFF;outline:none;transition:border-color 0.2s;box-sizing:border-box;}
  .a-field input:focus{border-color:#1565C0;box-shadow:0 0 0 4px rgba(21,101,192,0.12);}
  .a-field input[type=file]{padding:8px 10px;cursor:pointer;}
  .a-hint{font-size:0.76rem;color:#90A4AE;margin-top:4px;}
  .sinpe-box{background:linear-gradient(135deg,#E8F5E9,#F1F8E9);border:2px solid #81C784;border-radius:16px;padding:14px 16px;margin-bottom:16px;font-size:0.83rem;color:#1B5E20;line-height:1.65;}
  .sinpe-amount{font-size:1.25rem;font-weight:800;color:#1B5E20;display:block;margin-bottom:6px;}
  .sinpe-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;}
  .sinpe-badge{background:#1565C0;color:white;padding:3px 10px;border-radius:20px;font-weight:700;font-size:0.79rem;}
  .sinpe-warning{background:#FFF8E1;border:2px solid #FFD54F;border-radius:10px;padding:8px 12px;margin-top:8px;font-size:0.79rem;color:#E65100;}
  .a-btn{width:100%;padding:13px;border:none;border-radius:14px;font-family:'Baloo 2',cursive;font-size:1.05rem;font-weight:700;color:white;cursor:pointer;margin-top:6px;background:linear-gradient(135deg,#1565C0,#1976D2);box-shadow:0 4px 18px rgba(21,101,192,0.35);transition:all 0.2s;}
  .a-btn:hover:not(:disabled){transform:translateY(-2px);}
  .a-btn:disabled{opacity:0.6;cursor:not-allowed;}
  .a-btn.green{background:linear-gradient(135deg,#2E7D32,#388E3C);}
  .a-btn.ghost{background:white;color:#1565C0;border:2px solid #E0E7FF;box-shadow:none;margin-top:10px;}
  .a-btn.ghost:hover:not(:disabled){background:#F0F7FF;}
  .a-msg{border-radius:12px;padding:11px 14px;font-size:0.85rem;font-weight:600;margin-bottom:12px;display:none;line-height:1.45;}
  .a-msg.err{background:#FFEBEE;color:#B71C1C;border:1px solid #EF9A9A;display:block;}
  .a-msg.ok{background:#E8F5E9;color:#1B5E20;border:1px solid #A5D6A7;display:block;}
  .a-msg.info{background:#E3F2FD;color:#0D47A1;border:1px solid #90CAF9;display:block;}
  .spin-icon{display:inline-block;width:16px;height:16px;vertical-align:middle;border:2.5px solid rgba(255,255,255,0.4);border-top-color:white;border-radius:50%;animation:rot 0.65s linear infinite;margin-right:7px;}
  @keyframes rot{to{transform:rotate(360deg)}}
  .a-link{text-align:center;font-size:0.84rem;color:#78909C;margin-top:14px;}
  .a-link span{color:#1565C0;font-weight:700;cursor:pointer;}
  .ok-screen{text-align:center;padding:8px 0;}
  .ok-screen .ok-icon{font-size:4rem;margin-bottom:12px;}
  .ok-screen h2{color:#2E7D32;font-family:'Baloo 2',cursive;}
  .ok-screen p{color:#546E7A;font-size:0.9rem;line-height:1.65;margin-top:10px;}
  .ok-info{background:#E8F5E9;border-radius:14px;padding:14px;margin-top:18px;font-size:0.85rem;color:#2E7D32;}
  .admin-scroll{overflow-x:auto;margin-top:14px;}
  .admin-tbl{width:100%;border-collapse:collapse;font-size:0.83rem;min-width:600px;}
  .admin-tbl th{background:#1565C0;color:white;padding:10px 12px;text-align:left;font-weight:700;}
  .admin-tbl th:first-child{border-radius:10px 0 0 0;}.admin-tbl th:last-child{border-radius:0 10px 0 0;}
  .admin-tbl td{padding:10px 12px;border-bottom:1px solid #EEF0F8;vertical-align:middle;}
  .admin-tbl tr:hover td{background:#F8F9FF;}
  .badge-pend{background:#FFF3E0;color:#E65100;padding:3px 9px;border-radius:20px;font-size:0.76rem;font-weight:700;}
  .badge-actv{background:#E8F5E9;color:#1B5E20;padding:3px 9px;border-radius:20px;font-size:0.76rem;font-weight:700;}
  .tbl-activate-btn{padding:5px 13px;border:none;border-radius:8px;cursor:pointer;background:linear-gradient(135deg,#1565C0,#1976D2);color:white;font-weight:700;font-size:0.78rem;font-family:'Nunito',sans-serif;}
  .tbl-activate-btn:disabled{background:#B0BEC5;cursor:not-allowed;}
  
  /* ── Admin panel header bar ── */
  .admin-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    border-radius: 0;
    padding: 14px 20px;
    margin-bottom: 16px;
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  }
  .admin-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .admin-header-icon {
    font-size: 2rem;
    line-height: 1;
  }
  .admin-header-title {
    font-family: 'Baloo 2', cursive;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
  }
  .admin-header-sub {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 2px;
  }
  .admin-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .admin-action-btn {
    padding: 9px 18px;
    border-radius: 10px;
    border: none;
    font-family: 'Baloo 2', cursive;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
  }
  .admin-action-btn:hover { transform: translateY(-1px); }
  .admin-action-btn.refresh {
    background: rgba(255,255,255,0.18);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
  }
  .admin-action-btn.refresh:hover {
    background: rgba(255,255,255,0.28);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  }
  .admin-action-btn.logout {
    background: #C8102E;
    color: white;
    box-shadow: 0 2px 8px rgba(200,16,46,0.4);
  }
  .admin-action-btn.logout:hover {
    background: #a50020;
    box-shadow: 0 4px 14px rgba(200,16,46,0.5);
  }

  .admin-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
  .admin-stat{flex:1;min-width:90px;background:#F0F7FF;border-radius:12px;padding:10px 14px;text-align:center;}
  .admin-stat .stat-n{font-size:1.6rem;font-weight:800;color:#1565C0;font-family:'Baloo 2',cursive;}
  .admin-stat .stat-l{font-size:0.76rem;color:#607D8B;}
  .code-cell{display:flex;flex-direction:column;gap:5px;min-width:180px;}
  .code-row{display:flex;align-items:center;gap:5px;}
  .code-display{font-family:'Courier New',monospace;font-size:0.78rem;color:#1A237E;background:#EEF2FF;padding:5px 8px;border-radius:8px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1.5px solid #C5CAE9;min-width:0;transition:filter 0.25s;}
  .code-display.hidden-code{filter:blur(5px);user-select:none;}
  .code-display.revealed{filter:none;user-select:text;}
  .btn-eye{flex-shrink:0;padding:4px 7px;border:1.5px solid #C5CAE9;border-radius:8px;background:white;cursor:pointer;font-size:0.82rem;color:#5C6BC0;}
  .btn-regen{padding:4px 10px;border:none;border-radius:7px;cursor:pointer;background:linear-gradient(135deg,#B71C1C,#E53935);color:white;font-weight:700;font-size:0.73rem;font-family:'Nunito',sans-serif;}
  .btn-regen:disabled{background:#B0BEC5;cursor:not-allowed;}

  .btn-wa { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:#25D366;border-radius:50%;text-decoration:none;font-size:0.95rem;transition:transform 0.15s,box-shadow 0.15s;flex-shrink:0; }
  .btn-wa:hover { transform:translateY(-1px);box-shadow:0 3px 8px rgba(37,211,102,0.4); }
  .pg-bar { display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 4px 4px;justify-content:center; }
  .pg-info { font-size:0.78rem;color:#90A4AE;margin-right:6px; }
  .pg-btn { background:white;border:1.5px solid #E0E0E0;color:var(--azul);border-radius:8px;padding:5px 11px;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all 0.15s; }
  .pg-btn:hover { background:#E3F2FD;border-color:var(--azul); }
  .pg-btn.pg-active { background:var(--azul);color:white;border-color:var(--azul); }
  @keyframes navPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.5); transform: scale(1); }
    50%      { box-shadow: 0 0 0 6px rgba(200,16,46,0); transform: scale(1.04); }
  }
  /* Hide main content until access is granted */
  body:not(.access-granted) .flag-strip,
  body:not(.access-granted) header,
  body:not(.access-granted) nav,
  body:not(.access-granted) main,
  body:not(.access-granted) footer { display: none !important; }
  /* ═══════════════════════════════════════════════
     PRODUCCION TEXTUAL
  ═══════════════════════════════════════════════ */

  /* API Key bar */
  .pt-apikey-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    background: #FFF8E1; border: 2px solid #FFD54F;
    border-radius: 14px; padding: 12px 16px; margin-bottom: 20px;
    font-size: 0.85rem;
  }
  .pt-apikey-icon { font-size: 1.3rem; }
  .pt-apikey-info { flex: 1; min-width: 160px; }
  .pt-apikey-input-wrap { display: flex; gap: 6px; }
  .pt-apikey-input-wrap input {
    padding: 8px 12px; border: 2px solid #FFD54F; border-radius: 10px;
    font-family: monospace; font-size: 0.8rem; width: 220px; outline: none;
  }
  .pt-apikey-input-wrap input:focus { border-color: #6A1B9A; }
  .pt-apikey-input-wrap button {
    padding: 8px 16px; background: #6A1B9A; color: white;
    border: none; border-radius: 10px; font-weight: 700;
    font-size: 0.82rem; cursor: pointer;
  }
  .pt-apikey-ok {
    background: #E8F5E9; border: 2px solid #66BB6A;
    border-radius: 12px; padding: 10px 16px;
    font-size: 0.85rem; font-weight: 700; color: #2E7D32;
    margin-bottom: 20px;
  }

  /* Section labels */
  .pt-section-label {
    font-family: 'Baloo 2', cursive; font-size: 1.05rem; font-weight: 800;
    color: var(--texto); margin: 20px 0 12px;
  }

  /* Topic cards */
  .pt-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px; margin-bottom: 20px;
  }
  .pt-topic-card {
    background: white; border: 2px solid #E8EAF6;
    border-radius: 14px; padding: 14px 16px;
    cursor: pointer; transition: all .18s;
  }
  .pt-topic-card:hover {
    border-color: #6A1B9A;
    box-shadow: 0 4px 16px rgba(106,27,154,0.15);
    transform: translateY(-2px);
  }
  .pt-topic-card.selected {
    background: #F3E5F5; border-color: #6A1B9A;
    box-shadow: 0 4px 16px rgba(106,27,154,0.2);
  }
  .pt-topic-title {
    font-weight: 800; font-size: 0.88rem; color: var(--texto);
    margin-bottom: 4px; line-height: 1.3;
  }
  .pt-topic-sub {
    font-size: 0.73rem; color: #9E9E9E; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
  }

  /* Consigna box */
  .pt-consigna-box {
    background: linear-gradient(135deg, #F3E5F5, #E8EAF6);
    border-left: 5px solid #6A1B9A;
    border-radius: 0 16px 16px 0;
    padding: 18px 20px; margin-bottom: 20px;
  }
  .pt-consigna-label {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: #6A1B9A; margin-bottom: 8px;
  }
  .pt-consigna-text {
    font-size: 0.97rem; font-weight: 700; color: var(--texto);
    line-height: 1.55; margin-bottom: 14px;
  }
  .pt-ideas-label {
    font-size: 0.78rem; font-weight: 800; color: #6A1B9A;
    margin-bottom: 8px;
  }
  .pt-ideas-list {
    margin: 0 0 0 18px; padding: 0;
  }
  .pt-ideas-list li {
    font-size: 0.85rem; color: #37474F; margin-bottom: 5px; line-height: 1.4;
  }

  /* Writing guidelines */
  .pt-guidelines {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
  }
  .pt-guide-item {
    background: white; border: 1.5px solid #E8EAF6;
    border-radius: 10px; padding: 8px 14px;
    font-size: 0.82rem; color: #37474F; line-height: 1.4;
  }

  /* Editor */
  .pt-editor-wrap {
    background: white; border: 2.5px solid #E8EAF6;
    border-radius: 16px; overflow: hidden;
    box-shadow: var(--sombra); margin-bottom: 14px;
    transition: border-color .2s;
  }
  .pt-editor-wrap:focus-within { border-color: #6A1B9A; }
  .pt-editor-wrap textarea {
    width: 100%; border: none; outline: none; resize: vertical;
    padding: 18px 20px; font-family: 'Nunito', sans-serif;
    font-size: 0.97rem; line-height: 1.8; color: var(--texto);
    min-height: 240px; background: transparent;
  }
  .pt-editor-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; background: #F8F9FA;
    border-top: 1.5px solid #E8EAF6;
    font-size: 0.78rem;
  }
  .pt-word-count { font-weight: 800; }
  .pt-word-count.low   { color: #E53935; }
  .pt-word-count.ok    { color: #FB8C00; }
  .pt-word-count.good  { color: #43A047; }
  .pt-word-hint { color: #90A4AE; }

  /* Evaluate button */
  .pt-eval-btn {
    width: 100%; padding: 16px; border: none; border-radius: 16px;
    background: linear-gradient(135deg, #6A1B9A, #4A148C);
    color: white; font-family: 'Baloo 2', cursive;
    font-size: 1.1rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 20px rgba(106,27,154,0.35);
    transition: all .18s; display: flex; align-items: center;
    justify-content: center; gap: 8px;
  }
  .pt-eval-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(106,27,154,0.45); }
  .pt-eval-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  .pt-spinner {
    width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white; border-radius: 50%;
    animation: spin 1s linear infinite; display: inline-block;
  }

  /* Result */
  .pt-result-header {
    display: flex; align-items: center; gap: 20px;
    background: white; border-radius: 20px; padding: 20px 24px;
    box-shadow: var(--sombra); margin-bottom: 16px;
    border: 2px solid #EDE7F6;
  }
  .pt-score-circle {
    width: 90px; height: 90px; border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex-shrink: 0; position: relative;
  }
  .pt-score-circle.pt-score-excellent { background: linear-gradient(135deg,#66BB6A,#43A047); }
  .pt-score-circle.pt-score-developing { background: linear-gradient(135deg,#FFA726,#FB8C00); }
  .pt-score-circle.pt-score-needs-work { background: linear-gradient(135deg,#EF5350,#E53935); }
  .pt-score-num { font-family:'Baloo 2',cursive; font-size: 2rem; font-weight:800; color:white; line-height:1; }
  .pt-score-den { font-size:0.75rem; color:rgba(255,255,255,0.85); font-weight:700; }
  .pt-score-info { flex: 1; }
  .pt-score-label { font-family:'Baloo 2',cursive; font-size:1.4rem; font-weight:800; line-height:1.1; margin-bottom:4px; }
  .pt-score-label.pt-score-excellent { color: #2E7D32; }
  .pt-score-label.pt-score-developing { color: #E65100; }
  .pt-score-label.pt-score-needs-work { color: #C62828; }
  .pt-score-pct { font-size:0.85rem; color:#9E9E9E; margin-bottom:8px; }
  .pt-word-badge {
    display:inline-block; padding:4px 10px; border-radius:20px;
    font-size:0.75rem; font-weight:700;
  }
  .pt-word-badge.good { background:#E8F5E9; color:#2E7D32; }
  .pt-word-badge.ok   { background:#FFF3E0; color:#E65100; }

  /* Dimension grid */
  .pt-dims-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px; margin-bottom: 16px;
  }
  .pt-dim-card {
    background: white; border-radius: 16px; overflow: hidden;
    border: 2px solid #E8EAF6; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform .15s;
  }
  .pt-dim-card:hover { transform: translateY(-2px); }
  .pt-dim-card.pt-dim-excelente  { border-color: #A5D6A7; }
  .pt-dim-card.pt-dim-desarrollo { border-color: #FFCC80; }
  .pt-dim-card.pt-dim-mejorar    { border-color: #EF9A9A; }
  .pt-dim-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px 8px;
  }
  .pt-dim-card.pt-dim-excelente  .pt-dim-header { background: #E8F5E9; }
  .pt-dim-card.pt-dim-desarrollo .pt-dim-header { background: #FFF3E0; }
  .pt-dim-card.pt-dim-mejorar    .pt-dim-header { background: #FFEBEE; }
  .pt-dim-emoji  { font-size:1.3rem; flex-shrink:0; }
  .pt-dim-title  { flex:1; font-weight:800; font-size:0.85rem; color:var(--texto); line-height:1.2; }
  .pt-dim-stars  { font-size:0.85rem; letter-spacing:-1px; }
  .pt-dim-score  { font-family:'Baloo 2',cursive; font-size:1rem; font-weight:800; color:var(--azul); }
  .pt-dim-body   { padding: 10px 14px 14px; }
  .pt-logro  { font-size:0.83rem; color:#2E7D32; margin-bottom:6px; line-height:1.4; }
  .pt-mejora { font-size:0.83rem; color:#E65100; line-height:1.4; }

  /* Final message */
  .pt-mensaje-final {
    background: linear-gradient(135deg,#F3E5F5,#E8EAF6);
    border-radius: 16px; padding: 18px 20px; margin-bottom: 16px;
    display: flex; gap: 14px; align-items: flex-start;
    border: 2px solid #CE93D8;
  }
  .pt-mensaje-icon { font-size: 2rem; flex-shrink:0; }
  .pt-mensaje-final p { font-size:0.95rem; color:var(--texto); line-height:1.6; font-weight:600; }

  /* Result actions */
  .pt-result-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .pt-btn-retry {
    flex: 1; padding: 13px; border-radius: 14px; border: none;
    background: linear-gradient(135deg,#6A1B9A,#4A148C); color: white;
    font-family:'Baloo 2',cursive; font-size:1rem; font-weight:700;
    cursor: pointer; transition: transform .15s;
  }
  .pt-btn-retry:hover { transform: translateY(-2px); }
  .pt-btn-new {
    flex: 1; padding: 13px; border-radius: 14px;
    background: white; color: #6A1B9A;
    border: 2.5px solid #CE93D8;
    font-family:'Baloo 2',cursive; font-size:1rem; font-weight:700;
    cursor: pointer; transition: transform .15s;
  }
  .pt-btn-new:hover { background: #F3E5F5; transform: translateY(-2px); }

  /* ── Admin panel: full-width override ── */
  #p-admin.active {
    /* Admin panel needs more space than the default auth-card */
  }
  /* When admin panel is active, widen the auth-card */
  .auth-card:has(#p-admin.active) {
    max-width: 900px;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
  }
  /* Scrollable content area below the sticky header */
  .admin-scroll-body {
    padding: 16px 20px 20px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
  }

  /* ── Export bar ── */
  .admin-export-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #F0F7FF;
    border-radius: 12px;
    border: 1.5px solid #BBDEFB;
  }
  .admin-export-btn {
    padding: 9px 18px;
    background: linear-gradient(135deg, #43A047, #2E7D32);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(46,125,50,.3);
  }
  .admin-export-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(46,125,50,.4);
  }
  .admin-export-hint {
    font-size: 0.78rem;
    color: #607D8B;
    font-weight: 600;
  }