:root {
    --frasytram-primary: #5f6a8c;
    --frasytram-primary-dark: #3e4865;
    --frasytram-accent: #8c846d;
    --frasytram-soft: #d9d2bf;
    --frasytram-border: #bfc5d9;
    --frasytram-text: #292d38;
    --frasytram-surface: #fffefa;
    --frasytram-lavender: #bfc5d9;
}

body {
    background:
        radial-gradient(circle at top left, rgba(191, 197, 217, .35), transparent 32rem),
        linear-gradient(180deg, #fffefa 0%, #d9d2bf 100%);
    color: var(--frasytram-text);
}

#accessibility-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #3e4865;
    color: #fff;
    box-shadow: 0 3px 14px #0005;
    cursor: pointer;
}
#accessibility-toggle[hidden] { display: none; }
#accessibility-toggle:focus-visible { outline: 3px solid #fff !important; box-shadow: 0 0 0 6px #3e4865; }
#accessibility-panel {
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    margin: auto;
    padding: 24px;
    border: 2px solid #3e4865;
    border-radius: 14px;
    background: #fff;
    color: #292d38;
    font-size: 16px;
    line-height: 1.5;
}
#accessibility-panel::backdrop { background: #292d38aa; }
.accessibility-panel-header { display: flex; align-items: flex-start; gap: 12px; }
#accessibility-panel h2 { font-size: 22px; line-height: 1.3; margin: 0 0 16px; }
#accessibility-panel button, #accessibility-panel select {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #8c846d;
    border-radius: 5px;
    background: #d9d2bf;
    color: #3e4865;
    font: inherit;
}
#accessibility-close { margin-left: auto; min-width: 44px; }
#accessibility-size { display: block; width: 100%; margin: 6px 0 12px; }
#accessibility-panel .accessibility-option { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: normal; }
#accessibility-panel input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; }
footer.container { padding-bottom: 90px; }
.a11y-large-text body { font-size: calc(14px * var(--a11y-scale)); }
.a11y-large-text :is(.btn, .form-control, .navbar-brand, .panel-title) { font-size: calc(14px * var(--a11y-scale)); height: auto; white-space: normal; }
.a11y-large-text h1 { font-size: calc(36px * var(--a11y-scale)); }
.a11y-large-text h2 { font-size: calc(30px * var(--a11y-scale)); }
.a11y-large-text h3 { font-size: calc(24px * var(--a11y-scale)); }
.a11y-large-text :is(main, nav) { overflow-wrap: anywhere; }
.a11y-large-text .text-nowrap { white-space: normal; }
.a11y-spacing :is(main, nav, footer) { line-height: 1.8; letter-spacing: .08em; word-spacing: .12em; }
.a11y-spacing :is(main, nav, footer) :is(p, li, dd, td, a, label) { line-height: 1.8; }
.a11y-links a { text-decoration: underline !important; text-underline-offset: 4px; font-weight: bold; }
.a11y-motion *, .a11y-motion *::before, .a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-contrast body, .a11y-contrast body *:not(svg):not(svg *) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}
.a11y-contrast body a { color: #ffff00 !important; }
.a11y-contrast :focus-visible { outline: 3px solid #ffff00 !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    #accessibility-toggle, #accessibility-panel { display: none !important; }
}

.navbar-default {
    background: linear-gradient(135deg, var(--frasytram-primary-dark), var(--frasytram-primary));
    border: 0;
    border-radius: 0;
    box-shadow: 0 6px 20px rgba(62, 72, 101, .18);
}

.navbar-default .navbar-brand {
    color: #fff;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.navbar-brand { display: flex; align-items: center; gap: 6px; }
.frasytram-mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    vertical-align: middle;
}
.accessible-navigation .frasytram-mark { margin-right: 6px; }

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
}

.navbar-default .navbar-nav > li > a {
    opacity: .88;
    transition: background-color .18s ease, opacity .18s ease;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background: var(--frasytram-primary-dark);
    opacity: 1;
}

.navbar-default .btn-link {
    color: #fff;
    text-decoration: none;
}

main.container {
    background: var(--frasytram-surface);
    border: 1px solid var(--frasytram-border);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(62, 72, 101, .08);
    margin-bottom: 3rem;
    padding: 2rem 2.2rem;
}

.page-header {
    border-bottom-color: var(--frasytram-border);
    margin-top: 0;
}

.page-header h1 {
    color: var(--frasytram-primary-dark);
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, var(--frasytram-accent), #5f6a8c);
    border-color: #5f6a8c;
    box-shadow: 0 3px 10px rgba(95, 106, 140, .22);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #5f6a8c, #3e4865);
    border-color: #3e4865;
}

.btn-default {
    border-color: var(--frasytram-border);
}

.panel {
    border-color: var(--frasytram-border);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(62, 72, 101, .06);
}

.panel-default > .panel-heading,
.panel-info > .panel-heading {
    background: var(--frasytram-soft);
    border-color: var(--frasytram-border);
    color: var(--frasytram-primary-dark);
    font-weight: 700;
}

.table > thead > tr > th {
    background: var(--frasytram-soft);
    border-bottom: 2px solid var(--frasytram-border);
    color: var(--frasytram-primary-dark);
}

.table-hover > tbody > tr:hover {
    background-color: #d9d2bf;
}

.breadcrumb {
    background: var(--frasytram-soft);
    border: 1px solid var(--frasytram-border);
    border-radius: 999px;
}

.form-control:focus {
    border-color: var(--frasytram-accent);
    box-shadow: 0 0 0 3px rgba(95, 106, 140, .2);
}

.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    background: var(--frasytram-primary);
    border-color: var(--frasytram-primary);
}

.list-group-item {
    transition: background-color .16s ease, border-color .16s ease;
}

.list-group-item:hover {
    background: #d9d2bf;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -200px;
    z-index: 10000;
    padding: 12px 18px;
    background: #fff;
    color: #222;
    border: 3px solid #222;
}
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid #3e4865 !important;
    outline-offset: 3px;
}
.accessible-navigation {
    width: 100%;
    padding: 20px max(20px, calc((100% - 1170px) / 2));
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--frasytram-primary-dark), var(--frasytram-primary));
    box-shadow: 0 6px 20px rgba(62, 72, 101, .18);
}
.accessible-navigation > p { font-size: 18px; }
.accessible-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.accessible-navigation a {
    display: inline-block;
    padding: 10px 12px;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 4px;
}
.accessible-navigation a:hover,
.accessible-navigation a:focus { background: var(--frasytram-primary-dark); color: #fff; }
.accessible-navigation a:focus-visible { outline-color: #fff !important; }
.accessible-navigation form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.accessible-navigation label { margin: 0; }
.reader-results { padding-left: 28px; }
.reader-results > li { padding: 4px 0 20px; border-bottom: 1px solid var(--frasytram-border); }
.reader-results h3 { font-size: 20px; }
.reader-results h3 a { text-decoration: underline; }
.accessible-navigation select {
    padding: 8px;
    max-width: 100%;
    color: var(--frasytram-text);
    background: #fff;
    border: 1px solid var(--frasytram-border);
    border-radius: 4px;
}

/* Contraste de la presentación normal: no depende del panel de accesibilidad. */
a { color: #3e4865; }
a:hover, a:focus { color: #292d38; }
main a:not(.btn) { text-decoration: underline; }
.text-muted, .help-block, caption,
.breadcrumb > .active, h1 small, h2 small, h3 small { color: #555043; }
.form-control::placeholder { color: #666; opacity: 1; }
.form-control { border-color: #8c846d; }
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff; background: #5f6a8c; border-color: #5f6a8c; text-shadow: none;
}
.btn-info, .btn-info:hover, .btn-info:focus, .btn-info:active {
    color: #fff; background: #5f6a8c; border-color: #5f6a8c; text-shadow: none;
}
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active {
    color: #fff; background: #5f6a8c; border-color: #5f6a8c; text-shadow: none;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    color: #fff; background: #5f6a8c; border-color: #5f6a8c; text-shadow: none;
}
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    color: #fff; background: #a32622; border-color: #a32622; text-shadow: none;
}
.label-success { background-color: #5f6a8c; }
.label-warning { background-color: #5f6a8c; }
.label-info { background-color: #5f6a8c; }
.label-default, .badge { background-color: #555043; }
.pagination > li > a { color: #3e4865; }
.pagination > .disabled > span { color: #555043; }
.navbar-default .navbar-nav > li > a { opacity: 1; }
.navbar-default .interface-language label { color: #fff; margin: 0 6px 0 0; }
@media (min-width: 768px) {
    .navbar-default > .container-fluid {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .navbar-default > .container-fluid::before,
    .navbar-default > .container-fluid::after { display: none; }
    .navbar-default .navbar-header,
    .navbar-default .navbar-nav,
    .navbar-default .navbar-nav > li { float: none; }
    .navbar-default .navbar-nav {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .navbar-default .navbar-right { margin-left: auto; }
    .navbar-default .navbar-nav > li > a {
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 50px;
    }
    .navbar-default .navbar-form {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}
.interface-language { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.interface-language .form-control {
    width: auto;
    max-width: 100%;
    height: 30px;
    padding: 3px 6px;
    font-size: 13px;
}
.a11y-large-text .interface-language .form-control {
    height: auto;
    font-size: calc(14px * var(--a11y-scale));
}
.reading-selector { margin: 16px 0 24px; }
.semantic-fields-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 15px;
}
.semantic-fields-language {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.semantic-fields-language label { margin-bottom: 0; }
.semantic-fields-language .form-control { width: auto; max-width: 100%; }
.semantic-fields-filter { flex: 1 1 260px; min-width: 0; margin-bottom: 0; }
.semantic-fields-filter .input-group { width: 100%; }
.semantic-fields-filter .input-group-addon { width: 40px; }
@media (max-width: 767px) {
    .semantic-fields-language, .semantic-fields-filter { flex-basis: 100%; }
}
.reading-selector select { max-width: 420px; }
.simplified-results h3 { margin-top: 0; }
.simplified-definition, .simplified-entry p { font-size: 1.2em; line-height: 1.7; margin-top: 18px; }
.simplified-entry section { margin-bottom: 28px; }

.entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.entry-reading {
    border: 1px solid var(--frasytram-border);
    border-radius: 12px;
    background: var(--frasytram-soft);
    padding: 20px;
}
.entry-reading .reading-selector { margin: 0; }
.entry-reading .reading-selector select { max-width: none; }
.entry-reading .reading-selector > label,
.entry-screen-reader h2 {
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: inherit;
    color: inherit;
    margin: 0 0 10px;
}
.a11y-large-text .entry-reading .reading-selector > label,
.a11y-large-text .entry-screen-reader h2 { font-size: calc(18px * var(--a11y-scale)); }
.entry-screen-reader { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--frasytram-border); }
.entry-screen-reader .btn { white-space: normal; text-align: left; }
.entry-screen-reader-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.entry-screen-reader-heading h2 { margin: 0; }
.entry-screen-reader .reading-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 50%;
    font-size: 18px;
}
.reading-help-icon { display: block; width: 30px; height: 30px; }
.entry-page .reading-help { color: var(--frasytram-surface); }
.entry-private .panel { margin-bottom: 0; }
.entry-private .panel-heading { padding: 14px 16px; }
.entry-private .panel-body { padding: 16px; }
.entry-private .form-group { margin-bottom: 12px; }
.entry-page .btn,
.entry-page .btn:focus,
.entry-page .btn:active {
    background: #5f6a8c;
    border-color: #5f6a8c;
    color: #fff;
    text-shadow: none;
    box-shadow: none;
}
.entry-page .btn:hover {
    background: #3e4865;
    border-color: #3e4865;
    color: #fff;
}
.a11y-large-text .entry-layout { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 850px) {
    .entry-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .entry-reading { padding: 16px; }
}

/* Paleta: oliva #8C846D, marfil #FFFEFA, arena #D9D2BF,
   azul #5F6A8C y lavanda #BFC5D9. */
.panel, .list-group-item, .dropdown-menu, .form-control,
#accessibility-panel, .accessible-navigation select {
    background-color: var(--frasytram-surface);
    color: var(--frasytram-text);
}
.panel-primary > .panel-heading {
    background: var(--frasytram-primary);
    border-color: var(--frasytram-primary);
    color: var(--frasytram-surface);
}
.panel-success > .panel-heading, .panel-warning > .panel-heading {
    background: var(--frasytram-lavender);
    color: var(--frasytram-primary-dark);
    border-color: var(--frasytram-border);
}
.panel-footer, .well, .input-group-addon {
    background: var(--frasytram-soft);
    color: var(--frasytram-text);
    border-color: var(--frasytram-accent);
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--frasytram-surface); }
.table-hover > tbody > tr:hover { background: var(--frasytram-soft); }
.table > thead > tr > th { background: var(--frasytram-lavender); }
.btn-default, .btn-default:hover, .btn-default:focus, .btn-default:active {
    background: var(--frasytram-primary);
    color: var(--frasytram-surface);
    border-color: var(--frasytram-primary);
    text-shadow: none;
}
.btn-default:hover, .btn-primary:hover { background: var(--frasytram-primary-dark); }
.alert-info {
    background: var(--frasytram-lavender);
    color: var(--frasytram-primary-dark);
    border-color: var(--frasytram-primary);
}
.alert-success, .alert-warning {
    background: var(--frasytram-soft);
    color: var(--frasytram-text);
    border-color: var(--frasytram-accent);
}
.dropdown-menu > li > a { color: var(--frasytram-primary-dark); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: var(--frasytram-lavender);
    color: var(--frasytram-primary-dark);
}
.entry-reading { border-top: 4px solid var(--frasytram-accent); }

/* Fondo decorativo de la entrada, independiente del contenido y los controles. */
body.entry-page {
    isolation: isolate;
    min-height: 100vh;
    background-color: var(--frasytram-soft);
    background-image: url('../images/entry-sea-sunset.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.entry-sea-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.entry-page > nav, .entry-page > main, .entry-page > footer {
    position: relative;
    z-index: 1;
}
.entry-page > nav { z-index: 2; }
#entry-sea-video { width: 100%; height: 100%; object-fit: cover; }
#entry-sea-video[hidden] { display: none; }
.a11y-motion .entry-sea-background,
.a11y-contrast .entry-sea-background { display: none; }
@media (prefers-reduced-motion: reduce) {
    .entry-sea-background { display: none; }
}
.entry-page main.container {
    background: rgba(255, 254, 250, .6);
    box-shadow: 0 12px 35px rgba(41, 45, 56, .2);
}
.entry-page footer.container > p {
    display: inline-block;
    max-width: 100%;
    padding: 12px 16px;
    background: var(--frasytram-surface);
    border: 1px solid var(--frasytram-border);
    border-radius: 8px;
}
@media print {
    .entry-sea-background { display: none; }
    body.entry-page { background-image: none; }
}