:root{
    --blue:#014e92;
    --blue-dark:#013a6d;
    --coral:#d9463c;
    --text:#1f2d3d;
    --muted:#667283;
    --bg:#f4f6f9;
    --border:#dbe1e8;
}

*{ box-sizing:border-box; }

body{
    margin:0;
    font-family:'Inter', Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:32px 16px;
    min-height:100vh;
}

.container{
    max-width:960px;
    margin:0 auto;
}

.logo-row{
    display:flex;
    justify-content:center;
    margin-bottom:16px;
}
.logo-row img{
    width:60px;
    height:60px;
    border-radius:10px;
    object-fit:cover;
}

h1{
    text-align:center;
    font-size:19px;
    font-weight:700;
    color:var(--blue);
    margin:0 0 6px;
    line-height:1.35;
}

.subtitle{
    text-align:center;
    font-size:13.5px;
    color:var(--muted);
    margin:0 0 24px;
    line-height:1.5;
}

/* ---- Card genérico ---- */
.card{
    max-width:440px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    padding:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

/* ---- Card: Verify (certificate detail) ---- */
.card-verify{
    max-width:720px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--border);
    border-top:4px solid #28a745;
    border-radius:10px;
    padding:28px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.card-verify .verify-header{
    text-align:center;
    margin-bottom:24px;
}

.card-verify .verify-header .status-badge{
    display:inline-block;
    background:#e8f5e9;
    color:#1b7a2b;
    font-size:13px;
    font-weight:700;
    padding:6px 18px;
    border-radius:20px;
    margin-bottom:10px;
}

.card-verify .verify-header h2{
    font-size:20px;
    font-weight:700;
    color:var(--text);
    margin:0 0 4px;
}

.card-verify .verify-header .codigo-display{
    font-size:13px;
    color:var(--muted);
    margin:0;
}
.card-verify .verify-header .codigo-display b{ color:var(--text); }

.card-verify .verify-header .btn-back{
    position:absolute;
    left:16px;
    top:16px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--muted);
    font-size:16px;
    text-decoration:none;
    transition:background .15s;
}
.card-verify .verify-header .btn-back:hover{
    background:#f0f2f5;
    color:var(--text);
}

.card-verify{ position:relative; }

.card-verify .detail-row{
    display:flex;
    padding:10px 0;
    border-bottom:1px solid var(--border);
}
.card-verify .detail-row:last-child{ border-bottom:none; }
.card-verify .detail-label{
    flex:0 0 130px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
}
.card-verify .detail-value{
    flex:1;
    font-size:14px;
    color:var(--text);
}

.card-verify .actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:24px;
}

.card-verify .actions .btn-block{ width:100%; }

/* ---- Card: Profile (participant certificates) ---- */
.card-profile{
    max-width:960px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--border);
    border-top:4px solid var(--blue);
    border-radius:10px;
    padding:28px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.card-profile .profile-header{
    text-align:center;
    margin-bottom:24px;
}

.card-profile .profile-header .status-badge{
    display:inline-block;
    background:#e3edf7;
    color:var(--blue);
    font-size:13px;
    font-weight:700;
    padding:6px 18px;
    border-radius:20px;
    margin-bottom:10px;
}

.card-profile .profile-header h2{
    font-size:20px;
    font-weight:700;
    color:var(--text);
    margin:0 0 4px;
}

.card-profile .profile-header .dni-display{
    font-size:13px;
    color:var(--muted);
    margin:0 0 6px;
}
.card-profile .profile-header .dni-display b{ color:var(--text); }

.card-profile .profile-header .badge-count{
    font-size:12px;
    color:var(--muted);
}

.card-profile .profile-body{
    padding:0;
}

.card-profile .back-actions{
    margin-top:16px;
    text-align:right;
}

/* ---- Table (profile) ---- */
.public-table{
    width:100%;
    border-collapse:collapse;
}
.public-table th{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    text-align:left;
    padding:10px 12px;
    border-bottom:2px solid var(--border);
    text-transform:uppercase;
    letter-spacing:.04em;
}
.public-table td{
    font-size:14px;
    color:var(--text);
    padding:12px;
    border-bottom:1px solid var(--border);
}
.public-table tr:last-child td{ border-bottom:none; }
.public-table th,
.public-table td{ white-space:nowrap; }
.public-table td.actions-cell{ white-space:nowrap; }
.public-table .btn + .btn{ margin-left:4px; }
.public-table code{
    background:#f0f2f5;
    padding:2px 6px;
    border-radius:4px;
    font-size:12px;
    color:var(--text);
}

/* ---- Toggle ---- */
.toggle{
    display:flex;
    border:1px solid var(--border);
    border-radius:7px;
    overflow:hidden;
    margin-bottom:18px;
}
.toggle button{
    flex:1;
    padding:10px 8px;
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    background:#fff;
    color:var(--muted);
    border:none;
    cursor:pointer;
    transition:background .15s, color .15s;
}
.toggle button + button{ border-left:1px solid var(--border); }
.toggle button.active{
    background:var(--blue);
    color:#fff;
}

/* ---- Form ---- */
label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
}

input[type="text"]{
    width:100%;
    padding:10px 12px;
    font-family:inherit;
    font-size:14.5px;
    border:1px solid var(--border);
    border-radius:7px;
    margin-bottom:6px;
    outline:none;
    transition:border-color .15s;
}
input[type="text"]:focus{ border-color:var(--blue); }

.help{
    font-size:12px;
    color:var(--muted);
    margin:0 0 16px;
}

.btn{
    display:inline-block;
    padding:11px 20px;
    background:var(--blue);
    color:#fff;
    border:none;
    border-radius:7px;
    font-family:inherit;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    text-align:center;
    text-decoration:none;
    transition:background .15s;
}
.btn:hover{ background:var(--blue-dark); color:#fff; text-decoration:none; }
.btn-block{ width:100%; }

.btn-outline{
    background:transparent;
    color:var(--muted);
    border:1px solid var(--border);
}
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); background:transparent; }

.btn-sm{
    padding:6px 14px;
    font-size:12.5px;
}

.btn i,
.btn svg{ margin-right:6px; }

.btn-green{
    background:#28a745;
}
.btn-green:hover{ background:#1e7e34; }

/* ---- Info ---- */
.info{
    margin-top:22px;
    font-size:12.5px;
    color:var(--muted);
    text-align:center;
    line-height:1.6;
}
.info b{ color:var(--text); }

/* ---- Footer ---- */
footer{
    text-align:center;
    margin-top:30px;
    font-size:11.5px;
    color:var(--muted);
    line-height:1.6;
}

/* ---- Not found ---- */
.not-found{
    text-align:center;
    padding:20px 0;
}
.not-found h2{ color:var(--text); margin:16px 0 8px; font-size:16px; }
.not-found small{ color:var(--muted); font-size:13px; display:block; margin-bottom:20px; }

/* ---- Modal (Bootstrap override for clean style) ---- */
.modal-content{
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.modal-header{
    border-bottom:1px solid var(--border);
    padding:16px 20px;
    text-align:center;
    display:block;
}
.modal-header h5{
    font-size:16px;
    font-weight:700;
    color:var(--blue);
    margin:0;
}
.modal-body{
    padding:20px;
}
.modal-footer{
    border-top:1px solid var(--border);
    padding:12px 20px;
}

/* ---- Utilities ---- */
.d-flex{ display:flex; }
.d-block{ display:block; }
.flex-column{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.align-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.gap-1{ gap:4px; }
.gap-2{ gap:8px; }
.gap-3{ gap:16px; }
.w-100{ width:100%; }
.text-center{ text-align:center; }
.text-muted{ color:var(--muted); }
.text-sm{ font-size:12px; }
.text-xs{ font-size:11px; }
.text-bold{ font-weight:700; }
.text-blue{ color:var(--blue); }
.mt-1{ margin-top:4px; }
.mt-2{ margin-top:8px; }
.mt-3{ margin-top:16px; }
.mb-1{ margin-bottom:4px; }
.mb-2{ margin-bottom:8px; }
.mb-3{ margin-bottom:16px; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.p-1{ padding:4px; }
.p-2{ padding:8px; }
.p-3{ padding:16px; }
.overflow-auto{ overflow-x:auto; }

/* ---- Responsive ---- */
@media (max-width:380px){
    .toggle{ flex-direction:column; }
    .toggle button + button{ border-left:none; border-top:1px solid var(--border); }
}