/*
 * MySafe default theme — "Web 2.0 Classic" (2006 MySpace structure + glossy depth).
 * Design source: Figma "MySafe — Rediseño Web 2.0".
 *
 * Everything lives in the `base` layer, so any user theme (layer `theme`) overrides it
 * without needing !important. The layer order is declared in /static/css/safety.css.
 *
 * DOM contract (do not rename, community themes depend on it):
 *   #safety-bar  #header  #hSub  #container > .left / .right  #footer
 *   .left:  .general-about.profile-info  .box.contact  .url.box  .player.box#musicplayer  .box.interests  .box.details
 *   .right: .extended.box  .blog-preview  .box.blurbs  .box.fwiends  .box.comments
 */
@layer base {
  :root {
    --navy-900: #0b2a6f;
    --navy-700: #123e9c;
    --blue-500: #2f67c8;
    --blue-300: #6f9bd8;
    --sky-100: #e6f0fb;
    --sky-50: #f3f8fd;
    --orange-600: #e8600c;
    --orange-500: #ff7a1a;
    --orange-200: #ffd3a8;
    --orange-50: #fff4ea;
    --ink-900: #1c2333;
    --ink-600: #4a5468;
    --ink-400: #7d8798;
    --line-200: #c9d6ea;
    --paper: #ffffff;
    --online-500: #2daa35;
    --butter-100: #fff8cc;

    --shell-width: 980px;
    --radius-panel: 6px;
    --radius-card: 8px;
    --font: Arimo, Arial, Helvetica, sans-serif;

    /* Brillo Web 2.0: degradado con corte duro al 50 % */
    --gloss-navy: linear-gradient(#3b6fcf 0%, #2558b9 50%, #123e9c 50%, #0b2a6f 100%);
    --gloss-nav: linear-gradient(#a9c7f0 0%, #86abe4 50%, #6f98da 50%, #5c88d0 100%);
    --gloss-panel-blue: linear-gradient(#86ade6 0%, #5c8bd6 50%, #4677c9 50%, #3a6bbe 100%);
    --gloss-panel-orange: linear-gradient(#ffe2c2 0%, #ffcf9e 50%, #ffbe80 50%, #ffb06b 100%);
    --gloss-orange: linear-gradient(#ffb36b 0%, #ff8c2e 50%, #f2700f 50%, #e8600c 100%);
    --gloss-blue: linear-gradient(#7fa8e4 0%, #4a7dd0 50%, #2f67c8 50%, #245ab8 100%);
    --gloss-silver: linear-gradient(#ffffff 0%, #f1f4f9 50%, #e2e8f1 50%, #d5dde9 100%);
    --gloss-green: linear-gradient(#8be08f 0%, #4cc253 50%, #2daa35 50%, #22962a 100%);
    --gloss-dark: linear-gradient(#3c4352 0%, #262b36 50%, #1d222b 50%, #12151b 100%);

    --shadow-card: 0 2px 6px rgba(10, 31, 77, 0.14);
    --shadow-page: 0 10px 30px rgba(10, 31, 77, 0.22), 0 1px 3px rgba(10, 31, 77, 0.18);
    --shine: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --inset-field: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  }

  * { box-sizing: border-box; }

  html {
    min-height: 100%;
    background: #eef4fb linear-gradient(#b9cfec 0, #d7e4f4 420px, #eef4fb 900px) no-repeat;
  }

  body {
    margin: 0;
    padding: 31px 16px 48px; /* espacio para #safety-bar */
    font: 12px/1.45 var(--font);
    color: var(--ink-900);
  }

  a { color: var(--blue-500); }
  a:hover { color: var(--orange-600); }
  h1, h2, h3, h4, h5 { font-family: var(--font); }
  img { max-width: 100%; }

  /* ---------- glossy buttons ---------- */
  .btn,
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #a9b6ca;
    border-radius: 5px;
    background: var(--gloss-silver);
    box-shadow: var(--shine), 0 1px 2px rgba(10, 31, 77, 0.3);
    color: var(--ink-900);
    font: bold 12px/1.2 var(--font);
    letter-spacing: 0.2px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .btn:hover, button:hover { filter: brightness(1.05); color: inherit; }
  .btn:active, button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); }
  .btn-primary, button.primary {
    border-color: #c24e05;
    background: var(--gloss-orange);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28);
  }
  .btn-secondary {
    border-color: #1c4a9a;
    background: var(--gloss-blue);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28);
  }
  .btn-primary:hover, .btn-secondary:hover, button.primary:hover { color: #fff; }
  .btn-large { padding: 12px 26px; font-size: 14px; }
  .btn-small { padding: 4px 10px; font-size: 11px; }
  .btn.is-done { cursor: default; opacity: 0.65; filter: none; transform: none; }
  .btn-block { display: flex; width: 100%; }

  /* ---------- fields ---------- */
  input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"],
  input:not([type]), textarea, select {
    padding: 7px 10px;
    border: 1px solid var(--line-200);
    border-radius: 4px;
    background: var(--paper);
    box-shadow: var(--inset-field);
    color: var(--ink-900);
    font: 12px/1.4 var(--font);
  }
  input:focus, textarea:focus, select:focus { outline: 2px solid rgba(47, 103, 200, 0.35); border-color: var(--blue-500); }

  /* ---------- header ---------- */
  #header, #hSub, #container, #footer {
    width: 100%;
    max-width: var(--shell-width);
    margin-left: auto;
    margin-right: auto;
  }
  /* La "ventana" del sitio: mismas columnas, sombra lateral y esquinas en los extremos. */
  #hSub, #container { box-shadow: -10px 0 18px -14px rgba(10, 31, 77, 0.45), 10px 0 18px -14px rgba(10, 31, 77, 0.45); }

  #header {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 18px 28px;
    border-radius: 10px 10px 0 0;
    background: var(--gloss-navy);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 -6px 24px -10px rgba(10, 31, 77, 0.35);
    color: #fff;
  }
  #header .logo {
    font: bold 34px/1 var(--font);
    letter-spacing: -1.5px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 2px 3px rgba(0, 13, 51, 0.45);
  }
  #header .logo { display: inline-flex; align-items: center; }
  #header .logo-mark { width: 44px; height: 44px; margin-right: 8px; filter: drop-shadow(0 2px 3px rgba(0, 13, 51, 0.45)); }
  #header .logo span { color: #ffb36b; }
  #header .tagline { margin: 4px 0 0 52px; font-style: italic; color: #bfd5f5; }
  #header .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  #header .links { color: #7fa2da; }
  #header .links a { color: #fff; font-size: 11px; }
  #header .badge-count { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 8px; background: var(--orange-500); color: #fff; font-size: 10px; font-weight: bold; line-height: 16px; text-align: center; text-decoration: none; }
  #header .hello { margin-right: 4px; font-weight: bold; color: #fff; }
  #header .site-search { display: flex; gap: 6px; }
  #header .site-search input { width: 250px; border-color: #0a2366; }

  /* ---------- nav ---------- */
  #hSub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 9px 20px;
    border-bottom: 1px solid #3f6bb8;
    background: var(--gloss-nav);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), -10px 0 18px -14px rgba(10, 31, 77, 0.45), 10px 0 18px -14px rgba(10, 31, 77, 0.45);
  }
  #hSub a {
    padding: 2px 13px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.2px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 26, 89, 0.45);
  }
  #hSub a:hover { text-decoration: underline; color: #fff; }
  #hSub .sep { display: inline-block; width: 1px; height: 14px; overflow: hidden; color: transparent; background: rgba(217, 231, 250, 0.7); }

  /* ---------- two-column layout ---------- */
  #container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 20px 24px;
    background: linear-gradient(#ffffff, #f4f8fd);
  }
  #container .left { flex: 0 0 330px; width: 330px; display: flex; flex-direction: column; gap: 16px; }
  #container .right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  #container .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  #container .sidebar { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column; gap: 16px; }

  /* ---------- panels ---------- */
  .box {
    overflow: hidden;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-panel);
    background: var(--paper);
    box-shadow: var(--shadow-card);
  }
  .box h4 {
    margin: 0;
    padding: 7px 12px;
    border-bottom: 1px solid #2f5daa;
    background: var(--gloss-panel-blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: #fff;
    font-size: 13px;
    text-shadow: 0 -1px 0 rgba(0, 26, 77, 0.35);
  }
  .box h4 a { color: inherit; }
  .box .inner, .box > p, .box > ul, .box > table { margin: 0; padding: 12px 14px 14px; }
  .right .box, .main .box { border-color: #f4c79c; }
  .right .box h4, .main .box h4 {
    border-bottom-color: #f0a060;
    background: var(--gloss-panel-orange);
    color: #b84a00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  /* Cajas sin cabecera: su contenido ya lleva el relleno del propio contenedor. */
  .player.box > p, .extended.box > p, .home-music > p { padding: 0; }
  .player.box > .player-label, .home-music > .player-label { margin-bottom: 10px; }
  .player.box > .song { margin-bottom: 12px; }
  .empty { color: var(--ink-400); }
  .notice { padding: 8px 10px; border: 1px solid #e0d000; border-radius: 4px; background: var(--butter-100); }
  .errors { color: #c00; padding-left: 18px; }
  .pager { text-align: center; }

  /* ---------- avatars ---------- */
  .avatar {
    display: block;
    border: 3px solid #fff;
    border-radius: 4px;
    box-shadow: var(--shadow-card);
    object-fit: cover;
    background: #dfe8f5;
  }
  .avatar-large { width: 140px; height: 160px; border-width: 4px; }
  .avatar-medium { width: 96px; height: 96px; }
  .avatar-small { width: 72px; height: 72px; }
  .avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 26, 77, 0.4);
  }
  .avatar-large.avatar-initial { font-size: 64px; }
  .avatar-medium.avatar-initial { font-size: 38px; }
  .avatar-small.avatar-initial { font-size: 28px; }
  .tone-0 { background: linear-gradient(#9cc0f0, #3f6fc2); }
  .tone-1 { background: linear-gradient(#f7a8d8, #a774e8 55%, #4b4fc9); }
  .tone-2 { background: linear-gradient(#ffc9a0, #e8600c); }
  .tone-3 { background: linear-gradient(#9fe3b0, #2d9a4c); }
  .tone-4 { background: linear-gradient(#ffb3c8, #d0457a); }
  .tone-5 { background: linear-gradient(#b5c2d3, #4a5468); }
  .tone-6 { background: linear-gradient(#ffe08a, #d09a06); }
  .tone-7 { background: linear-gradient(#9ee6e6, #1f8f9a); }

  /* ---------- identity ---------- */
  .general-about {
    padding: 14px 16px 16px;
    border-radius: var(--radius-card);
    background: linear-gradient(#ffffff, #f3f8fd);
  }
  .general-about h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.15; letter-spacing: -0.4px; }
  .general-about .identity { display: flex; gap: 14px; align-items: flex-start; }
  .general-about .details { flex: 1; min-width: 0; }
  .general-about .details p { margin: 0 0 5px; }
  .general-about .status { font-style: italic; color: var(--ink-600); }
  .general-about .last-login { font-size: 11px; color: var(--ink-400); }
  .online-now {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border: 1px solid #1d7e24;
    border-radius: 20px;
    background: var(--gloss-green);
    box-shadow: var(--shine), 0 1px 2px rgba(10, 31, 77, 0.3);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
  }
  .online-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

  /* ---------- contact ---------- */
  .contact .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--sky-50); }

  /* ---------- url ---------- */
  .url.box p { word-break: break-all; }

  /* ---------- music player ---------- */
  .player.box {
    padding: 12px 14px 14px;
    border: 1px solid #0b0d11;
    border-radius: var(--radius-card);
    background: var(--gloss-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 8px rgba(0, 0, 0, 0.3);
    color: #c3cbd8;
    color-scheme: dark;
  }
  .player-label { margin: 0 0 8px; color: #8c96a8; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
  .player .song { margin: 0 0 10px; }
  .player .song .label, .player .song .dash { display: none; }
  .player .song .artist { display: block; color: #fff; }
  .player .song .title { display: block; color: #c3cbd8; }
  .player audio { display: block; width: 100%; height: 32px; }
  .player .player-controls { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
  .player .player-controls button { padding: 2px 12px; cursor: pointer; }
  .player .playlist { margin: 8px 0 0; padding: 0 0 0 22px; color: #c3cbd8; }
  .player .playlist li { padding: 2px 0; overflow-wrap: anywhere; }
  .player .playlist li[tabindex] { cursor: pointer; }
  .player .playlist li.is-current { color: #fff; font-weight: bold; }

  /* ---------- videos en el perfil: casillas pequeñas, sin reproductor ---------- */
  .videos .video-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .videos .more { margin: 10px 0 0; text-align: right; }

  /* ---------- community videos page (diseño: Figma "MySafe - Solapa de Videos") ---------- */
  a.video-card.tile { gap: 4px; }
  a.video-card.tile .play { width: 30px; height: 30px; border-width: 2px; }
  a.video-card.tile .play::after { border-width: 5px 0 5px 9px; }
  a.video-card.tile .video-title { font-size: 11px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .videos-owner .owner-card { display: flex; align-items: center; gap: 12px; }
  .videos-owner .owner-card p { margin: 0; }
  .videos-page .stage { margin: 0; }
  .videos-page .hub-player .stage video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; }
  .videos-page .stage figcaption { display: grid; gap: 2px; padding-top: 8px; }
  .videos-page .stage .video-title { font-size: 15px; }
  .videos-page .video-owner { margin-top: 4px; }
  .videos-page h4 .more { margin-left: 8px; font-weight: normal; font-size: 11px; opacity: 0.8; }
  .video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  a.video-card { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; }
  a.video-card:hover .video-title { color: var(--blue-500); text-decoration: underline; }
  a.video-card .video-title { color: var(--ink-600); font-size: 13px; overflow-wrap: anywhere; }
  a.video-card .video-meta { color: var(--ink-400); font-size: 11px; }
  a.video-card .thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border: 1px solid #f0a060;
    border-radius: 4px;
    background: var(--gloss-dark);
  }
  a.video-card .play {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--gloss-orange);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  }
  a.video-card .play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
    transform: translate(-50%, -50%);
  }
  .rank-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  a.video-card.rank { display: flex; align-items: center; gap: 10px; }
  a.video-card .rank-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sky-100);
    color: var(--navy-700);
    font-size: 12px;
    font-weight: bold;
  }
  a.video-card .rank-num.is-top { background: var(--gloss-orange); color: #fff; }
  a.video-card .rank-text { display: grid; gap: 1px; min-width: 0; }
  .rank-list.plain .rank-num { display: none; }
  .sort-links { margin: 0 0 12px; color: var(--ink-400); }
  .sort-links a, .sort-links b { margin-left: 8px; }
  .videos-share p { margin: 0 0 10px; }
  @media (max-width: 700px) { .video-grid { grid-template-columns: 1fr; } }

  /* ---------- interests & details ---------- */
  .interests table, .details table { width: 100%; border-collapse: separate; border-spacing: 2px; padding: 8px; }
  .interests th, .details th {
    width: 96px;
    padding: 6px 8px;
    border-radius: 3px;
    background: var(--sky-100);
    color: var(--navy-700);
    text-align: left;
    vertical-align: top;
  }
  .interests td, .details td { padding: 6px 8px; border-radius: 3px; background: var(--sky-50); overflow-wrap: anywhere; }

  /* ---------- calendar ---------- */
  .calendar table.mini-cal { width: 100%; border-collapse: separate; border-spacing: 2px; padding: 8px; table-layout: fixed; }
  .calendar .mini-cal th { padding: 4px 0; border-radius: 3px; background: var(--sky-100); color: var(--navy-700); font-size: 11px; text-align: center; }
  .calendar .mini-cal td { padding: 5px 0; border-radius: 3px; background: var(--sky-50); text-align: center; }
  .calendar .mini-cal td:empty { background: transparent; }
  .calendar .mini-cal td.today { background: #f06292; color: #fff; font-weight: bold; }

  /* ---------- extended network ---------- */
  .extended.box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 8px 7px 14px;
    border: 1px solid #f4c79c;
    border-radius: var(--radius-panel);
    background: var(--orange-50);
    box-shadow: none;
  }
  .extended.box p { margin: 0; color: var(--ink-600); font-size: 12px; }
  .extended.box b { color: var(--orange-600); }
  .extended.box.is-self { border-color: var(--line-200); background: var(--sky-50); }

  /* ---------- blog preview ---------- */
  .blog-preview ul { margin: 0; padding: 0; list-style: none; }
  .blog-preview li { position: relative; margin-bottom: 8px; padding-left: 14px; }
  .blog-preview li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); }
  .blog-preview li a { font-weight: bold; }
  .blog-preview .date, .blog-list .date { color: var(--ink-400); font-size: 11px; }
  .blog-preview .more { margin: 4px 0 0; text-align: right; font-size: 11px; }

  /* ---------- blurbs ---------- */
  .blurbs h5 { margin: 4px 0 6px; color: var(--orange-600); font-size: 12px; }
  .blurbs h5 + div { margin-bottom: 12px; }
  .blurbs .about-me, .blurbs .who-to-meet { overflow-wrap: break-word; }
  .blurbs img { max-width: 100%; height: auto; }

  /* ---------- fwiends ---------- */
  .fwiends .count { margin: 0 0 12px; }
  .fwiends .count-number { color: #d0021b; font-weight: bold; }
  .top-fwiends, .user-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
    justify-items: center;
    text-align: center;
  }
  .fwiend a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
  .fwiend .name {
    max-width: 112px;
    margin: 0;
    overflow: hidden;
    color: var(--navy-700);
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fwiend a:hover .name { color: var(--orange-600); text-decoration: underline; }
  .user-grid .status {
    max-width: 120px;
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--ink-400);
    font-size: 11px;
    font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fwiends .view-all { margin: 12px 0 0; text-align: right; font-weight: bold; }

  /* ---------- comments ---------- */
  .comments-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
  .comments-table td { vertical-align: top; }
  .comments-table .author { width: 112px; text-align: center; }
  .comments-table .author a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
  .comments-table .author .name { margin: 0; color: var(--navy-700); font-weight: bold; }
  .comments-table .bubble {
    padding: 10px 14px 12px;
    border: 1px solid var(--orange-200);
    border-radius: var(--radius-card);
    background: linear-gradient(#fff8f1, #ffebd8);
  }
  .comments-table .date { margin: 0 0 6px; color: var(--ink-600); font-weight: bold; }
  .comments-table .text { overflow-wrap: break-word; }
  .comments-table .text img { max-width: 100%; height: auto; }
  .comments-table .delete { margin: 6px 0 0; font-size: 11px; text-align: right; }
  .comment-form { display: grid; gap: 8px; margin-top: 8px; }
  .comment-form textarea { width: 100%; min-height: 64px; resize: vertical; }
  .comment-form button { justify-self: end; }

  /* ---------- footer ---------- */
  #footer {
    padding: 16px 16px 18px;
    border-top: 1px solid var(--line-200);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(#eaf1fa, #dce7f5);
    box-shadow: var(--shadow-page);
    color: var(--ink-400);
    font-size: 11px;
    text-align: center;
  }
  #footer p { margin: 0 0 6px; }
  #footer p:last-child { margin: 0; }

  /* ---------- home ---------- */
  .hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border: 0;
    border-radius: 10px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.06)),
      linear-gradient(90deg, #0f3a8f, #2f67c8 55%, #6f9bd8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(10, 31, 77, 0.25);
    color: #e3edfb;
  }
  .hero h1 { margin: 0 0 8px; color: #fff; font-size: 30px; letter-spacing: -1px; text-shadow: 0 2px 3px rgba(0, 13, 51, 0.45); }
  .hero-text { max-width: 360px; }
  .hero-text p { margin: 0; font-size: 13px; }
  .hero-cta { text-align: center; }
  .hero-cta p { margin: 8px 0 0; font-style: italic; }
  .hero-cta a:not(.btn) { color: #fff; }
  .home-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .home-music {
    padding: 12px 14px 14px;
    border: 1px solid #0b0d11;
    border-radius: var(--radius-card);
    background: var(--gloss-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 8px rgba(0, 0, 0, 0.3);
  }
  .main .box.home-music { border-color: #0b0d11; }
  .home-music ol { margin: 0; padding: 0; list-style: none; }
  .home-music li { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
  .home-music .rank { color: #ff8c2e; font-weight: bold; }
  .home-music .track { display: flex; flex-direction: column; min-width: 0; }
  .home-music .track b { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
  .home-music .track a { color: #8c96a8; font-size: 11px; }
  .home-music .more { margin: 4px 0 0; font-size: 11px; text-align: right; }
  .home-music .more a { color: #ffb36b; }
  .blog-list { margin: 0; padding: 0; list-style: none; }
  .blog-list li { margin-bottom: 10px; }
  .blog-list li > a:first-child { font-weight: bold; }
  .member-login .inner { background: linear-gradient(var(--sky-50), #fff); }
  .member-login .login-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
  .member-login .cta-signup { margin-top: 12px; }
  .stats p { margin: 0 0 6px; color: var(--ink-600); }
  .stats b { color: var(--orange-600); font-size: 16px; }
  .safety-tips .inner, .safety-page .inner { background: var(--butter-100); }
  .safety-tips ul { margin: 0; padding-left: 18px; }
  .safety-tips li { margin-bottom: 6px; }
  .quick-links { margin: 0; padding-left: 18px; }
  .quick-links li { margin-bottom: 4px; }

  /* ---------- panel de inicio (con sesión) ---------- */
  .dashboard { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .dash-stats {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-panel);
    background: var(--sky-50);
  }
  .dash-stats .stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    border-right: 1px solid var(--line-200);
    text-align: center;
  }
  .dash-stats .label { color: var(--ink-600); font-size: 11px; }
  .dash-stats b { color: var(--navy-700); font-size: 14px; }
  .dash-stats b a { color: inherit; text-decoration: none; }
  .dash-actions { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
  .dash-columns { display: flex; align-items: flex-start; gap: 20px; }
  .dashboard .box h4 .more { float: right; font-size: 11px; font-weight: normal; }
  .dash-hello { border: 1px solid var(--line-200); box-shadow: var(--shadow-card); }
  .dash-hello h2 { overflow-wrap: anywhere; }
  .dash-hello .details p { margin: 0 0 8px; }
  .dash-links { margin: 0; padding: 0; list-style: none; }
  .dash-links li { margin-bottom: 4px; }
  .dash-links a { font-weight: bold; }
  .dash-hello .my-url { margin: 12px 0 0; padding: 8px 0 0; border-top: 1px solid var(--sky-100); color: var(--ink-600); font-weight: bold; overflow-wrap: anywhere; }
  .view-my-links { display: flex; flex-wrap: wrap; gap: 6px; }
  .view-my-links a { padding: 3px 10px; border: 1px solid var(--line-200); border-radius: 12px; background: var(--sky-50); font-weight: bold; text-decoration: none; }
  .view-my-links a:hover { border-color: var(--orange-500); }
  .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; justify-items: center; text-align: center; }
  .people-grid .name { max-width: 92px; font-size: 11px; }
  .dash-tabs { display: flex; gap: 6px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-200); }
  .dash-tab {
    flex: 1 1 0;
    padding: 5px 4px;
    border: 1px solid var(--blue-500);
    border-radius: 5px;
    background: var(--paper);
    color: var(--navy-700);
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
  }
  .dash-tab.active { border-color: #1c4a9a; background: var(--gloss-blue); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28); }
  .dash-tab:hover { color: var(--orange-600); }
  .dash-tab.active:hover { color: #fff; }
  .feed { margin: 0; padding: 0; list-style: none; }
  .feed-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
  .feed-item + .feed-item { border-top: 1px solid var(--sky-100); }
  .feed-avatar, .dash-hello .identity > a { flex: none; text-decoration: none; }
  .feed-item .avatar-small { width: 48px; height: 48px; font-size: 20px; }
  .feed-item .text { min-width: 0; overflow-wrap: anywhere; }
  .feed-item .who { font-weight: bold; color: var(--navy-700); text-decoration: none; }
  .feed-item .who:hover { color: var(--orange-600); text-decoration: underline; }
  .feed-item q { font-style: italic; color: var(--ink-600); }
  .feed-item .when { display: block; color: var(--ink-400); font-size: 11px; }

  /* ---------- small screens ---------- */
  @media (max-width: 860px) {
    .dash-columns { flex-direction: column; }
    .dash-stats { flex-wrap: wrap; }
    .dash-stats .stat { flex-basis: 50%; }
    .dash-actions { width: 100%; justify-content: center; padding: 10px; }
    #header { flex-direction: column; align-items: flex-start; }
    #header .header-right { align-items: stretch; width: 100%; }
    #header .site-search input { flex: 1; width: auto; }
    #container { flex-direction: column; }
    #container .left, #container .sidebar { flex: none; width: 100%; }
    .top-fwiends, .user-grid { grid-template-columns: repeat(2, 1fr); }
    .home-pair { grid-template-columns: 1fr; }
    .hero { flex-direction: column; align-items: flex-start; }
  }
}

/* ---------- action pages and editor (never carry user CSS) ---------- */
@layer base {
  .form-page { display: block; }
  .form-box { max-width: 520px; margin: 10px auto; }
  .form-box.wide { max-width: 760px; }
  .stacked { display: grid; gap: 10px; }
  .stacked label { display: grid; gap: 4px; color: var(--ink-600); font-weight: bold; }
  .stacked label input, .stacked label select, .stacked label textarea { font-weight: normal; }
  .stacked > button, .form-box form > button { justify-self: start; }
  .requests td { padding: 4px; vertical-align: middle; }
  .requests form { display: inline; }
  .form-box .target { display: flex; align-items: center; gap: 10px; }

  /* ---------- editor de perfil (diseño: Figma "MySafe - Solapa de Videos") ---------- */
  /* Cabecera, menú, anuncio y pie a todo el ancho de la ventana; el contenido de cada uno queda centrado en 980 px. */
  body.wide-shell { --shell-pad: max(24px, calc((100% - var(--shell-width)) / 2)); padding-left: 0; padding-right: 0; padding-bottom: 0; }
  body.wide-shell #header,
  body.wide-shell #hSub,
  body.wide-shell #container,
  body.wide-shell #footer { max-width: none; margin-left: 0; margin-right: 0; border-radius: 0; box-shadow: none; }
  body.wide-shell #header { margin-top: 0; padding-left: calc(var(--shell-pad) + 4px); padding-right: calc(var(--shell-pad) + 0px); }
  body.wide-shell #hSub { padding-left: calc(var(--shell-pad) - 4px); padding-right: var(--shell-pad); }
  body.wide-shell .announcement { max-width: none; padding-left: var(--shell-pad); padding-right: var(--shell-pad); }
  body.wide-shell #footer { box-shadow: none; }

  body.wide-shell #container.videos-manage { padding-left: calc(var(--shell-pad) + 20px); padding-right: calc(var(--shell-pad) + 20px); }
  #container.editor-page { gap: 24px; padding: 24px 32px 32px; align-items: flex-start; }
  .editor-form { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .editor-form form { gap: 16px; }
  .editor-form .section-tabs { position: sticky; top: 31px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; background: #fbfdff; }
  .editor-form .section-tabs a {
    padding: 6px 14px;
    border: 1px solid var(--line-200);
    border-radius: 14px;
    background: var(--sky-100);
    color: var(--navy-700);
    font-weight: bold;
    text-decoration: none;
  }
  .editor-form .section-tabs a:hover { background: var(--paper); border-color: var(--blue-300); }
  .editor-form section.box { scroll-margin-top: 92px; }
  .editor-form .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
  .editor-form .field-grid label { min-width: 0; }
  .editor-form .field-grid input, .editor-form .field-grid select { width: 100%; }
  .editor-form textarea { width: 100%; min-height: 8em; resize: vertical; box-sizing: border-box; }
  .editor-form .css-field textarea { min-height: 50vh; font: 12px/1.4 "Courier New", monospace; }
  .editor-form .hint { margin: 0 0 10px; color: var(--ink-400); }
  .editor-form .hint a { color: var(--blue-500); }
  .editor-form .inner { display: grid; gap: 12px; }
  .editor-form .more-songs { border: 1px solid var(--line-200); border-radius: 6px; background: var(--sky-50); }
  .editor-form .more-songs summary { padding: 8px 12px; color: var(--navy-700); font-weight: bold; cursor: pointer; }
  .editor-form .more-songs .media-row { padding: 8px 12px 12px; }
  .editor-form .theme-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
  .editor-form .videos-link p { margin: 0; }
  .editor-form .videos-link .btn { justify-self: start; }
  .css-warnings { color: #a40; }
  /* La barra de acciones se queda pegada abajo mientras recorres el formulario. */
  .editor-form .action-bar {
    position: sticky;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--line-200);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow-card);
  }
  .editor-form .action-bar .links { margin-left: 6px; font-size: 11px; }

  /* La vista previa se queda fija a la derecha y ocupa toda la altura visible. */
  .editor-preview {
    position: sticky;
    top: 47px;
    flex: 0 0 520px;
    width: 520px;
    align-self: flex-start;
    --preview-scale: 0.5;
  }
  .editor-preview .preview-frame { height: calc(100vh - 47px - 16px - 36px); overflow: hidden; background: #fff; }
  /* Se pinta el perfil a su ancho real (escritorio) y se reduce para que quepa entero. */
  .editor-preview iframe {
    display: block;
    width: calc(100% / var(--preview-scale));
    height: calc((100vh - 47px - 16px - 36px) / var(--preview-scale));
    border: 0;
    background: #fff;
    transform: scale(var(--preview-scale));
    transform-origin: 0 0;
  }
  @media (max-width: 1280px) { .editor-preview { flex-basis: 440px; width: 440px; --preview-scale: 0.42; } }
  @media (max-width: 1040px) {
    #container.editor-page { flex-direction: column; padding: 16px; }
    .editor-form { width: 100%; }
    .editor-preview { position: static; flex: none; width: 100%; --preview-scale: 0.4; order: -1; }
    .editor-preview .preview-frame { height: 320px; }
    .editor-preview iframe { height: calc(320px / var(--preview-scale)); }
    .editor-form .section-tabs { position: static; }
  }

  /* ---------- gestionar mis videos ---------- */
  .videos-manage .video-slot {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line-200);
    border-radius: 6px;
    background: var(--sky-50);
  }
  .videos-manage .video-slot.is-filled { border-color: #f0a060; background: var(--orange-50); }
  .videos-manage .slot-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--sky-100); color: var(--ink-400); font-size: 24px; font-weight: bold; }
  .videos-manage .slot-thumb video { width: 100%; height: 100%; background: var(--gloss-dark); }
  .videos-manage .slot-fields { display: grid; gap: 8px; min-width: 0; }
  .videos-manage .slot-fields input { width: 100%; box-sizing: border-box; }
  .videos-manage .slot-meta { margin: 0; color: var(--ink-400); font-size: 11px; }
  .videos-manage .plain-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
  @media (max-width: 700px) { .videos-manage .video-slot { grid-template-columns: 1fr; } }

  .search-form { display: flex; gap: 6px; margin-bottom: 12px; }
  .search-form input { flex: 1; }
  .directory h4 .count { font-weight: normal; }
  .songs { width: 100%; border-collapse: collapse; }
  .songs td { padding: 6px; border-bottom: 1px solid var(--sky-100); vertical-align: middle; }
  .songs audio { height: 30px; max-width: 260px; }
  .blog-page .blog-entry .date { margin: 0 0 6px; color: var(--ink-400); font-weight: bold; }
  .blog-page .blog-content { font-size: 13px; overflow-wrap: break-word; }
  .blog-page .blog-content img { max-width: 100%; height: auto; }
  .blog-author .inner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .blog-author .inner p { margin: 0; }
  .blog-comments .comments-table .author { width: 90px; }

  .reports { width: 100%; border-collapse: collapse; }
  .reports th, .reports td { padding: 6px; border-bottom: 1px solid var(--sky-100); text-align: left; vertical-align: top; }
  .reports .reason { max-width: 320px; overflow-wrap: break-word; }
  .reports form { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
  .general-about > p.view-my { margin: 12px 0 0; padding: 8px 0 0; border-top: 1px solid var(--sky-100); font-weight: bold; color: var(--ink-600); }
  .photos-page .sidebar { order: -1; flex-basis: 260px; width: 260px; }
  .photo-owner .inner { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .photo-owner .inner p { margin: 0; }
  .photo-owner .count { color: var(--ink-400); }
  .upload-form input[type="file"] { max-width: 100%; font-size: 11px; }
  .upload-form .hint { margin: 0; color: var(--ink-400); font-size: 11px; font-weight: normal; }
  .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .photo-thumb { display: block; aspect-ratio: 1; overflow: hidden; border: 3px solid #fff; border-radius: 4px; box-shadow: var(--shadow-card); background: var(--sky-100); }
  .photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .photo-thumb:hover { outline: 2px solid var(--orange-500); }
  .photo-view-page { display: block; }
  .photo-view .photo-nav { display: flex; justify-content: space-between; margin: 0 0 12px; font-weight: bold; }
  .photo-view figure { margin: 0; text-align: center; }
  .photo-view figure img { max-width: 100%; height: auto; border: 4px solid #fff; border-radius: 4px; box-shadow: var(--shadow-card); }
  .photo-view figcaption { margin-top: 10px; color: var(--ink-600); font-size: 13px; font-style: italic; }
  .photo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
  .photo-actions form { margin: 0; }
  .explore-page .sidebar { flex-basis: 300px; width: 300px; }
  .explore-page .box h4 .more, .admin-page .box h4 .more { float: right; font-size: 11px; font-weight: normal; }
  .explore-intro .inner p:last-child { margin-bottom: 0; }
  .bulletins { width: 100%; border-collapse: collapse; }
  .bulletins th { padding: 5px 8px; background: var(--sky-100); color: var(--navy-700); font-size: 11px; text-align: left; }
  .bulletins td { padding: 6px 8px; border-bottom: 1px solid var(--sky-100); vertical-align: top; }
  .bulletins .from { width: 120px; font-weight: bold; }
  .bulletins .date { width: 170px; color: var(--ink-400); font-size: 11px; white-space: nowrap; }
  .bulletin-space h4 .more { float: right; font-size: 11px; font-weight: normal; }
  .bulletins-page .form-box { width: 100%; }
  .bulletins-page .post-bulletin { margin: 0 0 10px; text-align: right; }
  .bulletin-view .bulletin-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
  .bulletin-view .bulletin-head h2 { margin: 0; font-size: 18px; }
  .bulletin-view .meta { margin: 2px 0 0; color: var(--ink-400); }
  .bulletin-view .bulletin-body { padding: 12px; border: 1px solid var(--sky-100); border-radius: 6px; background: var(--sky-50); font-size: 13px; overflow-wrap: break-word; }
  .bulletin-view .bulletin-body img { max-width: 100%; height: auto; }
  .bulletin-view .bulletin-actions { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 0; }
  .bulletin-view .bulletin-actions form { margin: 0; }
  /* ---------- anuncio del sitio ---------- */
  .announcement { max-width: var(--shell-width); margin: 0 auto; padding: 8px 20px; border-bottom: 1px solid #9cbbe6; background: #e8f1fd; color: var(--navy-700); font-weight: bold; text-align: center; }
  .announcement.level-warning { border-bottom-color: #e0c000; background: var(--butter-100); color: #6b5300; }

  /* ---------- panel de administración ---------- */
  .admin-page { display: block; }
  .admin-page .main { display: flex; flex-direction: column; gap: 16px; }
  .admin-head { display: flex; align-items: baseline; justify-content: space-between; }
  .admin-head h1 { margin: 0; color: var(--navy-700); font-size: 22px; }
  .admin-head p { margin: 0; color: var(--ink-600); }
  .admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--blue-500); }
  .admin-tabs a { padding: 7px 14px; border: 1px solid var(--line-200); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--gloss-silver); color: var(--ink-900); font-weight: bold; text-decoration: none; }
  .admin-tabs a.active { border-color: var(--blue-500); background: var(--gloss-blue); color: #fff; }
  .stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .stat-tile { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--line-200); border-radius: 6px; background: linear-gradient(#fff, var(--sky-50)); box-shadow: var(--shadow-card); color: var(--ink-600); text-decoration: none; }
  .stat-tile b { color: var(--navy-700); font-size: 24px; }
  .stat-tile.alert { border-color: var(--orange-500); background: var(--orange-50); }
  .stat-tile.alert b { color: var(--orange-600); }
  .admin-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .admin-page .box h4 { border-bottom-color: #2f5daa; background: var(--gloss-panel-blue); color: #fff; text-shadow: 0 -1px 0 rgba(0, 26, 77, 0.35); }
  .admin-page .box h4 .more a { color: #fff; }
  .admin-page .box { border-color: var(--line-200); }
  .admin-page .small, .admin-page .hint { color: var(--ink-400); font-size: 11px; font-weight: normal; }
  .role-badge { padding: 1px 6px; border-radius: 8px; background: var(--navy-700); color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase; }
  .role-badge.role-admin { background: var(--orange-600); }
  .ok-badge { padding: 1px 6px; border-radius: 8px; background: #e2f6e4; color: #1d7e24; font-size: 10px; }
  .admin-search select { width: auto; }
  .admin-user-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; }
  .admin-user-head .facts th { padding: 3px 10px 3px 0; color: var(--ink-400); text-align: left; font-weight: normal; }
  .admin-user-head .counts { margin: 0; padding: 0; list-style: none; }
  .admin-user-head .counts li { margin-bottom: 4px; }
  .admin-user-head .quick { grid-column: 1 / -1; margin: 0; }
  .admin-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .admin-action { padding: 10px 12px; border: 1px solid var(--line-200); border-radius: 6px; background: var(--sky-50); }
  .admin-action h5 { margin: 0; color: var(--navy-700); font-size: 13px; }
  .admin-action { align-content: start; }
  .admin-action select, .admin-action input:not([type="checkbox"]), .admin-action textarea { width: 100%; min-width: 0; }
  .admin-action button { justify-self: start; }
  .admin-action.danger { border-color: #f0b8b8; background: #fff6f6; }
  .admin-action.danger h5 { color: #a00; }
  .danger-button { border-color: #a00; background: linear-gradient(#f27b7b, #d33 50%, #c22 50%, #a11); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); }
  .admin-action label.check, .settings-form label.check { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; font-weight: normal; color: var(--ink-900); }
  .inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
  .staff-notes { margin: 10px 0 0; padding: 0; list-style: none; }
  .staff-notes li { padding: 8px 10px; border-left: 3px solid var(--orange-500); background: var(--orange-50); margin-bottom: 8px; }
  .staff-notes p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: break-word; }
  .moderation-log .when { white-space: nowrap; }
  .moderation-log .action { font-weight: bold; }
  .report-actions .small { display: inline-block; margin-top: 4px; }
  .settings-form .box + .box { margin-top: 16px; }
  .settings-form textarea { width: 100%; }
  @media (max-width: 860px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-columns, .admin-user-head { grid-template-columns: 1fr; }
  }
  .notification-list { margin: 0; padding: 0; list-style: none; }
  .notification a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; color: var(--ink-900); text-decoration: none; }
  .notification a:hover { background: var(--sky-50); }
  .notification + .notification { border-top: 1px solid var(--sky-100); }
  .notification.unread a { background: var(--orange-50); }
  .notification.unread .text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--orange-500); vertical-align: middle; }
  .notification .avatar-small { flex: none; width: 48px; height: 48px; font-size: 20px; }
  .notification .when { display: block; color: var(--ink-400); font-size: 11px; }
  .notifications-page .form-box { width: 100%; }
  .notifications-page .mark-all { margin: 0 0 10px; text-align: right; }
  .badge { padding: 1px 6px; border-radius: 8px; background: #fde2e2; color: #a00; font-size: 10px; }

  .mail-page .mail-nav { flex: 0 0 200px; }
  .mail-page .mail-main { flex: 1 1 auto; min-width: 0; }
  .messages { width: 100%; border-collapse: collapse; }
  /* ---------- photo albums ---------- */
  .album-list { margin: 0 0 10px; padding: 0; list-style: none; }
  .album-list li { padding: 4px 8px; border-radius: 3px; }
  .album-list li.is-current { background: var(--sky-100); font-weight: bold; }
  .album-list .count { color: var(--ink-400); }
  .inline-form { margin: 0 0 10px; }
  .move-form { display: flex; align-items: flex-end; gap: 6px; }

  /* ---------- editor guide ---------- */
  .editor-guide { flex: 1 1 100%; }
  .editor-guide details { margin: 0 0 8px; border: 1px solid var(--line-200); border-radius: 6px; background: var(--sky-50); }
  .editor-guide summary { padding: 8px 12px; color: var(--navy-700); font-weight: bold; cursor: pointer; }
  .editor-guide .guide-body { padding: 4px 14px 12px; line-height: 1.5; }
  .editor-guide .guide-body ul { margin: 0; padding-left: 20px; }
  .editor-guide .guide-body li { margin-bottom: 6px; }
  .editor-guide code { padding: 0 3px; border-radius: 3px; background: var(--sky-100); font: 12px "Courier New", monospace; }
  .editor-guide .guide-code { margin: 8px 0; padding: 10px 12px; overflow-x: auto; border-radius: 6px; background: #1e2a44; color: #e6edf9; font: 12px/1.5 "Courier New", monospace; }
  .guide-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
  .guide-table th, .guide-table td { padding: 5px 8px; border-bottom: 1px solid var(--sky-100); text-align: left; vertical-align: top; }
  .guide-table thead th { background: var(--sky-100); color: var(--navy-700); }
  .messages th, .messages td { padding: 6px; border-bottom: 1px solid var(--sky-100); text-align: left; }
  .messages tr.unread td { font-weight: bold; background: var(--orange-50); }
  .messages .new { color: var(--orange-600); font-size: 10px; text-transform: uppercase; }
  .message-view .meta { color: var(--ink-600); }
  .message-body { padding: 12px; border: 1px solid var(--sky-100); border-radius: 6px; background: var(--sky-50); overflow-wrap: break-word; }

  @media (max-width: 860px) {
    .mail-page .mail-nav { width: auto; flex: none; }
  }
}

/* ---------- foros, etiquetas, mensajes por conversación y boletines (diseño aprobado en Figma) ---------- */
@layer base {
  .forum-page .sidebar, .forum-sidebar { flex-basis: 300px; width: 300px; }
  .forum-page .page-head, .mail2 + .page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .forum-page h1, .topic-head h1 { margin: 0; color: var(--navy-700); font-size: 22px; line-height: 1.25; }
  .forum-page .lede { margin: 2px 0 0; color: var(--ink-600); font-size: 13px; }
  .forum-page .page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .forum-search { display: flex; gap: 6px; }
  .forum-search input { width: 200px; }
  .breadcrumb { margin: 0; color: #5a6578; font-size: 11px; }
  .hint { color: #5a6578; font-size: 11px; font-weight: normal; }
  .box .topics, .box .spaces { margin: 0; padding: 0; }
  .box.forum-spaces, .box.forum-recent, .box.forum-topics, .box.active-filters, .box.tag-variants, .box.reply-box, .box.new-topic { border-color: #f4c79c; }
  .box.forum-spaces h4, .box.forum-recent h4, .box.forum-topics h4, .box.active-filters h4, .box.tag-variants h4, .box.reply-box h4, .box.new-topic h4 {
    border-bottom-color: #f0a060; background: var(--gloss-panel-orange); color: #b84a00; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  /* chips de etiqueta: forma + peso + prefijo, no solo color */
  .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
  .tag {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px;
    border: 1px solid var(--line-200); border-radius: 999px; background: #eef2f8; color: var(--ink-700);
    font: 11px/14px var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  a.tag:hover, button.tag:hover { border-color: var(--orange-600); color: var(--orange-600); text-decoration: none; }
  .tag-category { border-color: var(--navy-700); border-radius: 3px; background: var(--sky-100); color: var(--navy-700); font-weight: bold; }
  .tag-include { border-color: #17692a; background: #e3f4e4; color: #17692a; border-radius: 3px; }
  .tag-exclude { border-color: #a3211a; background: #fde8e6; color: #a3211a; border-radius: 3px; }
  .tag-note { border-color: #6b5400; background: var(--butter-100); color: #6b5400; }
  .tag-struck { text-decoration: line-through; }
  .tag-prefix { font-weight: bold; }
  .tag-pin { margin-right: 4px; cursor: default; }
  .tag-removable { cursor: default; }
  .tag-x { margin-left: 2px; color: inherit; font-weight: bold; text-decoration: none; }
  .tag-x:hover { color: var(--orange-600); }

  /* listado de temas */
  .topic-row { display: flex; gap: 16px; padding: 12px; border-bottom: 1px solid var(--line-200); background: var(--paper); }
  .topic-row.pinned { background: var(--butter-100); }
  .topic-main { flex: 1 1 auto; min-width: 0; }
  .topic-title { margin: 0 0 4px; font-size: 16px; line-height: 1.3; }
  .topic-title a { color: var(--blue-500); text-decoration: none; }
  .topic-title a:hover { color: var(--orange-600); text-decoration: underline; }
  .topic-excerpt { display: -webkit-box; margin: 0 0 4px; overflow: hidden; color: var(--ink-700); font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .topic-meta { margin: 0 0 4px; color: #5a6578; font-size: 11px; }
  .topic-activity { display: flex; flex: 0 0 140px; flex-direction: column; gap: 2px; width: 140px; padding-left: 12px; border-left: 1px solid var(--line-200); color: #5a6578; font-size: 11px; }
  .topic-activity .replies { color: var(--navy-700); font-size: 16px; }
  .forum-topics .pager, .reply-box + .pager { padding: 10px; }

  /* portada de foros */
  .space-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 150px; gap: 12px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line-200); }
  .space-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-200); border-radius: 3px; background: var(--sky-100); color: var(--navy-700); font-size: 16px; font-weight: bold; }
  .space-info h3 { margin: 0; font-size: 16px; }
  .space-info h3 a { text-decoration: none; }
  a:has(> .avatar-initial) { text-decoration: none; }
  .filters-open, .filters-close { display: none; }
  .space-info p { margin: 2px 0 0; color: #5a6578; font-size: 12px; }
  .space-stats, .space-last { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #5a6578; }
  .space-stats b, .space-last b { color: var(--ink-900); font-size: 12px; }

  /* estados vacíos */
  .empty-state { padding: 28px 20px; text-align: center; }
  .empty-state .empty-icon { width: 56px; height: 56px; margin: 0 auto 8px; border: 1px solid var(--line-200); border-radius: 50%; background: var(--sky-100); }
  .empty-state h3 { margin: 0 0 4px; color: var(--navy-700); font-size: 16px; }
  .empty-state p { margin: 0 auto 12px; max-width: 420px; color: #5a6578; }

  /* filtros */
  .filter-panel form { display: grid; gap: 12px; }
  .filter-group { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--line-200); border-radius: 6px; background: var(--sky-50); }
  .filter-group legend { padding: 0 4px; color: var(--navy-700); font-weight: bold; }
  .filter-options { margin: 0 0 8px; padding: 0; list-style: none; }
  .filter-option { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 3px; }
  .filter-option.state-inc { background: #e3f4e4; font-weight: bold; }
  .filter-option.state-exc { background: #fde8e6; font-weight: bold; text-decoration: line-through; }
  .filter-option .opt-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .filter-option .opt-count { color: #5a6578; font-size: 11px; }
  .seg { display: inline-flex; border: 1px solid var(--line-400, #a9b6ca); border-radius: 4px; overflow: hidden; background: var(--paper); }
  .seg label { position: relative; display: block; }
  .seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .seg span { display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; color: var(--ink-700); font-weight: bold; }
  .seg label + label span { border-left: 1px solid #a9b6ca; }
  .seg .seg-inc input:checked + span { background: #17692a; color: #fff; }
  .seg .seg-exc input:checked + span { background: #a3211a; color: #fff; }
  .seg .seg-off input:checked + span { background: var(--sky-100); }
  .seg input:focus-visible + span { outline: 2px solid var(--orange-600); outline-offset: -2px; }
  .stacked label.radio, .radio { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; font-weight: normal; }
  .radio small { display: block; color: #5a6578; font-weight: normal; }
  .logic-sentence { margin: 6px 0; color: var(--ink-700); }
  .active-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
  .active-foot span a + a { margin-left: 12px; }
  .together { margin: 0; padding: 0; list-style: none; }
  .together li { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #5a6578; font-size: 11px; }
  .related-topics { margin: 0; padding-left: 16px; }
  .forum-tips { margin: 0; padding-left: 18px; }
  .forum-tips li { margin-bottom: 6px; }

  /* tema y respuestas */
  .topic-head { display: grid; gap: 6px; }
  .forum-post { display: flex; margin: 0 0 10px; border: 1px solid var(--line-200); border-radius: 5px; background: var(--paper); overflow: hidden; }
  .post-author { display: flex; flex: 0 0 150px; flex-direction: column; align-items: center; gap: 4px; padding: 12px; background: var(--sky-50); text-align: center; font-size: 11px; }
  .post-author .author-name { font-weight: bold; }
  .post-author .since { color: #5a6578; }
  .post-body { flex: 1 1 auto; min-width: 0; padding: 12px; }
  .post-meta { display: flex; justify-content: space-between; margin: 0 0 8px; color: #5a6578; font-size: 11px; }
  .post-content { overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
  .post-content img { max-width: 100%; height: auto; }
  .post-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; font-size: 12px; }
  .inline-form { display: inline; margin: 0; }
  .link-button { padding: 0; border: 0; background: none; box-shadow: none; color: var(--blue-500); font: 12px var(--font); text-decoration: underline; cursor: pointer; }
  .link-button:hover { color: var(--orange-600); filter: none; }

  /* formulario de tema y selector de etiquetas */
  .has-error input, .has-error select, .has-error textarea, .has-error .tags-box { border: 2px solid #a3211a; }
  .field-error { color: #a3211a; font-size: 11px; font-weight: normal; }
  .suggested { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .tags-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid #a9b6ca; border-radius: 4px; background: var(--paper); }
  .tags-box input { flex: 1 1 140px; min-width: 120px; border: 0; box-shadow: none; padding: 4px; }
  .tags-box:focus-within { border: 2px solid var(--orange-600); }
  .tag-suggestions { position: relative; margin: 2px 0 0; padding: 0; border: 1px solid #a9b6ca; border-radius: 4px; background: var(--paper); list-style: none; box-shadow: var(--shadow-card); }
  .tag-suggestions li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; cursor: pointer; }
  .tag-suggestions li[aria-selected="true"], .tag-suggestions li:hover { background: var(--sky-100); }
  .tag-suggestions li.new { background: var(--sky-50); color: var(--blue-500); }

  /* mensajes por conversación */
  .mail2 { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 16px; width: 100%; min-width: 0; }
  .mail2-list { flex: 0 0 300px; width: 300px; }
  .mail2-pane { flex: 1 1 auto; min-width: 0; }
  .mail2-list .box .inner { padding: 0; }
  .conv-search { padding: 8px; }
  .conv-search input { width: 100%; }
  .conv-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line-200); color: var(--ink-900); text-decoration: none; }
  .conv-row:hover { background: var(--sky-50); color: var(--ink-900); }
  .conv-row.unread { background: var(--orange-50); font-weight: bold; }
  .conv-row.selected { border-left: 3px solid var(--navy-700); background: #cfe0f6; }
  .conv-row .avatar { width: 44px; height: 44px; font-size: 18px; flex: none; border-width: 2px; }
  .conv-main { flex: 1 1 auto; min-width: 0; }
  .conv-top { display: flex; justify-content: space-between; gap: 8px; }
  .conv-time { color: #5a6578; font-size: 11px; font-weight: normal; }
  .conv-snippet { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #5a6578; font-size: 12px; font-weight: normal; }
  .conv-row.unread .conv-snippet { color: var(--ink-900); }
  .conv-snippet span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv-pane { display: flex; flex-direction: column; border: 1px solid var(--line-200); border-radius: 6px; background: var(--paper); overflow: hidden; box-shadow: var(--shadow-card); }
  .conv-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line-200); background: var(--sky-50); }
  .conv-head .avatar { width: 44px; height: 44px; font-size: 18px; border-width: 2px; }
  .conv-head h2 { margin: 0; font-size: 16px; }
  .conv-head .grow { flex: 1 1 auto; }
  .conv-head .presence { display: inline-flex; align-items: center; gap: 4px; color: #5a6578; font-size: 11px; }
  .conv-head .presence::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--online-500); }
  .msg-list { padding: 8px; }
  .msg-day { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #5a6578; font-size: 11px; }
  .msg-day::before, .msg-day::after { content: ""; flex: 1; height: 1px; background: var(--line-200); }
  .msg { display: flex; gap: 10px; padding: 8px; }
  .msg.own { background: var(--sky-100); }
  .msg .avatar { width: 32px; height: 32px; font-size: 13px; flex: none; border-width: 2px; }
  .msg-body-wrap { flex: 1 1 auto; min-width: 0; }
  .msg-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
  .msg-head b { color: var(--blue-500); }
  .msg.own .msg-head b { color: var(--navy-700); }
  .msg-head time { color: #5a6578; font-size: 11px; }
  .msg-text { overflow-wrap: anywhere; }
  .msg-status { margin: 2px 0 0; color: #5a6578; font-size: 11px; }
  .composer { padding: 12px; border-top: 1px solid var(--line-200); background: var(--sky-50); }
  .composer textarea { width: 100%; min-height: 64px; }
  .composer .composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
  .composer .hint { flex: 1 1 auto; }
  .banner-error { display: flex; align-items: center; gap: 12px; margin: 12px; padding: 12px; border: 2px solid #a3211a; border-radius: 5px; background: #fde8e6; }
  .banner-error b { color: #a3211a; }
  .mail2-back { display: none; white-space: nowrap; }
  .conv-foot { margin: 0; padding: 8px 12px; color: #5a6578; font-size: 11px; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .conv-row .badge-count { flex: none; }

  /* boletines: presentación editorial, distinta de una conversación */
  .bulletin-card { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line-200); border-left: 4px solid var(--navy-700); background: var(--sky-50); }
  .bulletin-card .kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--navy-700); font-size: 11px; font-weight: bold; letter-spacing: 0.4px; }
  .bulletin-card .kicker time { color: #5a6578; font-weight: normal; letter-spacing: 0; }
  .bulletin-card h3 { margin: 4px 0; font-size: 18px; line-height: 1.25; }
  .bulletin-card h3 a { color: var(--ink-900); text-decoration: none; }
  .bulletin-card h3 a:hover { color: var(--orange-600); text-decoration: underline; }
  .bulletin-card .byline { margin: 0 0 6px; color: var(--ink-600); font-size: 12px; }
  .bulletin-card .excerpt { margin: 0 0 8px; color: var(--ink-900); }
  .bulletin-card .foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .bulletin-card .read-more { color: var(--blue-500); font-weight: bold; }
  .bulletin-feed { padding: 0 !important; }
  .bulletin-feed > p { margin: 0; padding: 10px 14px 0; }
  .bulletin-feed .bulletin-cards { margin-top: 8px; }
  .bulletin-view .kicker { color: var(--navy-700); font-size: 11px; font-weight: bold; letter-spacing: 0.4px; }
  .bulletin-view .bulletin-tags { margin: 10px 0 0; }

  @media (max-width: 860px) {
    .forum-page .sidebar, .forum-sidebar { flex: none; width: 100%; }
    .forum-search input { flex: 1; width: auto; }
    .forum-page .btn, .forum-page button, .mail2 button, .mail2 .btn { min-height: 44px; }
    .forum-page input:not([type="radio"]):not([type="checkbox"]), .forum-page select, .forum-page textarea, .mail2 input, .mail2 textarea { font-size: 16px; min-height: 44px; }
    .forum-page input[type="radio"] { width: 20px; height: 20px; min-height: 0; }
    /* En móvil el panel de filtros es una hoja que se abre con «Filtros» (sin JavaScript: :target). */
    .filters-open { display: inline-flex; }
    .forum-sidebar .filter-panel { display: none; }
    .forum-sidebar .filter-panel:target { display: block; position: fixed; inset: 0; z-index: 100; overflow-y: auto; border-radius: 0; }
    .filter-panel:target .filters-close { display: inline-flex; align-items: center; float: right; color: #fff; }
    .topic-row { flex-direction: column; gap: 8px; }
    .topic-activity { flex: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; width: auto; padding-left: 0; border-left: 0; }
    .space-row { grid-template-columns: 40px minmax(0, 1fr); }
    .space-stats, .space-last { grid-column: 2; flex-direction: row; gap: 8px; }
    .forum-post { flex-direction: column; }
    .post-author { flex: none; flex-direction: row; justify-content: flex-start; text-align: left; }
    .mail2 { flex-direction: column; }
    .mail2-list, .mail2-pane { flex: none; width: 100%; }
    .mail2.has-conversation .mail2-list { display: none; }
    .mail2:not(.has-conversation) .mail2-pane { display: none; }
    .mail2-back { display: inline-flex; align-items: center; min-height: 44px; }
    .conv-row { min-height: 56px; }
    .seg span { width: 32px; height: 32px; }
    .tag { padding: 6px 10px; }
  }
}