/*#BODY {BACKGROUND-COLOR:004080; BACKGROUND-IMAGE:url(graf/background.gif); 
#  FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 9pt; COLOR: #333333}*/

INPUT, TEXTAREA, SELECT { 
  margin: 1px; 
  border:solid 1px #004987;
  background-color: white; 
  color: #004987; 
  font-size: 9pt; 
  font-family: arial,helvetica,sans-serif;
  padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 0px; 
  width: auto;  }

INPUT.SUBMIT { 
  margin: 1px; 
  border:solid 1px #C7E7F3; 
  background-color: #FFFFFF; 
  color: #0C2E72; 
  font-size: 12pt; 
  font-family: arial;
  padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 0px; 
  cursor:pointer;
  width: auto;  }
  
INPUT.WIZZARD { 
  margin: 1px; 
  border:solid 0px #C7E7F3; 
  background-color: #4D5B7A; 
  color: white; 
  font-size: 11pt; 
  font-family: arial,helvetica,sans-serif;
  padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 0px; 
  width: auto;  }

RADIO {
  background-color: #FFFFFF; 
  border:solid 0px #FFFFFF; }

H1 {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 12pt; COLOR: #C7E7F3;}
H2 {FONT-FAMILY: "Roboto-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; FONT-SIZE: 12pt; COLOR: #004987}
H3 {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 8pt; COLOR: #C7E7F3}
H4 {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 6pt; COLOR: #C7E7F3}
H5 {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 4pt; COLOR: #C7E7F3}
H6 {FONT-FAMILY: "Roboto-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; FONT-SIZE: 10pt; COLOR: #004987}
SMALL {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 7pt; COLOR: C7E7F3}
FONT.PRES {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 11pt; COLOR: 000000}
FONT.disabled {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 9pt; FONT-WEIGHT: bold; text-decoration:none; COLOR: #C7E7F3}


FONT.tit {FONT-FAMILY: arial,helvetica,sans-serif; COLOR: #004987}
FONT.titPanel {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 10Pt; COLOR: #004987}
FONT.titInfoErrPanel {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 15Pt; COLOR: #D30B0B}


FONT.subTitulo {FONT-FAMILY: "Roboto-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; COLOR: #004987}
FONT.servers {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 15Pt; COLOR: #004987}

.backSubTit {BACKGROUND-COLOR: #FFFFFF}
.backWizzard {BACKGROUND-COLOR: #838FA8}

/*.BodyTop { BACKGROUND-COLOR: #485165}
.BodyLeft { BACKGROUND-COLOR: #3F4759}NC*/
.BodyTop { BACKGROUND-COLOR: #ffffff}
.BodyLeft { BACKGROUND-COLOR: #ffffff}



/*.BodyRight { BACKGROUND-COLOR: #004080}*/
/*.BodyCenter { BACKGROUND-COLOR: #485165}NC*/
.BodyCenter { BACKGROUND-COLOR: #ffffff}
/*.BodyServers { BACKGROUND-COLOR: #485165}NC*/
.BodyServers { BACKGROUND-COLOR: #ffffff}
/*.BodyFoot  { BACKGROUND-COLOR: #004080}*/

.button {border-style: inset; FONT-SIZE:9pt; FONT-FAMILY: arial,helvetica,sans-serif; }
.button2 {
  margin: 1px; 
  border:solid 1px #C7E7F3; 
  background-color: #FFFFFF; 
  color: #0C2E72; 
  font-size: 12pt; 
  font-family: arial;
  padding-top: 1px; padding-bottom: 1px; padding-left: 2px; padding-right: 0px; 
  cursor:pointer;
  width: auto;}

  }

.InputBox {FONT-SIZE:9pt; FONT-FAMILY: Arial, Verdana, sans-serif;COLOR: #0C2E72;BACKGROUND-COLOR: #ffffff; BORDER: solid;BORDER-WIDTH: 1px}

A:link {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; FONT-WEIGHT: bold; text-decoration:none; COLOR: #0C2E72; CURSOR: pointer} 
A:visited {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; FONT-WEIGHT: bold; text-decoration:none; COLOR: #0C2E72}
A:active {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; FONT-WEIGHT: bold; text-decoration:none; COLOR: #0C2E72}
A:hover {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; FONT-WEIGHT: bold; text-decoration:none; COLOR: #0C2E72}

a.menu_links {
    cursor: pointer;
}


.grtit {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 10pt; LETTER-SPACING: 2pt; FONT-WEIGHT: bold; COLOR: #004987}
.grcoltit {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; FONT-WEIGHT: bold; COLOR: #004987}
.grtext {FONT-FAMILY: arial; FONT-SIZE: 9pt; COLOR: #0C2E72;; }
.grfoot {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: #FFFFFF}
.grtexterror {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: red; }
.grtexterror2 {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: red; }

/*.grback {BACKGROUND-COLOR: #485165 }
.grtextback { BACKGROUND-COLOR: #3F4759}
NC*/
.grback {BACKGROUND-COLOR: #ffffff }

.grback2 {BACKGROUND-COLOR: #808080 }
.grtextback { BACKGROUND-COLOR: #ffffff}
.grtextback2 { BACKGROUND-COLOR: #C0C0C0}
.grtextbackrojo { BACKGROUND-COLOR: #f8e0e0}
.grtextbackverde { BACKGROUND-COLOR: #e0f8e0}

.grcolback { BACKGROUND-COLOR: #B3C8D9}

.tdpanel {background-color: #B3C8D9;FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: #00447C; text-align:center; height: 25px;}

/*
.tdpanel { border: 1px solid black; bgcolor: #B5FDF4}
.grtitback { BACKGROUND-IMAGE:url(graf/topgrilla.gif); BACKGROUND-COLOR: #c4c4c4;  }
.grtitbacksimple { BACKGROUND-COLOR: #bababa;  }
.grfootback { BACKGROUND-COLOR: #c4c4c4  }
*/
.coback { BACKGROUND-COLOR: #FFFFFF }
.cotextback { BACKGROUND-COLOR: #FFFFFF  }
.cofootback { BACKGROUND-COLOR: #FFFFFF  }
.cotit {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 10pt; LETTER-SPACING: 2pt; FONT-WEIGHT: bold; COLOR: #004987}
.cosubtit {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; COLOR: #004987}
.cotext {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: #004987; }
.cofoot {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: #FFFFFF}

.errtit {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 8pt; FONT-WEIGHT: bold; COLOR: #683305}
.errtext {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 9pt; COLOR: #8e0e0e}
.errfoot {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 7pt; COLOR: #8e0e0e}

#.errback { BACKGROUND-COLOR: #FF8080 }
#.errtextback { BACKGROUND-COLOR: #e0e8f0  }
#.errfootback { BACKGROUND-COLOR: #e0e8f0  }
#.errsubtit {FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 8pt; FONT-WEIGHT: bold; COLOR: white;}

.litit {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 10pt; LETTER-SPACING: 2pt; FONT-WEIGHT: bold; COLOR: #0C2E72; }

.litext {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: #485165}
.lifoot {FONT-FAMILY: arial, helvetica, sans-serif; FONT-SIZE: 9pt; COLOR: #FFFFFF}
.liback {BACKGROUND-COLOR: #B3C8D9 }
.litextback { BACKGROUND-COLOR: #B3C8D9  }



hr {border-top: 1px solid blue;}

.option-box {
  margin: 1px;
  border: solid 1px #004987;
  background-color: white;
  color: #004987;
  font-size: 9pt;
  font-family: arial, helvetica, sans-serif;
  padding: 1px 2px;
  width: auto;
  max-height: 150px; /* Altura máxima con scroll */
  overflow-y: auto; /* Scroll para ítems largos */
  overflow-x: hidden;
  cursor: pointer;
}

.option-box div {
  padding: 2px; /* Espaciado interno para cada checkbox */
}

.option-box div:hover {
  background-color: #e6f4ff; /* Color de hover */
}


.sort-arrow {
    /* visibility: hidden; */
    display: inline-block;
    font-size: 10pt;
    color: #004987; /* mismo color que .grcoltit */
    margin-left: 5px;
    vertical-align: middle;
    width: 1em;
    text-align: center;
}

.sortable:hover .sort-arrow,
.sortable.active-sort .sort-arrow {
    visibility: visible;
}

.sortable {
  cursor: pointer;
}

.sortable, .sortable * {
  cursor: pointer;
}


.login-container {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically (if the container has a defined height) */
  min-height: 50vh; /* Example: Occupy at least 50% of the viewport height for vertical centering to be noticeable */
  flex-direction: column; /* Stack items vertically within the flex container */
}

/* Optional: Add some styling to the form itself for better appearance */
.login-container form {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  background-color: #FFFFFF;
  /* Modifica la siguiente línea para cambiar el color del sombreado */
  box-shadow: 0 2px 10px rgba(0, 0, 255, 0.2); /* Sombra azul */
  /* O para un celeste, puedes usar: */
  /* box-shadow: 0 2px 10px rgba(0, 191, 255, 0.3); */ /* Sombra celeste */
}

/* Estilos adicionales para el layout y los thumbnails (movidos de muestraEventos.php) */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    display: flex;
    flex-wrap: nowrap; /* Evita que los paneles se envuelvan en pantallas pequeñas */
    padding: 20px;
    gap: 20px; /* Espacio entre el panel de filtro y el contenido */
    min-height: calc(100vh - 40px); /* Asegura que el contenedor ocupe al menos la altura de la ventana */
}
.filter-panel {
    flex: 0 0 400px; /* Ancho ajustado para el panel de filtro */
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky; /* Hace el panel pegajoso al hacer scroll */
    top: 20px; /* Distancia desde la parte superior */
    align-self: flex-start; /* Alinea el panel al inicio del contenedor flex */
    max-height: calc(100vh - 40px); /* Altura máxima para el panel */
    transition: flex-basis 0.3s ease, padding 0.3s ease; /* Transición para colapsar */
    display: flex;
    flex-direction: column;
}

/* Estilos para el panel colapsado */
.filter-panel.collapsed {
    flex-basis: 50px; /* Ancho reducido al colapsar */
    padding: 10px; /* Padding reducido */
    overflow: hidden; /* Oculta todo el contenido que se desborda */
    align-items: center; /* Centra el botón de toggle */
}
.filter-panel.collapsed .panel-header > *:not(#toggleFilterPanel), /* Oculta todo en el header excepto el toggle */
.filter-panel.collapsed .scrollable-content {
    display: none; /* Oculta el contenido scrollable */
}
.filter-panel.collapsed #toggleFilterPanel {
    align-self: center; /* Centra el botón de toggle */
    margin: 0;
}

.panel-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px; /* Espacio entre el header y el contenido scrollable */
}

.scrollable-content {
    flex-grow: 1; /* Permite que el contenido scrollable ocupe el espacio restante */
    overflow-y: auto; /* Habilita el scroll solo para este contenido */
    width: 100%;
    padding-right: 5px; /* Pequeño padding para el scrollbar */
    box-sizing: border-box; /* Incluye padding en el ancho */
}

.filter-panel h2 {
    color: #004987;
    margin-top: 0; /* Ya no necesita margen superior aquí */
    font-size: 1.2em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    width: 100%; /* Asegura que el título ocupe todo el ancho */
    text-align: center;
}
.filter-options {
    width: 100%; /* Asegura que las opciones ocupen todo el ancho */
}
.filter-options div {
    margin-bottom: 4px; /* Margen reducido para hacer la lista más compacta */
}
.filter-options label {
    display: row; /* Changed from 'row' to 'flex' */
    align-items: center;
    cursor: pointer;
    color: #0C2E72;
    font-size: 9pt; /* Tamaño de fuente solicitado: 9pt */
    font-family: "Roboto-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Nueva fuente */
    white-space: nowrap; /* Asegura que el texto no se envuelva debajo del checkbox */
}
.filter-options input[type="checkbox"] {
    margin-right: 8px;
    accent-color: #004987; /* Color del checkbox */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}
.view-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #004987;
    border-radius: 15px; /* Bordes un poco más pequeños */
    overflow: hidden;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.view-toggle button {
    background-color: white;
    border: none;
    padding: 4px 6px; /* Padding reducido a la mitad */
    cursor: pointer;
    font-size: 0.8em; /* Tamaño de fuente reducido */
    color: #004987;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}
.view-toggle button.active {
    background-color: #004987;
    color: white;
}
.view-toggle button:hover:not(.active) {
    background-color: #e6f4ff;
}

/* Botón de toggle del panel */
#toggleFilterPanel {
    background: none;
    border: none;
    font-size: 1.5em; /* Tamaño del icono */
    color: #004987;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
    align-self: flex-end; /* Alineado a la derecha en estado expandido */
}
.filter-panel.collapsed #toggleFilterPanel {
    transform: rotate(180deg); /* Rota la flecha al colapsar */
    align-self: center; /* Centrado al colapsar */
    margin-bottom: 0;
}


.events-content {
    flex: 1; /* Ocupa el espacio restante */
    min-width: 300px; /* Ancho mínimo para el contenido de eventos */
    transition: flex-grow 0.3s ease; /* Transición para expandirse */
}

/* Estilos para la vista de tabla */
.events-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden; /* Para que los bordes redondeados se apliquen al contenido */
}
.events-table th, .events-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
    color: #0C2E72;
}
.events-table th {
    background-color: #B3C8D9;
    color: #00447C;
    font-weight: bold;
    font-size: 8pt; /* Tamaño de fuente solicitado: 8pt */
    white-space: nowrap; /* Prevent text wrapping in headers */
}
.events-table td { /* Added this rule for table data cells */
    font-size: 9pt; /* Tamaño de fuente solicitado: 9pt para los registros */
}
.events-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.events-table tr:hover {
    background-color: #e6f4ff;
}
.events-table .media-link {
    color: #004987;
    text-decoration: underline;
    cursor: pointer;
}

/* Estilos para la vista de miniaturas (thumbnails) */
.events-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Columnas responsivas */
    gap: 15px;
    padding: 10px;
}
.thumbnail-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el contenido hacia arriba y abajo */
    align-items: center;
    min-height: 180px; /* Altura mínima para cada thumbnail */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.thumbnail-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.thumbnail-item .thumbnail-media {
    width: 100%;
    height: 120px; /* Altura fija para la imagen/video */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    margin-bottom: 10px;
    overflow: hidden; /* Asegura que el contenido multimedia no se desborde */
    cursor: pointer;
}
.thumbnail-item .thumbnail-media img,
.thumbnail-item .thumbnail-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Asegura que la imagen/video se ajuste sin recortarse */
}
.thumbnail-item .thumbnail-media .video-placeholder {
    font-size: 3em;
    color: #004987;
}
.thumbnail-item .thumbnail-info {
    font-size: 0.9em;
    color: #0C2E72;
    word-break: break-word; /* Rompe palabras largas */
    width: 100%; /* Asegura que el texto ocupe el ancho completo */
}
.thumbnail-item .thumbnail-info strong {
    display: block; /* Fecha y descripción en líneas separadas */
    margin-bottom: 5px;
}
/* New style for concatenated parameters in thumbnails */
.thumbnail-item .thumbnail-info .concatenated-params {
    font-size: 8pt;
    color: #485165; /* A slightly lighter blue/grey from existing styles */
    margin-top: 5px; /* Add some space above */
    line-height: 1.2; /* Improve readability */
}


/* Iconos de Font Awesome */
.fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.fa-list:before { content: "\f03a"; }
.fa-th-large:before { content: "\f009"; }
.fa-video:before { content: "\f03d"; }
.fa-external-link-alt:before { content: "\f35d"; }
.fa-chevron-left:before { content: "\f053"; } /* Icono para el botón de toggle */