/* Fluxus · Generador de clases — sistema visual (AcademiaFluxus + plantilla "Color Minimal"). */

:root {
  /* Color */
  --ink: #14231e;
  --ink-soft: #2c3d36;
  --paper: #ffffff;
  --bg: #f3f6f4;
  --foam: #e8f0eb;
  --foam-2: #f6f9f7;
  --muted: #5a6b64;
  --brand: #0f3d36;
  --brand-deep: #0a2823;
  --brand-2: #16564a;
  --accent: #2f8f6b;
  --primary: #257a5a;
  --primary-hover: #1d6549;
  --accent-soft: #cfe7db;
  --accent-tint: #e6f3ec;
  --violet: #7f67ed;
  --violet-deep: #5b45c9;
  --violet-soft: #efecfd;
  --violet-ink: #45368f;
  --gold: #c39a4e;
  --line: rgba(15, 61, 54, 0.11);
  --line-strong: rgba(15, 61, 54, 0.22);
  --ok-bg: #e4f4ec; --ok-ink: #1a5a3f; --ok-line: #b4dcc7;
  --warn-bg: #fdf3de; --warn-ink: #6e4b08; --warn-line: #ecd29d;
  --err-bg: #fbeaea; --err-ink: #7a2525; --err-line: #eab9b9;
  --info-bg: #eaf2f8; --info-ink: #214862; --info-line: #b8d0e0;
  --danger: #a33a3a;
  --danger-hover: #8a2f2f;
  --warn: #9a6a12;

  /* Espaciado (escala de 4 px) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;

  /* Forma y profundidad */
  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(10, 40, 35, .06);
  --shadow: 0 1px 2px rgba(10, 40, 35, .05), 0 8px 24px rgba(10, 40, 35, .06);
  --shadow-lift: 0 4px 10px rgba(10, 40, 35, .07), 0 18px 40px rgba(10, 40, 35, .11);
  --ring: 0 0 0 3px rgba(47, 143, 107, .28);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --side-w: 256px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
#editor, .fx-slide, #genForm, #drop, #imgUpload { scroll-margin-top: 84px; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 60% 35% at 100% 0%, rgba(127, 103, 237, .06), transparent 60%),
    radial-gradient(ellipse 70% 40% at 0% 0%, rgba(47, 143, 107, .10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; }
::selection { background: var(--accent-soft); }

h1, h2, h3 { font-family: var(--font-display); color: var(--brand); line-height: 1.1; margin: 0 0 var(--s2); font-weight: 700; }
h1 { font-size: clamp(2.05rem, 3.4vw, 2.75rem); letter-spacing: -.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

.fx-icon { flex: none; }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid rgba(47, 143, 107, .55); outline-offset: 2px; border-radius: 6px; }
.fx-side :focus-visible { outline-color: #9fd9bf; }

.fx-skip { position: absolute; left: var(--s4); top: -60px; z-index: 100; padding: .6rem 1rem; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; }
.fx-skip:focus { top: var(--s4); color: #fff; }

/* ---------- Estructura: barra lateral + contenido ---------- */

.fx-side {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5) var(--s3) var(--s4);
  background:
    radial-gradient(circle at 0% 100%, rgba(47, 143, 107, .28), transparent 50%),
    linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  z-index: 40;
  overflow-y: auto;
}
.fx-side-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.fx-brand { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; }
.fx-brand:hover { color: #fff; }
.fx-brand img { border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.fx-brand span { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.fx-brand small { display: block; margin-top: .25rem; font-family: var(--font-body); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); }
.fx-brand--side { padding: .25rem .45rem; }
.fx-navclose { display: none; }

.fx-side-cta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1rem; border-radius: 12px;
  background: #fff; color: var(--brand); font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.fx-side-cta:hover { color: var(--brand); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 0, 0, .24); }
.fx-side-cta .fx-icon { color: var(--primary); }
.fx-side-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.fx-side-ctas .fx-side-cta { padding: .65rem .45rem; gap: .3rem; font-size: .88rem; white-space: nowrap; }
.fx-side-ctas .fx-side-cta:first-child:nth-last-child(3) { grid-column: 1 / -1; }
.fx-side-cta--alt { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .24); box-shadow: none; }
.fx-side-cta--alt:hover { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.fx-side-cta--alt .fx-icon { color: var(--accent-soft); }

.fx-nav { display: grid; gap: 2px; }
.fx-nav-group { margin: var(--s3) .8rem var(--s1); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(207, 231, 219, .6); }
.fx-nav a, .fx-side-foot a, .fx-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .58rem .8rem;
  border-radius: 11px;
  color: #dcebe4;
  text-decoration: none;
  font: inherit;
  font-size: .94rem;
  font-weight: 500;
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
}
.fx-nav a span { flex: 1; }
.fx-nav a:hover, .fx-side-foot a:hover, .fx-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.fx-nav a.is-active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.fx-nav a.is-active::before { content: ""; position: absolute; left: -.75rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: #9fd9bf; }
.fx-nav a.is-active .fx-icon { color: #9fd9bf; }
.fx-nav-count { font-style: normal; min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px; background: rgba(255,255,255,.1); color: #cfe7db; font-size: .72rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.fx-nav a.is-active .fx-nav-count { background: rgba(159, 217, 191, .22); color: #fff; }
.fx-side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: var(--s3); border-top: 1px solid rgba(255,255,255,.1); }
.fx-side-note { margin: .6rem .8rem 0; font-size: .7rem; letter-spacing: .06em; color: rgba(220,235,228,.55); }
.fx-inline { display: inline; margin: 0; }

.fx-mobilebar { display: none; }
.fx-scrim { display: none; }

.fx-app .fx-main { margin-left: var(--side-w); }
.fx-main { max-width: calc(1280px + var(--side-w)); padding: var(--s8) clamp(1rem, 3.2vw, 2.75rem) var(--s10); outline: none; }
.fx-guest .fx-main { max-width: none; min-height: 100vh; display: grid; place-items: center; padding: var(--s6); }
.fx-foot { text-align: center; color: var(--muted); font-size: .8rem; padding: var(--s10) 0 var(--s2); }

/* ---------- Encabezados de página ---------- */

.fx-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--primary); font-weight: 600; margin: 0 0 .35rem; }
.fx-lede { color: var(--muted); max-width: 68ch; margin: 0; font-size: 1.02rem; }
.fx-muted { color: var(--muted); }
.fx-small { font-size: .85rem; }
.fx-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s8); margin-bottom: var(--s6); }
.fx-pagehead h1 { margin-bottom: .35rem; }
.fx-pagehead-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: var(--s3); font-size: .8rem; color: var(--muted); }
.fx-crumbs a { display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; }
.fx-crumbs a:hover { color: var(--primary); }
.fx-crumbs [aria-current] { color: var(--brand); font-weight: 600; }
.fx-crumbs > span[aria-hidden] { opacity: .45; }

/* ---------- Tarjetas ---------- */

.fx-panel, .fx-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
  margin-bottom: var(--s5);
  box-shadow: var(--shadow);
}
.fx-panel > h2:first-child, .fx-card > h2:first-child { margin-top: 0; }
.fx-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
.fx-panel-head h2 { margin: 0; display: flex; align-items: center; gap: .6rem; }
.fx-panel-head p { margin: .2rem 0 0; color: var(--muted); font-size: .92rem; }
.fx-h-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-tint); color: var(--primary); flex: none; }
.fx-h-icon--violet { background: var(--violet-soft); color: var(--violet-deep); }
.fx-count { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--foam); padding: .1rem .55rem; border-radius: 999px; vertical-align: middle; }

/* ---------- Botones ---------- */

.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font: inherit;
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  transition: background .15s, box-shadow .15s, transform .1s, color .15s, border-color .15s;
  white-space: nowrap;
}
.fx-btn:hover { background: var(--primary-hover); color: #fff; box-shadow: 0 6px 16px rgba(37, 122, 90, .25); }
.fx-btn:active { transform: translateY(1px); }
.fx-btn:disabled, .fx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.fx-btn .fx-icon { width: 18px; height: 18px; }
.fx-btn--secondary { background: var(--accent-tint); color: var(--brand); }
.fx-btn--secondary:hover { background: var(--accent-soft); color: var(--brand); box-shadow: none; }
.fx-btn--ghost { background: #fff; color: var(--brand); border-color: var(--line-strong); }
.fx-btn--ghost:hover { background: var(--foam-2); color: var(--brand); border-color: var(--primary); box-shadow: none; }
.fx-btn--quiet { background: transparent; color: var(--brand); }
.fx-btn--quiet:hover { background: var(--foam); color: var(--brand); box-shadow: none; }
.fx-btn--dark { background: var(--brand); }
.fx-btn--dark:hover { background: var(--brand-deep); box-shadow: 0 6px 16px rgba(10,40,35,.25); }
.fx-btn--violet { background: var(--violet-deep); }
.fx-btn--violet:hover { background: #4a36b0; box-shadow: 0 6px 16px rgba(91, 69, 201, .28); }
.fx-btn--danger { background: var(--danger); }
.fx-btn--danger:hover { background: var(--danger-hover); box-shadow: none; }
.fx-btn--danger-ghost { background: #fff; color: var(--danger); border-color: rgba(163, 58, 58, .3); }
.fx-btn--danger-ghost:hover { background: var(--err-bg); color: var(--danger-hover); border-color: var(--danger); box-shadow: none; }
.fx-btn--light { background: #fff; color: var(--brand); }
.fx-btn--light:hover { background: #f1f7f3; color: var(--brand); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.fx-btn--glass { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.fx-btn--glass:hover { background: rgba(255,255,255,.2); box-shadow: none; }
.fx-btn--sm { min-height: 34px; padding: .36rem .8rem; font-size: .84rem; }
.fx-btn--sm .fx-icon { width: 16px; height: 16px; }
.fx-btn--lg { min-height: 50px; padding: .8rem 1.6rem; font-size: 1.03rem; }
.fx-btn--block { width: 100%; }
.fx-btn--icon { padding: 0; width: 38px; min-height: 38px; }
.fx-btn--icon.fx-btn--sm { width: 34px; min-height: 34px; }
.fx-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ---------- Formularios ---------- */

.fx-form { display: grid; gap: var(--s4); }
.fx-form--row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; }
.fx-form--row > [data-dropzone] { grid-column: 1 / -1; }
.fx-form label, .fx-label { display: grid; gap: .35rem; font-weight: 500; font-size: .9rem; color: var(--ink); }
.fx-form input[type=text], .fx-form input[type=password], .fx-form input[type=number], .fx-form input[type=email], .fx-form input[type=search],
.fx-form input[type=file], .fx-form select, .fx-form textarea, .fx-input {
  width: 100%;
  min-height: 42px;
  padding: .6rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.fx-form input:hover, .fx-form select:hover, .fx-form textarea:hover, .fx-input:hover { border-color: rgba(15, 61, 54, .34); }
.fx-form input:focus, .fx-form select:focus, .fx-form textarea:focus, .fx-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.fx-form input[type=file] { padding: .5rem; background: var(--bg); }
.fx-form textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.fx-form input::placeholder, .fx-form textarea::placeholder, .fx-input::placeholder { color: #8a9892; }
.fx-hint { font-weight: 400; color: var(--muted); font-size: .8rem; }
.fx-check { display: flex !important; grid-template-columns: none; align-items: center; gap: .6rem !important; font-weight: 400 !important; cursor: pointer; }
.fx-check input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.fx-toggle { padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--foam-2); border: 1px solid var(--line); }
.fx-toggle:hover { border-color: var(--line-strong); }

.fx-search { position: relative; flex: 1 1 240px; max-width: 380px; }
.fx-search .fx-icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.fx-search input { width: 100%; min-height: 40px; padding: .5rem .9rem .5rem 2.4rem; border: 1px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: .92rem; background: #fff; color: var(--ink); }
.fx-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.fx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.fx-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.fx-noresults { padding: var(--s6) var(--s4); text-align: center; color: var(--muted); }

.fx-login { width: min(440px, 100%); margin: 0; padding: var(--s8); border-radius: var(--radius-lg); }
.fx-login-logo { display: block; width: 72px; height: 72px; border-radius: 50%; margin-bottom: var(--s4); box-shadow: var(--shadow); }
.fx-guest { background: radial-gradient(circle at 20% 10%, #dcece4 0, transparent 45%), radial-gradient(circle at 90% 90%, #ebe7fb 0, transparent 40%), var(--bg); }

/* ---------- Avisos, toasts y estados ---------- */

.fx-alert { display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px; margin-bottom: var(--s4); border: 1px solid var(--line); background: #fff; font-size: .94rem; }
.fx-alert > .fx-icon { margin-top: 1px; }
.fx-alert-body { flex: 1; min-width: 0; }
.fx-alert-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -3px -4px -3px 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.fx-alert-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.fx-alert--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.fx-alert--error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }
.fx-alert--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.fx-alert--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.fx-alert ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.fx-alert a:not(.fx-btn) { color: inherit; font-weight: 600; }
.fx-flash { box-shadow: var(--shadow-sm); animation: fx-in .3s var(--ease); }

.fx-toasts { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 95; display: grid; gap: var(--s2); width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.fx-toast { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 1rem; border-radius: 14px; background: var(--brand); color: #fff; box-shadow: var(--shadow-lift); font-size: .92rem; pointer-events: auto; animation: fx-toast-in .28s var(--ease); }
.fx-toast--error { background: #7a2525; }
.fx-toast--warn { background: #6e4b08; }
.fx-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
@keyframes fx-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fx-in { from { opacity: 0; transform: translateY(-4px); } }

.fx-empty { text-align: center; padding: var(--s10) var(--s4); color: var(--muted); }
.fx-empty-art { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: linear-gradient(135deg, var(--accent-tint), var(--violet-soft)); color: var(--primary); margin-bottom: var(--s4); }
.fx-empty-art .fx-icon { width: 34px; height: 34px; }
.fx-empty h2, .fx-empty h3 { margin-bottom: .3rem; }
.fx-empty p { margin: .2rem auto var(--s4); max-width: 46ch; }
.fx-empty > .fx-icon { width: 54px; height: 54px; padding: 13px; border-radius: 50%; background: var(--foam); color: var(--accent); margin-bottom: .6rem; }

.fx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.fx-table th, .fx-table td { text-align: left; padding: .8rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fx-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; background: var(--foam-2); }
.fx-table th:first-child { border-top-left-radius: 10px; }
.fx-table th:last-child { border-top-right-radius: 10px; }
.fx-table tbody tr { transition: background .12s; }
.fx-table tbody tr:hover { background: #f8fbf9; }
.fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-table-wrap { overflow-x: auto; }
.fx-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.fx-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .62rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--foam); color: var(--brand); white-space: nowrap; line-height: 1.4; }
.fx-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.fx-badge--plain::before { display: none; }
.fx-badge--ok { background: var(--ok-bg); color: var(--ok-ink); }
.fx-badge--warn { background: var(--warn-bg); color: var(--warn-ink); }
.fx-badge--error { background: var(--err-bg); color: var(--err-ink); }
.fx-badge--busy { background: var(--info-bg); color: var(--info-ink); }
.fx-badge--busy::before { animation: fx-pulse 1s ease-in-out infinite; }
.fx-badge--ia { background: var(--violet-soft); color: var(--violet-ink); }
@keyframes fx-pulse { 50% { opacity: .2; } }

.fx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fx-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .24rem .7rem; border-radius: 999px; background: var(--foam); color: var(--brand); font-size: .8rem; font-weight: 500; border: 1px solid transparent; }
button.fx-chip { font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; background: #fff; border-color: var(--line-strong); transition: background .15s, border-color .15s, color .15s; min-height: 32px; padding: .3rem .8rem; }
button.fx-chip:hover { border-color: var(--primary); background: var(--foam-2); }
button.fx-chip.is-active, button.fx-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.fx-chip--violet { background: var(--violet-soft); color: var(--violet-ink); }

/* ---------- Inicio ---------- */

.fx-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  margin-bottom: var(--s6);
  color: #fff;
  background:
    radial-gradient(circle at 88% 0%, rgba(127, 103, 237, .38) 0, transparent 40%),
    radial-gradient(circle at 70% 120%, rgba(195, 154, 78, .28) 0, transparent 40%),
    linear-gradient(130deg, var(--brand) 0%, var(--brand-2) 60%, var(--accent) 135%);
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: center;
}
.fx-hero h1 { color: #fff; margin-bottom: .4rem; }
.fx-hero .fx-kicker { color: var(--accent-soft); }
.fx-hero p { color: #dcebe4; max-width: 60ch; margin: 0 0 var(--s5); }
.fx-hero::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; border: 38px solid rgba(255,255,255,.06); pointer-events: none; }
.fx-hero-progress { position: relative; z-index: 1; display: grid; justify-items: center; gap: .35rem; padding: var(--s4) var(--s5); border-radius: var(--radius); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); min-width: 170px; text-align: center; }
.fx-ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#9fd9bf calc(var(--p) * 1%), rgba(255,255,255,.14) 0); }
.fx-ring span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--brand); font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }
.fx-hero-progress small { color: #dcebe4; font-size: .8rem; }

.fx-flow { display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); margin: 0 0 var(--s6); padding: 0; list-style: none; counter-reset: flow; }
.fx-flow-step {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: var(--s5); border-radius: var(--radius); background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow); counter-increment: flow;
}
.fx-flow-step.is-next { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,143,107,.14), var(--shadow); }
.fx-flow-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.fx-flow-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--foam); color: var(--brand); font-weight: 700; }
.fx-flow-num::before { content: counter(flow); }
.fx-flow-step.is-done .fx-flow-num { background: var(--primary); color: #fff; }
.fx-flow-step.is-done .fx-flow-num::before { content: "✓"; }
.fx-flow-step h3 { margin: .2rem 0 0; font-size: 1.35rem; }
.fx-flow-step p { margin: 0; color: var(--muted); font-size: .9rem; flex: 1; }
.fx-flow-step .fx-btn { align-self: flex-start; margin-top: .4rem; }

.fx-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(4, 1fr); margin-bottom: var(--s6); }
.fx-metric { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: inherit; transition: transform .15s var(--ease), box-shadow .15s; margin: 0; padding: var(--s5); }
.fx-metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: inherit; }
.fx-metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.fx-metric-top .fx-icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--accent-tint); color: var(--primary); }
.fx-metric--violet .fx-metric-top .fx-icon { background: var(--violet-soft); color: var(--violet-deep); }
.fx-metric--warn .fx-metric-top .fx-icon { background: var(--warn-bg); color: var(--warn); }
.fx-metric strong { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--brand); font-variant-numeric: lining-nums; }
.fx-metric p { margin: 0; }
.fx-metric .fx-arrow { color: var(--muted); transition: transform .15s, color .15s; }
.fx-metric:hover .fx-arrow { transform: translateX(3px); color: var(--primary); }

.fx-two { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; margin-bottom: var(--s6); }
.fx-guide { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: guide; }
.fx-guide li { display: grid; grid-template-columns: 34px 1fr; column-gap: .8rem; counter-increment: guide; }
.fx-guide li::before { content: counter(guide); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); color: var(--primary); font-weight: 700; }
.fx-guide span { color: var(--muted); font-size: .9rem; }
.fx-quick { display: grid; gap: .4rem; }
.fx-quick a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background .15s; }
.fx-quick a:hover { background: var(--foam-2); color: var(--ink); }
.fx-quick a .fx-icon:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--accent-tint); color: var(--primary); }
.fx-quick a strong { display: block; font-size: .95rem; }
.fx-quick a span { color: var(--muted); font-size: .82rem; }
.fx-quick a > div { flex: 1; }

/* ---------- Subidas ---------- */

.fx-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .6rem;
  border: 2px dashed #b3d3c3;
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem) var(--s5);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 143, 107, .08), transparent 60%),
    linear-gradient(180deg, #fbfdfc, #f3f8f5);
  transition: border-color .15s, background .15s, transform .15s var(--ease), box-shadow .15s;
}
.fx-drop[data-pick] { cursor: pointer; }
.fx-drop:hover { border-color: var(--accent); }
.fx-drop.is-over { border-color: var(--primary); border-style: solid; background: #e3f3eb; transform: scale(1.01); box-shadow: 0 0 0 6px rgba(47,143,107,.1); }
.fx-drop.has-files { border-style: solid; border-color: var(--accent-soft); }
.fx-drop p { margin: 0; }
.fx-drop-title { font-size: 1.12rem; font-weight: 600; color: var(--brand); }
.fx-drop-sub { color: var(--muted); font-size: .88rem; }
.fx-drop input[type=file] { max-width: 100%; }
.fx-drop--compact { padding: var(--s4); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; }
.fx-drop-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; color: var(--primary); box-shadow: var(--shadow); transition: transform .2s var(--ease); }
.fx-drop-icon .fx-icon { width: 30px; height: 30px; }
.fx-drop.is-over .fx-drop-icon { transform: translateY(-4px); }
.fx-drop--compact .fx-drop-icon { width: 44px; height: 44px; border-radius: 14px; }
.fx-drop--compact .fx-drop-icon .fx-icon { width: 22px; height: 22px; }
.fx-filepick { position: relative; display: inline-flex; }
.fx-filepick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fx-filepick:focus-within { box-shadow: var(--ring); }
.fx-drop-types { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.fx-drop-types span { padding: .12rem .5rem; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }

.fx-progress { height: 8px; background: var(--foam); border-radius: 999px; overflow: hidden; }
.fx-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), #57b48d); border-radius: 999px; transition: width .25s; }
.fx-progress--indeterminate span { width: 35%; animation: fx-slide 1.3s ease-in-out infinite; }
@keyframes fx-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
.fx-job { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; margin-bottom: .5rem; background: #fff; }
.fx-job-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .4rem; }

/* Biblioteca de libros */
.fx-book-title { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.fx-book-title strong { display: block; color: var(--ink); line-height: 1.3; }
.fx-book-title .fx-small { display: block; }
.fx-fileicon { flex: none; display: grid; place-items: center; width: 38px; height: 46px; border-radius: 6px 12px 6px 6px; background: linear-gradient(160deg, #fff, var(--foam)); border: 1px solid var(--line-strong); color: var(--danger); font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
.fx-rowactions { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.fx-table .fx-form { gap: .5rem; }

/* Galería de imágenes */
.fx-images { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.fx-image-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow .15s, border-color .15s; }
.fx-image-card:hover, .fx-image-card:focus-within { box-shadow: var(--shadow-lift); }
.fx-image-card.is-untagged { border-color: var(--warn-line); }
.fx-image-card > a { display: block; }
.fx-image-card img { display: block; width: 100%; height: 176px; object-fit: contain; background: repeating-conic-gradient(#f2f5f3 0 25%, #fff 0 50%) 0 0 / 18px 18px; border-bottom: 1px solid var(--line); }
.fx-image-flag { display: flex; align-items: flex-start; gap: .45rem; padding: .5rem .8rem; background: var(--warn-bg); color: var(--warn-ink); font-size: .78rem; font-weight: 500; line-height: 1.35; border-bottom: 1px solid var(--warn-line); }
.fx-image-flag .fx-icon { width: 16px; height: 16px; margin-top: 1px; }
.fx-image-src { position: absolute; top: .55rem; left: .55rem; }
.fx-image-card form { padding: .8rem; display: grid; gap: .5rem; flex: 1; align-content: start; }
.fx-image-card input, .fx-image-card textarea { width: 100%; padding: .45rem .6rem; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: .86rem; color: var(--ink); background: #fff; }
.fx-image-card textarea { resize: vertical; min-height: 54px; line-height: 1.4; }
.fx-image-card input:focus, .fx-image-card textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.fx-image-card .fx-field-title { font-weight: 600; }
.fx-image-card .fx-actions { margin-top: auto; justify-content: space-between; }
.fx-mini-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: .1rem 0 -.2rem; }

.fx-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .3rem .35rem; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; min-height: 38px; cursor: text; }
.fx-tags:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.fx-tags input { flex: 1 1 80px; min-width: 70px; border: 0 !important; padding: .2rem .25rem !important; box-shadow: none !important; font-size: .84rem !important; background: transparent !important; }
.fx-tag { display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .2rem .12rem .55rem; border-radius: 999px; background: var(--accent-tint); color: var(--brand); font-size: .78rem; font-weight: 500; }
.fx-tag button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0; }
.fx-tag button:hover { background: rgba(15,61,54,.12); }

.fx-crop-wrap { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; user-select: none; touch-action: none; }
.fx-crop-wrap canvas { max-width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); }
.fx-crop-box { position: absolute; border: 2px solid var(--primary); background: rgba(47, 143, 107, .15); pointer-events: none; display: none; box-shadow: 0 0 0 9999px rgba(10, 30, 25, .25); }

details.fx-disclosure { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); margin-bottom: var(--s5); }
details.fx-disclosure > summary { list-style: none; display: flex; align-items: center; gap: .8rem; padding: var(--s4) var(--s6); cursor: pointer; border-radius: var(--radius); }
details.fx-disclosure > summary::-webkit-details-marker { display: none; }
details.fx-disclosure > summary h2 { margin: 0; font-size: 1.3rem; }
details.fx-disclosure > summary p { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; }
details.fx-disclosure > summary > div { flex: 1; }
details.fx-disclosure > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; margin-right: .3rem; }
details.fx-disclosure[open] > summary::after { transform: rotate(-135deg); }
details.fx-disclosure > summary:hover { background: var(--foam-2); }
.fx-disclosure-body { padding: 0 var(--s6) var(--s6); }

.fx-book-list { display: grid; gap: .35rem; max-height: 240px; overflow: auto; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--foam-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fx-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fx-spin .7s linear infinite; vertical-align: -2px; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ---------- Generar: pasos ---------- */

.fx-steps { display: flex; gap: 0; margin: 0 0 var(--s6); padding: .45rem; list-style: none; counter-reset: step; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none; }
.fx-steps::-webkit-scrollbar { display: none; }
.fx-steps li { counter-increment: step; flex: 1 1 0; min-width: max-content; position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .45rem .9rem; border-radius: 999px; color: var(--muted); font-size: .88rem; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.fx-steps li::before { content: counter(step); width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center; background: var(--foam); color: var(--brand); font-weight: 600; font-size: .8rem; flex: none; transition: background .2s, color .2s; }
.fx-steps li + li::after { content: ""; position: absolute; left: -.6rem; top: 50%; width: .9rem; height: 2px; background: var(--line-strong); }
.fx-steps li.is-current { background: var(--brand); color: #fff; }
.fx-steps li.is-current::before { background: #fff; color: var(--brand); }
.fx-steps li.is-done { color: var(--brand); }
.fx-steps li.is-done::before { content: "✓"; background: var(--primary); color: #fff; }
.fx-steps li.is-done + li::after { background: var(--primary); }

.fx-stepcard { position: relative; }
.fx-stepcard-head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: var(--s4); }
.fx-stepcard-head h2 { margin: 0; }
.fx-stepcard-head p { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.fx-stepnum { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; }
.fx-gen-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.fx-gen-side { position: sticky; top: var(--s5); }
.fx-consigna-card { border-top: 4px solid var(--primary); }
.fx-consigna { min-height: 220px !important; font-size: 1.02rem; line-height: 1.6 !important; padding: .9rem 1rem !important; background: var(--foam-2) !important; }
.fx-consigna:focus { background: #fff !important; }
.fx-counter { text-align: right; font-size: .78rem; color: var(--muted); margin-top: -.6rem; font-variant-numeric: tabular-nums; }
.fx-examples { display: grid; gap: .45rem; }
.fx-examples-label { font-size: .78rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.fx-or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.fx-or::before, .fx-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fx-genbox { display: grid; gap: .8rem; padding: var(--s5); border-radius: 14px; background: linear-gradient(135deg, #f3faf6, #ece8fd); border: 1px solid var(--accent-soft); }
.fx-genbox .fx-btn--lg { width: 100%; }
.fx-genbox-note { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
.fx-genstatus { display: none; gap: .5rem; }
.fx-genstatus.is-active { display: grid; }
.fx-genstatus p { margin: 0; font-size: .9rem; color: var(--brand); font-weight: 500; display: flex; align-items: center; gap: .5rem; }
.fx-gen-error { color: var(--danger); font-size: .9rem; margin: 0; }

.fx-skeleton { display: none; margin-bottom: var(--s5); }
.fx-skeleton.is-active { display: block; }
.fx-skel-grid { display: grid; gap: var(--s4); grid-template-columns: 140px minmax(0, 1fr); }
.fx-skel-rail { display: grid; gap: .6rem; align-content: start; }
.fx-skel { border-radius: 10px; background: linear-gradient(90deg, #e9efeb 0%, #f6f9f7 40%, #e9efeb 80%); background-size: 200% 100%; animation: fx-shimmer 1.3s linear infinite; }
.fx-skel--thumb { aspect-ratio: 16 / 9; }
.fx-skel--stage { aspect-ratio: 16 / 9; border-radius: 14px; }
.fx-skel--line { height: 14px; margin-top: .6rem; }
@keyframes fx-shimmer { to { background-position: -200% 0; } }

/* ---------- Editor de diapositivas ---------- */

.fx-editor-bar {
  position: sticky;
  top: var(--s3);
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem var(--s4);
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem;
  margin: 0 0 var(--s4);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fx-editor-title { display: flex; align-items: center; gap: .6rem; flex: 1 1 320px; min-width: 0; }
.fx-editor-bar .fx-input { max-width: 460px; font-weight: 600; font-size: 1.02rem; }
.fx-dirty { font-size: .76rem; font-weight: 600; color: var(--warn-ink); background: var(--warn-bg); padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.fx-editor-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fx-editor-actions .fx-sep { width: 1px; align-self: stretch; background: var(--line-strong); margin: .2rem .2rem; }
.fx-export { display: inline-flex; gap: .35rem; padding: .25rem; border-radius: 999px; background: var(--violet-soft); }
.fx-export-label { align-self: center; font-size: .74rem; font-weight: 600; color: var(--violet-ink); padding: 0 .35rem 0 .5rem; }

.fx-editor-msg { margin: 0 0 var(--s3); }
.fx-slides { display: grid; gap: var(--s4); }
.fx-editor { grid-template-columns: 152px minmax(0, 1fr); align-items: start; gap: var(--s5); }

.fx-rail { position: sticky; top: 96px; display: grid; gap: .55rem; max-height: calc(100vh - 116px); overflow-y: auto; padding: .2rem .35rem .4rem .2rem; margin: -.2rem 0 0 -.2rem; scrollbar-width: thin; }
.fx-rail-item { position: relative; display: grid; gap: .25rem; padding: .35rem; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: var(--muted); transition: background .15s, border-color .15s; }
.fx-rail-item:hover { background: #fff; border-color: var(--line); }
.fx-rail-item.is-active { background: #fff; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(127, 103, 237, .16); color: var(--violet-ink); }
.fx-rail-item .fx-thumb { cursor: pointer; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.fx-rail-meta { display: flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 600; line-height: 1.2; }
.fx-rail-meta b { display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; border-radius: 6px; background: var(--foam); color: var(--brand); font-size: .7rem; }
.fx-rail-item.is-active .fx-rail-meta b { background: var(--violet); color: #fff; }
.fx-rail-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rail-add { display: flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; border: 2px dashed var(--line-strong); border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.fx-rail-add:hover { border-color: var(--violet); color: var(--violet-ink); background: #fff; }

.fx-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}
.fx-slide-view { display: grid; gap: .7rem; align-content: start; }
.fx-slide-stage { padding: clamp(.6rem, 2vw, 1.2rem); border-radius: 14px; background: linear-gradient(135deg, #f1f4f2, #eeebfb); }
.fx-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #eee; box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(20,20,40,.08); cursor: zoom-in; }
.fx-slide-stage .fx-thumb { box-shadow: 0 0 0 1px rgba(64, 49, 116, .08), 0 18px 40px rgba(40, 30, 90, .14); }
.fx-slide-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.fx-slide-num { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fx-slide-nav { display: flex; align-items: center; gap: .35rem; }
.fx-slide-kind { min-height: 34px; padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--line-strong); font: inherit; font-size: .84rem; background: var(--foam-2); color: var(--ink); }
.fx-slide-fields { display: grid; align-content: start; }
.fx-slide-title {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
  border: 1px solid transparent;
  background: var(--foam-2);
  padding: .35rem .6rem;
  border-radius: 8px;
}
.fx-slide-title:hover { border-color: var(--line-strong); }
.fx-slide-title:focus, .fx-slide textarea:focus, .fx-slide input:focus, .fx-slide select:focus { border-color: var(--accent); outline: none; background: #fff; box-shadow: var(--ring); }
.fx-slide textarea, .fx-slide input[type=text] {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: .5rem .65rem;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  resize: vertical;
}
.fx-slide textarea { min-height: 110px; line-height: 1.5; }
.fx-slide label { font-size: .76rem; color: var(--muted); font-weight: 600; display: block; margin: .8rem 0 .3rem; }
.fx-slide select { width: 100%; min-height: 38px; padding: .45rem; border-radius: 8px; border: 1px solid var(--line-strong); font: inherit; font-size: .88rem; background: #fff; color: var(--ink); }
.fx-sources { font-size: .78rem; color: var(--muted); line-height: 1.45; padding: .55rem .7rem; border-radius: 8px; background: var(--foam-2); border-left: 3px solid var(--accent-soft); }
.fx-slide-tools { display: flex; gap: .35rem; flex-wrap: wrap; }
.fx-slide-tools button { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; border: 1px solid var(--line-strong); background: #fff; border-radius: 8px; padding: .25rem .65rem; cursor: pointer; font: inherit; font-size: .8rem; color: var(--brand); transition: background .15s, border-color .15s; }
.fx-slide-tools button:hover:not(:disabled) { background: var(--foam); border-color: var(--primary); }
.fx-slide-tools button:disabled { opacity: .4; cursor: not-allowed; }
.fx-slide-tools button.is-danger { color: var(--danger); margin-left: auto; }
.fx-slide-tools button.is-danger:hover { background: var(--err-bg); border-color: var(--danger); }
.fx-notes { font-size: .85rem; margin-top: .9rem; padding-top: .6rem; border-top: 1px dashed var(--line-strong); }
.fx-notes summary { cursor: pointer; color: var(--muted); font-weight: 500; }
.fx-notes textarea { margin-top: .5rem; }

.fx-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s8); background: rgba(10, 20, 18, .8); cursor: zoom-out; animation: fx-in .2s; }
.fx-lightbox .fx-thumb { width: min(1200px, 100%); cursor: zoom-out; box-shadow: 0 30px 80px rgba(0,0,0,.4); }

/* ---------- Presentaciones ---------- */

.fx-pres-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fx-pres-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .15s var(--ease), box-shadow .15s; }
.fx-pres-card:hover, .fx-pres-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.fx-pres-card .fx-thumb { border-radius: 0; box-shadow: none; cursor: pointer; }
.fx-pres-cover { display: block; position: relative; background: var(--violet-soft); }
.fx-pres-cover-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--violet-deep); }
.fx-pres-body { padding: var(--s4) var(--s4) var(--s4); display: grid; gap: .45rem; flex: 1; }
.fx-pres-body h3 { font-size: 1.3rem; margin: 0; }
.fx-pres-body h3 a { color: var(--brand); text-decoration: none; }
.fx-pres-body h3 a:hover { color: var(--primary); }
.fx-pres-meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; font-size: .8rem; color: var(--muted); }
.fx-pres-card .fx-actions { margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--line); }

/* ---------- Ajustes ---------- */

.fx-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 var(--s4); }

/* ---------- Responsive ---------- */

@media (min-width: 1380px) {
  .fx-slide { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); }
  .fx-slide-view { position: sticky; top: 96px; }
}

@media (max-width: 1180px) {
  .fx-grid { grid-template-columns: repeat(2, 1fr); }
  .fx-two { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .fx-gen-grid { grid-template-columns: 1fr; }
  .fx-gen-side { position: static; }
}

@media (max-width: 900px) {
  .fx-app .fx-main { margin-left: 0; padding-top: var(--s5); }
  .fx-mobilebar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
  }
  .fx-mobilebar .fx-brand { flex: 1; }
  .fx-mobilebar .fx-brand span { font-size: 1.4rem; }
  .fx-navtoggle, .fx-mobilebar-cta, .fx-navclose { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; flex: none; }
  .fx-mobilebar-cta { background: #fff; color: var(--brand); border-color: #fff; }
  .fx-mobilebar-cta:hover { color: var(--brand); }
  .fx-side { width: min(300px, 86vw); transform: translateX(-105%); transition: transform .24s var(--ease), visibility 0s .24s; box-shadow: 10px 0 40px rgba(0,0,0,.25); visibility: hidden; }
  .is-nav-open .fx-side { transform: none; visibility: visible; transition: transform .24s var(--ease); }
  .is-nav-open .fx-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(10,20,18,.5); backdrop-filter: blur(2px); }
  .is-nav-open { overflow: hidden; }
  .fx-editor-bar { position: static; }
  .fx-editor-bar .fx-input { max-width: none; }
  .fx-flow { grid-template-columns: 1fr; }
  .fx-hero { grid-template-columns: 1fr; }
  .fx-hero-progress { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s4); text-align: left; }
  .fx-ring { width: 64px; height: 64px; }
  .fx-ring span { width: 50px; height: 50px; font-size: 1.25rem; }

  .fx-editor { grid-template-columns: 1fr; }
  .fx-rail { position: static; max-height: none; grid-auto-flow: column; grid-auto-columns: 128px; overflow-x: auto; overflow-y: hidden; padding: .3rem .2rem .6rem; margin: 0; scroll-snap-type: x proximity; }
  .fx-rail-item { scroll-snap-align: start; }
  .fx-skel-grid { grid-template-columns: 1fr; }
  .fx-skel-rail { grid-auto-flow: column; grid-auto-columns: 110px; overflow: hidden; }
  .fx-toasts { left: 1rem; right: 1rem; width: auto; bottom: 1rem; }

  /* Tabla de libros → tarjetas */
  .fx-table--cards thead { display: none; }
  .fx-table--cards, .fx-table--cards tbody, .fx-table--cards tr, .fx-table--cards td { display: block; width: 100%; }
  .fx-table--cards tr { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .fx-table--cards tbody tr:hover { background: none; }
  .fx-table--cards td { border: 0; padding: .2rem 0; }
  .fx-table--cards td[data-label] { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
  .fx-table--cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .8rem; }
  .fx-table--cards td.fx-td-main { padding-bottom: .5rem; }
  .fx-table--cards .fx-rowactions { justify-content: flex-start; padding-top: .5rem; }
}

@media (max-width: 700px) {
  .fx-grid { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .fx-metric { padding: var(--s4); }
  .fx-metric strong { font-size: 2rem; }
  .fx-pagehead { align-items: flex-start; }
  .fx-pagehead-actions { width: 100%; }
  .fx-pagehead-actions .fx-btn { flex: 1; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .fx-panel, .fx-card { padding: var(--s4); border-radius: 14px; }
  details.fx-disclosure > summary { padding: var(--s4); }
  .fx-disclosure-body { padding: 0 var(--s4) var(--s4); }
  .fx-hero { border-radius: 18px; }
  .fx-steps { border-radius: 16px; }
  .fx-steps li { font-size: 0; padding: .35rem; gap: 0; flex: 0 0 auto; }
  .fx-steps li::before { font-size: .8rem; }
  .fx-steps li.is-current { font-size: .85rem; padding-right: .8rem; gap: .5rem; flex: 1 0 auto; }
  .fx-steps li + li::after { display: none; }
  .fx-editor-actions { width: 100%; }
  .fx-editor-actions .fx-btn { flex: 1 1 auto; }
  .fx-editor-actions .fx-sep { display: none; }
  .fx-export { width: 100%; }
  .fx-export .fx-btn { flex: 1; }
  .fx-slide { padding: var(--s3); }
  .fx-search { max-width: none; }
  .fx-images { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .fx-image-card img { height: 130px; }
  .fx-image-card form { padding: .6rem; }
}
@media (max-width: 380px) {
  .fx-images { grid-template-columns: 1fr; }
}

/* Fuentes académicas (Generar) y artículos guardados (Libros PDF) */
.fx-gen-main { display: grid; gap: var(--s5); min-width: 0; }
.fx-sci { padding: 0; }
.fx-sci-summary { display: flex; gap: .9rem; align-items: flex-start; padding: var(--s5); cursor: pointer; list-style: none; border-radius: var(--radius); }
.fx-sci-summary::-webkit-details-marker { display: none; }
.fx-sci-summary:hover .fx-sci-title { color: var(--brand-2); }
.fx-sci-summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.fx-stepnum--opt { background: var(--violet-soft); color: var(--violet-deep); }
.fx-sci-head { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.fx-sci-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--brand); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.fx-sci-sub { font-family: var(--font-body); font-weight: 500; font-size: .92rem; color: var(--muted); }
.fx-sci-lede { color: var(--muted); font-size: .92rem; }
.fx-sci-chevron { flex: none; width: 10px; height: 10px; margin-top: .6rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.fx-sci[open] .fx-sci-chevron { transform: rotate(-135deg); margin-top: .9rem; }
.fx-sci-body { display: grid; gap: .8rem; padding: 0 var(--s5) var(--s5); }
.fx-sci-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.fx-sci-queries { margin: 0; font-style: italic; }
.fx-sci-list { display: grid; gap: .5rem; max-height: 560px; overflow: auto; padding-right: .2rem; }
.fx-sci-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.fx-sci-item.is-in { border-color: var(--ok-line); background: var(--ok-bg); }
.fx-sci-check { padding-top: .15rem; cursor: pointer; }
.fx-sci-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.fx-sci-main { display: grid; gap: .3rem; min-width: 0; }
.fx-sci-name { color: var(--ink); line-height: 1.3; }
.fx-sci-meta { color: var(--muted); font-size: .84rem; }
.fx-sci-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.fx-sci-links { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; font-size: .86rem; }
.fx-sci-toggle { font: inherit; font-size: .86rem; background: none; border: 0; padding: 0; color: var(--brand-2); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fx-sci-link { font-weight: 600; }
.fx-sci-abstract { margin: .2rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink); background: var(--foam-2); border-radius: var(--radius-xs); padding: .6rem .75rem; }
.fx-sci-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.fx-sci-saved { display: grid; gap: .4rem; padding: .8rem .9rem; border-radius: var(--radius-sm); background: var(--foam-2); border: 1px solid var(--line); }
.fx-sci-saved-head { margin: 0 0 .2rem; }
.fx-sci-saved-row { display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; font-size: .9rem; }
.fx-sci-saved-row .fx-check { align-items: flex-start; }
.fx-sci-saved-row .fx-sci-link { flex: none; font-size: .84rem; }
.fx-sci-legal { margin: 0; }
.fx-article-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .5rem; }
.fx-article-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.fx-article-main { display: grid; gap: .15rem; min-width: 0; flex: 1 1 320px; }
@media (max-width: 560px) {
  .fx-sci-summary { padding: var(--s4); }
  .fx-sci-body { padding: 0 var(--s4) var(--s4); }
  .fx-sci-foot .fx-btn, .fx-sci-actions .fx-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}