*{box-sizing:border-box}
:root{--navy:#03172F;--navy2:#061F43;--blue:#0B4FD8;--blue2:#1464F4;--gold:#F3A900;--white:#FFF;--off:#F5F7FB;--ink:#10213B;--muted:#69788B;--line:#D9E1EC;--green:#2D8B3D}
html,body{margin:0;min-height:100%;background:#061A34;color:#fff;font-family:Segoe UI,Arial,sans-serif}
body{overflow:hidden}
#app{min-height:100vh;background:#061A34}
.screen{display:none;width:100vw;height:100vh;place-items:center;overflow:hidden}
.screen.active{display:grid}

/* ETAPA 1 V3 APROBADA */
.stage{position:relative;transform-origin:center}
.stage-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.stage-access{width:min(100vw,1120px);aspect-ratio:1120/760}
.stage-main{width:min(100vw,1536px);height:min(100vh,1024px);aspect-ratio:1536/1024}
.access-overlay{position:absolute;inset:0}
.access-overlay input{position:absolute;background:#082A50;color:#fff;border:0;outline:none;font-size:clamp(10px,1.2vw,16px);padding:0 10px}
#email{left:34.2%;top:50.0%;width:29.5%;height:3.8%}
#password{left:34.2%;top:57.2%;width:29.5%;height:3.8%}
.hotspot,.zone{position:absolute;background:transparent;border:0;cursor:pointer;padding:0}
.login-hotspot{left:33.4%;top:61.8%;width:33.6%;height:6.6%}
.eye-hotspot{left:62.7%;top:55.9%;width:4.2%;height:5.0%}
.register-hotspot{left:47.7%;top:73.7%;width:15.6%;height:5.0%}
.terms-hotspot{left:3.6%;top:95.2%;width:8.2%;height:3.8%}
.privacy-hotspot{left:12.1%;top:95.2%;width:11%;height:3.8%}
#main-hotspots{position:absolute;inset:0}
.hs-inicio{left:1.5%;top:11.2%;width:13.5%;height:5.3%}
.hs-formacion{left:1.5%;top:16.2%;width:13.5%;height:5.3%}
.hs-entrenamiento{left:1.5%;top:21.2%;width:13.5%;height:5.3%}
.hs-progreso{left:1.5%;top:26.2%;width:13.5%;height:5.3%}
.hs-resultados{left:1.5%;top:31.2%;width:13.5%;height:5.3%}
.hs-licencia{left:1.5%;top:36.2%;width:13.5%;height:5.3%}
.hs-perfil{left:1.5%;top:41.2%;width:13.5%;height:5.3%}
.hs-soporte{left:1.5%;top:46.2%;width:13.5%;height:5.3%}
@media (max-aspect-ratio:1120/760){.stage-access{width:auto;height:100vh}}
#screen-main{background:#061A34}
#screen-main .stage-main{max-width:100vw;max-height:100vh}
#screen-main .stage-image{width:100%;height:100%;object-fit:contain}
@media (min-aspect-ratio:3/2){#screen-main .stage-main{width:auto;height:100vh}}
@media (max-aspect-ratio:3/2){#screen-main .stage-main{width:100vw;height:auto}}

/* Catálogos congelados UI03/UI04: tamaño nativo, scroll vertical real */
.catalog-screen{display:none!important;background:#0D1B3D;overflow-y:auto;overflow-x:auto;place-items:start center!important}
.catalog-screen.active{display:grid!important}
.catalog-stage{position:relative;width:1024px;height:1536px;min-width:1024px;min-height:1536px;margin:0 auto}
.catalog-image{position:absolute;left:0;top:0;width:1024px;height:1536px;display:block;user-select:none;pointer-events:none}
#formation-zones,#training-zones{position:absolute;inset:0}
.zone:hover{outline:2px solid rgba(20,100,244,.22);outline-offset:-2px}

/* Zonas exactas del MASTER UI03 */
.f-home{left:10px;top:132px;width:195px;height:58px}.f-training{left:10px;top:248px;width:195px;height:57px}
.f-progress{left:10px;top:305px;width:195px;height:57px}.f-results{left:10px;top:362px;width:195px;height:58px}
.f-license{left:10px;top:420px;width:195px;height:58px}.f-profile{left:10px;top:478px;width:195px;height:57px}
.f-support{left:10px;top:535px;width:195px;height:57px}
.f-all{left:200px;top:309px;width:164px;height:69px}.f-basic{left:365px;top:309px;width:104px;height:69px}
.f-inter{left:470px;top:309px;width:120px;height:69px}.f-adv{left:591px;top:309px;width:139px;height:69px}
.f-m1{left:215px;top:414px;width:515px;height:126px}.f-m2{left:215px;top:540px;width:515px;height:130px}
.f-m3{left:215px;top:670px;width:515px;height:130px}.f-m4{left:215px;top:800px;width:515px;height:130px}
.f-m5{left:215px;top:930px;width:515px;height:130px}.f-m6{left:215px;top:1060px;width:515px;height:130px}

/* Filtros de Formación reconstruidos exactamente según lógica MASTER */
.filter-panel{position:absolute;z-index:8;left:205px;top:382px;width:535px;height:420px;background:#fff;border:1px solid #D7DFEA;color:var(--ink);padding:15px 16px;overflow:auto}
.filter-panel.hidden{display:none}
.filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.filter-head strong{font-size:14px;color:var(--blue)}.filter-head button{border:0;background:#fff;color:var(--blue);font-weight:700;cursor:pointer}
.filter-note{font-size:12px;color:#6E7C90;margin-bottom:8px}
.filter-card{border:1px solid #D7DFEA;padding:13px 14px;margin:7px 0;display:grid;grid-template-columns:1fr auto;gap:12px;background:#fff}
.filter-card h3{margin:0;font-size:14px}.filter-card p{font-size:12px;color:#53657A;line-height:1.45;margin:5px 0}
.filter-card small{font-size:11px;font-weight:700}.filter-card .right{text-align:right;font-size:11px;color:#53657A}
.filter-card button{margin-top:9px;background:#fff;border:1px solid #BFC9D8;color:var(--blue);font-weight:700;padding:7px 11px;cursor:pointer}

/* Zonas principales UI04 */
.t-home{left:10px;top:130px;width:175px;height:63px}.t-formation{left:10px;top:193px;width:175px;height:50px}
.t-progress{left:10px;top:292px;width:175px;height:50px}.t-results{left:10px;top:342px;width:175px;height:50px}
.t-license{left:10px;top:392px;width:175px;height:51px}.t-profile{left:10px;top:443px;width:175px;height:50px}
.t-support{left:10px;top:493px;width:175px;height:52px}
.t-tab-mis{left:205px;top:330px;width:135px;height:65px}.t-tab-tipo{left:340px;top:330px;width:165px;height:65px}
.t-tab-nivel{left:505px;top:330px;width:100px;height:65px}.t-tab-scen{left:605px;top:330px;width:130px;height:65px}
.t-level1{left:205px;top:430px;width:513px;height:308px}.t-level2{left:205px;top:738px;width:515px;height:128px}
.t-level3{left:205px;top:866px;width:515px;height:129px}
.training-search-overlay{position:absolute;z-index:8;left:752px;top:342px;width:208px;height:34px;border:0;outline:none;background:#fff;color:var(--ink);font-size:14px;padding:4px 8px}
.training-search-button{position:absolute;z-index:9;left:960px;top:342px;width:38px;height:34px;border:0;background:#fff;color:#173A73;font-size:22px;cursor:pointer}

/* Shell profesional del MASTER, escala web sin encogimiento */
.professional-screen{background:var(--navy);place-items:center!important}
.professional-shell{width:min(1120px,100vw);height:100vh;display:grid;grid-template-columns:194px minmax(0,1fr);background:var(--off);overflow:hidden}
.pro-sidebar{background:var(--navy);color:#fff;display:flex;flex-direction:column;min-height:100vh}
.pro-brand{display:flex;gap:9px;align-items:center;padding:18px;border-bottom:1px solid #29405C;font-size:16px;font-weight:700;line-height:1.15}
.pro-ac{font-size:38px;color:var(--gold)}
.pro-nav{padding:12px}.pro-nav button{width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:11px 12px;border-radius:4px;cursor:pointer;font-size:14px}
.pro-nav button.active{background:var(--blue);font-weight:700}
.pro-license{margin:20px 16px 8px;padding:13px;border:1px solid var(--gold);background:var(--navy2);font-size:12px;display:grid;gap:5px}
.pro-license strong{color:var(--gold)}
.pro-quote{margin-top:auto;padding:22px;font-size:13px;line-height:1.45}.pro-quote b{display:block;color:var(--gold);font:700 34px Georgia}.pro-quote strong{display:block;color:var(--gold);font-size:11px;margin-top:10px}
.pro-right{min-width:0;display:grid;grid-template-rows:112px minmax(0,1fr);height:100vh}
.pro-header{background:var(--navy2);padding:16px 28px;display:flex;justify-content:space-between;align-items:center;color:#fff}
.pro-header>div:first-child>span{font-size:12px;font-weight:700;color:var(--gold)}
.pro-header h1{font:700 27px Georgia;margin:3px 0 1px}.pro-header p{font-size:13px;color:#D6E0EB;margin:0}
.pro-user{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;font-size:25px}
.pro-user strong{font-size:14px}.pro-user small{grid-column:2;font-size:11px;color:#BBC9D8}
.pro-scroller{overflow-y:scroll;overflow-x:hidden;background:var(--off);scrollbar-gutter:stable}
.pro-body{min-height:100%;padding:18px 20px 20px;color:var(--ink)}
.pro-strip{background:#fff;border:1px solid var(--line);padding:11px 14px;font-size:13px;display:flex;gap:6px;align-items:center}
.pro-strip strong{color:var(--blue)}.pro-strip em{margin-left:auto;color:var(--muted);font-size:11px;font-style:normal}
.pro-progress{height:6px;background:var(--line);margin-bottom:14px}.pro-progress div{height:100%;background:var(--blue2);width:1%}
.pro-content{min-height:420px}
.hero{background:var(--navy2);color:#fff;padding:20px 22px;margin-bottom:12px}
.hero .eyebrow{font-size:12px;font-weight:700;color:var(--gold)}.hero h2{font:700 24px Georgia;margin:4px 0 7px}.hero p{font-size:13px;color:#D2DDE9;line-height:1.5;margin:0}
.section-title{font-size:14px;font-weight:700;color:var(--blue);margin:8px 0 6px}.section-sub{font-size:12px;color:var(--muted);margin-bottom:9px}
.index-card,.card{background:#fff;border:1px solid var(--line);margin-bottom:9px}
.index-card{display:grid;grid-template-columns:52px 1fr auto;align-items:stretch}.index-number{display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:700}
.index-info{padding:12px 14px}.index-info strong{display:block;font-size:14px}.index-info small{font-size:11px;color:var(--muted)}
.index-card .btn{align-self:center;margin-right:12px}
.card{padding:17px}.card h3{font-size:15px;margin:0 0 9px;color:var(--ink)}.card p{font-size:13px;line-height:1.58;color:#34475B;margin:0;white-space:pre-wrap}
.card.norm{background:#F0F5FF;border-color:#B9CDF5}.card.norm h3{color:var(--blue)}
.btn{border:1px solid #BCC8D8;background:#fff;color:var(--blue);padding:9px 13px;font-size:12px;font-weight:700;cursor:pointer;border-radius:3px}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.gold{background:var(--gold);border-color:var(--gold);color:#07182F}.btn:disabled{opacity:.45;cursor:not-allowed}
.nav-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}.nav-row .right{margin-left:auto}
.option{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);padding:11px;margin:7px 0;background:#fff;font-size:13px;line-height:1.45;cursor:pointer}
.feedback{padding:13px 14px;margin-top:12px;font-size:13px;line-height:1.55}.feedback.ok{background:#EAF7EC;border:1px solid #A9D7B0;color:#245B2D}.feedback.bad{background:#FFF3E7;border:1px solid #E9C48F;color:#7B4D11}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.metric{background:#fff;border:1px solid var(--line);padding:14px}.metric small{font-size:11px;color:var(--muted)}.metric strong{display:block;font-size:21px;color:var(--blue);margin-top:4px}
.catalog-tabs{display:flex;gap:0;background:#fff;border:1px solid var(--line);margin-bottom:12px;align-items:center}.catalog-tabs button{border:0;background:#fff;padding:12px 14px;color:var(--ink);cursor:pointer}.catalog-tabs button.active{color:var(--blue);font-weight:700}.catalog-tabs form{margin-left:auto;padding:6px;display:flex;gap:5px}.catalog-tabs input{padding:8px;border:1px solid var(--line)}
.pro-footer{background:var(--navy2);border:1px solid #29405C;color:#D7E1EC;padding:12px 16px;margin-top:20px;font-size:11px;display:flex;justify-content:space-between}.pro-footer strong{color:var(--gold)}
#stage-note{position:fixed;z-index:50;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(3,23,47,.96);border:1px solid #285A8D;border-radius:8px;padding:8px 14px;max-width:80vw;text-align:center;font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s}
#stage-note.show{opacity:1}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.professional-shell{grid-template-columns:165px minmax(0,1fr)}.metrics{grid-template-columns:1fr}}


/* ETAPA 3 — patrón UI_05 del MASTER */
.commercial-tabs{display:flex;background:#F9FAFC;border:1px solid var(--line);margin-bottom:14px}
.commercial-tabs button{border:0;background:transparent;padding:14px 22px;color:var(--ink);font-size:13px;cursor:pointer;border-bottom:3px solid transparent}
.commercial-tabs button.active{color:var(--blue);font-weight:700;border-bottom-color:var(--blue2)}
.commercial-hero{background:var(--navy2);color:#fff;padding:22px;margin-bottom:14px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.commercial-hero h2{font:700 25px Georgia;margin:0 0 7px}.commercial-hero p{margin:4px 0;color:#D3DFEC;font-size:13px}
.status-badge{display:inline-block;border-radius:11px;padding:5px 10px;font-size:11px;font-weight:700;background:#68778A;color:#fff}.status-badge.active{background:var(--green)}
.commercial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.commercial-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.commercial-card{background:#fff;border:1px solid var(--line);padding:17px;min-height:92px}
.commercial-card h3{margin:0 0 7px;font-size:14px}.commercial-card small{display:block;color:var(--muted);font-size:11px;margin-bottom:7px}.commercial-card strong.big{font-size:24px;color:var(--ink)}
.commercial-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:12px}.commercial-table th,.commercial-table td{padding:11px;border-bottom:1px solid #E8EDF4;text-align:left}.commercial-table th{color:var(--muted);font-size:11px}
.commercial-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.commercial-actions .right{margin-left:auto}
.license-panel{background:var(--navy2);color:#fff;border:1px solid #29405C;padding:20px}.license-panel h3{color:var(--gold);margin:0 0 12px}.license-panel .price{font:700 31px Georgia}.license-panel p{color:#D2DDE9;font-size:13px;line-height:1.5}
.sync-line{font-size:11px;color:var(--muted);margin-top:8px}.error-box{background:#FFF3E7;border:1px solid #E9C48F;color:#7B4D11;padding:13px;margin:10px 0;font-size:12px}
#register-modal,#legal-modal{position:fixed;z-index:100;inset:0;background:rgba(3,23,47,.78);display:none;place-items:center;padding:20px}#register-modal.open,#legal-modal.open{display:grid}
.modal-card{width:min(520px,94vw);max-height:85vh;overflow:auto;background:#fff;color:var(--ink);padding:22px;border:1px solid var(--line)}.modal-card h2{font:700 23px Georgia;margin-top:0}.modal-card label{display:block;font-size:12px;font-weight:700;margin:10px 0 4px}.modal-card input{width:100%;padding:10px;border:1px solid var(--line)}
@media(max-width:900px){.commercial-grid.four{grid-template-columns:repeat(2,1fr)}.commercial-grid{grid-template-columns:1fr}}

@media (max-width:600px){

  body{
    overflow:hidden;
    background:#071a34;
  }

  #screen-access.active{
    display:block;
    width:100vw;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    background:linear-gradient(180deg,#071a34 0%,#0d2b57 100%);
  }

  #screen-access .stage-access{
    width:100%;
    height:auto;
    min-height:100vh;
    max-width:none;
    aspect-ratio:auto;
    position:relative;
    margin:0;
    padding:24px 16px 30px;
    box-sizing:border-box;
  }

  #screen-access .stage-image{
    display:none;
  }

  #screen-access .access-overlay{
    position:relative;
    inset:auto;
    width:100%;
    max-width:430px;
    min-height:0;
    margin:0 auto;
    padding:28px 22px 24px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:14px;
    border:1px solid rgba(214,170,79,.75);
    border-radius:22px;
    background:rgba(7,26,52,.96);
    box-shadow:0 16px 45px rgba(0,0,0,.32);
  }

  #screen-access .access-overlay::before{
    content:"AUDIENCIAS CIVILES 2.0\A ENTRENAMIENTO PARA LITIGANTES\A\A ⚖\A\A Bienvenido\A Ingresa tus datos para acceder a tu cuenta y continuar tu entrenamiento profesional.";
    white-space:pre-line;
    display:block;
    text-align:center;
    color:#fff;
    font-size:17px;
    line-height:1.42;
    font-weight:600;
    margin-bottom:10px;
  }

  #screen-access .access-overlay input{
    position:static !important;
    width:100% !important;
    height:52px !important;
    box-sizing:border-box;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:10px;
    background:#082a50;
    color:#fff;
    font-size:16px !important;
  }

  #screen-access #email{order:1}
  #screen-access #password{order:2}

  #screen-access #toggle-password{
    order:3;
    position:static !important;
    width:auto !important;
    height:auto !important;
    align-self:flex-end;
    padding:2px 0;
    background:none;
    color:#fff;
    font-size:13px;
  }

  #screen-access #toggle-password::after{
    content:"Mostrar / ocultar contraseña";
  }

  #screen-access .login-hotspot{
    order:4;
    position:static !important;
    width:100% !important;
    height:54px !important;
    border:0;
    border-radius:10px;
    background:#e1b84d;
    color:#0d1b3d;
    font-size:16px;
    font-weight:800;
  }

  #screen-access .login-hotspot::after{
    content:"INICIAR SESIÓN  →";
  }

  #screen-access #register-link{
    order:5;
    position:static !important;
    width:100% !important;
    height:auto !important;
    padding:10px 0;
    background:none;
    color:#fff;
    font-size:15px;
    font-weight:700;
  }

  #screen-access #register-link::after{
    content:"¿No tienes cuenta?  Regístrate aquí";
  }

  #screen-access #terms-link,
  #screen-access #privacy-link{
    position:static !important;
    width:100% !important;
    height:auto !important;
    padding:5px 0;
    background:none;
    color:#d9e3ef;
    font-size:12px;
  }

  #screen-access #terms-link{order:6}
  #screen-access #privacy-link{order:7}

  #screen-access #terms-link::after{
    content:"Términos de Uso";
  }

  #screen-access #privacy-link::after{
    content:"Política de Privacidad";
  }

  #screen-access .access-overlay::after{
    content:"Disciplina hoy, mejores audiencias mañana.\A\A Una solución de OpenAI | M.V.\A TECNOLOGÍA CON PROPÓSITO LEGAL";
    white-space:pre-line;
    order:8;
    display:block;
    text-align:center;
    color:#d9e3ef;
    font-size:12px;
    line-height:1.5;
    margin-top:8px;
  }
}

@media (max-width:600px){

  #screen-access .stage-access{
    padding:20px 16px 26px;
    background:
      radial-gradient(circle at 50% 8%,rgba(26,91,167,.34),transparent 32%),
      linear-gradient(180deg,#061a34 0%,#0b2d5a 100%);
  }

  #screen-access .access-overlay{
    max-width:390px;
    padding:24px 22px 22px;
    border:1px solid rgba(225,184,77,.72);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(7,27,55,.98),rgba(10,39,78,.98));
    box-shadow:
      0 0 0 1px rgba(60,133,220,.20),
      0 18px 45px rgba(0,0,0,.32);
  }

  #screen-access .access-overlay::before{
    content:"AUDIENCIAS CIVILES 2.0\A ENTRENAMIENTO PARA LITIGANTES\A\A Bienvenido\A Ingresa tus datos para acceder a tu cuenta y continuar tu entrenamiento profesional.";
    white-space:pre-line;
    display:block;
    padding-top:88px;
    margin-bottom:12px;
    text-align:center;
    background:url("assets/PWA_icon_512.png") top center/74px 74px no-repeat;
    color:#fff;
    font-size:16px;
    line-height:1.42;
    font-weight:600;
    letter-spacing:.1px;
  }

  #screen-access .access-overlay input{
    height:50px !important;
    border:1px solid rgba(92,156,231,.9);
    border-radius:9px;
    background:#082a50;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  }

  #screen-access .login-hotspot{
    height:52px !important;
    border-radius:9px;
    background:linear-gradient(180deg,#f0c95a,#d9a936);
    box-shadow:0 5px 16px rgba(0,0,0,.22);
    letter-spacing:.3px;
  }

  #screen-access #register-link{
    color:#fff;
    font-weight:700;
  }

  #screen-access #terms-link,
  #screen-access #privacy-link{
    color:#cbd7e6;
  }

  #screen-access .access-overlay::after{
    content:"Disciplina hoy, mejores audiencias mañana.\A\A Una solución de OpenAI  |  M.V.\A TECNOLOGÍA CON PROPÓSITO LEGAL";
    white-space:pre-line;
    order:8;
    display:block;
    margin-top:8px;
    padding-top:13px;
    border-top:1px solid rgba(225,184,77,.42);
    text-align:center;
    color:#dce5ef;
    font-size:11px;
    line-height:1.55;
    letter-spacing:.35px;
  }
}