/* Source: page/inversimulador.php */
:root{
      --coac-azul: #1C75BC;
      --coac-azul-oscuro: #003862;
      --coac-verde: #6CC24A;
      --coac-fondo: #f4f7fb;
      --coac-texto: #1f2a3c;
    }

    html, body { height: 100%; }

    body{
      margin:0;
      font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      background: var(--coac-fondo);
      color: var(--coac-texto);
    }

    /* HERO  */
    .hero-section{
      background: linear-gradient(135deg, #00a75d, #28a745, #007bff);
      color: #fff;
      padding: 90px 0 70px;
      text-align: center;
    }
        .hero-section h1{ font-size: 3rem; font-weight: 500; }    
        .hero-section p{ font-size: 1.25rem; opacity: .95; }    
    .page-content{
      padding-top:40px;
      padding-bottom:40px;
      display:flex;
      justify-content:center;
      padding-inline: 12px;
    }

    /* Tarjeta estilo  */
    .contenido{
      width:300%;
      max-width:1100px;
      background:#ffffff;
      border-radius: 1.4rem;
      overflow:hidden;
      box-shadow:0 18px 50px rgba(10,27,51,.22);
      display:grid;
      grid-template-columns:minmax(0,3fr) minmax(0,2.3fr);
      border-left: 6px solid var(--coac-verde);

    }

    /* Columna izquierda  */
    .contenido-main{
      padding:22px 22px 20px 24px;
    }

    /* Columna derecha  */
    .contenido-side{
      background: radial-gradient(circle at top left,#e2f7ea 0,#c4f0d2 26%,#f5fff8 80%);
      border-left:1px solid rgba(0,0,0,.05);
      padding:22px 20px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    /* Encabezado compacto */
    .titulo-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }

    .titulo{
      display:flex;
      align-items:center;
      gap:10px;
      margin:0;
    }

    .titulo span{
      font-weight:700;
      font-size:1.1rem;
      color:var(--coac-azul-oscuro);
    }

    .title-icon{
      width:30px;height:30px;
      border-radius:14px;
      background: radial-gradient(circle,#ffffff 0,#e1f0ff 60%);
      color:var(--coac-azul);
      padding:5px;
      box-shadow:0 6px 16px rgba(10,27,51,.25);
    }

    .logo-coop{
      width:42px;
      height:42px;
      border-radius:12px;
      background:#ffffff;
      padding:4px;
      box-shadow:0 6px 16px rgba(10,27,51,.25);
      object-fit:contain;
    }

    .badge-tag{
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.09em;
      padding:4px 10px;
      border-radius:999px;
      background:rgba(28,117,188,.07);
      color:var(--coac-azul-oscuro);
      border:1px solid rgba(28,117,188,.3);
      font-weight:600;
    }

    .sub{
      font-size:.82rem;
      color:#5b6a80;
      margin-bottom:14px;
    }

    /* Layout del formulario */
    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px 18px;
    }

    .form-grid .full{
      grid-column:1 / -1;
    }

    label{
      display:block;
      margin-bottom:4px;
      color:var(--coac-texto);
      font-weight:600;
      font-size:.85rem;
    }

    input{
      width:100%;
      padding:9px 11px;
      border-radius:0.85rem;
      border:1px solid rgba(0,0,0,.12);
      background:#fdfdff;
      box-sizing:border-box;
      font-size:.9rem;
      transition:all .16s ease-out;
    }

    input:focus{
      outline:none;
      border-color:var(--coac-azul);
      box-shadow:0 0 0 .14rem rgba(28,117,188,.22);
      background:#ffffff;
    }

    input[readonly]{
      background:#f3f6fb;
      border-style:dashed;
    }

    .info{
      font-size:.8rem;
      color:#56677f;
      line-height:1.5;
      background:rgba(28,117,188,0.04);
      border-radius:0.9rem;
      padding:9px 10px;
      border:1px dashed rgba(28,117,188,0.3);
    }

    .btn-prim{
      width:100%;
      background: linear-gradient(135deg,var(--coac-azul),var(--coac-azul-oscuro));
      color:#fff;
      padding:10px;
      border:0;
      border-radius:999px;
      cursor:pointer;
      font-size:.85rem;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-top:6px;
      transition:all .18s ease-out;
      box-shadow:0 12px 24px rgba(0,75,141,.35);
    }
    .btn-prim:hover{
      transform:translateY(-1px);
      box-shadow:0 16px 32px rgba(0,75,141,.45);
      filter:brightness(1.05);
    }

    /* Panel lateral: resumen */
    .side-title{
      font-size:.9rem;
      font-weight:700;
      color:var(--coac-azul-oscuro);
      margin-bottom:8px;
    }

    .side-item{
      font-size:.86rem;
      display:flex;
      justify-content:space-between;
      margin-bottom:4px;
      color:#324258;
    }
    .side-item span:last-child{
      font-weight:900;
    }

    #result{
      margin-top:12px;
      font-size:1.1rem;
      color:#1d2838;
    }
    #result b{
      color:var(--coac-azul-oscuro);
      font-size:1.18rem;  
      font-weight:800;
    }

    .side-foot{
      font-size:.75rem;
      color:#6b7a8e;
      border-top:1px solid rgba(0,0,0,.06);
      padding-top:8px;
      margin-top:10px;
    }

    /* Navbar por encima */
    .navbar{ z-index:2000; }
    .dropdown-menu{ z-index:2100; }
    @media (min-width: 992px){
      .navbar .dropdown:hover > .dropdown-menu{
        display:block; margin-top:0;
      }
    }

    /* Responsive*/
    @media (max-width: 768px){
      .contenido{
        grid-template-columns:1fr;
        border-left-width:4px;
      }
      .contenido-side{
        order:-1;
      }
    }

    @media (max-width: 575.98px){
      .contenido-main{
        padding:18px 16px 18px;
      }
      .contenido-side{
        padding:16px 15px;
      }
      .form-grid{
        grid-template-columns:1fr;
      }
    }