/* Estética de JW Content Hub: estructura de Bymundi Content Hub con la paleta "grafito" de JoseanWebs.
   Barra lateral grafito casi negra (el logo azul resalta encima, 6,6:1); botones y enlaces en el azul del logo
   oscurecido (#2FA9E1 → #1A6FB0, para llegar a 5,3:1 sobre blanco); área de trabajo gris frío muy claro.
   Inter en la interfaz y Playfair Display en títulos. Es una herramienta para muchas horas. */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter.woff2) format('woff2'); }

:root {
  /* Paleta "grafito" (elegida por Josean el 04/11/2026). Alternativa descartada, "azul noche":
     marca #0f2a44 / oscuro #0b1f33 / claro #1c3d5e / borde #24476b / línea #3a5f85 / texto #e6edf5 / tenue #9db4cc
     lienzo #f5f7fa / tinta #172231 / tinta-suave #526073 / tenue #94a0b0 / borde #e2e7ee / borde-fuerte #cad3de / hover #eef2f7 / suave #f0f3f7 */
  --marca: #16191f; --marca-oscuro: #0f1115; --marca-claro: #262a33; --marca-borde: #2b3039;
  --marca-linea: #414854; --marca-texto: #e8eaee; --marca-tenue: #a0a7b4;
  --lienzo: #f5f6f8; --papel: #ffffff; --tinta: #181b21; --tinta-suave: #565d69; --tenue: #9aa0aa;
  --borde: #e3e5e9; --borde-fuerte: #cdd1d8; --hover: #eff1f4; --suave: #f1f2f5;
  --acento: #1a6fb0; --acento-oscuro: #155a90; --acento-suave: #e8f1fa;
  --ok: #4a8a63; --ok-suave: #edf6f0; --aviso: #99701a; --aviso-suave: #fbf5e6; --urgente: #a33328; --urgente-suave: #fcefed;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Títulos en la misma sans serif que el resto (Josean prefiere una tipo Helvetica a la serif de Bymundi) */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --radius: 12px; --focus: 0 0 0 3px rgba(26, 111, 176, .25);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
/* rem = 16 px como en las webs: el lienzo del editor usa las mismas medidas en rem */
html { font-size: 16px; }
body { font: 14px/1.5 var(--font-sans); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--lienzo); }
a { color: var(--acento); }
h1 { font: 700 26px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 1.25rem; }
h1 small { font: 500 15px var(--font-sans); color: var(--tinta-suave); letter-spacing: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 1.6rem 0 .6rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted, small { color: var(--tinta-suave); }
.etiqueta-mini { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 600; }
code { font-size: .9em; background: var(--suave); padding: .05em .3em; border-radius: 4px; }

/* ---------------------------------------------------------------- estructura */
.app { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; width: 240px; flex: none; display: flex; flex-direction: column; background: var(--marca); color: var(--marca-texto); }
.sidebar .brand { display: block; padding: 20px; border-bottom: 1px solid var(--marca-borde); text-decoration: none; color: var(--marca-texto); transition: background .15s; }
.sidebar .brand:hover { background: var(--marca-claro); }
.sidebar .brand .jw-logo { display: block; width: 100%; max-width: 200px; height: auto; }
.sidebar .brand .ch { font: 600 17px/1 var(--font-sans); margin-top: 10px; color: #fff; letter-spacing: -.01em; }
.site-switch { padding: 12px; border-bottom: 1px solid var(--marca-borde); }
.ss-label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--marca-tenue); font-weight: 600; margin: 0 0 6px 2px; }
/* Selector de webs con logotipos, directamente sobre el azul de la barra */
.ss { position: relative; }
.ss-card { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 6px 28px 6px 10px; color: var(--marca-texto); border-radius: 10px; cursor: pointer; list-style: none; position: relative; transition: background .15s; }
.ss-card::-webkit-details-marker { display: none; }
.ss-card:hover, .ss[open] .ss-card { background: var(--marca-claro); }
.ss-card img { max-height: 52px; max-width: 100%; width: auto; display: block; }
.ss-empty { cursor: default; padding-right: 10px; font-size: 13px; color: var(--marca-tenue); }
.ss-name { font: 600 14px var(--font-sans); }
.ss-caret { position: absolute; right: 8px; top: 50%; width: 12px; height: 7px; margin-top: -3px; color: var(--marca-texto); transition: transform .15s; }
.ss[open] .ss-caret { transform: rotate(180deg); }
.ss-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--marca-oscuro); border: 1px solid var(--marca-borde); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); padding: 6px; margin: 0; list-style: none; max-height: 60vh; overflow-y: auto; }
.ss-menu a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--marca-texto); }
.ss-menu a:hover { background: var(--marca-claro); }
.ss-menu a.on { background: var(--marca-claro); box-shadow: inset 0 0 0 1px var(--marca-linea); }
.ss-menu img { max-height: 40px; max-width: 100%; width: auto; }
/* Logos oficiales en color: sobre pastilla clara para que se lean en la barra oscura */
.ss-logo { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.ss-logo { background: #fff; border-radius: 8px; padding: 6px 10px; }
.ss-card .ss-logo img { max-height: 40px; }
.ss-menu .ss-logo img { max-height: 36px; }
.nav { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--marca-tenue); transition: background .15s, color .15s; }
.nav a:hover { background: var(--marca-claro); color: #fff; }
.nav a.on { background: var(--marca-claro); color: #fff; }
.nav .group { margin-top: 14px; padding: 0 12px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--marca-tenue); opacity: .8; font-weight: 600; }
.nav .apart { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--marca-linea); }
.nav .badge { margin-left: auto; background: #e3c98f; color: var(--marca-oscuro); border-radius: 99px; font-size: 11px; padding: 0 7px; font-weight: 700; }
.me { border-top: 1px solid var(--marca-borde); padding: 12px; }
.me .who { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--marca-texto); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--marca-claro); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.me .name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .role { font-size: 12px; color: var(--marca-tenue); }
.me form { margin: 8px 0 0; }
.me button { width: 100%; text-align: left; background: none; border: 0; color: var(--marca-tenue); font: 12px var(--font-sans); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.me button:hover { background: var(--marca-claro); color: #fff; }
.content { flex: 1; min-width: 0; padding: 32px; max-width: 1200px; }
.content.wide { max-width: none; }
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar { position: static; height: auto; width: 100%; }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav .group, .nav .apart { display: none; }
  .nav a { white-space: nowrap; }
  .content { padding: 16px; }
}
.narrow { max-width: 420px; margin: 10vh auto; padding: 32px; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radius); }
.narrow .login-brand { font: 700 30px/1 var(--font-display); color: var(--marca); margin-bottom: 4px; }
.narrow .login-sub { font: 600 18px/1 var(--font-display); color: var(--tinta-suave); margin-bottom: 24px; }
body.login { background: var(--marca); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; }
body.login .narrow { margin: 0; width: 100%; }
.login-top { text-align: center; }
.login-top img { width: 240px; max-width: 70vw; height: auto; display: block; margin: 0 auto; }
.login-top .ch { font: 600 18px/1 var(--font-sans); color: #fff; margin-top: 10px; }

/* ---------------------------------------------------------------- piezas */
.card { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radius); padding: 18px 20px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { font: 600 30px/1.1 var(--font-display); color: var(--tinta); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: 16px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; color: var(--tinta); }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search],
input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--papel); color: var(--tinta); font: 14px var(--font-sans);
}
input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--papel); }
input[type=checkbox], input[type=radio] { accent-color: var(--marca); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--acento); }
textarea { min-height: 5rem; resize: vertical; }
.field { margin-bottom: 16px; }
.help { font-size: 12px; color: var(--tinta-suave); margin: 4px 0 0; }
.counter { float: right; font-weight: 400; color: var(--tenue); }
.counter.over { color: var(--urgente); }
fieldset { border: 1px solid var(--borde); border-radius: 8px; }
legend { font-weight: 600; font-size: 13px; padding: 0 6px; }
details > summary { cursor: pointer; font-weight: 600; }

button, .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--borde-fuerte); background: var(--papel); color: var(--tinta); font: 500 14px var(--font-sans); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
button:hover, .btn:hover { background: var(--hover); }
button.primary, .btn.primary { background: var(--acento); color: #fff; border-color: var(--acento); }
button.primary:hover, .btn.primary:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
button.danger { color: var(--urgente); border-color: #e7c3be; }
button.danger:hover { background: var(--urgente-suave); }
button.link { border: 0; background: none; padding: 0; color: var(--acento); font-weight: 500; }
button.link:hover { background: none; text-decoration: underline; }
button.small, .btn.small { padding: 3px 9px; font-size: 13px; }

table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); font-weight: 600; background: var(--papel); }
th a { color: inherit; text-decoration: none; }
tbody tr:hover td { background: #fafbf9; }
tr:last-child td { border-bottom: 0; }
td.title a { font-weight: 600; text-decoration: none; color: var(--tinta); }
td.title a:hover { color: var(--acento); }
.table-wrap { overflow-x: auto; }

/* Insignias: mismos tonos que Bymundi */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--suave); color: var(--tinta-suave); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip.published, .chip.active, .chip.done, .chip.keep { background: var(--ok-suave); color: var(--ok); }
.chip.scheduled, .chip.expiring, .chip.running, .chip.review { background: var(--aviso-suave); color: var(--aviso); }
.chip.failed, .chip.delete { background: var(--urgente-suave); color: var(--urgente); }
.chip.acento { background: var(--acento-suave); color: var(--acento); }

.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; font-weight: 500; }
.flash.ok { background: var(--ok-suave); color: var(--ok); }
.flash.err { background: var(--urgente-suave); color: var(--urgente); }
.alert { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--radius); background: var(--aviso-suave); border: 1px solid #ecdcae; color: #6e5212; margin-bottom: 16px; text-decoration: none; }

.filters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: end; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.filters label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.pager { display: flex; gap: 8px; margin-top: 16px; align-items: center; }

/* ---------------------------------------------------------------- editor
   El lienzo del artículo reproduce la tipografía, el tamaño y los espacios de la web
   publicada (mismas reglas que .prose de site.css), con las fuentes y colores de cada web. */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1150px) { .editor-layout { grid-template-columns: 1fr; } }
.editor-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-bottom: 8px; }
.editor-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.canvas { background: var(--bg, #fff); color: var(--text, var(--tinta)); border: 1px solid var(--borde); border-radius: var(--radius); }
.canvas-inner { max-width: 760px; margin: 0 auto; padding: 40px 24px 56px; }
.title-input { width: 100%; border: 0 !important; padding: 0 !important; background: transparent !important; color: inherit !important; resize: none; overflow: hidden;
  font-family: var(--font-h) !important; font-size: clamp(1.9rem, 4.5vw, 3rem) !important; line-height: 1.25 !important; font-weight: 700; letter-spacing: -.01em; }
.title-input:focus { box-shadow: none !important; }
.slug-row { display: flex; gap: 6px; align-items: center; margin: 10px 0 18px; font-size: 13px; color: var(--tinta-suave); font-family: var(--font-sans); flex-wrap: wrap; }
.slug-row input { width: auto; flex: 1; min-width: 200px; max-width: 460px; padding: 3px 6px; font-size: 13px; }
.excerpt-input { overflow: hidden; width: 100%; border: 0 !important; padding: 0 !important; background: transparent !important; color: inherit !important; resize: none; min-height: 0 !important;
  font-family: var(--font-b); font-size: 1.2rem; line-height: 1.6; opacity: .78; margin-bottom: 1.4rem; }
.excerpt-input:focus { box-shadow: none !important; opacity: 1; }
.toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border: 1px solid var(--borde); border-radius: 10px; background: var(--papel); position: sticky; top: 8px; z-index: 5; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.toolbar button { padding: 4px 9px; font-size: 13px; font-weight: 600; border-color: transparent; background: transparent; }
.toolbar button:hover { background: var(--hover); }
.toolbar button.on { background: var(--acento-suave); color: var(--acento); }
.toolbar .sep { width: 1px; background: var(--borde); margin: 2px 4px; }
.hero-preview { margin: 0 -24px 1.8rem; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: var(--suave) center/cover no-repeat; }

/* Copia de .prose de la web (site.css): si cambias una, cambia la otra */
.prose { font-family: var(--font-b); font-size: 1.1rem; line-height: 1.7; color: var(--text, var(--tinta)); }
.prose .ProseMirror { outline: none; min-height: 360px; }
.prose .ProseMirror > * + * { margin-top: 1.1em; }
.prose .ProseMirror > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose h2, .prose h3, .prose h4, .prose blockquote, .prose figure { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { font-family: var(--font-h); line-height: 1.25; letter-spacing: -.01em; }
.prose h2 { font-size: 1.6rem; margin-top: 2em !important; }
.prose h3 { font-size: 1.3rem; margin-top: 1.6em !important; }
.prose h4 { font-size: 1.1rem; margin-top: 1.4em !important; }
.prose a { color: var(--primary, var(--acento)); }
.prose img { max-width: 100%; height: auto; border-radius: 8px; display: block; width: 100%; }
.prose img.ProseMirror-selectednode { outline: 3px solid var(--acento); outline-offset: 2px; }
.prose blockquote { border-left: 4px solid var(--primary, var(--marca)); margin-left: 0; padding-left: 1.2rem; font-style: italic; }
.prose .jw-box, .prose .jw-didyouknow { background: color-mix(in srgb, var(--accent, #e8a300) 14%, transparent); border-radius: 10px; padding: 1.1rem 1.3rem; border-left: 5px solid var(--accent, #e8a300); }
.prose .jw-box > * + * { margin-top: .8em; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; margin-top: 1.1em; }
.prose th, .prose td { border: 1px solid color-mix(in srgb, var(--text, #1d1d1b) 15%, transparent); padding: .5rem .7rem; text-align: left; vertical-align: top; min-width: 60px; }
.prose table { border-spacing: 0; border-radius: 0; background: transparent; overflow: visible; }
.prose th { font: 700 1em var(--font-b); text-transform: none; letter-spacing: 0; color: inherit; background: color-mix(in srgb, var(--text, #1d1d1b) 4%, transparent); }
.prose tbody tr:hover td { background: transparent; }
.prose td p, .prose th p { margin: 0; }
.prose .selectedCell { background: var(--acento-suave); }
.prose .tableWrapper { overflow-x: auto; }
.prose hr { border: 0; border-top: 1px solid var(--borde-fuerte); margin: 2em 0; }
.prose iframe, .prose div[data-youtube-video] iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 8px; }
.prose p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--tenue); float: left; height: 0; pointer-events: none; }

.serp { font-family: arial, sans-serif; padding: 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--papel); }
.serp .u { font-size: 12px; color: #4d5156; }
.serp .t { color: #1a0dab; font-size: 18px; line-height: 1.3; margin: 2px 0; }
.serp .d { font-size: 13px; color: #4d5156; }

/* Imagen de cabecera en la barra lateral del editor */
button.hero-pick { display: block; width: 100%; padding: 0; border: 2px dashed var(--borde-fuerte); border-radius: 10px; aspect-ratio: 16/9; background: var(--suave) center/cover no-repeat; cursor: pointer; position: relative; overflow: hidden; }
button.hero-pick:hover { border-color: var(--acento); background-color: var(--hover); }
button.hero-pick.has { border-style: solid; border-color: var(--borde); }
button.hero-pick span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; font-size: 12px; text-align: center; background: rgba(15, 17, 21, .72); color: #fff; }
button.hero-pick:not(.has) span { position: static; background: none; color: var(--tinta-suave); display: grid; place-items: center; height: 100%; font-weight: 600; }

/* Biblioteca de imágenes */
.media-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; }
.media-grid figure { margin: 0; background: var(--papel); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; transition: border-color .15s; }
.media-grid figure:hover { border-color: var(--acento); }
.media-grid img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--suave); }
.media-grid figcaption { font-size: 12px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-grid button.pick { all: unset; cursor: pointer; display: block; }
.focal-wrap { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; }
.focal-wrap img { max-width: 100%; max-height: 60vh; display: block; border-radius: 8px; }
.focal-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--acento); pointer-events: none; }
dialog { border: 1px solid var(--borde); border-radius: var(--radius); padding: 0; width: min(1000px, 95vw); max-height: 90vh; background: var(--papel); color: var(--tinta); box-shadow: 0 20px 60px rgba(0,0,0,.2); }
dialog::backdrop { background: rgba(15, 17, 21, .55); }
dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--borde); position: sticky; top: 0; background: var(--papel); z-index: 1; }
dialog .dlg-body { padding: 16px; overflow: auto; }
.dropzone { border: 2px dashed var(--borde-fuerte); border-radius: var(--radius); padding: 20px; text-align: center; color: var(--tinta-suave); background: var(--papel); }
.dropzone.over { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }

/* ---------------------------------------------------------------- panel general
   Métricas de la red arriba y una tarjeta por web (como el panel de proyectos de Bymundi) */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px 26px; margin-bottom: 24px; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.kpis .stat { font: 600 32px/1.1 var(--font-sans); letter-spacing: -.02em; }
.kpis small { display: block; margin-top: 4px; font-size: 13px; }
.stat-sub { font-size: .55em; color: var(--tenue); font-weight: 500; }
.chip.demo { background: var(--aviso-suave); color: var(--aviso); font-size: 10px; padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.projects { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
/* 6 por fila en pantallas grandes; menos cuando no caben */
@media (max-width: 1700px) { .projects { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1450px) { .projects { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .projects { grid-template-columns: 1fr; } }
.project { position: relative; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.project-cover { position: relative; display: block; height: 130px; background: var(--suave) center/cover no-repeat; }
.project-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15, 17, 21, .55)); }
/* Caja máxima de 120×54: los logos muy anchos (ProtectorSolar) ocupan lo mismo que los compactos (Supercurioso) */
.project-cover img { position: absolute; left: 12px; bottom: 10px; z-index: 1; max-height: 40px; max-width: 150px; width: auto; height: auto; background: rgba(255, 255, 255, .95); border-radius: 8px; padding: 5px 8px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.project-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.project-name { font: 700 18px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0; }
.project-name a { color: var(--tinta); text-decoration: none; }
.project-name a:hover { color: var(--acento); }
.project-desc { margin: -6px 0 0; color: var(--tinta-suave); font-size: 15px; }
.metric-group { display: flex; flex-direction: column; gap: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mpill { display: inline-flex; gap: 4px; align-items: baseline; border: 1px solid var(--borde-fuerte); border-radius: 99px; padding: 3px 12px; font-size: 13px; color: var(--tinta-suave); }
.mpill b { color: var(--tinta); font-weight: 600; }
.mpill.strong { background: var(--suave); border-color: var(--suave); }
.traffic { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .traffic { grid-template-columns: repeat(2, 1fr); } }
.traffic > div { display: flex; flex-direction: column; }
.traffic b { font: 600 19px/1.2 var(--font-sans); letter-spacing: -.01em; }
.traffic small { font-size: 12px; }
.trend { font-size: 11px; font-weight: 600; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--urgente); }
.spark { width: 100%; height: 44px; display: block; }
.spark polyline { fill: none; stroke: var(--acento); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark polygon { fill: var(--acento-suave); stroke: none; }
.project-actions { margin-top: auto; padding-top: 4px; gap: 8px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.platform { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 28px; padding: 6px 2px; font-size: 13px; color: var(--tinta-suave); }
.dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--tenue); }
.dot.ok::before { background: var(--ok); }
.dot.off { color: var(--tenue); }

/* Ficha de proyecto sencilla: tres métricas */
.project-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px solid var(--borde); }
.project-metrics div { min-width: 0; }
.project-metrics dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--tinta-suave); margin-bottom: 4px; }
.project-metrics dd { margin: 0; font: 600 21px/1.1 var(--font-sans); letter-spacing: -.02em; color: var(--tinta); }
/* Menú de tres puntos de cada tarjeta (sobre la portada, arriba a la derecha) */
.project-menu { position: absolute; top: 10px; right: 10px; z-index: 3; }
.project-menu summary { list-style: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(15, 17, 21, .45); backdrop-filter: blur(4px); transition: background .15s; }
.project-menu summary::-webkit-details-marker { display: none; }
.project-menu summary svg { fill: currentColor; }
.project-menu summary:hover, .project-menu[open] summary { background: rgba(15, 17, 21, .7); }
.project-menu summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.project-menu-list { position: absolute; right: 0; top: 38px; min-width: 170px; background: var(--papel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 17, 21, .16); padding: 6px; display: flex; flex-direction: column; }
.project-menu-list a { padding: 8px 12px; border-radius: 6px; color: var(--tinta); text-decoration: none; font-size: 14px; }
.project-menu-list a:hover, .project-menu-list a:focus-visible { background: var(--suave); outline: none; }
.project-links { display: flex; gap: 18px; margin-top: auto; padding-top: 4px; font-size: 13px; }
.project-links a { color: var(--tinta-suave); text-decoration: none; }
.project-links a:hover { color: var(--acento); }

/* Caja de producto de afiliado (editor). Misma idea que .jw-product de site.css */
.prose .jw-product { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: 12px; padding: 14px 16px; margin-top: 1.1em; font-family: var(--font-sans); font-size: 14px; background: var(--papel); }
.prose .jw-product.ProseMirror-selectednode { outline: 3px solid var(--acento); outline-offset: 2px; }
.prose .jw-product img { width: 120px; height: 120px; object-fit: contain; border-radius: 0; }
.prose .jw-product-title { font-weight: 700; color: var(--tinta); text-decoration: none; display: block; line-height: 1.35; }
.prose .jw-product ul { margin: 6px 0 8px; padding-left: 18px; color: var(--tinta-suave); font-size: 13px; }
.prose .jw-product-btn { display: inline-block; background: var(--primary, var(--acento)); color: #fff; padding: 5px 12px; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: 13px; }

/* ---------------------------------------------------------------- Optimización SEO-GEO */
.seo-geo .sg-head { display: flex; gap: 12px; align-items: center; }
.seo-geo .sg-head small { display: block; font-size: 12px; margin-top: 2px; }
.sg-ring { --p: 0; --c: var(--tenue); flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--suave) 0); position: relative; }
.sg-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--papel); }
.sg-ring span { position: relative; font: 700 16px var(--font-sans); }
.sg-ring[data-level="ok"] { --c: var(--ok); }
.sg-ring[data-level="warn"] { --c: var(--aviso); }
.sg-ring[data-level="bad"] { --c: var(--urgente); }
.sg-volume { min-height: 4px; }
.sg-vol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; background: var(--suave); border-radius: 10px; padding: 10px 34px 10px 10px; position: relative; }
.sg-vol b { display: block; font: 700 20px/1.2 var(--font-sans); letter-spacing: -.01em; }
.sg-vol small { font-size: 11.5px; line-height: 1.25; display: block; margin-top: 2px; }
.sg-refresh { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--tinta-suave); cursor: pointer; }
.sg-refresh:hover { background: rgba(0,0,0,.06); color: inherit; }
.sg-refresh:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.sg-loading { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-suave); background: var(--suave); border-radius: 10px; padding: 12px; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde-fuerte); border-top-color: var(--acento); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sg-error { font-size: 12.5px; color: var(--urgente); margin: 4px 0; }
.sg-checks { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.sg-group { border: 1px solid var(--borde); border-radius: 8px; }
.sg-group > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; list-style: none; }
.sg-group > summary::-webkit-details-marker { display: none; }
.sg-group > summary small { margin-left: auto; }
.sg-item { display: flex; gap: 8px; padding: 6px 10px 8px; border-top: 1px solid var(--suave); }
.sg-item b { font-size: 12.5px; font-weight: 600; }
.sg-item p { margin: 2px 0 0; font-size: 12px; color: var(--tinta-suave); line-height: 1.4; }
.sg-dot { font-size: 11px; line-height: 1.6; flex: none; }
.sg-dot.ok { color: var(--ok); } .sg-dot.warn { color: var(--aviso); } .sg-dot.bad { color: var(--urgente); } .sg-dot.na { color: var(--tenue); }
.chip.seo-ok { background: var(--ok-suave); color: var(--ok); } .chip.seo-warn { background: var(--aviso-suave); color: var(--aviso); } .chip.seo-bad { background: var(--urgente-suave); color: var(--urgente); }

/* Diseño de la web (D42) */
.design { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .design { grid-template-columns: 1fr; } }
.design h2 { margin-top: 0; }
.dz-color { display: flex; gap: 6px; }
.dz-color input[type=color] { width: 46px; flex: none; }
.dz-color .dz-hex { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: lowercase; }
.dz-img { max-height: 56px; max-width: 100%; display: block; margin-bottom: 6px; padding: 4px; border-radius: 6px; background: repeating-conic-gradient(#e6e7ea 0 25%, #fff 0 50%) 0 0/12px 12px; }
.dz-suggest { margin: -4px 0 14px; }
.dz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dz-chip-btn { padding: 3px 9px 3px 4px; font: 12px ui-monospace, Menlo, monospace; border-radius: 99px; }
.dz-chip-btn span { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.dz-chip-btn.on { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta) inset; }
.design.picking input[type=color] { outline: 2px dashed var(--acento); outline-offset: 2px; cursor: copy; }
.dz-preview { position: sticky; top: 16px; }
.dz-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); margin-bottom: 8px; }
.dz-site { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--bg) 96%, var(--text)); color: var(--text); font-family: var(--font-b); }
.dz-header { background: var(--grad); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; color: #fff; }
.dz-header img { max-height: 28px; max-width: 150px; }
.dz-header b { font: 800 16px var(--font-h); }
.dz-menu { font: 600 10.5px var(--font-h); opacity: .9; white-space: nowrap; }
.dz-band { position: relative; background: var(--grad); color: #fff; text-align: center; padding: 8px 18px 40px; margin-top: -1px; }
.dz-band p { margin: 0; font: 500 12px/1.45 var(--font-h); }
.dz-band svg { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 34px; fill: color-mix(in srgb, var(--bg) 96%, var(--text)); }
.dz-body { padding: 4px 14px 16px; }
.dz-card { background: var(--bg); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(20,20,30,.08); }
.dz-thumb { aspect-ratio: 16/7; background: linear-gradient(135deg, #d7dbe2, #eef0f3); }
.dz-cardtext { padding: 12px 14px 14px; }
.dz-chip { display: inline-block; font: 600 10px var(--font-h); color: var(--primary); border: 1px solid var(--primary); border-radius: 99px; padding: 1px 8px; }
.dz-cardtext h3 { font: 800 15px/1.25 var(--font-h); margin: 8px 0 6px; color: var(--text); }
.dz-cardtext p { font-size: 12.5px; line-height: 1.55; margin: 0 0 10px; }
.dz-cardtext a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.dz-btn { display: inline-block; background: var(--primary); color: #fff; font: 700 11px var(--font-h); padding: 6px 12px; border-radius: 99px; }
.dz-footer svg { display: block; width: 100%; height: 26px; fill: var(--footer); margin-bottom: -1px; }
.dz-footer div { background: var(--footer); color: #d9dbe2; padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 2px; font: 400 10.5px var(--font-h); }
.dz-footer b { color: #fff; font-size: 12px; }
th.num,td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.archive-sugg{list-style:none;padding:0;margin:.3rem 0 .8rem;display:grid;gap:.35rem}.archive-sugg button.link{text-align:left;padding:0}