/* Variables base: facilitan aplicar un mismo lenguaje visual en todos los features. */
:root {
    --blue: #0d2c74;
    --cyan: #22ace7;
    --page: #fff;
    --text: #0c2b70;
    --muted: #657084;
    --card: #fff;
    --line: #d9e1ec;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: "Segoe UI", sans-serif;
    transition: background .25s, color .25s;
}

.dashboard-container {
    width: min(100% - 96px, 1440px);
    margin-inline: auto;
}

/* Barra de navegación compartida mediante layout/base.html. */
.navbar {
    height: 66px;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(14, 38, 84, .07);
    padding: 0;
}

.navbar .dashboard-container {
    height: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--blue);
    font-size: 20px;
    font-weight: 800;
}

.navbar-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.navbar-nav {
    gap: 20px;
}

.navbar-light .navbar-nav .nav-link,
.nav-link {
    color: var(--blue);
    padding: 21px 0 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--blue);
    border-bottom: 3px solid var(--cyan);
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #001a49;
    font-size: 15px;
    cursor: pointer;
}

.icon-btn:first-child {
    border: 1px solid #001a49;
    border-radius: 0;
    font-size: 12px;
}

.icon-btn:hover {
    color: var(--cyan);
}

/* Área principal, buscador y controles de filtrado. */
.page-content {
    padding-top: 88px;
    padding-bottom: 26px;
}

.search-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    height: 72px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 7px 20px rgba(21, 43, 83, .09);
}

.search-panel i {
    color: #001a49;
    font-size: 15px;
}

.search-panel input {
    width: 100%;
    border: 0;
    outline: 0;
    border-radius: 10px;
    background: #f3f6fa;
    color: var(--text);
    padding: 13px;
    font-size: 12px;
}

.filters {
    margin-top: 21px;
}

.filters label {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    color: var(--blue);
}

.filters select,
.filters input {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--card);
    color: var(--text);
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(19, 41, 82, .04);
}

.category-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0 19px;
}

.category-tabs button {
    border: 0;
    border-radius: 11px;
    background: var(--card);
    box-shadow: 0 4px 12px rgba(24, 43, 79, .08);
    color: var(--blue);
    padding: 10px 16px;
    font-size: 12px;
    cursor: pointer;
}

.category-tabs button.active {
    background: #152f78;
    color: #fff;
}

/* Cuadrícula reutilizable de cards para la biblioteca de videos. */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.video-card {
    overflow: hidden;
    border-radius: 17px;
    background: var(--card);
    box-shadow: 0 9px 20px rgba(25, 43, 74, .11);
}

.video-image {
    position: relative;
    display: block;
    width: 100%;
    height: 235px;
    overflow: hidden;
    background: #dbe3ee;
}

.video-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-btn {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 169, 232, .94);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(4, 30, 72, .34);
    transition: transform .18s ease, background .18s ease;
}

.play-btn i {
    margin: 0;
    line-height: 1;
}

.video-image:hover .play-btn,
.video-image:focus-visible .play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: #078dce;
}

.video-time {
    position: absolute;
    right: 10px;
    bottom: 9px;
    border-radius: 4px;
    padding: 3px 5px;
    background: #071126;
    color: #fff;
    font-size: 9px;
}

.video-body {
    min-height: 158px;
    padding: 19px;
}

.badge-category {
    display: inline-block;
    margin-bottom: 8px;
    border-radius: 5px;
    padding: 5px 8px;
    background: #e1f5fd;
    color: #11a7e7;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.video-body h2 {
    margin: 0 0 9px;
    color: var(--blue);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.video-body p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.video-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    color: #607086;
    font-size: 10px;
}

.video-footer i {
    color: #536478;
}

.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin-top: 31px;
}

.pagination-nav button {
    border: 0;
    background: transparent;
    color: var(--blue);
    font-size: 12px;
}

.pagination-nav .current {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--cyan);
    color: white;
}

/* Estados de la biblioteca y vista de reproducción/detalle. */
.videos-heading {
    margin-bottom: 26px;
}

.videos-heading h1 {
    margin: 2px 0 6px;
    font-size: 34px;
    font-weight: 800;
}

.videos-heading p {
    margin: 0;
    color: var(--muted);
}

.eyebrow {
    color: var(--cyan) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.video-library .video-image {
    display: block;
    text-decoration: none;
}

.video-body h2 a {
    color: inherit;
    text-decoration: none;
}

.video-placeholder {
    height: 100%;
    background: linear-gradient(135deg, #113a7a, #22ace7);
}

.video-message {
    width: 100%;
    margin: 10px 0 22px;
    border-radius: 10px;
    padding: 16px;
    background: var(--card);
    color: var(--muted);
}

.error-message {
    border: 1px solid #efb8b8;
    color: #9f2424;
}

.back-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.video-player {
    overflow: hidden;
    border-radius: 18px;
    background: #06142f;
    aspect-ratio: 16 / 9;
    box-shadow: 0 12px 30px rgba(11, 32, 71, .18);
}

.video-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-details {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    margin: 28px 0 12px;
    padding: 28px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 8px 18px rgba(25, 43, 74, .08);
}

.video-details h1 {
    margin: 8px 0;
    font-size: 30px;
    font-weight: 800;
}

.video-details p {
    color: var(--muted);
    line-height: 1.6;
}

.video-author {
    color: var(--blue) !important;
    font-weight: 700;
}

.video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.video-tags span {
    padding: 5px 10px;
    border-radius: 999px;
    background: #e1f5fd;
    color: #108fc7;
    font-size: 12px;
}

.video-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    align-items: flex-start;
}

.video-actions a,
.video-actions button {
    border: 0;
    border-radius: 9px;
    padding: 11px 16px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.video-actions details {
    position: relative;
}

.video-actions summary.update-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    border: 0;
    border-radius: 9px;
    padding: 11px 16px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.video-actions summary.update-btn::-webkit-details-marker {
    display: none;
}

.update-btn {
    background: #1677bf;
}

.video-actions summary.update-btn:hover {
    background: #0f639f;
}

.delete-btn {
    background: #c93c47;
}

/* Tema oscuro: se activa con la clase añadida por dashboard.js. */
body.dark-theme {
    --page: #0b1426;
    --text: #e7edf8;
    --card: #14223a;
    --blue: #e7edf8;
    --muted: #b4c0d2;
    --line: #31425f;
}

body.dark-theme .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

body.dark-theme .icon-btn {
    color: #e7edf8;
}

body.dark-theme .search-panel input {
    background: #0d1930;
    color: #e7edf8;
}

body.dark-theme .badge-category {
    background: #17455c;
}

body.dark-theme .video-tags span {
    background: #17455c;
    color: #8edfff;
}

/* Pie compartido incluido desde layout/partials/footer.html. */
.site-footer {
    margin-top: 40px;
    padding: 28px 0;
    background: #07183f;
    color: #fff;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-size: 13px;
}

.footer-content div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-content img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.footer-content p {
    margin: 0;
    color: #b6d5ff;
}

.footer-content small {
    color: #b6d5ff;
}

/* Adaptaciones para tabletas y teléfonos. */
@media (max-width: 991px) {
    .navbar {
        height: auto;
        padding: 10px 0;
    }

    .navbar .dashboard-container {
        height: auto;
    }

    .navbar-nav {
        gap: 0;
    }

    .navbar-light .navbar-nav .nav-link,
    .nav-link {
        padding: 10px 0;
    }

    .nav-icons {
        margin: 12px 0;
    }

    .page-content {
        padding-top: 100px;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .dashboard-container {
        width: min(100% - 32px, 1440px);
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-image {
        height: 210px;
    }

    .navbar-brand {
        font-size: 15px;
    }

    .search-panel {
        height: 58px;
    }

    .footer-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
}

@media (max-width: 700px) {
    .video-details {
        flex-direction: column;
        padding: 20px;
    }

    .video-actions {
        width: 100%;
    }

    .video-actions a,
    .video-actions button {
        flex: 1;
        text-align: center;
    }

    .video-details h1 {
        font-size: 24px;
    }
}
.pagination-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:40px 0;
}

.page-btn{
    width:42px;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:10px;
    text-decoration:none;
    background:#fff;
    color:#0d2c74;
    font-weight:600;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    transition:.25s;
}

.page-btn:hover{
    background:#22ace7;
    color:#fff;
}

.page-btn.active{
    background:#0d2c74;
    color:#fff;
}

/* Popups de la barra: solo presentación; las acciones se conectarán al backend después. */
.nav-popover{position:relative}.nav-dropdown{position:absolute;top:calc(100% + 13px);right:0;z-index:20;display:none;width:250px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 15px 34px rgba(0,0,0,.18)}.nav-dropdown.is-open{display:block}.nav-dropdown p{margin:3px 8px 10px;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.nav-dropdown a,.dropdown-action,.logout-demo{display:flex;width:100%;align-items:center;gap:10px;border:0;border-radius:7px;padding:10px 8px;background:transparent;color:var(--blue);font-size:13px;text-align:left;text-decoration:none;cursor:pointer}.nav-dropdown a:hover,.dropdown-action:hover{background:rgba(34,192,250,.12)}.notification-dot{position:absolute;top:5px;right:4px;width:7px;height:7px;border:1px solid var(--card);border-radius:50%;background:#ec4b5a}.notification-item{display:flex;gap:9px;padding:9px 7px;color:var(--blue);font-size:12px}.notification-item>i{color:#22ace7}.notification-item span{display:grid;gap:2px}.notification-item small{color:var(--muted)}.profile-summary{display:flex;gap:10px;align-items:center;margin:2px 8px 10px;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--blue)}.profile-summary>i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#dff5ff;color:#129bd1}.profile-summary div{display:grid}.profile-summary small{color:var(--muted)}.logout-demo{margin-top:5px;border-top:1px solid var(--line);border-radius:0;color:#dc4352}.logout-demo:hover{background:rgba(220,67,82,.09)}body.dark-theme .nav-dropdown{background:#17243a}body.dark-theme .profile-summary>i{background:#17455c;color:#8edfff}

/* Estrellas del detalle: el color se completa dinámicamente desde video_rating.js. */
.video-rating { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }.video-rating h2 { margin: 0 0 10px; color: var(--blue); font-size: 18px; }.rating-stars { display: flex; gap: 7px; }.rating-star { border: 0; background: transparent; color: #f6b800; font-size: 27px; cursor: pointer; transition: transform .15s; }.rating-star:hover { transform: scale(1.15); }.video-rating p { margin: 7px 0 0; font-size: 13px; }
/* Banner cinematográfico: Vimeo aporta la reproducción y el degradado mantiene legible el texto. */
.video-library-page{width:min(100% - 40px,1680px)}.video-carousel{position:relative;min-height:440px;margin:0 0 34px;overflow:hidden;border-radius:24px;background:#07142b;box-shadow:0 18px 40px rgba(4,20,52,.18)}.video-carousel__slide{position:absolute;inset:0;display:grid;align-items:center;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}.video-carousel__slide.is-active{position:relative;opacity:1;visibility:visible}.video-carousel__slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.video-carousel__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,13,35,.96) 0%,rgba(3,13,35,.78) 36%,rgba(3,13,35,.25) 72%,rgba(3,13,35,.3) 100%)}.video-carousel__content{position:relative;z-index:1;width:min(600px,62%);padding:58px 76px;color:#fff}.video-carousel__content>span{color:#43c9ff;font-size:12px;font-weight:800;text-transform:uppercase}.video-carousel__meta{margin:12px 0 0;color:#9edcf6;font-size:13px;font-weight:700}.video-carousel__content h2{margin:9px 0 14px;font-size:clamp(30px,3.2vw,49px);line-height:1.08}.video-carousel__content p:not(.video-carousel__meta){margin:0;color:#e1ecfb;font-size:16px;line-height:1.55}.video-carousel__content a{display:inline-flex;align-items:center;gap:8px;margin-top:22px;border-radius:9px;padding:12px 19px;background:#fff;color:#092967;font-weight:800;text-decoration:none;transition:transform .2s,background .2s}.video-carousel__content a:hover{transform:translateY(-2px);background:#dff6ff}.video-carousel__control{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(3,14,35,.48);color:#fff;cursor:pointer;transform:translateY(-50%);transition:background .2s}.video-carousel__control:hover{background:#22ace7}.video-carousel__control--previous{left:25px}.video-carousel__control--next{right:25px}.video-carousel__dots{position:absolute;z-index:2;right:48px;bottom:30px;display:flex;gap:9px}.video-carousel__dots button{width:9px;height:9px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:width .2s,background .2s}.video-carousel__dots button.is-active{width:29px;border-radius:8px;background:#43c9ff}@media(max-width:700px){.video-library-page{width:min(100% - 24px,1680px)}.video-carousel{min-height:400px;border-radius:18px}.video-carousel__content{width:100%;padding:52px 58px}.video-carousel__shade{background:linear-gradient(90deg,rgba(3,13,35,.95),rgba(3,13,35,.6))}.video-carousel__control{width:38px;height:38px}.video-carousel__control--previous{left:12px}.video-carousel__control--next{right:12px}.video-carousel__dots{right:24px;bottom:22px}}@media(max-width:480px){.video-carousel{min-height:430px}.video-carousel__content{padding:45px 31px}.video-carousel__content h2{font-size:31px}.video-carousel__content p:not(.video-carousel__meta){font-size:14px}.video-carousel__control{display:none}}

.video-carousel{min-height:300px}.video-carousel__slide{min-height:300px}.video-carousel__content{padding-top:32px;padding-bottom:32px}@media(max-width:700px){.video-carousel{min-height:310px}.video-carousel__slide{min-height:310px}.video-carousel__content{padding-top:32px;padding-bottom:32px}}@media(max-width:480px){.video-carousel{min-height:340px}.video-carousel__slide{min-height:340px}.video-carousel__content{padding-top:32px;padding-bottom:32px}}

/* Feature Crear video: estilos aislados para no alterar la biblioteca de videos. */
.create-video-page { max-width: 920px; }
.create-video-card { padding: 26px; border-radius: 12px; background: #191b42; color: #fff; }
.create-video-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.create-video-heading h1 { margin: 0; font-size: 22px; }
.back-button { border-radius: 4px; padding: 7px 13px; background: #fff; color: #1a1d43; font-size: 12px; text-decoration: none; }
.create-video-form { display: grid; gap: 8px; }
.create-video-form label { margin-top: 4px; color: #fff; font-size: 12px; font-weight: 700; }
.create-video-form input, .create-video-form select, .create-video-form textarea { width: 100%; border: 1px solid #d5d9e2; border-radius: 3px; background: #fff; color: #17223a; padding: 8px; font-size: 12px; }
.create-video-form select[multiple] { min-height: 58px; }
.create-video-form textarea { resize: vertical; }
.form-two-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.form-two-columns > div { display: grid; gap: 8px; }
.secondary-action, .view-log-button { justify-self: center; border: 0; border-radius: 2px; padding: 7px 14px; background: #fff; color: #191b42; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.view-log-button { justify-self: start; }
.save-button { border: 0; border-radius: 4px; padding: 11px; background: #159257; color: #fff; font-weight: 800; }
.create-video-form button { cursor: pointer; }
/* En móviles, los campos que comparten fila se muestran uno debajo del otro. */
@media (max-width: 620px) { .create-video-card { padding: 18px; } .form-two-columns { grid-template-columns: 1fr; } }