@import '../base/variables.css';

/************************************************ PRESENTATION CSS ********************************************/
/* padding-top: var(--spacing-lg); */

.container{
    width: 70%;
    min-width: 440px;
    margin: 5% auto;
    padding: 5rem 5%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-size: 18px;
    font-family: 'DM Sans', sans-serif;
}

.description{
    margin-bottom: 50px;
    display: flex;
    flex-flow: column;
    gap: 3rem;
}


:root{
  --bg:rgb(255, 255, 255);
  --card:#fff;
  --txt:#1f2937;
  --muted:#6b7280;
  --brand:#0e7afe;
  --ring:#dbeafe;
  --radius:16px;
  --border:#e5e7eb;
}
*{box-sizing:border-box}

.wrap{max-width:1100px;margin:0 auto;padding:20px}
.page-header{background:#fff;border-bottom:1px solid var(--border)}
.page-header .lead{color:var(--muted);margin:.2rem 0 1rem}
.logos{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:.5rem 0 1rem;}
.logos img{height:40px;object-fit:contain}
.lang{display:flex;gap:8px}
.lang button{border:1px solid var(--border);background:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.lang button[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
.statement{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:16px 0}
.statement p{margin:.4rem 0}
.note{background:#ecfeff;border:1px solid #a5f3fc;padding:12px;border-radius:12px;color:#155e75;margin:16px 0}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:30px;
    margin:16px 0}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    box-shadow: 1px 1px 5px #58839c;
}
.card .row{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content:center;
    gap:40px;
}

.card .title2{
    font-weight:600;
    font-size: var(--font-size-xl);
}

.card .head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}

.logodata{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 40px;
}

.card .logo-wrap{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cert-logo{
  display:block;
  width:auto;
}
.logo-link{ display:inline-flex; }

/* contenidor del títol i la "badge" */
.titlebox{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.q-item{
    padding: 1rem; 
    padding-top: 2rem;
    display: flex; 
    flex-wrap: wrap;
    gap: 3rem;
}

.q-logo{
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.q-text{
    text-align: justify;
}



.badge{
    display:inline-block;
    font-size:1.2rem;
    background:#eff6ff;
    color:#1d4ed8;
    padding:.2rem .5rem;
    border-radius:999px;
    border:1px solid var(--ring)}

.meta-table{
    height: fit-content;
  width:auto;
  border-collapse:collapse;
  margin:8px 0 10px;
}
.meta-table th,
.meta-table td{
  padding:6px 8px;
  vertical-align:top;
}
.meta-table th{
  text-align:left;
  font-weight:600;
  
  max-width:40%;
  color:var(--muted);
}
.meta-table tr:not(:last-child) th,
.meta-table tr:not(:last-child) td{
  border-bottom:1px solid var(--border);
}


.hash{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:.82rem;
    background:#f3f4f6;
    border:1px solid var(--border);
    padding:6px 8px;
    border-radius:8px;
    word-break:break-all
}

.actions{
    width: 100%;
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    gap:30px;
}

.btn{
    width:fit-content;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    color:inherit;
    text-decoration:none;
}

.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.hidden{display:none}
.btn:focus{outline:none;box-shadow:0 0 0 4px var(--ring)}

.bundle{display:none;align-items:center;gap:12px;margin:12px 0 24px}
.bundle-meta{display:none;flex-direction:column;gap:6px}


.muted{color:var(--muted)}
.page-footer{border-top:1px solid var(--border);background:#fff}
.error{background:#fff0f0;border:1px solid #fca5a5;color:#7f1d1d;padding:12px;border-radius:12px}

.desc{
    color: grey;
    font-size: 18px;
    text-align: justify;
    line-height: 24px;
    padding: 1rem;
}