:root{
      --navy:#233153;
      --navy-2:#233153;
      --red:#ef3146;
      --gold:#18c2f1;

      --bg:#0a1f4a;
      --text:#f7f8fb;

      --card:#ffffff;
      --muted:#b7c4d9;

      --shadow: 0 12px 25px rgba(10, 26, 58, 0.16);
      --shadow-2: 0 20px 35px rgba(157, 35, 67, 0.24);

      --radius-xl: 28px;
      --radius-lg: 24px;
      --radius-md: 16px;
    }

    *{ margin:0; padding:0; box-sizing:border-box; }
    body{
      background: linear-gradient(180deg, #081633 0%, #0a1f4a 100%);
      color: #f7f8fb;
      line-height: 1.65;
      font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* Header institucional */
    .main-header{
      background: #091838;
      color:#fff;
      padding: 1.35rem 1.25rem 1.2rem;
      border-bottom: 3px solid var(--gold);
      box-shadow: 0 4px 15px rgba(0,0,0,.2);
    }
    .main-header-inner{
      max-width: 1400px;
      margin: 0 auto;
      text-align: center;
    }
    .header-topline{
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: .45rem;
    }
    .header-kicker{
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .3rem .8rem;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(24,194,241,.6);
      color: #e6f1ff;
      font-size: .86rem;
      font-weight: 700;
      letter-spacing: .2px;
      text-transform: none;
    }
    .header-logos-only{
      display: flex;
      gap: .8rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .header-logos-only img{
      height: 54px;
      width: auto;
      max-width: 110px;
      object-fit: contain;
      background: transparent;
      border-radius: 0;
      padding: 0;
      border: none;
    }
    .header-logos-only .logo-link{
      display: inline-flex;
      align-items: center;
    }
    .header-logos-only img.logo-azhent{
      height: 48px;
      max-width: 120px;
    }
    .main-header h1{
      font-size: 3.2rem;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: .2px;
      max-width: 1020px;
      margin-top: .35rem;
      margin-left: auto;
      margin-right: auto;
    }
    .main-header .sub{
      font-weight: 400;
      color: #d7e5fb;
      opacity: 1;
      margin-top: .3rem;
      font-size: 1.02rem;
    }
    .header-doc-actions{
      display: flex;
      gap: .6rem;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: .9rem;
      margin-bottom: .2rem;
    }
    .header-doc-btn{
      border: 2px solid rgba(24,194,241,.7);
      color: #e7f1ff;
      background: rgba(12,37,68,.35);
      padding: .5rem .9rem;
      border-radius: 999px;
      font-weight: 800;
      cursor: pointer;
      transition: .2s ease;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .95rem;
    }
    .header-doc-btn i{
      color: #9ac3ff;
    }
    .header-doc-btn:hover{
      transform: translateY(-1px);
      background: rgba(14,47,86,.65);
      border-color: #9ac3ff;
    }
    .header-doc-btn.active{
      background: var(--gold);
      border-color: var(--gold);
      color: #0d214f;
    }
    .header-doc-btn.active i{
      color: #0d214f;
    }

    .header-date{
      margin-top: .45rem;
      font-size: 1.02rem;
      color: #ddeafe;
    }

    /* NAV sticky */
    .nav-bar{
      background: #091838;
      padding: .8rem 1.25rem;
      position: sticky;
      top: 0;
      z-index: 1000;
      display:flex;
      flex-wrap:wrap;
      justify-content: space-between;
      gap:.5rem .75rem;
      align-items:center;
      border-bottom: 3px solid var(--gold);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .nav-filters{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem .75rem;
      align-items:center;
      justify-content:center;
      margin: 0 auto;
      flex: 1 1 auto;
    }
    .nav-btn{
      background: transparent;
      border: 2px solid var(--gold);
      color: #fff;
      padding: .52rem 1.05rem;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
      transition: .2s ease;
      display:inline-flex;
      align-items:center;
      gap: .5rem;
      user-select:none;
    }
    .nav-btn i{ color: var(--gold); }
    .nav-btn:hover{
      background: var(--gold);
      border-color: var(--gold);
      transform: translateY(-1px);
    }
    .nav-btn:hover i{ color:#fff; }
    .nav-btn.active{
      background: var(--gold);
      border-color: var(--gold);
    }
    .nav-btn.active i{ color:#fff; }

    .search-box{
      margin: 0 0 0 1rem;
      display:flex;
      align-items:center;
      background: #fff;
      border-radius: 999px;
      padding: .2rem;
      border: 2px solid var(--gold);
      gap:.25rem;
      flex: 0 0 420px;
      max-width: 420px;
    }
    .search-box input{
      border:none;
      background:transparent;
      padding: .55rem .9rem;
      width: 240px;
      outline:none;
      font-size: .95rem;
    }
    .search-box button{
      background: var(--gold);
      border:none;
      border-radius: 999px;
      padding: .55rem 1rem;
      color:#fff;
      font-weight:800;
      cursor:pointer;
      transition:.2s ease;
    }
    .search-box button:hover{
      background: var(--navy);
      color: var(--gold);
    }
    .search-box .clear-btn{
      background: transparent;
      border: 1px solid rgba(24,194,241,.35);
      color: var(--gold);
      padding: .52rem .8rem;
    }
    .search-box .clear-btn:hover{
      background: rgba(24,194,241,.08);
      color: var(--gold);
    }

    .container{
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem 1.25rem;
    }

    /* Grid */
    .becas-grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 1.35rem;
      margin-top: 1.25rem;
    }

    .beca-card{
      background: var(--card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow:hidden;
      transition: .22s ease;
      border: 1px solid rgba(13,33,79,.12);
      cursor:pointer;
    }
    .beca-card:hover{
      transform: translateY(-6px);
      box-shadow: var(--shadow-2);
      border-color: var(--gold);
    }

    .beca-header{
      background: linear-gradient(115deg, #f5f9ff, #ffffff);
      padding: 1.1rem 1.25rem;
      border-bottom: 3px solid var(--gold);
      display:flex;
      align-items:center;
      gap: .85rem;
    }
    .beca-icon{
      background: var(--navy);
      color: var(--gold);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 1.45rem;
      border: 2px solid var(--gold);
      flex: 0 0 auto;
    }
    .beca-titulo{
      font-weight: 900;
      font-size: 1.05rem;
      color: var(--navy);
      line-height:1.25;
    }

    .beca-content{
      padding: 1.15rem 1.25rem 1.25rem;
      background: #fcfcfc;
    }
    .beca-content p{ color: #243244; }
    .beca-content .meta{
      color: var(--muted);
      font-size: .92rem;
      margin-top: .5rem;
    }

    .btn-detalle{
      background:none;
      border: 2px solid var(--gold);
      color: var(--navy);
      padding: .5rem 1.05rem;
      border-radius: 999px;
      font-weight: 900;
      margin-top: .95rem;
      display:inline-flex;
      align-items:center;
      gap: .55rem;
      transition: .2s ease;
      cursor:pointer;
    }
    .btn-detalle i{ transition:.2s ease; }
    .btn-detalle:hover{
      background: var(--gold);
      color:#fff;
    }
    .btn-detalle:hover i{
      transform: translateX(4px);
      color: var(--gold);
    }

    /* Panel detalle */
    .detail-panel{
      position:fixed;
      top:0;
      right:-110%;
      width: 52%;
      max-width: 780px;
      height: 100vh;
      background:#fff;
      color: #1e2b3c;
      box-shadow: -10px 0 30px rgba(0,0,0,0.3);
      z-index: 2000;
      overflow-y:auto;
      transition: right .32s ease;
      padding: 1.6rem 1.6rem 4.5rem;
      border-left: 8px solid var(--gold);
    }
    .detail-panel.open{ right:0; }
    #panelContenido{
      max-width: 690px;
      margin: 0 auto;
      color: #1e2b3c;
    }
    .detail-panel .prohibiciones-lista,
    .detail-panel .prohibiciones-lista * ,
    .detail-panel .requisitos-lista,
    .detail-panel .requisitos-lista * {
      color: #1e2b3c;
    }
    .panel-overlay{
      position:fixed;
      top:0; left:0;
      width:100%; height:100%;
      background: rgba(10, 26, 58, 0.7);
      z-index:1999;
      display:none;
      backdrop-filter: blur(3px);
    }
    .panel-overlay.open{ display:block; }

    .close-panel{
      position: sticky;
      top: 0;
      margin-left:auto;
      font-size: 1.05rem;
      cursor:pointer;
      color: var(--gold);
      background:#fff;
      border: 2px solid var(--navy);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      z-index: 5;
    }
    .close-panel:hover{
      background: var(--gold);
      color:#fff;
    }

    .detail-titulo{
      font-size: 1.75rem;
      color: var(--navy);
      border-left: 12px solid var(--gold);
      padding-left: 1rem;
      margin: 1rem 0 1.25rem;
      font-weight: 950;
      line-height:1.2;
    }

    .requisitos-lista, .prohibiciones-lista{
      padding: 1.2rem 1.25rem;
      border-radius: var(--radius-xl);
      margin: 1.1rem 0;
      color: #1e2b3c;
    }
    .requisitos-lista{
      background: #f0f5ff;
      border-left: 6px solid var(--navy);
    }
    .prohibiciones-lista{
      background: #eef6ff;
      border-left: 8px solid var(--gold);
    }
    .requisitos-lista ul, .prohibiciones-lista ul, .requisitos-lista ol{
      margin-left: 1.25rem;
    }
    .requisitos-lista *, .prohibiciones-lista *{
      color: #1e2b3c;
    }
    .requisitos-lista li, .prohibiciones-lista li{
      margin: .35rem 0;
    }

    .plazo-badge{
      background: var(--navy);
      color:#fff;
      padding: .5rem 1rem;
      border-radius: 999px;
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      border: 2px solid var(--gold);
      font-weight: 900;
      margin-top: .6rem;
    }

    /* Dictamen */
    .dictamen-card{
      background: linear-gradient(145deg, var(--navy), #132b4a);
      color:#fff;
      border-radius: var(--radius-xl);
      padding: 1.6rem 1.6rem;
      margin: 1.25rem 0 1.35rem;
      border: 3px solid var(--gold);
      box-shadow: 0 10px 25px rgba(0,0,0,.18);
    }
    .dictamen-card h2{
      color: var(--gold);
      font-size: 1.6rem;
      border-left: 8px solid var(--gold);
      padding-left: .9rem;
      margin-bottom: .85rem;
      font-weight: 950;
      line-height:1.25;
    }
    .dictamen-card p, .dictamen-card li{ color: rgba(255,255,255,.95); }
    .dictamen-firmas{
      display:flex;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 1.4rem;
      padding-top: 1.1rem;
      border-top: 3px solid var(--gold);
      flex-wrap: wrap;
    }

    /* Footer */
    .footer{
      background: #0a1d46;
      color: #f2f6ff;
      border-top: 1px solid rgba(255,255,255,.12);
      margin-top: 2rem;
    }
    .footer-logos-strip{
      max-width: 1200px;
      margin: 0 auto;
      padding: 1.85rem 1.25rem 2rem;
      display: grid;
      grid-template-columns: repeat(5, minmax(140px, 1fr));
      gap: 1rem;
      align-items: start;
    }
    .footer-logo-card{
      text-align: center;
    }
    .footer-logo-card img{
      height: 54px;
      width: auto;
      max-width: 130px;
      object-fit: contain;
    }
    .footer-logo-vicerrectorado img{
      height: 60px;
    }
    .footer-logo-card p{
      margin-top: .55rem;
      color: rgba(255,255,255,.82);
      font-size: .88rem;
      line-height: 1.35;
    }
    .footer-logo-academy img{
      height: 58px;
      max-width: 130px;
    }
    .footer-credit-line{
      border-top: 1px solid rgba(255,255,255,.15);
      color: rgba(255,255,255,.78);
      font-size: 1rem;
      padding: .9rem 1.25rem .7rem;
      text-align: center;
      max-width: 1200px;
      margin: 0 auto;
    }
    .footer-counter-wrap{
      max-width: 1200px;
      margin: .15rem auto 0;
      padding: .3rem 1.25rem 1rem;
      display:flex;
      justify-content:center;
    }
    .footer-counter{
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      padding: .35rem .85rem;
      color: #f2f6ff;
      display:inline-flex;
      align-items:center;
      gap: .55rem;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(13,39,74,.18);
    }
    .footer-counter i{ color: var(--gold); }
    .footer-counter strong{
      color: var(--gold);
      font-weight: 900;
      min-width: 2ch;
      text-align: right;
    }

    /* Responsive */
    @media (max-width: 900px){
      .main-header{
        padding: 1rem .9rem .95rem;
      }
      .header-topline{
        justify-content: center;
        gap: .7rem;
      }
      .header-kicker{
        width: 100%;
        justify-content: center;
        text-align: center;
      }
      .header-logos-only{
        width: 100%;
        justify-content: center;
      }
      .detail-panel{ width: 92%; }
      .nav-bar{ justify-content: center; }
      .nav-filters{ width: 100%; }
      .search-box{
        margin: .25rem 0 0;
        width: 100%;
        flex: 1 1 auto;
        max-width: 100%;
      }
      .search-box input{ width: 100%; }
      .main-header h1{ font-size: 2.3rem; }
      .header-logos-only img{ height: 54px; }
      .header-date{ font-size: .98rem; }
      .becas-grid{
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      }
      .plazo-badge{
        white-space: normal;
        border-radius: 16px;
      }
      .footer-logos-strip{
        grid-template-columns: repeat(2, minmax(150px, 1fr));
      }
      .footer-credit-line{
        font-size: .95rem;
      }
    }

    @media (max-width: 560px){
      .main-header h1{
        font-size: 1.7rem;
        line-height: 1.25;
      }
      .main-header .sub{
        font-size: .93rem;
      }
      .header-kicker{
        font-size: .76rem;
        padding: .26rem .62rem;
      }
      .header-logos-only img{
        height: 44px;
        max-width: 92px;
      }
      .header-doc-actions{
        margin-top: .6rem;
        margin-bottom: .1rem;
        gap: .38rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
      }
      .header-doc-actions::before{
        content: "Documentos oficiales";
        grid-column: 1 / -1;
        text-align: center;
        color: #d7e5fb;
        font-size: .76rem;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        margin-bottom: .08rem;
      }
      .header-doc-btn{
        width: 100%;
        justify-content: center;
        font-size: .84rem;
        padding: .36rem .62rem;
        border-width: 1px;
        gap: .35rem;
      }
      .header-doc-btn i{
        font-size: .78rem;
      }
      .header-doc-actions .header-doc-btn:last-child{
        margin-bottom: .05rem;
      }
      .nav-filters{
        gap: .4rem .45rem;
        width: 100%;
      }
      .nav-filters::before{
        content: "Tipos de becas";
        width: 100%;
        text-align: center;
        color: #d7e5fb;
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        margin-bottom: .1rem;
      }
      .nav-btn{
        font-size: .83rem;
        padding: .34rem .62rem;
        border-width: 1px;
        gap: .32rem;
      }
      .nav-btn i{
        font-size: .76rem;
      }
      .search-box{
        flex-wrap: nowrap;
      }
      .search-box button{
        padding: .5rem .78rem;
      }
      .search-box .clear-btn{
        padding: .48rem .66rem;
      }
      .container{
        padding: 1.25rem .82rem;
      }
      .becas-grid{
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      .beca-header{
        padding: .95rem .95rem;
      }
      .beca-content{
        padding: .95rem .95rem 1rem;
      }
      .detail-panel{
        width: 100%;
        max-width: none;
        border-left-width: 4px;
        padding: 1rem .8rem 3rem;
      }
      .close-panel{
        width: 40px;
        height: 40px;
      }
      .detail-titulo{
        font-size: 1.35rem;
        border-left-width: 8px;
        padding-left: .7rem;
      }
      .requisitos-lista,
      .prohibiciones-lista{
        padding: .95rem .85rem;
        border-radius: 14px;
      }
      .footer-logos-strip{
        grid-template-columns: 1fr;
        padding: 1.35rem .95rem 1.4rem;
      }
      .footer-credit-line{
        font-size: .9rem;
        text-align: center;
        padding: .75rem .85rem .55rem;
      }
      .footer-counter{
        font-size: .9rem;
      }
    }

    /* Print (opcional) */
    @media print{
      .nav-bar, .panel-overlay, .close-panel, .footer{ display:none !important; }
      .main-header{ box-shadow:none; }
      body{ background:#fff; }
      .container{ max-width: 100%; padding: 0; }
      .beca-card{ break-inside: avoid; }
    }
    .header-logos-only img.logo-azhent-academy{
      height: 54px;
      max-width: 120px;
    }