:root { --rojo:#b50d0d; --rojo-claro:#d41414; --amarillo:#FCD116; --negro:#0D0D0D; --gris:#6B7280; --fondo:#F8F6F1; --blanco:#FFFFFF; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--fondo); color:var(--negro); overflow-x:hidden; }

nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:18px 60px; display:flex; justify-content:space-between; align-items:center; background:rgba(248,246,241,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(181,13,13,.1); }
.logo { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; color:var(--rojo); text-decoration:none; }
.logo span { color:var(--negro); background:var(--amarillo); padding:0 6px; border-radius:3px; }
.nav-right { display:flex; align-items:center; gap:16px; }
.btn-back { background:none; border:2px solid var(--rojo); color:var(--rojo); padding:8px 20px; border-radius:6px; font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none; transition:all .2s; }
.btn-back:hover { background:var(--rojo); color:var(--blanco); }
.nav-user-info { display:flex; align-items:center; gap:10px; }
.nav-user-info img { width:32px; height:32px; border-radius:50%; border:2px solid var(--rojo); }
.nav-user-info span { font-weight:600; font-size:.9rem; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.page-hero { padding:120px 60px 60px; background:linear-gradient(135deg,var(--rojo) 0%,#7a0909 100%); color:var(--blanco); }
.page-hero-inner { max-width:1200px; margin:0 auto; }
.breadcrumb { font-size:.85rem; opacity:.7; margin-bottom:16px; }
.breadcrumb a { color:var(--blanco); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); font-weight:900; margin-bottom:16px; }
.page-hero p { opacity:.85; font-size:1.05rem; max-width:600px; line-height:1.7; }

.main { max-width:900px; margin:0 auto; padding:60px; }

/* Loading state */
.loading-state { text-align:center; padding:60px 0; color:var(--gris); font-size:1rem; }
.loading-state span { display:block; font-size:2rem; margin-bottom:12px; }

/* Empty state */
.empty-state { text-align:center; padding:80px 20px; }
.empty-state .empty-icon { font-size:4rem; margin-bottom:20px; }
.empty-state h2 { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; margin-bottom:12px; }
.empty-state p { color:var(--gris); font-size:.95rem; line-height:1.7; margin-bottom:28px; }
.btn-primary { display:inline-block; background:var(--rojo); color:var(--blanco); padding:12px 28px; border-radius:8px; font-size:.95rem; font-weight:600; text-decoration:none; transition:all .2s; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; }
.btn-primary:hover { background:var(--rojo-claro); }

/* Results list */
.results-list { display:flex; flex-direction:column; gap:16px; }

.result-card { background:var(--blanco); border-radius:16px; border:1px solid rgba(0,0,0,.07); overflow:hidden; transition:box-shadow .2s; }
.result-card:hover { box-shadow:0 6px 24px rgba(0,0,0,.08); }

.result-card-main { padding:20px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.result-type-badge { padding:4px 12px; border-radius:100px; font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; flex-shrink:0; }
.badge-unal { background:rgba(181,13,13,.1); color:var(--rojo); }
.badge-icfes { background:rgba(26,26,46,.1); color:#1A1A2E; }

.result-name { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; flex:1; min-width:160px; }

.result-score { font-size:1.25rem; font-weight:700; color:var(--negro); white-space:nowrap; }
.result-score-max { font-size:.8rem; font-weight:400; color:var(--gris); margin-left:2px; }

.result-date { font-size:.82rem; color:var(--gris); white-space:nowrap; }

/* Area breakdown via <details> */
.result-card details { border-top:1px solid rgba(0,0,0,.06); }
.result-card summary { padding:12px 24px; font-size:.82rem; font-weight:600; color:var(--gris); cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; user-select:none; }
.result-card summary::-webkit-details-marker { display:none; }
.result-card summary::before { content:'▸'; font-size:.7rem; transition:transform .2s; }
.result-card details[open] summary::before { transform:rotate(90deg); }
.result-card summary:hover { color:var(--rojo); }

.area-breakdown { padding:12px 24px 20px; display:flex; flex-direction:column; gap:8px; }
.area-row { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; }
.area-row-name { color:var(--negro); }
.area-row-score { font-weight:700; color:var(--rojo); }
.area-bar-wrap { flex:1; height:4px; background:rgba(0,0,0,.07); border-radius:4px; margin:0 12px; }
.area-bar-fill { height:4px; border-radius:4px; background:var(--rojo); }

/* Section heading */
.results-header { margin-bottom:28px; }
.results-header h2 { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; margin-bottom:6px; }
.results-header p { color:var(--gris); font-size:.9rem; }

/* Responsive */
@media (max-width:767px) {
    nav { padding:14px 20px; }
    .page-hero { padding:100px 20px 40px; }
    .main { padding:32px 16px; }

    .result-card-main { padding:16px; gap:10px; }
    .result-name { font-size:.92rem; }
    .result-score { font-size:1.1rem; }
    .area-breakdown { padding:10px 16px 16px; }
    .result-card summary { padding:10px 16px; }
}

@media (max-width:1023px) and (min-width:768px) {
    nav { padding:16px 32px; }
    .page-hero { padding:110px 32px 50px; }
    .main { padding:48px 32px; }
}