/* =========================================================
   SHIELDNET REPOSITORY
   Archivo: css/shieldnet.css
   ========================================================= */

/* =========================================================
   RESET
   ========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  width:100%;
  min-height:100%;
  scroll-behavior:smooth;
}

body{

  width:100%;
  min-height:100vh;

  overflow-x:hidden;

  background:#04070d;

  color:#edf6ff;

  font-family:
    Inter,
    system-ui,
    sans-serif;

  position:relative;
}

/* =========================================================
   FONDO
   ========================================================= */

body::before{

  content:"";

  position:fixed;
  inset:0;

  z-index:-2;

  background:
    radial-gradient(
      circle at top left,
      rgba(0,255,224,0.10),
      transparent 30%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(0,140,255,0.10),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #04070d 0%,
      #08111d 45%,
      #03050a 100%
    );
}

body::after{

  content:"";

  position:fixed;
  inset:0;

  z-index:-1;

  opacity:0.06;

  background-image:
    linear-gradient(
      rgba(0,255,224,0.18) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,255,224,0.18) 1px,
      transparent 1px
    );

  background-size:40px 40px;
}

/* =========================================================
   CONTENEDOR
   ========================================================= */

.repo-container{

  width:100%;
  max-width:1400px;

  margin:auto;

  padding:60px;
}

/* =========================================================
   HEADER
   ========================================================= */

.repo-header{

  width:100%;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:40px;

  margin-bottom:70px;
}

.repo-label{

  display:inline-block;

  margin-bottom:18px;

  color:#00c8ff;

  font-size:0.78rem;
  font-weight:900;

  letter-spacing:4px;

  text-transform:uppercase;
}

.repo-header h1{

  font-size:
    clamp(3rem,6vw,5.5rem);

  line-height:1;

  font-weight:900;

  letter-spacing:-3px;

  margin-bottom:24px;
}

.repo-header p{

  max-width:760px;

  color:#9fb4c8;

  font-size:1.05rem;

  line-height:1.9;
}

/* =========================================================
   BOTON VOLVER
   ========================================================= */

.back-button{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:150px;

  padding:14px 22px;

  border-radius:999px;

  text-decoration:none;

  background:#00c8ff;

  color:#001018;

  font-size:0.92rem;
  font-weight:900;

  border:
    1px solid rgba(0,200,255,0.28);

  box-shadow:
    0 0 20px rgba(0,200,255,0.18);

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.back-button:hover{

  transform:
    translateY(-3px);

  background:#00e6ff;

  box-shadow:
    0 0 24px rgba(0,200,255,0.35);
}

/* =========================================================
   GRID PRINCIPAL
   ========================================================= */

.repo-main{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:30px;
}

/* =========================================================
   TARJETAS
   ========================================================= */

.repo-card{

  position:relative;

  overflow:hidden;

  min-height:250px;

  padding:32px;

  border-radius:24px;

  background:
    linear-gradient(
      180deg,
      rgba(10,24,40,0.96),
      rgba(5,13,24,0.96)
    );

  border:
    1px solid rgba(0,255,224,0.14);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.40);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.repo-card::before{

  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(0,255,224,0.12),
      transparent 36%
    );

  pointer-events:none;
}

.repo-card:hover{

  transform:
    translateY(-8px);

  border-color:
    rgba(0,255,224,0.34);

  box-shadow:
    0 28px 70px rgba(0,0,0,0.52),
    0 0 24px rgba(0,255,224,0.10);
}

.repo-card h2{

  position:relative;
  z-index:2;

  color:#00ffe0;

  font-size:1.35rem;
  font-weight:850;

  margin-bottom:20px;
}

.repo-card p{

  position:relative;
  z-index:2;

  color:#a9bfd3;

  font-size:0.97rem;

  line-height:1.8;
}

/* =========================================================
   TAGS
   ========================================================= */

.tags{

  position:relative;
  z-index:2;

  display:flex;
  flex-wrap:wrap;

  gap:12px;
}

.tags span{

  padding:9px 14px;

  border-radius:999px;

  background:
    rgba(0,200,255,0.10);

  border:
    1px solid rgba(0,200,255,0.20);

  color:#7eeeff;

  font-size:0.82rem;
  font-weight:800;
}

/* =========================================================
   LISTAS
   ========================================================= */

.repo-card ul{

  position:relative;
  z-index:2;

  padding-left:18px;

  color:#b7cadc;

  line-height:2;
}

.repo-card li{
  margin-bottom:6px;
}

/* =========================================================
   BADGES
   ========================================================= */

.status-badge{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:18px;

  padding:8px 14px;

  border-radius:999px;

  background:
    rgba(0,255,136,0.10);

  border:
    1px solid rgba(0,255,136,0.18);

  color:#65ffb3;

  font-size:0.76rem;
  font-weight:900;

  letter-spacing:1px;
}

/* =========================================================
   TERMINAL MINI
   ========================================================= */

.terminal-box{

  margin-top:20px;

  padding:18px;

  border-radius:16px;

  background:
    rgba(0,0,0,0.30);

  border:
    1px solid rgba(0,255,224,0.10);

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:0.82rem;

  line-height:1.8;

  color:#8ff3ff;
}

.terminal-user{
  color:#00ffe0;
}

/* =========================================================
   SHIELDNET CTF TOOL
   ========================================================= */

.ctf-main{
  grid-template-columns:repeat(12,1fr);
}

.ctf-main .repo-card{
  grid-column:span 4;
}

.ctf-main .wide-card,
.ctf-main .ctf-hero{
  grid-column:1 / -1;
}

.ctf-hero{
  min-height:220px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}

.ctf-actions{
  position:relative;
  z-index:2;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.ctf-actions button,
.machine-toggle,
.flag-form button{
  border:1px solid rgba(0,255,224,0.25);
  border-radius:10px;
  background:rgba(0,255,224,0.08);
  color:#bafcf4;
  cursor:pointer;
  font-weight:850;
}

.ctf-actions button{
  padding:12px 15px;
}

.ctf-actions button:hover,
.machine-toggle:hover,
.flag-form button:hover{
  border-color:rgba(0,255,224,0.52);
  background:rgba(0,255,224,0.14);
}

.stat-card strong{
  position:relative;
  z-index:2;
  display:block;
  margin-bottom:10px;
  color:#00ffe0;
  font-family:"JetBrains Mono",monospace;
  font-size:2.35rem;
}

.machine-grid,
.challenge-list{
  position:relative;
  z-index:2;
  display:grid;
  gap:16px;
}

.machine-grid{
  margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.machine-card,
.challenge-card{
  padding:20px;
  border:1px solid rgba(0,255,224,0.12);
  border-radius:18px;
  background:rgba(0,0,0,0.22);
}

.machine-type,
.challenge-heading span{
  display:inline-flex;
  margin-bottom:12px;
  padding:6px 10px;
  border:1px solid rgba(0,200,255,0.2);
  border-radius:999px;
  color:#7eeeff;
  font-size:0.68rem;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}

.machine-card h3,
.challenge-card h3{
  color:#edfaff;
  font-size:1.02rem;
  margin-bottom:10px;
}

.machine-card small,
.challenge-card small{
  display:block;
  margin-top:10px;
  color:#7791a6;
  line-height:1.55;
}

.machine-services{
  margin:16px 0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.machine-services span{
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,0.05);
  color:#8fb8c8;
  font-family:"JetBrains Mono",monospace;
  font-size:0.65rem;
}

.machine-toggle{
  padding:10px 12px;
}

.machine-toggle.active{
  border-color:rgba(0,255,136,0.34);
  background:rgba(0,255,136,0.12);
  color:#8dffc9;
}

.challenge-list{
  margin-top:22px;
}

.challenge-card{
  display:grid;
  gap:12px;
}

.challenge-card.solved{
  border-color:rgba(0,255,136,0.24);
  background:linear-gradient(145deg,rgba(0,255,136,0.08),rgba(0,0,0,0.2));
}

.challenge-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.challenge-heading strong{
  color:#65ffb3;
  font-family:"JetBrains Mono",monospace;
  font-size:0.8rem;
}

.challenge-hint{
  color:#93b6c6;
  font-size:0.82rem;
}

.challenge-hint summary{
  width:max-content;
  color:#00c8ff;
  cursor:pointer;
  font-weight:850;
}

.challenge-hint p{
  margin-top:8px;
}

.flag-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
}

.flag-form input{
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(0,255,224,0.16);
  border-radius:10px;
  outline:none;
  background:rgba(0,0,0,0.3);
  color:#edfaff;
  font-family:"JetBrains Mono",monospace;
}

.flag-form input:focus{
  border-color:rgba(0,255,224,0.5);
  box-shadow:0 0 0 3px rgba(0,255,224,0.08);
}

.flag-form button{
  min-height:42px;
  padding:0 14px;
}

.toast{
  max-width:360px;
  padding:12px 16px;
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:20;
  border:1px solid rgba(0,255,224,0.34);
  border-radius:10px;
  background:#07131c;
  color:#b9fff4;
  font-size:0.78rem;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:0.22s ease;
}

.toast.visible{
  opacity:1;
  transform:none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:980px){

  .repo-container{
    padding:40px 28px;
  }

  .repo-header{

    flex-direction:column;

    align-items:flex-start;
  }
}

@media(max-width:700px){

  .repo-main{
    grid-template-columns:1fr;
  }

  .repo-header h1{

    font-size:2.8rem;

    letter-spacing:-1px;
  }

  .repo-card{
    padding:26px;
  }

  .ctf-main .repo-card{
    grid-column:1 / -1;
  }

  .ctf-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .back-button{
    width:100%;
  }
}

@media(max-width:560px){
  .flag-form{
    grid-template-columns:1fr;
  }

  .flag-form button,
  .ctf-actions button{
    width:100%;
  }
}