/* ============================================
   Global Styles
   ============================================ */

* {
    box-sizing: border-box !important;
}

html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* ============================================
   WordPress Twenty Nineteen Theme Integration
   ============================================ */

/* Twenty Nineteen Color Palette */
:root {
    --tw19-primary: #0073aa;
    --tw19-secondary: #005177;
    --tw19-text: #111111;
    --tw19-background: #ffffff;
    --tw19-accent: #0073aa;
    --tw19-hover: #005a87;
    --tw19-border: #ddd;
    --tw19-success: #46b450;
    --tw19-warning: #ffb900;
}

/* Navbar Twenty Nineteen Style */
.navbar-twentynineteen {
    background-color: var(--tw19-primary) !important;
    border-bottom: 3px solid var(--tw19-secondary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

.navbar {
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Toolbar rows */
.toolbar-row-1, .toolbar-row-2 {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Twenty Nineteen Buttons */
.btn-tw19 {
    background-color: var(--tw19-primary);
    color: #ffffff;
    border: 1px solid var(--tw19-secondary);
    height: 34px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-tw19:hover {
    background-color: var(--tw19-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Montage Buttons */
.btn-tw19-montage {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 34px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-tw19-montage:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-tw19-montage.active {
    background-color: #ffffff;
    color: var(--tw19-primary);
    border-color: #ffffff;
    font-weight: 600;
}

/* Navigation Buttons */
.btn-tw19-nav {
    background-color: var(--tw19-success);
    color: #ffffff;
    border: 1px solid #3a9944;
    height: 34px;
    padding: 7px;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-tw19-nav:hover {
    background-color: #3a9944;
    transform: translateY(-1px);
}

/* Dropdown Buttons */
.btn-tw19-dropdown {
    background-color: var(--tw19-secondary);
    color: #ffffff;
    border: 1px solid #004561;
    height: 34px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-tw19-dropdown:hover {
    background-color: #004561;
}

.btn-tw19-dropdown-item {
    background-color: transparent;
    color: var(--tw19-text);
    border: none;
    padding: 8px 15px;
    width: 100%;
    text-align: left;
    font-size: 13px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-tw19-dropdown-item:hover {
    background-color: var(--tw19-primary);
    color: #ffffff;
}

.btn-tw19-dropdown-item.active {
    background-color: var(--tw19-primary);
    color: #ffffff;
    font-weight: 600;
}

/* Special Button (Learning EEG) */
.btn-tw19-special {
    background-color: var(--tw19-warning);
    color: #000000;
    border: 1px solid #e6a800;
    height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-tw19-special:hover {
    background-color: #e6a800;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   EEG Trace Colors by Derivation
   ============================================ */

/* Left derivations (odd numbers) - RED */
.trace-left,
[data-channel*="1-"],
[data-channel*="3-"],
[data-channel*="5-"],
[data-channel*="7-"],
[data-channel*="9-"],
[data-channel*="-F1"],
[data-channel*="-F3"],
[data-channel*="-F7"],
[data-channel*="-T3"],
[data-channel*="-T5"],
[data-channel*="-C3"],
[data-channel*="-P3"],
[data-channel*="-O1"],
[data-channel*="Fp1-"],
[data-channel*="F1-"],
[data-channel*="F3-"],
[data-channel*="F7-"],
[data-channel*="T3-"],
[data-channel*="T5-"],
[data-channel*="C3-"],
[data-channel*="P3-"],
[data-channel*="O1-"] {
    stroke: #dc3545 !important; /* Red */
    color: #dc3545;
}

/* Right derivations (even numbers) - BLUE */
.trace-right,
[data-channel*="2-"],
[data-channel*="4-"],
[data-channel*="6-"],
[data-channel*="8-"],
[data-channel*="0-"],
[data-channel*="-F2"],
[data-channel*="-F4"],
[data-channel*="-F8"],
[data-channel*="-T4"],
[data-channel*="-T6"],
[data-channel*="-C4"],
[data-channel*="-P4"],
[data-channel*="-O2"],
[data-channel*="Fp2-"],
[data-channel*="F2-"],
[data-channel*="F4-"],
[data-channel*="F8-"],
[data-channel*="T4-"],
[data-channel*="T6-"],
[data-channel*="C4-"],
[data-channel*="P4-"],
[data-channel*="O2-"] {
    stroke: #007bff !important; /* Blue */
    color: #007bff;
}

/* Central derivations (z) - BLACK */
.trace-central,
[data-channel*="z-"],
[data-channel*="-Fz"],
[data-channel*="-Cz"],
[data-channel*="-Pz"],
[data-channel*="-Oz"],
[data-channel*="Fz-"],
[data-channel*="Cz-"],
[data-channel*="Pz-"],
[data-channel*="Oz-"] {
    stroke: #000000 !important; /* Black */
    color: #000000;
}

.btn-bs-file {
    position: relative;
}

.btn-bs-file input[type="file"] {
    position: absolute;
    top: -9999999;
    filter: alpha(opacity=0);
    opacity: 0;
    width: 0;
    height: 0;
    outline: none;
    cursor: inherit;
}

li {
    margin-top: 10px;
}

.windowSelect {
    width: 120px;
    margin-left: 20px;
    padding-left: 40px;
}

.with-nav-tabs.panel-success .nav-tabs > li > a,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
    color: #3c763d;
}

.with-nav-tabs.panel-success .nav-tabs > .open > a,
.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
    color: #3c763d;
    background-color: #d6e9c6;
    border-color: transparent;
}

.with-nav-tabs.panel-success .nav-tabs > li.active > a,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
    color: #3c763d;
    background-color: #fff;
    border-color: #d6e9c6;
    border-bottom-color: transparent;
}

.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
    color: #3c763d;
}

.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
    background-color: #d6e9c6;
}

.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #3c763d;
}

body {
    min-width: 1024px;
    _width: expression( document.body.clientWidth > 1024 ? "1024px": "auto");
    min-height: 700px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Hoefler Text', 'Baskerville Old Face', Garamond, 'Times New Roman', serif;
    background-color: #ffffff !important;
}

/* WordPress Twenty Nineteen Theme Compatibility */
.twentynineteen-theme body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Hoefler Text', 'Baskerville Old Face', Garamond, 'Times New Roman', serif !important;
}

.site-content,
.entry-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.entry-header {
    margin-bottom: 0 !important;
}

body,
html {
    overflow: hidden;
    background-color: #ffffff !important;
}

/* Mejoras visuales generales */
.btn {
    transition: all 0.3s ease, background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background: linear-gradient(135deg, #0275d8 0%, #025aa5 100%);
    border: none;
    transition: all 0.3s ease, background 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #025aa5 0%, #014684 100%);
}

.btn-success {
    background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
    border: none;
    transition: all 0.3s ease, background 0.3s ease;
}

.btn-success:hover {
    background: linear-gradient(135deg, #449d44 0%, #398439 100%);
}

.dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.dropdown-toggle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#rangeinput {
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    cursor: inherit;
}

.plotDivs {
    margin: 0px;
    padding: 0px;
}

.FirstCol,
.SecondCol,
.ThirdCol {
    float: left;
    position: absolute;
}

.FirstCol {
    border-right: 1px solid #e0e0e0;
    width: 200px;
    left: 0px;
}

.SecondCol {
    border-right: 1px solid #e0e0e0;
    width: 800px;
    left: 200px;
}

.ThirdCol {
    /*border-left: 1px solid #e0e0e0;*/
    width: 363;
    left: 1000px;
    /*  height: 500px;
*/
    overflow: hidden;
}

.RowBreak {
    height: 1px;
    border: 1px solid #e0e0e0;
}

.RowOne {
    height: 12px;
    background-color: #f8f9fa;
}


/*annotaion table styling*/

#SearchInput {
    background-position: 10px 10px;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #e0e0e0;
    margin-bottom: 12px;
}

#AnnotaionTable {
    border-collapse: collapse;
    width: 342px;
    border: 1px solid #ddd;
    font-size: 18px;
}

.annotation_row {
    border-bottom: 1px solid #e0e0e0;
    background-color: #ffffff;
}

#SearchInput {
    width: 130px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}


/* When the input field gets focus, change its width to 100% */

#SearchInput:focus {
    width: 100%;
}

#annotaionsTableScrol::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f0f0f0;
}

#annotaionsTableScrol::-webkit-scrollbar {
    width: 12px;
    background-color: #f8f9fa;
}

#annotaionsTableScrol::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #0275d8;
}

td {
    border: 1px solid #e0e0e0;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

.annotaionHeader {
    font-size: 16px;
    text-align: center;
    float: left;
    border: 1px solid #d8c8bc;
}

.showAtbegining {
    visibility: hidden;
}

.montageWindowName .montageall {
    font-size: 12px;
}

.montageSelectedList {
    min-height: 30px;
}

.OthersDeactivate {
    background-image: repeating-linear-gradient(45deg, #dba436, #dba436 10px, #dbdbdb 10px, #dbdbdb 20px);
}

.EEGDeactivate {
    background-image: repeating-linear-gradient(45deg, #5bc0de, #5bc0de 10px, #dbdbdb 10px, #dbdbdb 20px);
}

.EKGDeactivate {
    background-image: repeating-linear-gradient(45deg, #5cb85c, #5cb85c 10px, #dbdbdb 10px, #dbdbdb 20px);
}

.OtherSpan {
    padding: 0px;
    margin: 0px;
    white-space: pre-line;
    line-height: 0.865;
}

.settingsEdge {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border: 3px solid #E0DDD7;
}

.settingsEdgeLegand {
    position: relative;
    top: -16px;
    left: 50px;
    background-color: #ffffff;
    padding-left: 10px;
    font-size: 20px;
}

/* ====================================
   MEJORAS VISUALES ADICIONALES
   ==================================== */

/* Mejorar el título principal */
.navbar .col-sm-2 div {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    font-weight: bold;
}

/* Mejorar input de archivos */
#ptname {
    border-radius: 6px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

#ptname:hover {
    border-color: #0275d8;
    box-shadow: 0 2px 8px rgba(2, 117, 216, 0.1);
}

/* Mejorar campos de fecha y hora */
#DateTime {
    border-radius: 6px;
    border: 2px solid #e0e0e0;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}

/* Mejorar tablas de anotaciones */
#AnnotaionTable {
    border-collapse: collapse;
    width: 342px;
    border: 1px solid #ddd;
    font-size: 18px;
    border-radius: 8px;
    overflow: hidden;
}

.annotation_row {
    border-bottom: 1px solid #e0e0e0;
    background-color: #ffffff;
    transition: background-color 0.2s ease;
}

.annotation_row:hover {
    background-color: #f5f8fa;
}

/* Mejorar el scrollbar de anotaciones */
#annotaionsTableScrol::-webkit-scrollbar {
    width: 10px;
    background-color: #f0f0f0;
}

#annotaionsTableScrol::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(135deg, #0275d8 0%, #5bc0de 100%);
}

#annotaionsTableScrol::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    border-radius: 10px;
}

/* Mejorar botones con íconos */
.glyphicon {
    margin-right: 5px;
    transition: transform 0.2s ease;
}

.btn:hover .glyphicon {
    transform: scale(1.1);
}

/* Mejorar elementos de dropdown */
.dropdown-menu li {
    transition: all 0.2s ease;
}

.dropdown-menu li:hover {
    background-color: #f5f8fa;
}

/* Mejorar inputs de búsqueda */
#SearchInput {
    border-radius: 20px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

#SearchInput:focus {
    border-color: #0275d8;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(2, 117, 216, 0.1);
    outline: none;
}

/* Mejorar navbar */
.navbar-inverse {
    background: linear-gradient(135deg, #0275d8 0%, #5bc0de 50%, #5cb85c 100%);
    border-bottom: 2px solid #0275d8;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Mejorar contraste en elementos activos */
.btn-primary.active,
.btn-primary:active {
    background: linear-gradient(135deg, #014684 0%, #013866 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Mejorar espaciado y legibilidad */
.btn-group label {
    cursor: pointer;
    user-select: none;
}

/* Animaciones suaves para cambios de estado */
* {
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Transiciones adicionales para colores */
.btn, .dropdown-menu, .navbar, input, select, textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Mejorar diseño de campos de calibración */
.settingsEdge {
    border-radius: 15px;
    border: 3px solid #0275d8;
    background-color: #f8f9fa;
    padding: 15px 10px 10px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.settingsEdge label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mejorar contraste de texto en botones de colores */
.btn-success {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Mejorar el diseño responsive */
@media (max-width: 1400px) {
    body {
        min-width: 1024px;
    }
    
    .navbar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 1400px) {
    .navbar {
        max-width: 1400px !important;
    }
}

/* Agregar efectos de profundidad a los controles */
.col-sm-5, .col-sm-7 {
    border-radius: 6px;
}

/* Mejorar tablas de datos */
td {
    border: 1px solid #e0e0e0;
    text-align: center;
    margin: 0px;
    padding: 8px;
    transition: background-color 0.2s ease;
}

td:hover {
    background-color: #f5f8fa;
}

/* Mejorar el espaciado para evitar solapamiento de botones */
.navbar .col-sm-8 .col-sm-2 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.navbar .row .col-sm-2,
.navbar .row .col-sm-3 {
    margin-right: 0px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Asegurar que los elementos en línea tengan espacio suficiente */
.navbar-inverse {
    padding: 10px 5px;
}

/* Mejorar el espaciado del montage dropdown */
.btn-primary[id="montage"] {
    white-space: nowrap;
}

/* Ajustar botones para que no se superpongan */
.navbar .row > div {
    display: flex;
    align-items: center;
}

/* Mejorar alineación de campos de tiempo */
#startWindowtime, #endWindowtime {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mejorar el botón de duración de ventana */
#windowduratin {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
}

/* Mejorar el botón de amplitud */
#amp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
}

.plotDivs {
    background-color: #ffffff !important;
}
/* Collapsible Annotation Panel Styles */
.annotation-toggle-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #0275d8;
    color: #ffffff;
    padding: 15px 8px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 5px 0 0 5px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.annotation-toggle-tab:hover {
    background-color: #025aa5;
    padding-right: 12px;
}

.annotation-tab-text {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Annotation panel must override ThirdCol positioning */
#annotationPanel.annotation-panel-collapsed,
#annotationPanel.annotation-panel-expanded {
    position: fixed !important;
    float: none !important;
    left: auto !important;
    top: 130px !important;
    width: 350px !important;
    height: calc(100vh - 140px) !important;
    transition: right 0.3s ease-in-out !important;
    z-index: 999 !important;
    visibility: visible !important;
}

#annotationPanel.annotation-panel-collapsed {
    right: -350px !important;
}

#annotationPanel.annotation-panel-expanded {
    right: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    #annotationPanel.annotation-panel-collapsed,
    #annotationPanel.annotation-panel-expanded {
        width: 300px !important;
    }
    
    #annotationPanel.annotation-panel-collapsed {
        right: -300px !important;
    }
}

/* Video Panel Flotante */
#videoPanel {
    position: fixed !important;
    bottom: 20px;
    left: 20px;
    width: 400px;
    height: 300px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    z-index: 998;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

#videoPanel.video-panel-collapsed {
    display: none !important;
}

#videoPanel.video-panel-expanded {
    display: block !important;
}

.video-panel-header {
    background: linear-gradient(135deg, #0275d8 0%, #025aa5 100%);
    color: #ffffff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

.video-panel-title {
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-panel-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.video-panel-close:hover {
    background: rgba(255,0,0,0.6);
}

.video-panel-body {
    padding: 10px;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
}

.video-controls {
    display: flex;
    align-items: center;
    padding: 5px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    margin-top: 5px;
}

/* Mejoras para el panel de anotaciones - Tema Claro */
#annotationPanel {
    color: #000000 !important;
}

#annotationPanel * {
    color: #000000 !important;
}

#annotationPanel .annotation_row {
    background: rgba(255,255,255,0.6) !important;
    color: #000000 !important;
    border-bottom: 1px solid rgba(0,115,170,0.2) !important;
    transition: background 0.2s;
}

#annotationPanel .annotation_row:hover {
    background: rgba(0,115,170,0.1) !important;
}

#annotationPanel .annotation_row td,
#annotationPanel .annotation_row th {
    color: #000000 !important;
    border-color: rgba(0,115,170,0.2) !important;
}

#annotationPanel .annotaionHeader {
    color: #003d5c !important;
    font-weight: bold;
}

#annotationPanel table {
    color: #000000 !important;
}

#annotationPanel table td,
#annotationPanel table th {
    color: #000000 !important;
}

#annotationPanel #AnnotaionTable tr {
    color: #000000 !important;
}

#annotationPanel #AnnotaionTable tr td {
    color: #000000 !important;
}

#annotationPanel input {
    color: #000000 !important;
}

#annotationPanel input::placeholder {
    color: rgba(0,0,0,0.5) !important;
}

#annotationPanel .btn-bs-file {
    color: #ffffff !important;
}

/* Enhanced montage dropdown */
.montageSelect {
    transition: all 0.2s ease;
}

.montageSelect:hover {
    transform: scale(1.02);
}

/* WordPress Twenty Nineteen specific overrides */
body.twentynineteen {
    font-size: 16px;
    line-height: 1.5;
}

.twentynineteen .container {
    max-width: 100% !important;
}

/* Improve visual hierarchy for montage buttons */
.dropdown-menu .montageSelect {
    margin-bottom: 8px;
    border-radius: 4px;
}

.dropdown-menu .montageSelect input[type="radio"]:checked + label {
    background-color: #025aa5 !important;
}