@font-face{ font-family:'Outfit'; src:url('/fonts/Outfit.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
:root{
  --brand:#1A3A5C; --accent:#2B7F71; --accent-ink:#1B6B5D; --accent-weak:#E7F5F1; --accent-tint:#B5E8DC;
  --ink:#152230; --ink2:#3E4C59; --muted:#6B7280; --line:#E5E7EB; --line2:#EEF1F3; --plane:#F5F7F9; --paper:#fff;
  --shadow-sm:0 1px 2px rgba(13,31,51,.04), 0 1px 3px rgba(13,31,51,.05);
  --shadow-md:0 2px 6px rgba(13,31,51,.05), 0 14px 30px rgba(13,31,51,.08);
  --ease-out:cubic-bezier(.23,1,.32,1); --radius:14px;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Outfit',system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--plane); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(1100px 520px at 50% -10%, rgba(43,127,113,.07), transparent 70%); }
a{ color:var(--accent); text-decoration:none; }

.seo-head{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:12px 22px; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.3) blur(10px); -webkit-backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line); }
.seo-head img{ display:block; height:30px; }
.seo-cta{ background:var(--accent); color:#fff; text-decoration:none; padding:9px 17px; border-radius:10px; font-weight:600; font-size:14px; box-shadow:0 1px 2px rgba(13,31,51,.12); transition:transform .16s var(--ease-out), box-shadow .2s var(--ease-out), background .2s; }
@media (hover:hover){ .seo-cta:hover{ background:var(--accent-ink); box-shadow:0 5px 16px rgba(43,127,113,.32); transform:translateY(-1px); } }
.seo-cta:active{ transform:translateY(0) scale(.97); }

.seo-main{ position:relative; z-index:1; max-width:860px; margin:0 auto; padding:30px 22px 56px; }
.crumbs{ font-size:13px; color:var(--muted); margin-bottom:16px; }
.crumbs a{ color:var(--accent); transition:color .15s; }
@media (hover:hover){ .crumbs a:hover{ color:var(--accent-ink); text-decoration:underline; } }
h1{ color:var(--brand); font-size:31px; line-height:1.12; letter-spacing:-.022em; font-weight:800; margin:0 0 12px; text-wrap:balance; }
h2{ color:var(--brand); font-size:20px; letter-spacing:-.015em; margin:32px 0 12px; text-wrap:balance; }
.lead{ color:var(--ink2); font-size:16.5px; margin:0 0 22px; max-width:64ch; }
.lead b{ color:var(--ink); }

.seo-ctabox{ background:linear-gradient(180deg,var(--accent-weak),#fff); border:1px solid var(--accent-tint); border-left:4px solid var(--accent); border-radius:var(--radius); padding:16px 18px; margin:22px 0 28px; font-size:15px; color:var(--ink2); box-shadow:var(--shadow-sm); }
.seo-ctabox b{ color:var(--brand); }
.seo-ctabox .seo-cta{ display:inline-block; margin-top:12px; }

.seo-cards{ list-style:none; padding:0; margin:10px 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.seo-cards li a{ position:relative; display:flex; flex-direction:column; justify-content:center; min-height:124px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .22s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s var(--ease-out); }
.seo-cards li a b{ color:var(--brand); display:block; font-weight:600; font-size:15px; line-height:1.35; padding-right:16px; }
.seo-cards li a span{ display:inline-block; align-self:flex-start; margin-top:8px; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-weak); border-radius:6px; padding:2px 8px; }
.seo-cards li a::after{ content:"\2192"; position:absolute; top:14px; right:14px; color:var(--accent); opacity:0; transform:translateX(-4px); transition:opacity .25s var(--ease-out), transform .25s var(--ease-out); }
@media (hover:hover){ .seo-cards li a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent-tint); } .seo-cards li a:hover::after{ opacity:1; transform:translateX(0); } }
.seo-cards li a:active{ transform:translateY(-1px) scale(.995); }

/* Tarjeta de universidad: logo enmarcado + nombre, en fila (elegante y consistente) */
.seo-cards li a.uni-card{ flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; min-height:0; }
.uni-logo-box{ width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; }
.uni-logo{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.uni-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.uni-card .uni-meta b{ padding-right:0; text-transform:none; }
.uni-card .uni-city{ display:inline; background:none; color:var(--muted); font-size:12.5px; font-weight:500; text-transform:none; letter-spacing:0; padding:0; margin:0; border-radius:0; }
table.tbl{ width:100%; border-collapse:separate; border-spacing:0; margin:8px 0 6px; font-size:14.5px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.tbl th,.tbl td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line2); }
.tbl thead th{ background:var(--plane); color:var(--brand); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.tbl td:last-child,.tbl th:last-child{ text-align:right; width:92px; font-variant-numeric:tabular-nums; }
.tbl tbody tr{ transition:background .15s; }
@media (hover:hover){ .tbl tbody tr:hover td{ background:var(--accent-weak); } }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tfoot td{ font-weight:700; color:var(--brand); background:var(--plane); border-top:1px solid var(--line); border-bottom:none; }
.seo-total{ font-size:16px; margin:18px 0; color:var(--ink2); }
.seo-total b{ color:var(--brand); }

.seo-foot{ position:relative; z-index:1; max-width:860px; margin:0 auto; padding:22px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); }
.seo-foot a{ color:var(--accent); }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
  @keyframes mp-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  .seo-main > *:not(.seo-cards){ animation:mp-rise .5s var(--ease-out) both; }
  .seo-main > *:nth-child(2):not(.seo-cards){ animation-delay:.06s; }
  .seo-main > *:nth-child(3):not(.seo-cards){ animation-delay:.12s; }
  .seo-main > *:nth-child(4):not(.seo-cards){ animation-delay:.18s; }
  .seo-main > *:nth-child(5):not(.seo-cards){ animation-delay:.24s; }
  .seo-main > *:nth-child(6):not(.seo-cards){ animation-delay:.30s; }
  @keyframes mp-card{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
  .seo-cards li{ animation:mp-card .45s var(--ease-out) both; }
  .seo-cards li:nth-child(2){ animation-delay:.04s; }
  .seo-cards li:nth-child(3){ animation-delay:.08s; }
  .seo-cards li:nth-child(4){ animation-delay:.12s; }
  .seo-cards li:nth-child(5){ animation-delay:.16s; }
  .seo-cards li:nth-child(6){ animation-delay:.20s; }
  .seo-cards li:nth-child(7){ animation-delay:.24s; }
  .seo-cards li:nth-child(8){ animation-delay:.28s; }
  .seo-cards li:nth-child(9){ animation-delay:.32s; }
  .seo-cards li:nth-child(n+10){ animation-delay:.36s; }
}

/* ===== Compartir mi progreso (página pública /p/{token}) ===== */
.share-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 20px; box-shadow:var(--shadow-md); }
.share-who b{ display:block; color:var(--brand); font-size:20px; font-weight:800; letter-spacing:-.01em; }
.share-who span{ display:block; color:var(--muted); font-size:13.5px; margin-top:3px; }
.share-pct{ display:flex; align-items:baseline; gap:2px; margin:16px 0 10px; color:var(--accent-ink); font-weight:800; letter-spacing:-.02em; line-height:1; }
.share-pct span{ font-size:52px; font-variant-numeric:tabular-nums; }
.share-pct i{ font-style:normal; font-size:24px; font-weight:700; }
.share-meter{ height:12px; border-radius:999px; background:var(--accent-weak); overflow:hidden; }
.share-meter > i{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-ink)); }
.share-sub{ margin-top:12px; color:var(--ink2); font-size:14.5px; font-variant-numeric:tabular-nums; }
.share-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 4px; align-items:start; }
.share-tile{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); }
.share-tile span{ display:block; color:var(--muted); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.share-tile b{ color:var(--brand); font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
.share-tile em{ color:var(--muted); font-style:normal; font-size:13px; margin-left:4px; }
.share-honorwrap .share-honor{ display:inline-flex; align-items:center; gap:6px; text-transform:none; letter-spacing:0; background:#FBF0DA; color:#9A6510; border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:700; line-height:1.2; }
.share-honorwrap{ margin-top:10px; }
.share-gone .lead{ margin-left:auto; margin-right:auto; }
.share-tbl td:last-child, .share-tbl th:last-child{ width:118px; }
.st{ display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.st-ok{ background:#E4F5EC; color:#1E7C46; }
.st-conv{ background:#EFEAFB; color:#6D45C7; }
.st-cur{ background:#FBF0DA; color:#9A6510; }
.st-enr{ background:#E5EEFC; color:#2559C4; }
.st-fail{ background:#FCE7E6; color:#C0392B; }
.st-wd{ background:#EEF1F3; color:#6B7280; }
.st-pend{ background:#EEF1F3; color:#6B7280; }
.share-gone{ text-align:center; padding:44px 0; }
.share-gone .seo-cta{ display:inline-block; margin-top:14px; }

/* Tablas públicas: mismas anchuras de columna en todas las tablas */
.seo-main table.tbl{ table-layout:fixed; }
.seo-main .tbl th:first-child, .seo-main .tbl td:first-child{ width:96px; }
.share-tbl .col-nota{ width:78px; text-align:right; }
/* Nombre de la asignatura en mayúsculas (solo visual, en escritorio y móvil) */
.share-tbl td[data-l="Asignatura"]{ text-transform:uppercase; }


/* ===== Agrupado por escuela + buscador en vivo ===== */
.seo-search{ margin:16px 0 4px; }
.seo-search input{ width:100%; max-width:440px; box-sizing:border-box; padding:11px 15px; font:inherit; font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); transition:border-color .18s var(--ease-out), box-shadow .2s var(--ease-out); }
.seo-search input::placeholder{ color:var(--muted); }
.seo-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.seo-school{ margin-top:6px; }
.seo-school-h{ display:flex; align-items:center; gap:10px; margin:26px 0 12px; }
.seo-school-n{ font-size:12px; font-weight:600; letter-spacing:0; color:var(--accent-ink); background:var(--accent-weak); border-radius:999px; padding:2px 10px; }
.seo-noresults{ color:var(--muted); font-size:15px; margin:20px 0; }
.seo-cards li[hidden], .seo-school[hidden]{ display:none; }


/* ===== Progreso compartido: tabla -> tarjetas en movil (evita que se descuadre) ===== */
@media (max-width:560px){
  .seo-main table.share-tbl{ table-layout:auto; }
  .share-tbl, .share-tbl tbody, .share-tbl tr, .share-tbl td{ display:block; }
  .share-tbl{ border:none; box-shadow:none; background:none; overflow:visible; margin:6px 0 4px; }
  .share-tbl thead{ display:none; }
  .share-tbl tr{
    display:flex; flex-direction:column;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:12px 15px 6px; margin-bottom:10px;
  }
  .share-tbl tr:last-child{ margin-bottom:0; }
  /* Filas etiqueta : valor */
  .share-tbl td{
    width:auto !important; display:flex; align-items:center; justify-content:space-between;
    gap:14px; text-align:right; padding:7px 0; border-bottom:none;
    font-size:14px; font-variant-numeric:tabular-nums; color:var(--ink);
  }
  .share-tbl td::before{
    content:attr(data-l); flex:0 0 auto; text-align:left;
    color:var(--muted); font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:.04em;
  }
  .share-tbl td.col-nota{ width:auto !important; text-align:right; }
  .share-tbl td:last-child, .share-tbl th:last-child{ width:auto; }
  /* Nombre de la asignatura = titulo de la tarjeta */
  .share-tbl td[data-l="Asignatura"]{
    order:-1; display:block; width:auto !important; text-align:left; font-weight:700; color:var(--brand);
    font-size:15.5px; line-height:1.32; padding:0 0 9px; margin:0 0 6px;
    border-bottom:1px solid var(--line2);
  }
  .share-tbl td[data-l="Asignatura"]::before{ display:none; }
}

/* Etiqueta de laboratorio (correquisito) en la tabla de pénsum */
.lab-tag{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:#E0F5F0;color:#1B6B5D;font-size:.8em;font-weight:600;white-space:nowrap;vertical-align:middle}