@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
  /* uarm.edu.pe declara "Open Sans" pero nunca la carga (sin <link> ni @font-face) —
     para la mayoría de visitantes cae al sans-serif del sistema. Igualamos eso, no la
     fuente "prevista". */

  :root{
    --bg:#F4F4F3;
    --surface:#FFFFFF;
    --surface-sunken:#EDEDEC;
    --ink:#242424;
    --ink-muted:#6B6B6B;
    --ink-faint:#9B9B9B;
    --line:#E2E2E0;
    --dark:#2C2C2C;
    --accent:#EA4E4A;
    --accent-strong:#C93A37;
    --accent-ink:#FFFFFF;
    --accent-wash:#FCE7E6;
    --green:#3F7350;
    --green-wash:#E1EBE3;
    --blue:#2F6690;
    --blue-wash:#DFEAF1;
    --gold:#B8862E;
    --gold-wash:#F3E9D3;
    --purple:#8C5AA8;
    --teal:#2E8C82;
    --rose:#C15A82;
    --slate:#5B6B7A;
    --wa-bubble:#DCF3D7;
    --shadow:0 1px 2px rgba(20,20,20,0.05), 0 10px 26px -14px rgba(20,20,20,0.18);
    --radius:10px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#171717;
      --surface:#212121;
      --surface-sunken:#292929;
      --ink:#F1F1EF;
      --ink-muted:#B4B0AA;
      --ink-faint:#7E7A74;
      --line:#343434;
      --dark:#0F0F0F;
      --accent:#FF7370;
      --accent-strong:#FF938F;
      --accent-ink:#241010;
      --accent-wash:#3A2422;
      --green:#7FB58C;
      --green-wash:#22302A;
      --blue:#7FB4DA;
      --blue-wash:#1D2C36;
      --gold:#DDB35C;
      --gold-wash:#372D1A;
      --purple:#B99BD1;
      --teal:#6FC4B9;
      --rose:#E091B3;
      --slate:#9BA9B6;
      --wa-bubble:#1F3B2A;
      --shadow:0 1px 2px rgba(0,0,0,0.35), 0 10px 26px -14px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --bg:#171717; --surface:#212121; --surface-sunken:#292929;
    --ink:#F1F1EF; --ink-muted:#B4B0AA; --ink-faint:#7E7A74; --line:#343434; --dark:#0F0F0F;
    --accent:#FF7370; --accent-strong:#FF938F; --accent-ink:#241010; --accent-wash:#3A2422;
    --green:#7FB58C; --green-wash:#22302A; --blue:#7FB4DA; --blue-wash:#1D2C36;
    --gold:#DDB35C; --gold-wash:#372D1A;
    --purple:#B99BD1; --teal:#6FC4B9; --rose:#E091B3; --slate:#9BA9B6;
    --wa-bubble:#1F3B2A;
    --shadow:0 1px 2px rgba(0,0,0,0.35), 0 10px 26px -14px rgba(0,0,0,0.55);
  }

  *{ box-sizing:border-box; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--accent-wash); color:var(--accent-strong); }
  button{ font-family:inherit; }
  /* varios de estos son <a> en el server real (no <button onclick>) — quitamos
     el subrayado/azul por defecto del navegador para que se vean igual. */
  .cta-pill, .filter-pill, .overflow-toggle, .see-all, .admin-icon-btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

  .shell{ max-width:1280px; margin:0 auto; padding:0 32px 90px; }
  @media (max-width:480px){
    .shell{ padding:0 16px 70px; }
    .topbar{ margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  }

  /* ---- utility bar (matches uarm.edu.pe dark strip) ---- */
  .utility-bar{
    background:var(--dark); color:#D8D8D6;
    font-size:11.5px; font-weight:600; letter-spacing:0.02em;
    display:flex; gap:22px; padding:8px 24px; overflow-x:auto;
  }
  .utility-bar span{ white-space:nowrap; opacity:0.85; }
  .utility-bar span.hl{ color:#fff; opacity:1; }

  /* ---- topbar ---- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:16px 0;
    border-bottom:1px solid var(--line);
    margin-bottom:22px;
    background:#FFFFFF; margin-left:-32px; margin-right:-32px; padding-left:32px; padding-right:32px;
  }
  .brand{ display:flex; align-items:center; gap:11px; }
  .crest-img{ height:40px; width:auto; display:block; }

  nav.primary-nav{ display:flex; gap:24px; }
  nav.primary-nav a{
    font-size:13.5px; font-weight:700; color:var(--ink-muted);
    text-decoration:none; padding:8px 0; border-bottom:2px solid transparent;
    text-transform:uppercase; letter-spacing:0.01em;
  }
  nav.primary-nav a.active{ color:var(--ink); border-color:var(--accent); }

  .nav-toggle{
    display:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
    background:var(--surface); color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
  }
  @media (max-width:640px){
    nav.primary-nav{
      display:none; position:absolute; left:0; right:0; top:100%;
      flex-direction:column; gap:0; background:var(--surface); border-bottom:1px solid var(--line);
      box-shadow:var(--shadow); padding:6px 24px 10px; z-index:20;
    }
    nav.primary-nav.is-open{ display:flex; }
    nav.primary-nav a{ padding:12px 0; border-bottom:1px solid var(--line); }
    nav.primary-nav a:last-child{ border-bottom:none; }
    .nav-toggle{ display:flex; }
    .topbar{ position:relative; }
  }

  .topbar-right{ display:flex; align-items:center; gap:12px; }
  .search-btn{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-muted); display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .avatar{
    width:34px; height:34px; border-radius:50%;
    background:var(--dark); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:12.5px;
    border:none; font-family:inherit; cursor:pointer; flex-shrink:0;
  }

  .user-menu-wrap{ position:relative; }
  .user-menu{
    position:absolute; top:calc(100% + 10px); right:0; width:250px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:14px; z-index:30;
  }
  .user-menu-head{ display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid var(--line); }
  .user-menu-head .avatar{ width:38px; height:38px; font-size:13px; }
  .user-menu-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
  .user-menu-role{ font-size:11px; color:var(--ink-faint); }
  .user-menu-item{
    display:flex; align-items:center; gap:10px; padding:9px 6px; border-radius:8px;
    font-size:13px; font-weight:600; color:var(--ink); text-decoration:none;
  }
  .user-menu-item:hover{ background:var(--surface-sunken); }
  .user-menu-item.is-danger{ color:var(--accent); }
  .user-menu-sep{ height:1px; background:var(--line); margin:6px 0; }

  /* ---- perfil switch (demo) ---- */
  .demo-strip{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    background:var(--surface-sunken); border:1px solid var(--line); border-radius:100px;
    padding:6px 6px 6px 16px; margin-bottom:26px;
  }
  .demo-strip .label{ font-size:12px; color:var(--ink-muted); }
  .switch-group{ display:flex; gap:4px; background:var(--surface); border-radius:100px; padding:3px; border:1px solid var(--line); }
  .switch-group button{
    border:none; background:transparent; padding:7px 16px; border-radius:100px;
    font-size:12.5px; font-weight:700; color:var(--ink-muted); cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .switch-group button.is-active{ background:var(--accent); color:var(--accent-ink); }

  /* ---- greeting ---- */
  .greeting{ margin-bottom:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .greeting .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;
  }
  h1.greeting-title{
    font-weight:800; font-size:clamp(24px,4vw,29px); letter-spacing:-0.01em;
    margin:0 0 6px; text-wrap:balance;
  }
  .greeting p{ margin:0; font-size:13.5px; color:var(--ink-muted); }
  .cta-pill{
    background:var(--accent); color:var(--accent-ink); border:none; border-radius:100px;
    padding:11px 20px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
  }

  /* ---- layout ---- */
  .dashboard{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
  @media (max-width:760px){ .dashboard{ grid-template-columns:1fr; } }
  .col{ display:flex; flex-direction:column; gap:18px; }

  .widget{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .widget.is-dragging{ opacity:0.4; }
  .col{ min-height:40px; }
  .col.is-over{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:var(--radius); }
  .drop-marker{ height:3px; margin:-9px 0 6px; border-radius:2px; background:var(--accent); }
  .widget-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:15px 18px 11px;
  }
  .widget-head h2{
    font-weight:800; font-size:14.5px; margin:0; text-transform:uppercase; letter-spacing:0.02em;
    display:flex; align-items:center; gap:8px; color:var(--ink);
  }
  .rail{ width:4px; height:15px; background:var(--accent); border-radius:2px; flex-shrink:0; }
  .drag{ display:flex; gap:2px; cursor:grab; color:var(--ink-faint); padding:4px; margin-left:4px; }
  .drag span{ width:3px; height:3px; border-radius:50%; background:currentColor; }
  .widget-head .see-all{ font-size:11.5px; font-weight:700; color:var(--accent); text-decoration:none; text-transform:uppercase; letter-spacing:0.02em; }

  /* noticias */
  .news-feature{ display:block; position:relative; margin:0 18px 14px; border-radius:8px; overflow:hidden; aspect-ratio:16/8; }
  .news-feature img{ width:100%; height:100%; object-fit:cover; display:block; }
  .news-feature .tag{
    position:absolute; top:12px; left:12px;
    font-size:10px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    background:var(--accent); color:var(--accent-ink); padding:4px 10px; border-radius:100px;
  }
  .news-feature .cap{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(0deg, rgba(15,15,15,0.92), rgba(15,15,15,0));
    color:#fff; padding:44px 16px 14px;
  }
  .news-feature .cap .headline{ font-weight:700; font-size:15.5px; line-height:1.3; margin-bottom:4px; }
  .news-feature .cap .dek-mini{ color:rgba(255,255,255,0.8); }
  .news-list{ list-style:none; margin:0; padding:0 18px 18px; display:flex; flex-direction:column; }
  .news-list li{ display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
  .news-list li:first-child{ border-top:none; }
  .news-list .dot-sede{ width:7px; height:7px; border-radius:50%; margin-top:6px; flex-shrink:0; }
  .news-list .body{ flex:1; }
  .news-list .sede{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-faint); }
  .news-list .headline{ font-size:13.5px; font-weight:700; margin-top:2px; }
  .dek-mini{
    font-size:11.5px; line-height:1.4; color:var(--ink-faint); margin-top:3px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .sede-centro{ background:var(--accent); }
  .sede-norte{ background:var(--gold); }
  .sede-virtual{ background:var(--blue); }

  /* aplicativos */
  .apps-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(58px,1fr)); gap:10px; padding:0 18px 18px; }
  .app-tile{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; position:relative; }
  .app-icon{
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--line); color:var(--accent); font-size:18px;
    overflow:hidden;
  }
  .app-icon img{ width:66%; height:66%; object-fit:contain; display:block; }
  .ti-icon{ width:22px; height:22px; }
  .app-icon.initials{
    background:var(--tile-color, var(--accent)); border:none; color:#fff;
    font-weight:800; font-size:14px; letter-spacing:0.02em; font-family:'JetBrains Mono',monospace;
  }
  .app-tile.pinned .app-icon::after{ content:'📌'; position:absolute; top:-4px; right:6px; font-size:10px; }
  .app-tile span.name{ font-size:10.5px; color:var(--ink-muted); line-height:1.25; font-weight:600; }
  .app-tile.add .app-icon{ border:1.5px dashed var(--line); background:transparent; color:var(--ink-faint); font-size:20px; }
  .app-tile.add span.name{ color:var(--ink-faint); }

  /* cumpleaños */
  #widget-cumple{ transition:opacity .2s ease; }
  .cumple-list{ list-style:none; margin:0; padding:0 18px 16px; display:flex; flex-direction:column; gap:12px; }
  .cumple-row{ display:flex; align-items:center; gap:11px; }
  .cumple-photo{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:12.5px;
  }
  .cumple-name{ font-size:13px; font-weight:700; }
  .cumple-role{ font-size:11.5px; color:var(--ink-faint); }
  .cumple-greet{
    margin-left:auto; border:1px solid var(--line); background:var(--surface);
    color:var(--accent); font-size:11.5px; font-weight:700; padding:6px 11px; border-radius:100px;
    cursor:pointer; white-space:nowrap;
  }
  .cumple-greet.sent{ background:var(--accent-wash); color:var(--accent-strong); border-color:transparent; }

  /* enlaces */
  .link-list{ list-style:none; margin:0; padding:0 18px 18px; display:flex; flex-direction:column; gap:2px; }
  .link-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
  .link-row:first-child{ border-top:none; }
  .link-row .glyph{ color:var(--accent); font-size:12px; }
  .link-row a{ font-size:13px; color:var(--ink); text-decoration:none; font-weight:600; }
  .link-row a:hover{ color:var(--accent); }
  .link-row .edit{ margin-left:auto; font-size:11px; color:var(--ink-faint); cursor:pointer; padding:2px 4px; }
  .link-drag{ display:flex; flex-wrap:wrap; width:9px; gap:2px; cursor:grab; flex-shrink:0; }
  .link-drag span{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); }
  .link-row.is-link-dragging{ opacity:0.4; }
  #my-links-list.is-drag-over{ outline:2px dashed var(--accent); outline-offset:-4px; border-radius:8px; }
  .link-row .edit:hover{ color:var(--accent); }
  .link-row.is-editing{ flex-direction:column; align-items:stretch; gap:6px; padding:10px 0; }
  .link-edit-input{
    font-family:inherit; font-size:12.5px; padding:8px 10px; border:1px solid var(--line);
    border-radius:7px; background:var(--surface); color:var(--ink); width:100%;
  }
  .link-edit-actions{ display:flex; gap:6px; margin-top:2px; }
  .link-edit-actions button{
    font-family:inherit; font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:100px;
    cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
  }
  .link-edit-save{ background:var(--accent) !important; color:var(--accent-ink) !important; border-color:var(--accent) !important; }
  .link-edit-delete{ margin-left:auto; color:var(--accent) !important; }

  .locked-note{ display:flex; align-items:center; gap:8px; padding:14px 18px 18px; font-size:11.5px; color:var(--ink-faint); }

  .overflow-toggle{
    display:block; width:calc(100% - 36px); margin:2px 18px 16px;
    background:var(--surface-sunken); border:1px solid var(--line); border-radius:8px;
    padding:9px; font-size:12px; font-weight:700; color:var(--ink-muted); cursor:pointer;
    text-align:center;
  }
  .overflow-toggle:hover{ color:var(--accent); border-color:var(--accent); }

  /* ---- vista de artículo ---- */
  .breadcrumb{ display:flex; gap:8px; font-size:12.5px; color:var(--ink-faint); margin-bottom:20px; }
  .breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
  .breadcrumb a:hover{ color:var(--accent); }
  .breadcrumb span:last-child{ color:var(--ink-muted); font-weight:600; }

  .article-layout{ display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; }
  @media (max-width:900px){ .article-layout{ grid-template-columns:1fr; } }

  .article-tag{
    display:inline-block; background:var(--accent); color:var(--accent-ink);
    font-size:10.5px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    padding:4px 10px; border-radius:100px; margin-bottom:14px;
  }
  .article-title{
    font-weight:800; font-size:clamp(24px,4vw,32px); line-height:1.2; letter-spacing:-0.01em;
    margin:0 0 10px; text-wrap:balance;
  }
  .article-dek{
    font-size:19px; line-height:1.5; color:var(--ink-muted); margin:0 0 18px; max-width:75ch; text-wrap:pretty; font-weight:500;
  }
  .article-meta-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
  .article-meta{ font-size:12.5px; color:var(--ink-faint); }
  .article-share.article-share-top{ margin:0; padding:0; border:none; }
  .meta-sep{ margin:0 6px; }
  .article-hero{ border-radius:10px; overflow:hidden; aspect-ratio:16/8; margin-bottom:24px; }
  .article-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
  .article-body{ font-size:15px; line-height:1.75; color:var(--ink); }
  .article-body p{ margin:0 0 18px; }
  .article-body a{ color:var(--accent); font-weight:600; }
  .article-callout{
    background:var(--accent-wash); border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
    padding:14px 18px; margin:0 0 18px; font-size:14px;
  }
  .article-share{ display:flex; align-items:center; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint); }
  .share-btn{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
    color:var(--ink-muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .share-btn:hover{ color:var(--accent); border-color:var(--accent); }
  .share-btn.copied{ color:var(--green); border-color:var(--green); background:var(--green-wash); }

  .article-aside{
    display:flex; flex-direction:column; gap:16px;
    position:sticky; top:24px;
  }
  @media (max-width:900px){ .article-aside{ position:static; } }
  .aside-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:18px;
  }
  .aside-title{ font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:14px; }
  .aside-item{ display:flex; gap:11px; padding:12px 0; border-top:1px solid var(--line); cursor:pointer; }
  .aside-item:first-of-type{ border-top:none; }
  .aside-item .thumb{ width:56px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; }
  .aside-item .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .aside-item .sede{ display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-faint); }
  .aside-item .sede .dot-sede{ width:6px; height:6px; border-radius:50%; }
  .aside-item .headline{ font-size:12.5px; font-weight:700; margin-top:3px; line-height:1.3; }
  .aside-item:hover .headline{ color:var(--accent); }

  /* imagen en línea con pie de foto */
  .article-figure{ margin:24px 0; }
  .article-figure img{ width:100%; border-radius:8px; display:block; aspect-ratio:16/9; object-fit:cover; }
  .article-figure figcaption{ font-size:12px; color:var(--ink-faint); margin-top:8px; line-height:1.4; }

  /* cita destacada */
  .article-quote{
    position:relative; margin:28px 0; padding:4px 0 4px 24px; border-left:3px solid var(--accent);
  }
  .article-quote p{
    font-size:19px; line-height:1.5; font-weight:600; color:var(--ink); margin:0 0 10px;
    font-style:italic; text-wrap:balance;
  }
  .article-quote cite{ font-style:normal; font-size:12.5px; color:var(--ink-muted); font-weight:600; }
  .article-quote cite span{ display:block; font-weight:400; color:var(--ink-faint); font-size:11.5px; margin-top:1px; }

  .article-body h2{ font-weight:800; font-size:19px; margin:32px 0 14px; letter-spacing:-0.005em; }

  .news-feature, .news-list li{ cursor:pointer; }

  /* ---- modal de compartir por correo ---- */
  .share-overlay{
    position:fixed; inset:0; background:rgba(15,12,10,0.55); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:24px; z-index:100;
  }
  .share-modal{
    background:var(--bg); border-radius:14px; box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);
    width:100%; max-width:680px; max-height:90vh; overflow-y:auto; padding:28px 32px;
  }
  @media (max-width:480px){
    .share-overlay{ padding:0; align-items:flex-end; }
    .share-modal{ max-width:100%; border-radius:16px 16px 0 0; padding:20px 18px; max-height:85vh; }
  }
  .share-modal-head{ display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; }
  .share-modal-title{ font-weight:800; font-size:17px; margin-bottom:8px; }
  .share-modal-note{
    display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--ink-muted);
    background:var(--accent-wash); border-radius:8px; padding:10px 12px;
  }
  .share-modal-note .ti-icon{ color:var(--accent); margin-top:2px; }
  .share-modal-close{
    width:28px; height:28px; border-radius:50%; border:none; background:var(--surface-sunken);
    color:var(--ink-muted); cursor:pointer; flex-shrink:0; font-size:13px;
  }
  .share-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
  @media (max-width:520px){ .share-fields{ grid-template-columns:1fr; } }
  .share-fields label{ font-size:11.5px; font-weight:700; color:var(--ink-muted); display:flex; flex-direction:column; gap:4px; }
  .share-fields input{
    font-family:inherit; font-size:13.5px; color:var(--ink); padding:9px 12px;
    border:1px solid var(--line); border-radius:8px; background:var(--surface);
  }
  .share-email-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-faint); margin-bottom:8px; }

  .email-preview{
    border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#FFFFFF;
  }
  .email-preview-header{
    background:#2C2C2C; color:#D8D8D6; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  }
  .crest-mini{ font-weight:800; font-size:13px; color:#fff; letter-spacing:0.02em; }
  .email-preview-from{ font-size:11px; color:#9B9490; }
  .email-body{ padding:22px 20px; }
  .email-tag{
    display:inline-block; background:#EA4E4A; color:#fff; font-size:10px; font-weight:800;
    letter-spacing:0.03em; text-transform:uppercase; padding:3px 9px; border-radius:100px; margin-bottom:10px;
  }
  .email-body h3{ font-size:18px; font-weight:800; line-height:1.3; color:#242424; margin:0 0 6px; }
  .email-meta{ font-size:11.5px; color:#8A8078; margin-bottom:14px; }
  .email-img{ width:100%; border-radius:6px; display:block; margin-bottom:14px; aspect-ratio:16/9; object-fit:cover; }
  .email-excerpt{ font-size:13.5px; line-height:1.65; color:#3A3532; margin-bottom:18px; }
  .email-cta{
    display:inline-block; background:#EA4E4A; color:#fff !important; font-size:13px; font-weight:700;
    padding:10px 18px; border-radius:100px; text-decoration:none;
  }
  .email-footer{ margin-top:20px; padding-top:14px; border-top:1px solid #EDEDEC; font-size:10.5px; color:#ADA79F; }

  .og-note{
    display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--ink-muted);
    background:var(--gold-wash); border-radius:8px; padding:10px 12px; margin-bottom:12px;
  }
  .og-note .ti-icon{ color:var(--gold); margin-top:2px; }

  /* burbuja tipo chat para previsualizar el link card */
  .wa-bubble{ background:var(--wa-bubble); border-radius:12px 12px 12px 2px; padding:8px; max-width:340px; }
  .wa-link-card{ background:#fff; border-radius:8px 8px 0 0; overflow:hidden; }
  .wa-link-img{ width:100%; aspect-ratio:1.9/1; object-fit:cover; display:block; }
  .wa-link-body{ padding:8px 10px; }
  .wa-link-title{ font-size:12.5px; font-weight:700; color:#111; line-height:1.3; margin-bottom:2px; }
  .wa-link-domain{ font-size:10.5px; color:#6B6B6B; text-transform:uppercase; letter-spacing:0.02em; }
  .wa-link-url{ font-size:12.5px; color:#1A1A1A; padding:6px 8px 2px; word-break:break-all; }

  /* ---- buscador de aplicativos ---- */
  .app-search{
    width:100%; font-family:inherit; font-size:14px; color:var(--ink); padding:11px 14px;
    border:1px solid var(--line); border-radius:9px; background:var(--surface); margin-bottom:6px;
  }
  .app-picker-count{ font-size:11.5px; color:var(--ink-faint); margin-bottom:10px; }
  .app-picker-list{ display:flex; flex-direction:column; gap:2px; max-height:340px; overflow-y:auto; }
  .app-picker-row{
    display:flex; align-items:center; gap:12px; padding:9px 6px; border-radius:8px;
  }
  .app-picker-row:hover{ background:var(--surface-sunken); }
  .app-picker-row .app-icon{ width:38px; height:38px; flex-shrink:0; }
  .app-picker-row .info{ flex:1; min-width:0; }
  .app-picker-row .info .name{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .app-picker-row .info .pinned-tag{ font-size:10.5px; color:var(--ink-faint); }
  .app-picker-add{
    flex-shrink:0; border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    font-size:12px; font-weight:700; padding:7px 14px; border-radius:100px; cursor:pointer;
  }
  .app-picker-add:hover{ border-color:var(--accent); color:var(--accent); }
  .app-picker-add.is-added{ background:var(--green-wash); border-color:transparent; color:var(--green); }
  .app-picker-add:disabled{ opacity:0.4; cursor:not-allowed; }
  .app-picker-empty{ text-align:center; color:var(--ink-faint); font-size:13px; padding:24px 0; }

  /* ---- listado de noticias ---- */
  .noticia-featured{
    display:block; position:relative; border-radius:14px; overflow:hidden; margin-bottom:26px;
    aspect-ratio:21/8; cursor:pointer; box-shadow:var(--shadow);
  }
  .noticia-featured img{ width:100%; height:100%; object-fit:cover; display:block; }
  .noticia-featured .tag{
    position:absolute; top:18px; left:18px;
    font-size:10.5px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    background:var(--accent); color:var(--accent-ink); padding:5px 12px; border-radius:100px;
  }
  .noticia-featured .eyebrow-featured{
    position:absolute; top:18px; right:18px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:#fff; opacity:0.85;
  }
  .noticia-featured .cap{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(0deg, rgba(15,15,15,0.92), rgba(15,15,15,0));
    color:#fff; padding:60px 28px 24px;
  }
  .noticia-featured .cap h2{
    font-size:clamp(20px,3vw,28px); font-weight:800; line-height:1.25; margin:0 0 8px; text-wrap:balance; max-width:70ch;
  }
  .noticia-featured .cap .dek{
    font-size:13.5px; line-height:1.4; opacity:0.9; margin:0 0 8px; max-width:60ch;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  }
  .noticia-featured .cap .meta{ font-size:12px; opacity:0.85; display:flex; align-items:center; gap:6px; }
  .noticia-featured .cap .meta .dot-sede{ width:6px; height:6px; border-radius:50%; background:#fff !important; }
  @media (max-width:640px){ .noticia-featured{ aspect-ratio:4/5; } }

  .noticia-featured-row{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin-bottom:26px;
  }
  .noticia-featured-cell{
    position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; cursor:pointer; box-shadow:var(--shadow);
  }
  .noticia-featured-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
  .noticia-featured-cell .tag{
    position:absolute; top:14px; left:14px;
    font-size:10px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    background:var(--accent); color:var(--accent-ink); padding:4px 10px; border-radius:100px;
  }
  .noticia-featured-cell .cap{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(0deg, rgba(15,15,15,0.92), rgba(15,15,15,0));
    color:#fff; padding:44px 16px 16px;
  }
  .noticia-featured-cell .cap h2{ font-size:15.5px; font-weight:800; line-height:1.3; margin:0 0 6px; }
  .noticia-featured-cell .cap .meta{ font-size:11px; opacity:0.85; display:flex; align-items:center; gap:5px; }
  .noticia-featured-cell .cap .meta .dot-sede{ width:6px; height:6px; border-radius:50%; background:#fff; }

  /* flechas y puntos superpuestos sobre el banner grande, cuando hay más de una destacada */
  .fc-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%; border:none; background:rgba(15,12,10,0.45);
    color:#fff; font-size:19px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(2px);
  }
  .fc-arrow:hover{ background:rgba(15,12,10,0.7); }
  .fc-arrow-prev{ left:16px; }
  .fc-arrow-next{ right:16px; }
  .fc-dots-overlay{
    position:absolute; right:20px; bottom:22px; display:flex; gap:6px; z-index:1;
  }
  .fc-dot{ width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,0.5); cursor:pointer; padding:0; }
  .fc-dot.is-active{ background:#fff; width:16px; border-radius:3px; }

  .noticias-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
  .filter-pill{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:100px; cursor:pointer;
  }
  .filter-pill .dot-sede{ width:7px; height:7px; border-radius:50%; }
  .filter-pill.is-active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .filter-pill.is-active .dot-sede{ background:#fff !important; }

  .noticias-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px;
    margin-bottom:28px;
  }
  /* las tarjetas/links del server-side son <a>, no <div onclick>: quitamos el
     estilo de enlace por defecto del navegador para que se vean como el mockup. */
  .noticia-card, .news-feature, .noticia-featured, .aside-item, .app-tile{ text-decoration:none; color:inherit; }
  .noticia-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden; cursor:pointer;
  }
  .noticia-card .thumb-wrap{ position:relative; aspect-ratio:16/9; }
  .noticia-card .thumb-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
  .noticia-card .tag{
    position:absolute; top:10px; left:10px;
    font-size:10px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    background:var(--accent); color:var(--accent-ink); padding:4px 10px; border-radius:100px;
  }
  .destacada-badge{
    position:absolute; top:10px; right:10px;
    background:rgba(15,12,10,0.55); backdrop-filter:blur(2px); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:0.02em;
    padding:4px 9px; border-radius:100px;
  }
  .noticia-card .card-body{ padding:14px 16px 16px; }
  .noticia-card .sede{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:5px; margin-bottom:6px; }
  .noticia-card .headline{ font-size:14px; font-weight:700; line-height:1.35; margin-bottom:5px; }
  .noticia-card .dek{
    font-size:12px; line-height:1.45; color:var(--ink-muted); margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .noticia-card .date{ font-size:11px; color:var(--ink-faint); }
  .noticia-card:hover .headline{ color:var(--accent); }

  .noticias-load-more{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:20px; }
  .noticias-count{ font-size:12px; color:var(--ink-faint); }

  /* ---- directorio ---- */
  .dir-search-row{ margin-bottom:14px; max-width:420px; }
  .dir-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px;
    margin-bottom:26px;
  }
  .dir-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:12px; height:100%;
  }
  .dir-card-top{ display:flex; gap:12px; align-items:flex-start; }
  .dir-avatar{
    width:46px; height:46px; border-radius:50%; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:var(--tile-color, var(--accent)); color:#fff; font-weight:800; font-size:14px;
    font-family:'JetBrains Mono',monospace;
  }
  .dir-avatar img{ width:100%; height:100%; object-fit:cover; }
  .dir-info{ min-width:0; flex:1; }
  .dir-name{ font-size:13.5px; font-weight:700; line-height:1.3; margin-bottom:2px; }
  .dir-role{ font-size:11.5px; color:var(--ink-muted); margin-bottom:2px; }
  .dir-area{ font-size:11px; color:var(--ink-faint); margin-bottom:8px; }
  .dir-sede{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:5px; }
  .dir-sede .dot-sede{ width:6px; height:6px; border-radius:50%; }
  .dir-contact{
    display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--accent);
    background:var(--surface); font-family:inherit; cursor:pointer;
    border:1px solid var(--line); border-radius:100px; padding:6px 12px;
    margin-top:auto; align-self:flex-start;
  }
  .dir-contact:hover{ border-color:var(--accent); }
  .dir-contact:hover{ border-color:var(--accent); }
  .dir-empty{ grid-column:1 / -1; text-align:center; color:var(--ink-faint); font-size:13px; padding:30px 0; }

  .contact-card-head{ display:flex; gap:12px; align-items:center; margin-bottom:18px; }
  .contact-fields{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; padding:14px; background:var(--surface-sunken); border-radius:10px; }
  .contact-field{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
  .contact-label{ color:var(--ink-faint); font-weight:600; }
  .contact-field span:last-child{ color:var(--ink); font-weight:600; text-align:right; }

  /* ---- búsqueda global ---- */
  .gsearch-results{ max-height:60vh; overflow-y:auto; margin-top:8px; }
  .gsearch-group{ margin-top:16px; }
  .gsearch-group-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-faint); margin-bottom:6px; padding:0 4px; }
  .gsearch-row{
    display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:8px; cursor:pointer;
  }
  .gsearch-row:hover{ background:var(--surface-sunken); }
  .gsearch-row .gsearch-icon{
    width:32px; height:32px; border-radius:9px; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-sunken); color:var(--accent);
  }
  .gsearch-row .gsearch-icon img{ width:100%; height:100%; object-fit:cover; }
  .gsearch-row .gsearch-icon.is-person{ background:var(--tile-color,var(--accent)); color:#fff; font-weight:800; font-size:11px; font-family:'JetBrains Mono',monospace; }
  .gsearch-row .gsearch-title{ font-size:13px; font-weight:600; color:var(--ink); }
  .gsearch-row .gsearch-sub{ font-size:11px; color:var(--ink-faint); }
  .gsearch-empty{ text-align:center; color:var(--ink-faint); font-size:13px; padding:28px 0; }
  .gsearch-hint{ text-align:center; color:var(--ink-faint); font-size:12.5px; padding:24px 0; }

  /* ---- preferencias ---- */
  .pref-row{ margin-bottom:10px; }
  .pref-label{ font-size:13px; font-weight:700; color:var(--ink); }
  .pref-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
  #theme-switch button{ flex:1; }
  .pref-toggle{
    display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink);
    padding:8px 2px; cursor:pointer;
  }
  .pref-toggle input{ width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }

  /* ---- perfil + mural de cumpleaños ---- */
  .cumple-name-btn{ background:none; border:none; padding:0; font:inherit; text-align:left; cursor:pointer; color:var(--ink); }
  .cumple-name-btn:hover{ color:var(--accent); }
  .profile-privacy-note{ font-size:11.5px; color:var(--ink-faint); margin-bottom:16px; }
  .mural-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-faint); margin-bottom:10px; }
  .mural-list{ display:flex; flex-direction:column; gap:12px; max-height:240px; overflow-y:auto; }
  .mural-empty{ font-size:12.5px; color:var(--ink-faint); padding:12px 0; }
  .mural-item{ display:flex; gap:10px; }
  .mural-item .dir-avatar{ width:30px; height:30px; font-size:10px; flex-shrink:0; }
  .mural-item-body{ background:var(--surface-sunken); border-radius:10px; padding:9px 12px; flex:1; }
  .mural-item-from{ font-size:11.5px; font-weight:700; margin-bottom:2px; }
  .mural-item-text{ font-size:12.5px; color:var(--ink-muted); line-height:1.4; }

  /* ---- administración ---- */
  .admin-layout{ display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:start; }
  @media (max-width:700px){ .admin-layout{ grid-template-columns:1fr; } }
  .admin-nav{ display:flex; flex-direction:column; gap:2px; position:sticky; top:24px; }
  .admin-nav-item{
    display:flex; align-items:center; gap:9px; text-align:left; width:100%;
    background:none; border:none; border-radius:8px; padding:10px 12px; text-decoration:none;
    font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-muted); cursor:pointer;
  }
  .admin-nav-item:hover{ background:var(--surface-sunken); }
  .admin-nav-item.is-active{ background:var(--accent-wash); color:var(--accent-strong); }
  .admin-nav-badge{
    margin-left:auto; background:var(--gold); color:#fff; font-size:10px; font-weight:800;
    border-radius:100px; padding:1px 7px; display:none;
  }
  .admin-nav-badge.show{ display:inline-block; }

  .admin-section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .admin-section-title{ font-weight:800; font-size:17px; }
  .admin-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
  .admin-table-wrap{ overflow-x:auto; border-radius:var(--radius); }
  .admin-table th{
    text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    color:var(--ink-faint); padding:10px 14px; background:var(--surface-sunken); border-bottom:1px solid var(--line); white-space:nowrap;
  }
  .admin-table td{ padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink); vertical-align:middle; }
  .admin-table tr:last-child td{ border-bottom:none; }
  .admin-table tr:hover td{ background:var(--surface-sunken); }
  .admin-filters{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }

  .status-pill{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; white-space:nowrap; }
  .status-pill.borrador{ background:var(--surface-sunken); color:var(--ink-faint); }
  .status-pill.pendiente{ background:var(--gold-wash); color:var(--gold); }
  .status-pill.aprobada{ background:var(--green-wash); color:var(--green); }
  .status-pill.publicada{ background:var(--accent-wash); color:var(--accent-strong); }

  .admin-row-actions{ display:flex; gap:6px; }
  .admin-icon-btn{
    width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:var(--surface);
    color:var(--ink-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
    text-decoration:none; gap:5px; font-size:12px; font-weight:700;
  }
  .admin-icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .admin-icon-btn.is-approve{ color:var(--green); }
  .admin-icon-btn.is-approve:hover{ border-color:var(--green); }
  .admin-icon-btn.is-delete:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }

  .admin-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
  @media (max-width:520px){ .admin-form-grid{ grid-template-columns:1fr; } }
  .admin-form-grid label, .admin-field{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; font-weight:700; color:var(--ink-muted); }
  .admin-field.full{ grid-column:1 / -1; }
  .admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea{
    font-family:inherit; font-size:13px; color:var(--ink); padding:9px 11px;
    border:1px solid var(--line); border-radius:8px; background:var(--surface);
  }
  .icon-preview-row{ display:flex; align-items:center; gap:10px; }
  .icon-preview-row .app-icon{ width:38px; height:38px; flex-shrink:0; }

  /* ---- editor de noticias ---- */
  .editor-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:20px 22px; margin-bottom:16px;
  }
  .editor-card-title{ font-weight:800; font-size:13px; margin-bottom:14px; display:flex; align-items:center; gap:7px; }
  .editor-card-title .ti-icon{ width:14px; height:14px; color:var(--accent); }
  .editor-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:520px){ .editor-row{ grid-template-columns:1fr; } }
  .editor-help{ font-size:11px; color:var(--ink-faint); font-weight:500; margin-top:2px; }

  .hero-picker{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
  .hero-picker-preview{
    width:150px; height:84px; border-radius:8px; overflow:hidden; flex-shrink:0;
    border:1px solid var(--line); background:var(--surface-sunken);
  }
  .hero-picker-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero-picker-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  .hero-picker-btn{
    font-family:inherit; font-size:12px; font-weight:700; color:var(--ink); background:var(--surface);
    border:1px solid var(--line); border-radius:8px; padding:8px 13px; cursor:pointer;
  }
  .hero-picker-btn:hover{ border-color:var(--accent); color:var(--accent); }

  .rte-toolbar{
    display:flex; flex-wrap:wrap; gap:2px; padding:6px; margin-bottom:0;
    background:var(--surface-sunken); border:1px solid var(--line); border-bottom:none;
    border-radius:8px 8px 0 0;
  }
  .rte-btn{
    width:30px; height:30px; border-radius:6px; border:none; background:transparent;
    color:var(--ink-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-family:inherit; font-size:13px; font-weight:700; flex-shrink:0;
  }
  .rte-btn:hover{ background:var(--surface); color:var(--ink); }
  .rte-btn.is-active{ background:var(--accent-wash); color:var(--accent-strong); }
  .rte-btn:disabled{ opacity:0.35; cursor:not-allowed; }
  .rte-btn:disabled:hover{ background:transparent; color:var(--ink-muted); }
  .rte-btn-wide{ width:auto; gap:5px; padding:0 9px; font-size:11.5px; }
  .rte-sep{ width:1px; align-self:stretch; background:var(--line); margin:5px 3px; flex-shrink:0; }
  .rte-select{
    height:30px; border-radius:6px; border:none; background:transparent; color:var(--ink-muted);
    font-family:inherit; font-size:12px; font-weight:700; padding:0 4px; cursor:pointer;
  }
  .rte-select:hover{ background:var(--surface); color:var(--ink); }
  .rte-select:disabled{ opacity:0.35; cursor:not-allowed; }
  .rte-color{
    width:26px; height:26px; margin:2px; padding:0; border:none; border-radius:6px;
    background:transparent; cursor:pointer;
  }
  .rte-color::-webkit-color-swatch-wrapper{ padding:3px; }
  .rte-color::-webkit-color-swatch{ border:1px solid var(--line); border-radius:4px; }
  .rte-color:disabled{ opacity:0.35; cursor:not-allowed; }
  .rte-source{
    width:100%; box-sizing:border-box; font-family:'JetBrains Mono',monospace; font-size:12.5px;
    line-height:1.6; white-space:pre; tab-size:2; resize:vertical;
  }
  .rte-body{
    min-height:260px; max-height:520px; overflow-y:auto; padding:16px 18px;
    border:1px solid var(--line); border-radius:0 0 8px 8px; background:var(--surface);
    font-size:14.5px; line-height:1.7; color:var(--ink);
  }
  .rte-body:focus{ outline:2px solid var(--accent-wash); outline-offset:-1px; }
  .rte-body p{ margin:0 0 14px; }
  .rte-body h2{ font-size:18px; font-weight:800; margin:18px 0 8px; }
  .rte-body blockquote{
    margin:14px 0; padding:10px 16px; border-left:3px solid var(--accent); background:var(--surface-sunken);
    font-style:italic; color:var(--ink-muted); border-radius:0 6px 6px 0;
  }
  .rte-body figure{ margin:14px 0; }
  .rte-body figure img{ width:100%; border-radius:8px; display:block; }
  .rte-body figcaption{ font-size:11.5px; color:var(--ink-faint); margin-top:6px; text-align:center; }
  .rte-body a{ color:var(--accent-strong); }
  .rte-body:empty::before{ content:attr(data-placeholder); color:var(--ink-faint); }
  .rte-body table, .article-body table{
    width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px;
  }
  .rte-body table td, .article-body table td{ border:1px solid var(--line); padding:8px 10px; }
  .rte-body hr, .article-body hr{ border:none; border-top:1px solid var(--line); margin:22px 0; }
  .rte-body ol, .article-body ol{ margin:0 0 14px; padding-left:22px; }
  .rte-body ul, .article-body ul{ margin:0 0 14px; padding-left:22px; }
  .article-video{ position:relative; border-radius:8px; overflow:hidden; background:#000; aspect-ratio:16/9; }
  .article-video iframe, .article-video video{ width:100%; height:100%; display:block; border:none; }
  .article-video-figure{ margin:24px 0; }
  .article-video-figure figcaption{ font-size:12px; color:var(--ink-faint); margin-top:8px; line-height:1.4; }

  .photobank-upload{
    display:flex; align-items:center; gap:8px; width:fit-content; margin-bottom:16px;
    font-size:12.5px; font-weight:700; color:var(--accent-strong); background:var(--accent-wash);
    border-radius:8px; padding:9px 14px; cursor:pointer;
  }
  .photobank-upload:hover{ background:var(--accent); color:var(--accent-ink); }
  .photobank-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px;
    max-height:50vh; overflow-y:auto;
  }
  .photobank-item{
    aspect-ratio:4/3; border-radius:8px; overflow:hidden; border:2px solid var(--line);
    cursor:pointer; background:var(--surface-sunken); position:relative; padding:0;
  }
  .photobank-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photobank-item:hover{ border-color:var(--accent); }
  .role-scope-note{
    display:flex; gap:8px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--ink-muted);
    background:var(--gold-wash); border-radius:8px; padding:10px 12px; margin-bottom:16px;
  }
  .role-scope-note .ti-icon{ color:var(--gold); margin-top:2px; }

  /* ---- métodos de autenticación ---- */
  .auth-method{
    display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:12px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  }
  .auth-method-icon{
    width:42px; height:42px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:var(--surface-sunken); color:var(--accent); font-weight:800; font-size:15px; font-family:'JetBrains Mono',monospace;
  }
  .auth-method-body{ flex:1; min-width:0; }
  .auth-method-name{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
  .auth-method-desc{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }
  .auth-method-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .auth-toggle{
    width:38px; height:22px; border-radius:100px; border:none; background:var(--line); position:relative; cursor:pointer; flex-shrink:0;
  }
  .auth-toggle::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s ease; }
  .auth-toggle.is-on{ background:var(--accent); }
  .auth-toggle.is-on::after{ left:18px; }
  .auth-toggle:disabled{ opacity:0.5; cursor:not-allowed; }

  /* ---- login (no existe en el mockup — nunca tuvo login real) ---- */
  .login-wrap{ max-width:380px; width:100%; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; box-sizing:border-box; }
  .login-wrap h1{ font-size:19px; margin:0 0 18px; }
  .login-wrap label{ display:block; font-size:12px; font-weight:700; color:var(--ink-muted); margin-bottom:14px; }
  .login-wrap input{ width:100%; box-sizing:border-box; margin-top:5px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit; }
  .error-note{ background:var(--accent-wash); color:var(--accent-strong); border-radius:8px; padding:10px 12px; font-size:12.5px; margin-bottom:14px; }
  .flash-note{ background:var(--green-wash); color:var(--green); border-radius:8px; padding:10px 12px; font-size:12.5px; margin:16px 32px; }
  .login-page{ box-sizing:border-box; }
  .login-page-centrado{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; }
  .login-page-lateral{ min-height:100vh; display:flex; }
  .login-page-lateral.is-reversed{ flex-direction:row-reverse; }
  .login-panel-image{ flex:1 1 50%; }
  .login-panel-form{ flex:1 1 50%; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px; box-sizing:border-box; }
  @media (max-width:760px){
    .login-page-lateral{ flex-direction:column; }
    .login-page-lateral.is-reversed{ flex-direction:column; }
    .login-panel-image{ flex:0 0 160px; }
  }