/* CSS deliberadamente conservador: sin Grid, variables CSS ni dependencias. */
* { box-sizing: border-box; }
html { background: #0d1421; }
body { margin: 0; color: #eff4fb; background: #0d1421; font-family: Arial, Helvetica, sans-serif; font-size: 18px; }
.header { padding: 25px 4%; border-bottom: 1px solid #24334a; background: #111d2e; overflow: hidden; }
.brand { font-weight: bold; font-size: 29px; letter-spacing: -.8px; float: left; }
.brand-icon { display: inline-block; background: #4cddad; color: #0a1924; padding: 4px 8px; border-radius: 9px; margin-right: 9px; font-size: 20px; vertical-align: 3px; }
.beta { font-size: 11px; background: #2d3d55; border-radius: 5px; padding: 5px 7px; margin-left: 6px; letter-spacing: 1px; color: #b5c6da; vertical-align: 4px; }
.header-note { float: right; color: #9fb2c8; font-size: 15px; margin-top: 10px; }
.layout { display: -webkit-flex; display: flex; padding: 31px 4%; min-height: 600px; }
.player-panel { width: 68%; padding-right: 30px; }
.library-panel { width: 32%; min-width: 260px; background: #152236; border: 1px solid #293c55; border-radius: 14px; padding: 24px; }
.eyebrow { font-size: 13px; font-weight: bold; letter-spacing: 2px; color: #4cddad; }
h1 { font-size: 30px; line-height: 1.2; margin: 12px 0 24px; overflow-wrap: break-word; }
h2 { font-size: 24px; margin: 9px 0 0; }
h2 span { color: #93a8c0; }
.screen { background: #02060b; border: 2px solid #293c55; border-radius: 12px; overflow: hidden; }
video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 270px; background: #02060b; }
.player-status { color: #aec0d4; font-size: 17px; margin: 18px 0 10px; min-height: 28px; }
.controls-help { font-size: 15px; color: #8c9fb6; line-height: 1.5; }
.library-heading { overflow: hidden; padding-bottom: 20px; border-bottom: 1px solid #293c55; }
.library-heading > div { float: left; }
.refresh { float: right; background: #2b405a; color: white; border: 1px solid #48617e; border-radius: 8px; padding: 12px 14px; cursor: pointer; font-weight: bold; font-size: 15px; }
.refresh:hover, .refresh:focus { background: #3b597c; outline: 3px solid #4cddad; }
.library { margin-top: 15px; max-height: 56vh; overflow: auto; }
.video-item { display: block; width: 100%; text-align: left; border: 2px solid transparent; border-radius: 10px; background: #1e3048; padding: 16px; margin-bottom: 10px; cursor: pointer; color: white; font-size: 17px; font-family: inherit; }
.video-item .name { display: block; font-weight: bold; line-height: 1.35; word-wrap: break-word; }
.video-item .path { display: block; font-size: 12px; color: #9ab0c9; margin-top: 6px; word-wrap: break-word; }
.video-item:hover, .video-item:focus { outline: none; border-color: #4cddad; background: #29445e; }
.video-item.selected { border-color: #4cddad; background: #254d53; }
.library-status { color: #b1c3d7; font-size: 15px; }
.remote-tip { border-top: 1px solid #293c55; margin-top: 20px; padding-top: 16px; font-size: 14px; color: #8fa5bd; line-height: 1.5; }
footer { padding: 23px 4% 35px; color: #7e94ae; text-align: center; font-size: 13px; }
@media (max-width: 900px) { .layout { display: block; } .player-panel { width: 100%; padding-right: 0; margin-bottom: 27px; } .library-panel { width: 100%; min-width: 0; } .header-note { display: none; } video { min-height: 150px; } }