@import 'tailwindcss';


body{
    font-family: 'Exo', sans-serif;
}


.context {
    width: 100%;
    position: absolute;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}


.area{
    background: #fcfcfc;  
    background: -webkit-linear-gradient(to left, #151fe9, #070d8a);  
    width: 100%;
    min-height:100vh; /* permite crecer con el contenido */
}

.circles{
    position: fixed; /* cubrir toda la página al desplazarse */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #070d8a;
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
  /* ——— Look tipo “Analytics Console” sin tocar tu HTML/JS ——— */

  /* ===== Paleta corporativa (ajústala a tu marca) ===== */
  :root{
    --bg:#f5f7fb;
    --surface:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;

    --primary:#2155CD;     /* azul corporativo */
    --primary-600:#1b47ab; /* hover */
    --primary-50:#edf2ff;

    --accent:#2155CD;      /* verde acción */
    --accent-600:#1b47ab;
  }

  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  }

    /* Header con degradado azul */
    .app-header {
      position: sticky;
      top: 0;
      z-index: 40;
      /* Degradado similar a la imagen: azul profundo -> azul medio */
      background: linear-gradient(180deg, #2e43a7 0%, #3256b0 35%, #3b7cbd 100%);
      color: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,.08);
    }
    .app-header .inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 14px 20px; }
    .app-header .brand { color: #fff; }
    .app-header a { color: #fff; }
    .app-header .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; }
    .app-header .btn-ghost:hover { background: rgba(255,255,255,.08); }
  .brand{
    display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
  }
  .brand .logo{
    width:258px; height:80px; display:grid; place-items:center;
   background: linear-gradient(180deg, #2e43a7 0%, #3256b0 35%, #3b7cbd 100%); color:#fff; border-radius:8px; font-size:14px; font-weight:800;
  }
  .top-search{
    flex:1; position:relative;
  }
  .top-search input{
    width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 14px 10px 38px;
    background:#fff; font-size:14px;
  }
  .top-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.55 }

  /* ===== Layout ===== */
  .wrap{ position: relative; max-width:1200px; overflow: hidden; margin:0 auto; padding-top:32px; box-sizing:border-box; }
  .grid{
    display:grid;
    grid-template-columns: 1fr 1.5fr; /* antes era 1fr 1fr */
    gap:24px;
  }
  .col-left{ display:grid; gap:24px; }
  /* Evita que la tarjeta de la derecha se estire a la altura de la columna izquierda */
  .grid > .card{ align-self:start; height:auto; }
  @media(min-width:960px){
  .grid{
    display:grid;
    grid-template-columns: 1fr 1.5fr; /* antes era 1fr 1fr */
    gap:24px;
  }
}


  /* ===== Cards ===== */
  .card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:22px;
    box-shadow: 0 4px 18px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.05);
  }
  .card h2{ font-size:18px; font-weight:700; margin:0 0 8px }
  .card .sub{ color:var(--muted); font-size:13px; margin-bottom:14px }

  /* ===== Controles ===== */
  .form-row{ margin-bottom:14px }
  .form-label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px }
  .control, .control-select{
    width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; background:#fff;
    transition: box-shadow .15s, border-color .15s;
  }
  .control:focus, .control-select:focus{
    outline:none; border-color:var(--primary);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 15%, transparent);
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    border-radius:10px; padding:10px 16px; font-weight:700; border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{ background:var(--primary); color:#fff; }
  .btn-primary:hover{ background:var(--primary-600); }
  .btn-accent{ background:var(--accent); color:#fff; margin-top: 10px; }
  .btn-accent:hover{ background:var(--accent-600); }
  .btn-ghost{ background:#fff; border:1px solid var(--border); color:var(--text); }