/* ═══════════════════════════════════════════════════════════════════════
   DocuHub — style.css
   Design system claro minimalista (BIBLE_VISUAL.md) adaptado a la marca
   VALORIZA: acento verde corporativo #007934, petróleo #003A49 en la
   identidad. Regla de oro: aire, líneas finas y un solo acento.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Fondos y superficies */
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;

    /* Texto */
    --text: #1d1d1f;
    --text-secondary: #55575e;
    --text-muted: #8a8d94;
    --brand-ink: #003a49;                     /* petróleo VALORIZA: titulares de marca */

    /* Líneas */
    --border: rgba(15, 20, 30, 0.08);
    --border-strong: rgba(15, 20, 30, 0.15);

    /* Acento (único): verde VALORIZA */
    --accent: #007934;
    --accent-hover: #00622a;
    --accent-soft: rgba(0, 121, 52, 0.08);
    --accent-ring: rgba(0, 121, 52, 0.25);

    /* Semánticos */
    --ok: #1f9d55;         --ok-soft: rgba(31, 157, 85, 0.10);
    --warn: #b7791f;       --warn-soft: rgba(183, 121, 31, 0.10);
    --danger: #d64545;     --danger-soft: rgba(214, 69, 69, 0.08);

    /* Tipos de documento y carpetas */
    --doc-pdf: #d64545;
    --doc-word: #2b7cd3;
    --folder-1: #7cb8f0;
    --folder-2: #4d94d6;

    /* Sombras */
    --shadow-1: 0 1px 2px rgba(15, 20, 30, 0.05);
    --shadow-2: 0 4px 16px rgba(15, 20, 30, 0.08);
    --shadow-3: 0 12px 40px rgba(15, 20, 30, 0.14);

    --ease-panel: cubic-bezier(0.32, 0.72, 0.28, 1);
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', var(--font-ui);
    --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0; color: var(--text); }
code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); word-break: break-all; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
    border-radius: 8px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
}

.ui-icon { width: 16px; height: 16px; flex: none; display: block; }
.ui-icon .stroke-inv { stroke: #fff; }

/* ── Botones ───────────────────────────────────────────────────────────── */

.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 16px;
    border-radius: 12px; border: none;
    font-size: 13px; font-weight: 600;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary .ui-icon { stroke: #fff; }

.btn-secondary {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-danger { background: transparent; color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-danger--solid { background: var(--danger); color: #fff; }
.btn-danger--solid:hover { background: #c03a3a; }

.btn-ghost { background: transparent; color: var(--text-secondary); height: 32px; padding: 0 10px; }
.btn-ghost:hover { color: var(--text); background: rgba(15, 20, 30, 0.05); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }

.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: transparent; border: none; border-radius: 8px;
    color: var(--text-secondary);
    transition: background 150ms ease, color 150ms ease;
}
.btn-icon:hover { background: rgba(15, 20, 30, 0.06); color: var(--text); }
.btn-icon:disabled { opacity: 0.35; pointer-events: none; }

/* ── Inputs ────────────────────────────────────────────────────────────── */

.input, input.input, select.input, textarea.input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 38px;
    padding: 7px 12px;
    font: inherit; font-size: 13px;
    color: var(--text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea.input { resize: vertical; }
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
label > .input { font-weight: 400; }

.check { flex-direction: row; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ── Chips y badges ────────────────────────────────────────────────────── */

.chip {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px; font-weight: 500;
    background: var(--surface-2); color: var(--text-secondary);
}
.chip--pub { background: var(--ok-soft); color: var(--ok); }
.chip--draft { background: var(--surface-2); color: var(--text-muted); }
.chip--pdf { background: var(--danger-soft); color: var(--doc-pdf); }
.chip--word { background: rgba(43, 124, 211, 0.10); color: var(--doc-word); }
.chip--tag { background: var(--accent-soft); color: var(--accent); }
.chip__x {
    border: none; background: none; padding: 0 0 0 2px;
    color: inherit; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0.7;
}
.chip__x:hover { opacity: 1; }

.badge-list {
    list-style: none; margin: 0; padding: 0;
    position: absolute; right: -4px; bottom: -2px;
    display: flex; flex-direction: column-reverse; gap: 2px;
}
.badge {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-1);
    font-size: 10px; line-height: 1;
    padding: 3px;
}

/* ── Selector de idioma ────────────────────────────────────────────────── */

.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch__item {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 3px 7px; border-radius: 999px;
}
.lang-switch__item:hover { color: var(--accent); }
.lang-switch__item.is-active { background: var(--accent-soft); color: var(--accent); }

/* ═══ LOGIN ═════════════════════════════════════════════════════════════ */

.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.login-shell { width: 100%; max-width: 400px; }
.login-card {
    display: flex; flex-direction: column; gap: 14px;
    padding: 36px 32px 28px;
    border-radius: 16px;
    box-shadow: var(--shadow-2);
}
.login-card__logo { width: 190px; margin: 0 auto 6px; }
.login-card .kicker {
    margin: 0; text-align: center;
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
}
.login-card h1 { text-align: center; font-size: 24px; color: var(--brand-ink); }
.login-card__subtitle { margin: -6px 0 4px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.login-card .btn-primary { justify-content: center; margin-top: 4px; }
.login-error {
    margin: 0; padding: 9px 12px;
    background: var(--danger-soft); color: var(--danger);
    border-radius: 8px; font-size: 12.5px;
}
.login-card__foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

/* ═══ LAYOUT DE LA APP ══════════════════════════════════════════════════ */

body.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
    width: 232px; flex: none;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    padding: 18px 12px 14px;
    gap: 18px;
}
.sidebar__brand { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.sidebar__brand img { width: 132px; }
.sidebar__brand-name {
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    color: var(--brand-ink);
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-separator { height: 1px; background: var(--border); margin: 10px 6px; }
.sidebar__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    background: none; border: none; border-radius: 9px;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    position: relative;
    transition: background 150ms ease, color 150ms ease;
    text-align: left;
}
.sidebar__item:hover { background: rgba(15, 20, 30, 0.04); color: var(--text); }
.sidebar__item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar__item.is-active::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px; background: var(--accent);
}
.sidebar__icon { display: inline-flex; }
.sidebar__icon .ui-icon { width: 17px; height: 17px; }
.sidebar__count {
    margin-left: auto;
    background: var(--surface-2); color: var(--text-muted);
    border-radius: 999px; font-size: 10.5px; font-weight: 600;
    padding: 1px 8px;
}
/* Submenú de Configuración (grupo plegable) */
.sidebar__chev {
    margin-left: auto;
    font-size: 15px; line-height: 1; color: var(--text-muted);
    transition: transform 150ms ease;
}
.sidebar__item.is-open .sidebar__chev { transform: rotate(90deg); }
.sidebar__group { display: none; flex-direction: column; gap: 2px; padding-left: 16px; }
.sidebar__group.is-open { display: flex; }
.sidebar__item--sub { padding: 7px 10px 7px 12px; font-size: 12.5px; }
.sidebar__item--sub::after {
    content: ""; position: absolute; left: -2px; top: 7px; bottom: 7px;
    width: 2px; border-radius: 2px; background: var(--border);
}
.sidebar__item--sub:hover::after { background: var(--text-muted); }
.sidebar__item--sub.is-active::after { background: var(--accent); }
.sidebar__item--sub.is-active::before { display: none; }

.sidebar__foot { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.sidebar__portal-link {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
    padding: 6px 10px; border-radius: 8px;
}
.sidebar__portal-link:hover { background: var(--accent-soft); color: var(--accent); }
.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 0 10px; flex-wrap: wrap; }
.sidebar__user-name {
    font-size: 12px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px;
}
.sidebar__logout { margin-left: auto; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ── Topbar ────────────────────────────────────────────────────────────── */

.topbar {
    height: 56px; flex: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 18px;
    position: relative; z-index: 5;
}
.topbar__set { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.topbar__spacer { flex: 1; }
.topbar__title { font-size: 17px; font-weight: 600; color: var(--brand-ink); }
.topbar__filter { max-width: 220px; min-height: 34px; height: 34px; }
input.topbar__filter { flex: 0 1 220px; }
select.topbar__sort { width: auto; flex: none; min-height: 34px; height: 34px; padding-right: 26px; }
.topbar .btn-primary, .topbar .btn-secondary { height: 34px; }

.breadcrumb { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.breadcrumb__item {
    background: none; border: none;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    padding: 4px 8px; border-radius: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
    transition: background 150ms ease, color 150ms ease;
}
.breadcrumb__item:hover { background: rgba(15, 20, 30, 0.05); color: var(--text); }
.breadcrumb__item.is-current { color: var(--text); font-weight: 600; }
.breadcrumb__item.is-drop-target { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.breadcrumb__sep { color: var(--text-muted); font-size: 12px; }

/* ── Contenido / vistas ────────────────────────────────────────────────── */

.content { flex: 1; overflow-y: auto; padding: 24px; }
.view { min-height: 100%; }

/* ── Grid de iconos ────────────────────────────────────────────────────── */

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    align-content: start;
}
.cell {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 14px 8px 10px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    text-align: center;
    user-select: none;
    cursor: default;
    transition: background 150ms ease;
}
.cell:hover { background: rgba(15, 20, 30, 0.03); }
.cell.is-selected { background: var(--accent-soft); }
.cell.is-selected .cell__name span { background: var(--accent); color: #fff; }
.cell.is-drop-target { border-color: var(--accent); background: var(--accent-soft); }
.cell__icon { position: relative; width: 64px; height: 64px; }
.cell__icon svg.icon-folder, .cell__icon svg.icon-file { width: 64px; height: 64px; display: block; }
.cell__name { max-width: 100%; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.cell__name span {
    display: inline-block;
    padding: 1px 7px; border-radius: 6px;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    word-break: break-word;
}
.cell__meta { font-size: 10px; color: var(--text-muted); }
.cell__typechip { position: absolute; right: -6px; bottom: -2px; box-shadow: var(--shadow-1); border: 1px solid var(--border); }
.cell__langchip {
    position: absolute; left: -6px; top: -4px;
    background: var(--brand-ink); color: #fff;
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
    border-radius: 5px;
    padding: 2px 5px;
    box-shadow: var(--shadow-1);
}

/* Acciones rápidas bajo el icono (aparecen al pasar el ratón o seleccionar) */
.cell__actions {
    display: flex; gap: 2px; justify-content: center;
    min-height: 26px;
    opacity: 0;
    transition: opacity 150ms ease;
}
.cell:hover .cell__actions,
.cell.is-selected .cell__actions,
.cell:focus-within .cell__actions { opacity: 1; }
.cell-act {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: transparent; border: none; border-radius: 7px;
    color: var(--text-muted); cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.cell-act:hover { background: var(--surface); box-shadow: var(--shadow-1); color: var(--accent); }
.cell-act--danger:hover { color: var(--danger); }
.cell-act.is-on { color: var(--ok); }
.cell-act .ui-icon { width: 14px; height: 14px; }

.cell--uploading { opacity: 0.75; }
.cell__progress {
    width: 80%; height: 3px;
    background: var(--border);
    border-radius: 2px; overflow: hidden;
}
.cell__progress span {
    display: block; height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 150ms ease;
}

/* ── Estados vacíos ────────────────────────────────────────────────────── */

.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 80px 24px;
    color: var(--text-muted);
    text-align: center;
}
.empty-state__icon .ui-icon { width: 44px; height: 44px; stroke-width: 1.2; color: var(--text-muted); opacity: 0.7; }
.empty-state h3 { font-size: 17px; color: var(--text-secondary); }
.empty-state p { margin: 0; font-size: 13px; max-width: 380px; }

/* ── Popover de información ────────────────────────────────────────────── */

.popover {
    position: fixed; z-index: 60;
    width: 290px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-3);
    padding: 14px;
    animation: pop-in 160ms ease;
}
@keyframes pop-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
.popover__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.popover__head svg { width: 38px; height: 38px; flex: none; }
.popover__head strong { display: block; font-size: 13px; line-height: 1.3; word-break: break-word; }
.popover__type { font-size: 11px; color: var(--text-muted); }
.popover__state { margin: 6px 0; }
.popover__desc {
    background: var(--ok-soft);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px; color: var(--text-secondary);
    margin: 8px 0;
    max-height: 90px; overflow: hidden;
}
.popover__tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 2px; }
.popover__meta-grid {
    display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
    font-size: 12px;
}
.popover__meta-label { color: var(--text-muted); }
.popover__meta-value { color: var(--text); font-weight: 500; }
.popover__edit {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    margin-top: 10px; padding: 7px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    justify-content: center;
    transition: color 150ms ease, border-color 150ms ease;
}
.popover__edit:hover { color: var(--accent); border-color: var(--accent); }

/* ── Panel lateral "Información" ───────────────────────────────────────── */

.panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: 350px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-3);
    display: flex; flex-direction: column;
    animation: panel-in 250ms var(--ease-panel);
}
@keyframes panel-in {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.panel__head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.panel__head svg { width: 40px; height: 40px; flex: none; }
.panel__title { font-weight: 600; font-size: 14px; }
.panel__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.panel__foot {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
}
.panel__foot .btn-secondary, .panel__foot .btn-danger { height: 34px; font-size: 12.5px; }
.panel__field { gap: 6px; }
.panel__label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.panel__hint { margin: -6px 0 0; font-size: 11px; color: var(--text-muted); }
.panel__orig { margin: 0; font-size: 11px; color: var(--text-muted); }
.panel__orig code { font-size: 11px; }

.panel__savedflash {
    margin-left: auto; margin-right: 4px;
    font-size: 11px; font-weight: 700;
    color: var(--ok);
    opacity: 0;
    transition: opacity 200ms ease;
    white-space: nowrap;
}
.panel__savedflash.is-in { opacity: 1; }

.panel__publish {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2);
    transition: background 250ms ease, border-color 250ms ease;
}
.panel__publish.is-on { background: var(--ok-soft); border-color: rgba(31, 157, 85, 0.3); }
.panel__publish strong { display: block; font-size: 13px; }
.panel__publish-state { font-size: 11.5px; color: var(--text-muted); }
.panel__publish.is-on .panel__publish-state { color: var(--ok); font-weight: 600; }

.panel__link {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong); border-radius: 8px;
}
.panel__link code { flex: 1; font-size: 10.5px; }

.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 1px;
}
.tile__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.tile__value { font-size: 12.5px; font-weight: 600; color: var(--text); word-break: break-word; }

.tag-editor { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-editor__none { color: var(--text-muted); font-size: 12px; }

/* ── Interruptor Publicar ──────────────────────────────────────────────── */

.switch {
    position: relative;
    width: 42px; height: 24px; flex: none;
    background: rgba(15, 20, 30, 0.15);
    border: none; border-radius: 999px;
    transition: background 250ms ease;
}
.switch__knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 20, 30, 0.3);
    transition: transform 250ms var(--ease-panel);
}
.switch.is-on { background: var(--ok); }
.switch.is-on .switch__knob { transform: translateX(18px); }
.switch--bar { width: 38px; height: 22px; }
.switch--bar .switch__knob { width: 16px; height: 16px; }
.switch--bar.is-on .switch__knob { transform: translateX(16px); }

/* ── Zona de subida (drag & drop) ──────────────────────────────────────── */

.drop-overlay {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(245, 246, 248, 0.75);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
}
.drop-overlay__box {
    width: 100%; height: 100%;
    border: 2px dashed var(--accent);
    border-radius: 16px;
    background: var(--accent-soft);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    color: var(--accent);
    font-size: 15px; font-weight: 600;
    transition: background 150ms ease, border-color 150ms ease;
    pointer-events: none;
}
.drop-overlay__box .ui-icon { width: 42px; height: 42px; }
.drop-overlay__box p { margin: 0; }

/* ── Visor de documentos ───────────────────────────────────────────────── */

.viewer {
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg);
    display: flex; flex-direction: column;
}
.viewer__bar {
    height: 52px; flex: none;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px;
}
.viewer__title {
    font-family: var(--font-display);
    font-weight: 600; font-size: 15px;
    color: var(--brand-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}
.viewer__actions { display: flex; align-items: center; gap: 10px; }
.viewer__state { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.viewer__frame { flex: 1; border: none; width: 100%; background: #525659; }

/* ── Papelera ──────────────────────────────────────────────────────────── */

.trash-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.trash-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
}
.trash-row__icon svg { width: 40px; height: 40px; }
.trash-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trash-row__info strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-row__meta { font-size: 11.5px; color: var(--text-muted); }

/* ── Configuración ─────────────────────────────────────────────────────── */

.view--config { max-width: 1040px; }
.config-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    align-items: start;
}
.config-col { display: flex; flex-direction: column; gap: 24px; }
.config-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 13px; }
.config-card h3 { font-size: 16px; }
.config-card h4 { font-size: 12px; color: var(--text-secondary); }
.config-card__subhead { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.config-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.config-card__types { border: none; margin: 0; padding: 0; display: flex; gap: 14px; align-items: center; }
.config-card__types legend { font-size: 11px; font-weight: 600; color: var(--text-secondary); padding: 0; margin-bottom: 6px; }
.config-card__actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.config-card__path { margin: 0; font-size: 11.5px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.config-card__checks { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.link-editor { display: flex; flex-direction: column; gap: 6px; }
.link-editor__row { display: flex; gap: 6px; align-items: center; }
.link-editor__row .input { flex: 1; min-width: 0; }
.link-editor__row .link-editor__url { flex: 1.5; }
/* Fila con problema: se ve el rojo y el motivo, no se pierde nada en silencio */
.link-editor__row { flex-wrap: wrap; }
.link-editor__row.is-invalid .input {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}
.link-editor__error {
    flex: 1 0 100%;
    margin: 0 0 2px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--danger);
}

/* Vistas de configuración de una sola columna */
.config-narrow { max-width: 680px; display: flex; flex-direction: column; gap: 24px; }

/* Editor de logo (Sitio y textos) */
.logo-editor { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.logo-editor__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-editor__preview {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; height: 52px; padding: 8px 14px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.logo-editor__preview img { max-height: 30px; max-width: 180px; display: block; }

/* Ayuda e iframes: bloques de código listos para copiar */
.help-embeds { display: flex; flex-direction: column; gap: 12px; }
.help-embed { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.help-embed__head {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.help-embed__head strong { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-embed__head .btn-sm { margin-left: auto; flex: none; }
.help-embed__lang {
    flex: none;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--accent); background: var(--accent-soft);
    border-radius: 6px; padding: 2px 6px;
}
.help-embed__code {
    margin: 0; padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-all;
    color: var(--text);
}
/* Plantilla: lo que hay que sustituir va en ROJO y con fondo, para que se
   distinga de un vistazo del resto del código (que se copia tal cual). */
.help-embed--template { border-color: var(--danger-soft); }
.help-embed--template .help-embed__head { background: var(--danger-soft); }
.help-embed--template .help-embed__head strong { color: var(--danger); }
.help-ph {
    color: var(--danger);
    font-weight: 700;
    background: var(--danger-soft);
    border-bottom: 1.5px solid var(--danger);
    border-radius: 3px;
    padding: 0 3px;
}
.help-embed__note {
    margin: 0; padding: 10px 14px 12px;
    border-top: 1px dashed var(--border);
    font-size: 12px; line-height: 1.5;
    color: var(--text-secondary);
    background: var(--surface-2);
}

.help-notes {
    margin: 0; padding-left: 18px;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12.5px; color: var(--text-secondary);
}

/* ── Centro de subidas (lotes) ─────────────────────────────────────────── */

.upcenter {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 16, 24, 0.45);
    padding: 24px;
}
.upcenter__dialog {
    width: min(720px, 100%);
    max-height: min(82vh, 760px);
    display: flex; flex-direction: column; gap: 14px;
    padding: 22px 24px;
}
.upcenter__head { display: flex; align-items: center; gap: 10px; }
.upcenter__head h3 { font-size: 16px; }
.upcenter__count {
    background: var(--accent-soft); color: var(--accent);
    border-radius: 999px; font-size: 11px; font-weight: 700; padding: 2px 9px;
}
.upcenter__head .btn-icon { margin-left: auto; }
.upcenter__batch { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.upcenter__dest { flex: 1; min-width: 220px; }
.upcenter__batch .btn-secondary { flex: none; }
.upcenter__publish { padding: 2px 0; }
.upcenter__list {
    flex: 1; min-height: 120px; overflow: auto;
    display: flex; flex-direction: column; gap: 8px;
    border: 1px dashed var(--border); border-radius: 12px;
    padding: 10px;
}
.upcenter__empty { margin: auto; font-size: 12.5px; color: var(--text-muted); text-align: center; padding: 24px 10px; }
.upcenter__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.upcenter__item[data-status="ok"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.upcenter__item[data-status="error"], .upcenter__item[data-status="invalid"] { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.upcenter__fileicon { flex: none; display: inline-flex; }
.upcenter__fileicon svg { width: 30px; height: 30px; }
.upcenter__fileinfo { flex: 1.4; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.upcenter__filename { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcenter__filesize { font-size: 10.5px; color: var(--text-muted); }
.upcenter__msg { font-size: 10.5px; color: var(--warn); }
.upcenter__itemdest { flex: 1; min-width: 130px; max-width: 200px; font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
.upcenter__status { flex: 1; min-width: 120px; display: flex; align-items: center; }
.upcenter__state { font-size: 11.5px; color: var(--text-secondary); }
.upcenter__state--ok { color: var(--accent); font-weight: 600; }
.upcenter__state--error { color: var(--danger); font-weight: 600; }
.upcenter__bar {
    width: 100%; height: 7px; border-radius: 999px;
    background: var(--surface-2); overflow: hidden; display: block;
}
.upcenter__bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 180ms ease; }
.upcenter__hint { margin: 0; font-size: 11px; color: var(--text-muted); text-align: center; }
.upcenter__actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 640px) {
    .upcenter { padding: 10px; }
    .upcenter__item { flex-wrap: wrap; }
    .upcenter__itemdest { max-width: none; }
}

.diag-list { display: flex; flex-direction: column; gap: 2px; }
.diag-list h4 {
    margin: 12px 0 4px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
.diag-row {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12px;
    padding: 2px 0;
}
.diag-row span { font-weight: 700; width: 16px; flex: none; }
.diag-row.is-ok span { color: var(--ok); }
.diag-row.is-bad span { color: var(--danger); }
.diag-row.is-warn span { color: var(--warn); }
.diag-row.is-bad strong { color: var(--danger); }
.diag-row strong { font-weight: 600; font-family: var(--font-mono); font-size: 11.5px; word-break: break-all; }
.diag-row em { font-style: normal; color: var(--text-muted); font-size: 11px; margin-left: auto; text-align: right; }

textarea.json-editor {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

.backup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.backup-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 10px;
    background: var(--surface-2); border-radius: 8px;
    font-size: 12px;
}
.backup-list a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; }
.backup-list__meta { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.backup-list__none { color: var(--text-muted); background: none !important; padding-left: 0 !important; }

/* ── Toasts ────────────────────────────────────────────────────────────── */

.toasts {
    position: fixed; left: 18px; bottom: 18px; z-index: 100;
    display: flex; flex-direction: column; gap: 8px;
    max-width: 380px;
}
.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 10px;
    box-shadow: var(--shadow-2);
    padding: 11px 14px;
    font-size: 12.5px;
    opacity: 0; transform: translateY(8px);
    transition: opacity 250ms ease, transform 250ms ease;
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast--ok { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
.toast--danger { border-left-color: var(--danger); }

/* ── Modales ───────────────────────────────────────────────────────────── */

.modal-root { position: fixed; inset: 0; z-index: 95; }
.modal-overlay { position: absolute; inset: 0; background: rgba(15, 20, 30, 0.35); animation: fade-in 150ms ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 48px));
    border-radius: 16px;
    box-shadow: var(--shadow-3);
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
    animation: pop-in 160ms ease;
}
.modal__title { font-size: 17px; }
.modal__text { margin: 0; font-size: 13.5px; color: var(--text); }
.modal__label { gap: 6px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ═══ PORTAL PÚBLICO ════════════════════════════════════════════════════ */
/* Clave visual: lienzo blanco puro y líneas finas (hairlines) — retícula
   editorial tipo Zara/Apple, sin tarjetas ni sombras.

   TODO lo que se ve aquí sale de variables --p-* que el gestor escribe desde
   Configuración → Apariencia (includes/theme.php). Los valores de abajo son
   los de fábrica: si el servidor aún no tiene theme.php, el portal se ve
   exactamente igual que siempre. */

:root {
    /* Colores */
    --p-bg: #ffffff;
    --p-text: #1d1d1f;
    --p-muted: #8a8d94;
    --p-ink: #003a49;
    --p-accent: #007934;
    --p-hairline: #e4e6e9;
    --p-hover-bg: #fafafa;

    /* Tipografía y anchura */
    --p-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --p-font-display: 'Outfit', 'Inter', sans-serif;
    --p-base-size: 13.5px;
    /* Anchura: por defecto FLUIDA (usa toda la pantalla) con márgenes en vw,
       que es lo que hace que en monitores anchos no sobre blanco a los lados.
       Con «Limitar la anchura» encendido, --p-maxw-use pasa a var(--p-maxw). */
    --p-maxw-use: none;
    --p-maxw: 1180px;
    --p-main-padx: 4vw;
    --p-main-padx-min: 16px;
    --p-main-padt: 14px;
    --p-main-padb: 64px;

    /* Texto de bienvenida */
    --p-hero-size: 21px;
    --p-hero-weight: 400;
    --p-hero-transform: none;
    --p-hero-ls: 0.01em;
    --p-hero-lh: 1.55;
    --p-hero-color: #003a49;
    --p-hero-align: center;
    --p-hero-maxw: 620px;
    --p-hero-mt: 52px;
    --p-hero-mb: 46px;

    /* Título de sección */
    --p-sec-size: 26px;
    --p-sec-weight: 600;
    --p-sec-transform: none;
    --p-sec-ls: 0em;
    --p-sec-color: #003a49;
    --p-seccount-size: 11px;

    /* Retícula */
    --p-col-min: 195px;
    --p-cell-padt: 36px;
    --p-cell-padx: 20px;
    --p-cell-padb: 28px;
    --p-cell-gap: 18px;
    --p-img-h: 104px;
    --p-img-maxw: 74%;
    --p-icon-size: 64px;
    --p-cell-bg: #ffffff;
    --p-line-w: 1px;
    --p-radius: 0px;
    --p-hover-zoom: 1.05;

    /* Nombre del documento */
    --p-name-size: 11px;
    --p-name-weight: 500;
    --p-name-transform: uppercase;
    --p-name-ls: 0.09em;
    --p-name-lh: 1.6;
    --p-name-lines: 3;
    --p-name-color: #55575e;
    --p-name-hover: #003a49;
    --p-name-align: center;

    /* Vista lista */
    --p-row-size: 12px;
    --p-row-weight: 500;
    --p-row-transform: uppercase;
    --p-row-ls: 0.08em;
    --p-row-color: #003a49;
    --p-rowdesc-size: 12px;
    --p-rowdesc-color: #8a8d94;
    --p-row-pad: 15px;
    --p-row-icon: 36px;
    --p-list-maxw: 900px;

    /* Encabezados de grupo */
    --p-grp-size: 11px;
    --p-grp-weight: 600;
    --p-grp-transform: uppercase;
    --p-grp-ls: 0.16em;
    --p-grp-color: #003a49;
    --p-grp-mt: 34px;

    /* Buscador y herramientas */
    --p-tools-size: 12px;
    --p-tools-transform: none;
    --p-tools-ls: 0.04em;
    --p-search-maxw: 440px;
    --p-tools-gap: 14px;
    --p-tools-mb: 26px;

    /* Paginación */
    --p-pag-size: 11px;
    --p-pag-transform: uppercase;
    --p-pag-ls: 0.1em;
    --p-pag-color: #8a8d94;
    --p-pag-active: #003a49;
    --p-pag-gap: 4px;
    --p-pag-mt: 40px;

    /* Pie de página */
    --p-foot-size: 11px;
    --p-foot-weight: 400;
    --p-foot-transform: uppercase;
    --p-foot-ls: 0.08em;
    --p-foot-color: #8a8d94;
    --p-foot-link: #003a49;
    --p-foot-bg: #ffffff;
    --p-foot-align: center;
    --p-foot-padt: 22px;
    --p-foot-padb: 26px;
    --p-foot-gap: 10px;
    --p-foot-line: 1px;
}

/* Alias histórico: el resto del archivo sigue nombrando --hairline. */
:root { --hairline: var(--p-hairline); }

body.public {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font);
    font-size: var(--p-base-size);
}
body.public h1, body.public h2, body.public h3 { font-family: var(--p-font-display); }

/* La cabecera del portal es la librería independiente assets/header/
   (vz-header, configurable desde el admin). Aquí solo queda el cuerpo. */

.pub-main {
    flex: 1; width: 100%;
    max-width: var(--p-maxw-use); margin: 0 auto;
    /* max(): el margen crece con la pantalla pero nunca baja del mínimo, así
       que en el móvil el contenido no se pega a los bordes. */
    padding: var(--p-main-padt) max(var(--p-main-padx-min), var(--p-main-padx)) var(--p-main-padb);
}

/* Statement de bienvenida — solo en la portada, estilo editorial */
.pub-hero {
    margin: var(--p-hero-mt) auto var(--p-hero-mb);
    max-width: var(--p-hero-maxw);
    text-align: var(--p-hero-align);
    font-family: var(--p-font-display);
    font-size: var(--p-hero-size);
    font-weight: var(--p-hero-weight);
    line-height: var(--p-hero-lh);
    letter-spacing: var(--p-hero-ls);
    text-transform: var(--p-hero-transform);
    color: var(--p-hero-color);
    text-wrap: balance;
}

/* Cabecera de sección: rastro + volver + título grande (nada en la raíz) */
.pub-section { margin: 16px 0 26px; display: flex; flex-direction: column; gap: 7px; }
.pub-section__trail {
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--p-muted);
}
.pub-section__trail button {
    background: none; border: none; padding: 2px 0; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.pub-section__trail button:hover { color: var(--p-accent); }
.pub-section__trail span { opacity: 0.55; }
.pub-section__row { display: flex; align-items: baseline; gap: 14px; }
.pub-back {
    align-self: center; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: var(--p-bg);
    border: 1px solid var(--p-hairline); border-radius: 999px;
    color: var(--p-text); cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}
.pub-back:hover { border-color: var(--p-accent); color: var(--p-accent); }
.pub-back svg { width: 17px; height: 17px; }
.pub-section__title {
    margin: 0;
    font-family: var(--p-font-display);
    font-size: var(--p-sec-size);
    font-weight: var(--p-sec-weight);
    letter-spacing: var(--p-sec-ls);
    text-transform: var(--p-sec-transform);
    color: var(--p-sec-color);
}
.pub-section__count {
    font-size: var(--p-seccount-size); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--p-muted);
}

/* Retícula editorial: mosaico de casillas separadas por líneas finas.
   Cada celda dibuja su borde derecho e inferior; el contenedor pone el
   superior y el izquierdo → la trama queda cerrada aunque la última fila
   esté incompleta. */
.icon-grid--public {
    grid-template-columns: repeat(auto-fill, minmax(var(--p-col-min), 1fr));
    gap: 0;
    border-top: var(--p-line-w) solid var(--p-hairline);
    border-left: var(--p-line-w) solid var(--p-hairline);
}
.icon-grid--public .cell {
    cursor: pointer;
    gap: var(--p-cell-gap);
    padding: var(--p-cell-padt) var(--p-cell-padx) var(--p-cell-padb);
    border: none;
    border-right: var(--p-line-w) solid var(--p-hairline);
    border-bottom: var(--p-line-w) solid var(--p-hairline);
    border-radius: var(--p-radius);
    background: var(--p-cell-bg);
    transition: none;
}
.icon-grid--public .cell:hover { background: var(--p-cell-bg); }
.icon-grid--public .cell__icon {
    width: auto; height: var(--p-img-h);
    display: flex; align-items: center; justify-content: center;
}
.icon-grid--public .cell__icon svg.icon-folder,
.icon-grid--public .cell__icon svg.icon-file {
    width: var(--p-icon-size); height: var(--p-icon-size);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.icon-grid--public .cell__meta { font-size: 10.5px; }

/* Nombre: tamaño, caja (MAY./min.), espaciado y nº de líneas configurables */
.icon-grid--public .cell__name {
    font-size: var(--p-name-size); font-weight: var(--p-name-weight);
    text-align: var(--p-name-align); width: 100%;
}
.icon-grid--public .cell__name span {
    display: -webkit-box;
    -webkit-line-clamp: var(--p-name-lines);
    line-clamp: var(--p-name-lines);
    -webkit-box-orient: vertical;
    white-space: normal;
    padding: 0 2px;
    border-radius: 0;
    text-transform: var(--p-name-transform);
    letter-spacing: var(--p-name-ls);
    line-height: var(--p-name-lh);
    color: var(--p-name-color);
    transition: color 200ms ease;
}
.icon-grid--public .cell:hover .cell__name span { color: var(--p-name-hover); }
.icon-grid--public .cell:hover .cell__icon svg.icon-folder,
.icon-grid--public .cell:hover .cell__icon svg.icon-file,
.icon-grid--public .cell:hover img.pub-thumb { transform: scale(var(--p-hover-zoom)); }

/* ── Pie de página ─────────────────────────────────────────────────────── */
.pub-footer {
    border-top: var(--p-foot-line) solid var(--p-hairline);
    padding: var(--p-foot-padt) max(var(--p-main-padx-min), var(--p-main-padx)) var(--p-foot-padb);
    font-size: var(--p-foot-size);
    font-weight: var(--p-foot-weight);
    color: var(--p-foot-color);
    background: var(--p-foot-bg);
    letter-spacing: var(--p-foot-ls);
    text-transform: var(--p-foot-transform);
}
.pub-footer__inner {
    max-width: var(--p-maxw-use); margin: 0 auto;
    display: flex; align-items: center; gap: var(--p-foot-gap);
    flex-wrap: wrap;
    justify-content: center;
}
body.public .pub-footer--left .pub-footer__inner { justify-content: flex-start; }
body.public .pub-footer--right .pub-footer__inner { justify-content: flex-end; }
.pub-footer__sep { opacity: 0.5; }
.pub-footer a { color: var(--p-foot-link); text-decoration: none; }
.pub-footer a:hover { color: var(--p-foot-link); text-decoration: underline; text-underline-offset: 3px; }

/* Portadas en el grid del ADMIN (misma opción que el portal) */
.cell__icon--thumb { width: auto; height: 88px; display: flex; align-items: center; justify-content: center; }
img.admin-thumb {
    width: 64px; height: 84px;
    object-fit: cover; object-position: top;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--shadow-1);
    display: block;
}

/* ═══ HERRAMIENTAS DEL PORTAL: vistas, orden, lista y portadas ═════════ */

.pub-tools {
    display: flex; align-items: center; gap: var(--p-tools-gap);
    margin: 10px 0 var(--p-tools-mb);
}
.pub-search2 { position: relative; flex: 1; max-width: var(--p-search-maxw); margin-right: auto; }
/* Sin buscador, las herramientas siguen empujadas a la derecha */
.pub-tools__spacer { flex: 1; }
.pub-search2 [data-icon] { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--p-muted); display: inline-flex; }
/* Buscador editorial: sin caja, solo una línea fina que se afirma al foco */
.pub-search2 .input {
    padding-left: 28px; min-height: 36px; height: 36px;
    background: transparent;
    border: none; border-bottom: 1px solid var(--p-hairline);
    border-radius: 0;
    font-size: var(--p-tools-size);
    letter-spacing: var(--p-tools-ls);
    text-transform: var(--p-tools-transform);
    color: var(--p-text);
}
.pub-search2 .input:focus {
    outline: none; box-shadow: none;
    border-bottom-color: var(--p-ink);
}

/* Modo embed (include limpio por carpeta): sin cabecera ni pie */
/* Modo embed: el body deja de estirarse hasta el alto de la ventana para que
   su altura SEA la del contenido — es lo que se le manda al anfitrión para
   ajustar el iframe y quitar la barra de scroll interior. */
body.pub-embed {
    background: transparent;
    min-height: 0;
    overflow-x: hidden;
}
body.pub-embed .pub-main { padding: 12px 14px 24px; max-width: none; }

/* Conmutador de vista: fantasma, marcado por una línea fina inferior */
.pub-tools__views { display: inline-flex; gap: 4px; }
.pub-viewbtn {
    width: 34px; height: 34px;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    font-size: 15px; line-height: 1;
    color: var(--p-muted);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}
.pub-viewbtn:hover { color: var(--p-ink); }
.pub-viewbtn.is-active { color: var(--p-ink); border-bottom-color: var(--p-ink); }
select.pub-tools__order {
    width: auto; flex: none;
    min-height: 36px; height: 36px; padding-right: 26px;
    background-color: transparent;
    border: none; border-bottom: 1px solid var(--p-hairline);
    border-radius: 0;
    font-size: var(--p-tools-size);
    letter-spacing: var(--p-tools-ls);
    text-transform: var(--p-tools-transform);
    color: var(--p-text);
}
select.pub-tools__order:focus { outline: none; box-shadow: none; border-bottom-color: var(--p-ink); }

/* Portada o logo del documento: imagen limpia sobre blanco, sin marcos */
img.pub-thumb {
    max-width: var(--p-img-maxw);
    max-height: var(--p-img-h);
    width: auto; height: auto;
    object-fit: contain;
    border: none; border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: block;
    margin: 0 auto;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vista lista: filas desnudas separadas por líneas finas */
.pub-list {
    display: flex; flex-direction: column; gap: 0;
    max-width: var(--p-list-maxw);
    border-top: var(--p-line-w) solid var(--p-hairline);
}
.pub-row {
    display: flex; align-items: center; gap: 20px;
    background: none;
    border: none;
    border-bottom: var(--p-line-w) solid var(--p-hairline);
    border-radius: var(--p-radius);
    box-shadow: none;
    padding: var(--p-row-pad) 6px;
    cursor: pointer;
    transition: background 200ms ease;
}
.pub-row:hover { background: var(--p-hover-bg); }
.pub-row__icon { flex: none; display: flex; width: calc(var(--p-row-icon) + 8px); justify-content: center; }
.pub-row__icon svg.icon-file { width: var(--p-row-icon); height: var(--p-row-icon); }
.pub-row__icon img.pub-thumb { max-width: calc(var(--p-row-icon) + 8px); max-height: calc(var(--p-row-icon) + 10px); margin: 0; }
.pub-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pub-row__text strong {
    font-size: var(--p-row-size); font-weight: var(--p-row-weight);
    text-transform: var(--p-row-transform); letter-spacing: var(--p-row-ls);
    color: var(--p-row-color);
}
.pub-row__text span {
    font-size: var(--p-rowdesc-size); color: var(--p-rowdesc-color);
    letter-spacing: 0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pub-row__go {
    color: var(--p-muted); font-size: 17px; flex: none;
    transition: transform 200ms ease, color 200ms ease;
}
.pub-row:hover .pub-row__go { transform: translateX(4px); color: var(--p-ink); }

/* Agrupado por carpeta: cabecera editorial con línea fina */
.pub-groups { display: flex; flex-direction: column; gap: 14px; }
.pub-group {
    margin: var(--p-grp-mt) 0 0;
    font-size: var(--p-grp-size); font-weight: var(--p-grp-weight);
    letter-spacing: var(--p-grp-ls); text-transform: var(--p-grp-transform);
    color: var(--p-grp-color);
    border-bottom: var(--p-line-w) solid var(--p-hairline);
    padding-bottom: 10px;
}
.pub-groups > .pub-group:first-child { margin-top: 6px; }

/* El resumen y el tipo viajan SIEMPRE en el HTML de cada casilla, pero en el
   estilo editorial no se ven: los enseña el preset que los quiera (Tarjetas,
   Filas…). Así cambiar de estilo no obliga a repintar nada. */
.cell__desc, .cell__typetag { display: none; }

/* ── Paginación del portal ─────────────────────────────────────────────── */
/* Una sola línea debajo del listado: el contador a un lado y los botones al
   otro. La «Colocación» de Apariencia → Paginación decide qué va en cada
   lado (o si se centra todo, como antes). */
.pub-pager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--p-pag-gap);
    margin-top: var(--p-pag-mt);
    font-size: var(--p-pag-size);
    letter-spacing: var(--p-pag-ls);
    text-transform: var(--p-pag-transform);
}
.pub-pager__nav {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--p-pag-gap);
}
/* Páginas a la izquierda y contador a la derecha: se le da la vuelta a la fila */
.pub-pager--split_rev { flex-direction: row-reverse; }
/* Clásico: todo centrado y el contador debajo */
.pub-pager--center { justify-content: center; }
.pub-pager--center .pub-pager__info { width: 100%; order: 2; margin-top: 6px; }
.pub-pager__btn {
    min-width: 34px; height: 34px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none; border-bottom: 1px solid transparent;
    border-radius: var(--p-radius);
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    color: var(--p-pag-color);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}
.pub-pager__btn:hover:not(:disabled) { color: var(--p-pag-active); }
.pub-pager__btn:disabled { opacity: 0.35; cursor: default; }
.pub-pager__btn.is-current {
    color: var(--p-pag-active);
    border-bottom-color: var(--p-pag-active);
    font-weight: 600;
}
.pub-pager__gap { color: var(--p-pag-color); padding: 0 2px; }
.pub-pager__info {
    color: var(--p-pag-color);
    font-size: calc(var(--p-pag-size) - 0.5px);
    white-space: nowrap;
}
.pub-more {
    display: block; margin: 0;
    padding: 12px 30px;
    background: transparent;
    border: 1px solid var(--p-hairline);
    border-radius: var(--p-radius);
    color: var(--p-pag-active);
    font-family: inherit;
    font-size: var(--p-pag-size);
    letter-spacing: var(--p-pag-ls);
    text-transform: var(--p-pag-transform);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
.pub-more:hover { border-color: var(--p-pag-active); background: var(--p-hover-bg); }

@media (max-width: 620px) {
    /* Sin sitio para las dos piezas: se apilan centradas */
    .pub-pager { justify-content: center; flex-direction: column; gap: 10px; }
    .pub-pager--center .pub-pager__info { order: 0; margin-top: 0; }
}

@media (max-width: 860px) {
    .pub-tools { justify-content: space-between; flex-wrap: wrap; }
    .icon-grid--public { grid-template-columns: repeat(auto-fill, minmax(min(var(--p-col-min), 150px), 1fr)); }
    .icon-grid--public .cell { padding: calc(var(--p-cell-padt) * 0.7) 12px calc(var(--p-cell-padb) * 0.7); }
    .icon-grid--public .cell__icon { height: calc(var(--p-img-h) * 0.8); }
    img.pub-thumb { max-height: calc(var(--p-img-h) * 0.8); }
}
.panel__toolsrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* Ficha técnica del panel, versión discreta (va al final) */
.tile-grid--quiet { opacity: 0.82; }
.tile-grid--quiet .tile { padding: 7px 9px; }
.tile-grid--quiet .tile__value { font-size: 11.5px; font-weight: 500; }

/* ── Estadísticas ──────────────────────────────────────────────────────── */

#view-stats { max-width: 1080px; }
.stats-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.stats-tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.stats-tile__value { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--brand-ink); }
.stats-tile__label {
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.stats-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; align-items: start;
}
.stats-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.stats-card h3 { font-size: 13px; letter-spacing: 0.02em; }
.stats-card--wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: 1fr; }
}

/* ═══ BIBLIOTECA: FILTROS, TABLA Y LOTES ════════════════════════════════ */

.topbar__views { display: inline-flex; gap: 2px; flex: none; }
.topbar__views .pub-viewbtn { width: 30px; height: 30px; font-size: 14px; }
#btn-filters[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }

/* Barra de filtros avanzados (se despliega bajo la topbar) */
.filterbar {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-1);
}
.filterbar__field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.filterbar__field > span {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.filterbar__field .input { min-height: 32px; height: 32px; font-size: 12.5px; }
.filterbar__deep { align-self: center; white-space: nowrap; }
.filterbar__count {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
    align-self: center;
}

/* Barra de acciones en lote */
.bulkbar {
    position: sticky; top: 0; z-index: 12;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 9px 14px; margin-bottom: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring); border-radius: 12px;
}
.bulkbar__count {
    font-size: 12px; font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
}
select.bulkbar__move { width: auto; min-height: 30px; height: 30px; font-size: 12.5px; }

/* Casilla de selección múltiple sobre cada celda de la cuadrícula */
.cell { position: relative; }
.cell__pick {
    position: absolute; top: 6px; left: 6px; z-index: 3;
    opacity: 0; transition: opacity 140ms ease;
    display: inline-flex;
}
.cell:hover .cell__pick,
.cell:focus-within .cell__pick,
.cell.is-picked .cell__pick { opacity: 1; }
.cell__pick input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.cell.is-picked { background: var(--accent-soft); border-radius: 10px; }

/* Tabla de la biblioteca */
.libtable-wrap {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    overflow: auto;
}
.libtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.libtable thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-2);
    text-align: left;
    padding: 9px 10px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.libtable thead th[data-col] { cursor: pointer; user-select: none; }
.libtable thead th[data-col]:hover { color: var(--accent); }
.libtable thead th.is-sorted { color: var(--brand-ink); }
.libtable__arrow { margin-left: 5px; font-size: 8px; }
.libtable tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.libtable__row { cursor: default; }
.libtable__row:hover { background: var(--surface-2); }
.libtable__row.is-selected { background: var(--accent-soft); }
.libtable__row.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.libtable__check { width: 34px; }
.libtable__check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.libtable__icon { width: 34px; }
.libtable__icon svg { width: 22px; height: 22px; display: block; }
.libtable__name { font-weight: 500; color: var(--text); max-width: 380px; }
.libtable__name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libtable__folder { color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libtable__acts { width: 132px; }
/* En la tabla las acciones rápidas están siempre a la vista */
.libtable__acts .cell__actions { position: static; opacity: 1; display: flex; gap: 2px; justify-content: flex-end; }

@media (max-width: 900px) {
    .libtable__folder, .libtable thead th[data-col="folder"] { display: none; }
}

/* ── Arrastrar para recolocar ──────────────────────────────────────────── */
/* La línea de inserción marca DÓNDE va a caer; el recuadro completo, que se
   va a meter dentro de esa carpeta. Son dos señales distintas a propósito. */
.cell.is-drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.cell.is-drop-after  { box-shadow: inset -3px 0 0 var(--accent); }
.cell[draggable="true"] { cursor: grab; }
.cell.is-drop-target { outline: 2px dashed var(--accent); outline-offset: -3px; }

.libtable__row.is-drop-before td { box-shadow: inset 0 3px 0 var(--accent); }
.libtable__row.is-drop-after td  { box-shadow: inset 0 -3px 0 var(--accent); }
.libtable__row.is-drop-target td { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.libtable__grip {
    width: 26px;
    text-align: center;
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    letter-spacing: -1px;
}
.libtable__grip:active { cursor: grabbing; }
.libtable thead th.libtable__grip { cursor: pointer; }
.libtable__row:hover .libtable__grip { color: var(--accent); }

/* ═══ CONFIGURACIÓN · ESTILOS POR CARPETA (presets) ═════════════════════ */

.preset-list { display: flex; flex-direction: column; gap: 8px; }
.preset-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
.preset-item:hover { border-color: var(--border-strong); }
.preset-item.is-current { border-color: var(--accent); background: var(--accent-soft); }
.preset-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.preset-item__title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.preset-item__main strong { font-size: 13px; }
.preset-item__main .panel__hint { margin: 0; }
.preset-item__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.preset-item__used {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}
.preset-item__used.is-off { color: var(--text-muted); }
.preset-item__acts { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.preset-item__del:hover { color: var(--danger); }
/* Atajos «Portada» y «Por defecto»: encendidos se ven como una etiqueta */
.preset-item__scope.is-on {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.preset-scope { margin-bottom: 4px; }
.preset-scope h3 { font-size: 13px; }

.preset-new__row { display: flex; gap: 8px; flex-wrap: wrap; }
.preset-editor .code-editor {
    font-family: var(--font-mono);
    font-size: 12px; line-height: 1.6;
    min-height: 320px;
    resize: vertical;
    white-space: pre;
    tab-size: 4;
}

/* ═══ CONFIGURACIÓN · APARIENCIA ════════════════════════════════════════ */

.view--config.view--look { max-width: none; }
.look {
    display: grid; grid-template-columns: minmax(360px, 460px) 1fr;
    gap: 18px; align-items: start;
}
.look__form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.look__intro { margin-bottom: 4px; }
.look__intro h3 { font-size: 15px; margin-bottom: 4px; }

.look-group {
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden;
}
.look-group__head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    cursor: pointer; list-style: none;
    font-size: 12.5px; font-weight: 600;
    color: var(--brand-ink);
}
.look-group__head::-webkit-details-marker { display: none; }
.look-group__head:hover { background: var(--surface-2); }
.look-group__title { flex: 1; }
.look-group__chev { color: var(--text-muted); transition: transform 180ms ease; }
.look-group[open] .look-group__chev { transform: rotate(90deg); }
.look-group__body { padding: 4px 14px 14px; border-top: 1px solid var(--border); }
.look-group__reset { margin-top: 10px; }

.look-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.look-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.look-field--wide { grid-column: 1 / -1; }
.look-field__label {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 5px;
}
.look-field__unit { font-style: normal; opacity: 0.6; }
.look-field .input, .look-field select { min-height: 30px; height: 30px; font-size: 12.5px; }

.look-color { display: flex; align-items: center; gap: 7px; }
.look-color input[type="color"] {
    width: 34px; height: 30px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 7px;
    background: none; cursor: pointer;
}
.look-color input[type="color"]:disabled { opacity: 0.4; cursor: not-allowed; }
.look-color__hex { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11.5px !important; text-transform: lowercase; }
.check--tiny { font-size: 10.5px; color: var(--text-muted); gap: 4px; white-space: nowrap; }

.look-range { display: flex; align-items: center; gap: 8px; }
.look-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.look-range__num { width: 74px; flex: none; }

/* Vista previa pegada arriba: el portal real dentro de un iframe */
.look__preview {
    position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 0;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.look__previewbar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.look__previewtitle {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-muted);
}
.look__dirty {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--warn);
    background: var(--warn-soft);
    padding: 2px 7px; border-radius: 999px;
}
select.look__device { width: auto; min-height: 28px; height: 28px; font-size: 11.5px; }
.look__frame {
    background: #f2f3f5;
    padding: 10px;
    display: flex; justify-content: center;
    height: calc(100vh - 210px); min-height: 420px;
}
.look__frame iframe {
    width: 100%; height: 100%;
    border: 1px solid var(--border); border-radius: 8px;
    background: #fff;
    transition: width 220ms var(--ease-panel);
}
.look__frame[data-device="tablet"] iframe { width: 820px; max-width: 100%; }
.look__frame[data-device="mobile"] iframe { width: 390px; max-width: 100%; }
.look__actions { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); }

@media (max-width: 1180px) {
    .look { grid-template-columns: 1fr; }
    .look__preview { position: static; }
    .look__frame { height: 460px; }
    .look-fields { grid-template-columns: 1fr; }
}