/* Estilos de Nubelfon (nubelfon.com) para toda la wiki BookStack — claro y oscuro.
   Se carga después de los estilos de BookStack y de los colores de Ajustes > Personalización. */


@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ubuntu-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ubuntu-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ubuntu-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ubuntu-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/ubuntu-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/ubuntu-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Variables ---------- */
:root {
    --font-body: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
    --color-primary: #037b63;
    --color-primary-light: rgba(79, 209, 181, 0.18);
    --color-link: #037b63;
    --color-bookshelf: #c2410c;
    --color-book: #037b63;
    --color-chapter: #b7791f;
    --color-page: #1f7a99;
    --color-page-draft: #7e50b1;

    --nfw-bg: #f4f7f6;
    --nfw-surface: #ffffff;
    --nfw-surface-2: #f6f8f8;
    --nfw-border: #e3e8e7;
    --nfw-control-border: #b8c2c0;
    --nfw-text: #2a3336;
    --nfw-heading: #040606;
    --nfw-muted: #6b7774;
    --nfw-mint: #4fd1b5;
    --nfw-tint: #dcf0eb;
    --nfw-tint-subtle: #e6f5f1;
    --nfw-shadow: 0 1px 2px #0406060f, 0 6px 18px #04060614;
    --nfw-header: linear-gradient(100deg, #025e4b 0%, #299780 55%, #025e4b 100%);
    --nfw-radius: 16px;
}
:root.dark-mode {
    --color-primary: #4fd1b5;
    --color-primary-light: rgba(79, 209, 181, 0.16);
    --color-link: #4fd1b5;
    --color-bookshelf: #ff8a65;
    --color-book: #4fd1b5;
    --color-chapter: #f0b44c;
    --color-page: #6cc3e0;
    --color-page-draft: #b593e0;

    --nfw-bg: #0b1312;
    --nfw-surface: #131c1b;
    --nfw-surface-2: #182322;
    --nfw-border: #24302e;
    --nfw-control-border: #3a4845;
    --nfw-text: #c9d3d0;
    --nfw-heading: #eef3f1;
    --nfw-muted: #8a9491;
    --nfw-tint: #173a33;
    --nfw-tint-subtle: #11211f;
    --nfw-shadow: 0 1px 2px #00000066, 0 8px 22px #00000066;
    --nfw-header: linear-gradient(100deg, #01382d 0%, #0b5c4c 55%, #01382d 100%);
}

/* ---------- Base ---------- */
html, html.dark-mode { background-color: var(--nfw-bg); }
body { font-family: var(--font-body); color: var(--nfw-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--nfw-heading); }
h1, h2 { font-weight: 700; letter-spacing: -0.01em; }
.text-muted, .text-muted-light { color: var(--nfw-muted) !important; }
a { color: var(--color-link); }
::selection { background: var(--nfw-mint); color: #040606; }

/* ---------- Cabecera ---------- */
header#header, header#header.primary-background {
    background: var(--nfw-header) !important;
    border-bottom: 0;
    box-shadow: 0 2px 12px rgba(2, 94, 75, 0.25);
}
header#header .links a,
header#header .user-name { border-radius: 999px; }
header#header .links a:hover,
header#header .user-name:hover { background-color: rgba(255, 255, 255, 0.14); }
header#header .search-box input {
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}
header#header .search-box input::placeholder { color: rgba(255, 255, 255, 0.8); }
header#header .search-box.search-active input,
header#header .search-box input:focus {
    background-color: #fff;
    color: #040606;
}
:root.dark-mode header#header .search-box.search-active input,
:root.dark-mode header#header .search-box input:focus { background-color: var(--nfw-surface); color: var(--nfw-heading); }

/* ---------- Tarjetas y bloques ---------- */
.card {
    background-color: var(--nfw-surface);
    border: 1px solid var(--nfw-border);
    border-radius: var(--nfw-radius);
    box-shadow: var(--nfw-shadow);
}
:root.dark-mode .card { background-color: var(--nfw-surface); }
.card-title { color: var(--nfw-heading); font-weight: 700; }
.card-footer-link, button.card-footer-link { border-radius: 0 0 var(--nfw-radius) var(--nfw-radius); border-color: var(--nfw-border); }
.content-wrap.card { border-radius: var(--nfw-radius); }
.tri-layout-left-contents .card, .tri-layout-right-contents .card { border-radius: 14px; }

/* ---------- Listas de entidades ---------- */
.entity-list-item, .entity-list-item-link { border-radius: 10px; }
.entity-list-item:hover, a.entity-list-item:hover, .entity-list-item.selected {
    background-color: var(--nfw-tint-subtle) !important;
}
.dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--nfw-border);
    background-color: var(--nfw-surface);
    box-shadow: 0 10px 28px #0406062e;
    overflow: hidden;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background-color: var(--nfw-tint-subtle); }
.tag-item, .tag-box .tag-item { border-radius: 999px; overflow: hidden; }

/* ---------- Botones ---------- */
.button {
    border-radius: 999px;
    font-weight: 700;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.button:hover, .button:focus {
    background-color: #025e4b;
    border-color: #025e4b;
    color: #fff;
}
:root.dark-mode .button { color: #040606; }
:root.dark-mode .button:hover, :root.dark-mode .button:focus { background-color: #7ee0ca; border-color: #7ee0ca; color: #040606; }
.button.outline {
    background-color: transparent;
    border-color: var(--nfw-control-border);
    color: var(--nfw-text);
}
.button.outline:hover, .button.outline:focus {
    background-color: var(--nfw-tint-subtle);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---------- Formularios ---------- */
.input-base,
input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"],
input[type="url"], input[type="password"], select, textarea {
    border-radius: 8px;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="url"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
}
:root.dark-mode .input-base,
:root.dark-mode input[type="text"], :root.dark-mode input[type="number"], :root.dark-mode input[type="email"],
:root.dark-mode input[type="date"], :root.dark-mode input[type="search"], :root.dark-mode input[type="url"],
:root.dark-mode input[type="password"], :root.dark-mode select, :root.dark-mode textarea {
    background-color: #0f1716;
    border-color: var(--nfw-control-border);
    color: var(--nfw-heading);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

/* ---------- Contenido de páginas ---------- */
.page-content blockquote { border-left-color: var(--nfw-mint); background: var(--nfw-tint-subtle); border-radius: 0 10px 10px 0; }
.page-content table td, .page-content table th { border-color: var(--nfw-border); }
.page-content pre, .page-content code { border-radius: 8px; }
.page-content a { text-decoration-color: color-mix(in srgb, var(--color-link) 45%, transparent); }

/* ---------- Pie y extras ---------- */
footer { color: var(--nfw-muted); }
.back-to-top { border-radius: 999px; }
.notification { border-radius: 12px; }