/**************************************
 * THEME NAME: theme-borgers2
 *
 * Files included in this sheet:
 *
 *   theme-borgers2/aardvark_layout.css
 *   theme-borgers2/aardvark_color.css
 *   theme-borgers2/aardvark_fonts.css
 *   theme-borgers2/responsive.css
 **************************************/

/***** theme-borgers2/aardvark_layout.css start *****/

/* ==========================================
   LAYOUT BASE (respetando estructura original)
   ========================================== */
body {
    margin: 5px 0 0 0;
    padding: 0;
}

.surround {
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.loginbox .loginform .form-input input {
  width: 15em;
}

/* ==========================================
   CABECERA
   ========================================== */
#cabecera {
    position: relative;
    width: auto;
    height: 100px;
    float: left;
    display: block;
}
#perfil {
    background-color: #FFF;
    position: relative;
    width: 100%;
    height: 100px;
    float: right;
    display: block;
}

#header-home, #header {
    border-width: 0;
    padding: 5px 0;
}
.headermain {
    float: left;
    margin: 0;
    padding: 0 0 0 5px;
    font-size: 1.7em;
}
.headermenu {
    float: right;
    text-align: right;
}

.header-profileblock {
    float: right;
    text-align: right;
}
.header-profilepic {
    width: 80px;
    height: 80px;
    border: 1px solid #999;
}

/* ==========================================
   BARRA SUPERIOR (top_menu)
   ========================================== */
#top_menu {
    height: 15px;
    clear: both;
    margin: 0;
    padding: 5px 0;
}

/* ==========================================
   MIGAS DE PAN (navbar)
   ========================================== */
.navbar {
    width: 100%;
    padding: 3px 0.5em;
	border-width: 0;
}
div.navbar {
    width: auto;
}
.breadcrumb {
    float: left;
    margin: 0.2em 0;
}
.breadcrumb ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.breadcrumb li {
    display: inline;
}

/* ==========================================
   TABLA DE LAYOUT (tres columnas)
   ========================================== */
#layout-table {
    border: none;
    width: 100%;
    border-collapse: collapse;
}
#layout-table #left-column {
    vertical-align: top;
    padding-left: 5px;
    padding-right: 0;
}
#layout-table #middle-column {
    vertical-align: top;
    padding-left: 20px;
    padding-right: 20px;
}
#layout-table #right-column {
    vertical-align: top;
    padding-left: 0;
    padding-right: 5px;
}

/* ==========================================
   BLOQUES LATERALES
   ========================================== */
.sideblock {
    margin-bottom: 20px;
}
.sideblock .header {
    border: none;
    padding: 2px;
}
.sideblock .header h2 {
    padding: 2px 0;
    margin: 0;
}
.sideblock .content {
    padding: 2px;
    border: 1px solid #E3E3E3;
    border-top: none;
}
.sideblock .footer {
    border-top: 1px dashed #E3E3E3;
    margin-top: 4px;
    padding: 2px 0;
}

/* ==========================================
   CAJA DE CATEGORÍAS (personalizada)
   ========================================== */
.cajacategorias {
    display: table-cell;
    height: 200px;
    width: 22%;
    float: left;
    background: #FFF;
    margin: 1%;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.imagencategorias {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.imagenresponsive {
    width: 100% !important;
    height: auto !important;
}

/* ==========================================
   FORMULARIOS
   ========================================== */
.mform fieldset {
    border: none;
    padding: 10px;
}
.fitem {
    margin-bottom: 8px;
}
.fitem .fitemtitle {
    font-weight: bold;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
input:focus {
    border-color: #9C3D6F;
    outline: none;
}

#coursesearch{
	margin-bottom: 30px;
}

/* ==========================================
   PIE FLOTANTE Y FOOTER
   ========================================== */
.pieflotante {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 10px;
    width: 99%;
    z-index: 998;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5px;
    width: 100%;
    z-index: 998;
    text-align: center;
}
/* Espacio para no tapar contenido */
body {
    padding-bottom: 70px;
}

/* ==========================================
   TABLAS GENERALES
   ========================================== */
.generalbox {
    border: 1px solid #E3E3E3;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 10px;
    margin-bottom: 20px;
}
.sitetopiccontent {
    border: 1px solid #E3E3E3;
    background: #fff;
}

.summary{
	padding-top:10px !important;
	padding-bottom:10px !important;
	margin-bottom:15px;
	padding-left:10px;
}
.activity {
    margin-bottom: 15px;           /* espacio vertical entre actividades */
    padding-bottom: 10px;          /* espacio interior inferior */
    border-bottom: 2px dotted #ddd; /* línea gris suave */
}

.generalbox#intro {
  width: 79%;
  margin-left: auto;
  margin-right: auto;
  margin-top:15px;
  padding-bottom: 15px;
}  

.forumheaderlist, .forumpost {
  border:0;
}
 .forumheaderlist td{
  border: 1px dotted #E3E3E3;
}
  
.caja-novedades {
	margin-bottom: 10px;
}

#content div.box.generalbox.generalboxcontent.boxaligncenter {
    margin-top: 30px !important;
}
.maincalendar table {
    width: auto;
}
table.user-grade td.b1t,
table.user-grade td.b2b,
table.user-grade td.b1l,
table.user-grade td.oddd1,
table.user-grade td.item,
table.user-grade td.b1b, table.user-grade thead {
    border: 0 !important;
}

.graph, .allcoursegrades, .discussioncontrols{
margin-top:20px;
}

.scoframe{
margin-top:30px;
height:1000px !important;
}

.tabledivider, #mod-quiz-report table#attempts td
{
 border:0;
}

.reportlink {
  margin-top:20px;
  text-align: center;
}

h2.headingblock.header {
 display:none;
}

/* ==========================================
   CALENDARIO
   ========================================== */
#calendar .maincalendar,
#calendar .sidecalendar,
#calendar .maincalendar .event {
    border: 1px solid #E3E3E3;
    padding: 4px;
}
table.minicalendar {
    width: 100%;
    margin: 10px auto;
    border: 1px solid #E3E3E3;
    border-collapse: collapse;
}
table.minicalendar td,
table.minicalendar th {
    border: 1px solid #E3E3E3;
    padding: 2px;
}
.cal_popup_bg {
    position: relative;
    left: -350px;
    padding: 0;
    margin: 0;
    border: 1px solid #E3E3E3;
	background-color: #FFF;
}

/* ==========================================
   CURSO
   ========================================== */
.headingblock {
    border: none;
    padding: 4px;
}
.categorybox .category {
    border-bottom: 1px solid #E3E3E3;
    padding-top: 7px;
}
#course-view .section .left {
    border-right: 1px dashed #E3E3E3;
}

/* ==========================================
   BOTONES ESPECIALES
   ========================================== */
.reportlink a,
.quizattemptcounts a,
.allcoursegrades a {
    display: block;
    width: auto;
    margin-top: 10px;
}

/* ==========================================
   IMÁGENES RESPONSIVAS
   ========================================== */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */
img.resize {
    width: 1.2em;
    height: 1.2em;
}

/* ==========================================
   MENSAJE CENTRADO (cargando)
   ========================================== */
.centrado {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}/***** theme-borgers2/aardvark_layout.css end *****/

/***** theme-borgers2/aardvark_color.css start *****/

/* ==========================================
   VARIABLES GLOBALES (colores originales)
   ========================================== */
:root {
    --color-links: #333;
    --color-bar: #3D3D3D;
    --color-buttons-purple: #B8C400;
    --color-admin-blue: #3D3D3D;
    --color-block-titles: #B8C400;
    --color-light-bg: #FFFFFF;
    --color-green: #6AC837;
    --text-dark: #4E4E4E;
    --text-light: #FFF;
    --border-light: #E3E3E3;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
}

/* ==========================================
   BASE
   ========================================== */
body {
    color: var(--text-dark);
    background: #F8F8F8 url('fondo-general.jpg') 0% 0% no-repeat fixed;
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
}

a:link, a:visited {
    color: var(--color-links);
    text-decoration: none;
}
a:hover {
    color: #666;
    text-decoration: underline;
}
a.dimmed:link, a.dimmed:visited {
    color: #666;
}


hr {
    border: none !important;
}

/* ==========================================
   CAJAS CON FONDO BLANCO SEMITRANSPARENTE
   ========================================== */
.multichoice, .essay, .boxaligncenter, .mform fieldset,
fieldset.coursesearchbox, #dirform, .loginbox, .categorybox,
#mod-forum-discuss .forumpost, .forumheaderlist {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 3px;
    border-radius: 10px;
}

/* ==========================================
   BARRA SUPERIOR Y PIE FLOTANTE
   ========================================== */
div#top_menu,
.pieflotante {
    background-color: var(--color-bar);
    box-shadow: var(--shadow-sm);
}

#header  {
	background-color:#FFFFFF;
}

.pieflotante {
    opacity: 0.8;
    padding: 10px;
}

#footer {
    color: var(--text-light);
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
}

/* ==========================================
   BOTONES VERDES
   ========================================== */
button, input[type="button"], input[type="submit"], input[type="reset"],
.form-submit, .reportlink a, .quizattemptcounts a, .allcoursegrades a {
    background-color: var(--color-green);
    border: 0.1rem solid transparent;
    color: var(--text-light);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-block;
    margin: 2px 5px;
    box-shadow: var(--shadow-sm);
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover,
input[type="reset"]:hover, .form-submit:hover,
.reportlink a:hover, .quizattemptcounts a:hover, .allcoursegrades a:hover {
    background-color: #666;
}

#id_submitbutton {
    background-color: #d9534f;
}
#id_submitbutton:hover {
    background-color: #666;
}

/* ==========================================
   PATH (migas de pan)
   ========================================== */
div#page div.navbar.clearfix {
    background-color: var(--color-light-bg);
    box-shadow: var(--shadow-sm);
    padding: 5px 10px;
    border-radius: 5px;
}

/* ==========================================
   BLOQUES LATERALES
   ========================================== */
.sideblock {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.sideblock .header,
.sideblock .header h2 {
    background-color: var(--color-block-titles) !important;
    color: var(--text-light);
    padding: 2px 4px;
    margin: 0;
    font-size: 1.1em;
}

.sideblock .content {
    padding: 10px;
    background-color: #fff;
    color: var(--text-dark);
    border: none;
}

.sideblock .footer {
    border-top: 1px solid var(--border-light);
    padding: 8px;
    background-color: #f9f9f9;
}

/* Bloques de administración (azul) */
.block_admin .header,
.block_admin_tree .header,
.block_admin .header h2,
.block_admin_tree .header h2 {
    background-color: var(--color-admin-blue) !important;
}

/* ==========================================
   TÍTULOS DE BLOQUES CENTRALES
   ========================================== */
.headingblock {
    background-color: var(--color-buttons-purple);
    color: var(--text-light);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 1.1em;
    margin: 10px 0;
}

.headingblock, h2.headingblock {
  border: 0px;
  padding: 10px;
  text-align: center;
}

.topics, .section.main {
	background-color: var(--color-light-bg) !important;
	border: none !important;
}

table.topics,
table.topics tr,
table.topics td,
table.topics th,
table.topics tbody, .generaltable, .generaltable .cell, .coursebox {
    border: 1px solid #ffffff !important; /* o white */
}

/* ==========================================
   TABLAS GENERALES
   ========================================== */
.generaltable {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    width: 98%;
	margin-left:auto;
	margin-right:auto;
    border-collapse: collapse;
}

.generaltable th {
    background-color: #f2f2f2;
    color: var(--text-dark);
    padding: 8px;
    border-bottom: 2px solid var(--border-light);
}

.generaltable td {
    padding: 8px;
    border-bottom: 1px solid var(--border-light);
}

.generaltable .r0,
.generaltable .r1 {
    background-color: #fff;
}

.summary{
	background-color: #f9f9f9;
}

table.user-grade td.oddd1 {
  background-color: #fff;
}

.userinfobox{
	background-color: #fff;
}
.userinfobox {
  border:0;

}

.multichoice, .essay {
 border:0;
}

/* ==========================================
   CALENDARIO
   ========================================== */
   
   
 #calendar td.sidecalendar .sideblock {
	border:0;
 }


.nottoday{
	border: 1px solid var(--border-light) !important;
}	   
	   
#calendar .maincalendar,
#calendar .eventlist .event {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 10px;
}

table.minicalendar {
    background: #fff;
    border-radius: 8px;
    border-collapse: collapse;
    width: 100%;
    box-shadow: var(--shadow-sm);
}

table.minicalendar th {
    background: var(--color-block-titles);
    color: #fff;
    padding: 5px;
}

table.minicalendar td {
    padding: 5px;
    text-align: center;
    border: 1px solid var(--border-light);
}

/* Eventos con colores originales */
#calendar .event_global,
.minicalendar .event_global {
    background-color: #def2ba !important;
}
#calendar .event_course,
.minicalendar .event_course {
    background-color: #c6dfeb !important;
}
#calendar .event_group,
.minicalendar .event_group {
    background-color: #feffc2 !important;
}
#calendar .event_user,
.minicalendar .event_user {
    background-color: #d9c6e2 !important;
}

#calendar .today,
.minicalendar .today {
    border: 2px solid var(--color-links) !important;
}

/* ==========================================
   CURSO
   ========================================== */
.coursebox {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 10px;
    margin-bottom: 15px;
}

/* ==========================================
   FORO
   ========================================== */
.forumpost {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 10px;
    margin-bottom: 15px;
}

/* ==========================================
   GLOSARIO
   ========================================== */
.glossarypost {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 10px;
    margin-bottom: 15px;
}

/* ==========================================
   MENSAJES DE ÉXITO/ERROR
   ========================================== */
.notifysuccess {
    color: #2e7d32 !important;
    background: #e8f5e9;
    padding: 8px;
    border-radius: 4px;
}
.error {
    color: #c62828 !important;
    background: #ffebee;
    padding: 8px;
    border-radius: 4px;
}

/* ==========================================
   BORDE INFERIOR DE CATEGORÍAS
   ========================================== */
#course-category tr, #course-index tr {
    border-bottom: 1px dotted #9b9b9b;
}




/* ==========================================
   SELECTS
   ========================================== */
select {
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;              /* bordes redondeados */
    padding: 10px 14px;              /* espaciado interno cómodo */
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    width: auto;                     /* o 100% si quieres que ocupen todo el ancho */
    min-width: 200px;                /* ancho mínimo recomendado */
    appearance: none;                /* elimina la flecha nativa (para personalizar) */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;  /* posición de la flecha */
    background-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto hover */
select:hover {
    border-color: var(--color-buttons-purple);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Efecto focus */
select:focus {
    outline: none;
    border-color: var(--color-buttons-purple);          /* color principal de tu sitio */
    box-shadow: 0 0 0 3px rgba(156,61,111,0.2);
}


/* Para navegadores que no soportan appearance, mantenemos la flecha nativa */
@supports not (appearance: none) {
    select {
        background-image: none;
        padding-right: 14px;
    }
}


/* ==========================================
   CUESTIONARIOS
   ========================================== */
   
.que {
 border: 0;
 background-color:#FFF;	
 border-radius: 10px;
}/***** theme-borgers2/aardvark_color.css end *****/

/***** theme-borgers2/aardvark_fonts.css start *****/

/* ==========================================
   FUENTES (Open Sans + Glyphicons)
   ========================================== */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(../fonts/glyphicons-halflings-regular.eot);
    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
         url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),
         url(../fonts/glyphicons-halflings-regular.woff) format('woff'),
         url(../fonts/glyphicons-halflings-regular.ttf) format('truetype');
    font-display: swap;
}

/* Open Sans */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff2') format('woff2'),
         url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.woff2') format('woff2'),
         url('../fonts/OpenSans-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Semibold.woff2') format('woff2'),
         url('../fonts/OpenSans-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.woff2') format('woff2'),
         url('../fonts/OpenSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   ESTILOS BASE
   ========================================== */
html {
    font-size: 15px;
}

body, td, li, p {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #4E4E4E;
}

select, textarea {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
}

input, button {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
}

/* ==========================================
   ENCABEZADOS
   ========================================== */
h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0.5rem 0;
    color: #333;
}
h2 {
    font-size: 1.4rem;
    font-weight: 600;
}
h3 {
    font-size: 1.2rem;
    font-weight: 600;
}
h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

.headingblock {
    font-size: 1.4em;
}

.ftoggler{
	font-size: 1.2rem;
}

/* ==========================================
   VARIOS
   ========================================== */

.fitem .fitemtitle {
  font-weight: bold;
  font-size: 1.1rem;
}

.activity{
  font-size: 1.3rem;
  font-weight: 600;
}

table.formtable label{
 font-size: 1.2rem;
}
.qtext {
 font-size: 1.1.em;
 font-weight: bold;
}


/* ==========================================
   ENLACES
   ========================================== */
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ==========================================
   TABLAS
   ========================================== */
th {
    font-weight: 600;
    font-size: 1.1em;
}

/* ==========================================
   BREADCRUMB
   ========================================== */
.breadcrumb {
    font-size: 1em;
}
.breadcrumb a {
    font-weight: normal;
}

/* ==========================================
   BLOQUES LATERALES
   ========================================== */
.sideblock .header h2 {
    font-size: 0.9em;
}

/* ==========================================
   CALENDARIO
   ========================================== */
#calendar .maincalendar .calendar-controls .current {
    font-weight: bold;
}
table.minicalendar th abbr {
    font-weight: 600;
    text-decoration: none;
}

/* ==========================================
   FORO
   ========================================== */
.forumpost .topic .subject {
    font-size: 1.2em;
    font-weight: bold;
}

/* ==========================================
   MENSAJES
   ========================================== */

.block_messages .content {
    text-align: left;
    font-size: 1em !important;   /* ajusta este valor según necesites */
}


/* ==========================================
   PIE DE PÁGINA
   ========================================== */
#footer {
    font-size: 1.1em;
    line-height: 1.4;
}

/* ==========================================
   ICONOS GLYPHICONS
   ========================================== */
.glyphicon {
    position: relative;
    top: 2px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: 1.4em;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    margin-right: 5px;
}
.glyphicon-chevron-up:before { content: "\e113"; }
.glyphicon-home:before { content: "\e021"; }
.glyphicon-courses:before { content: "\e043"; }
.glyphicon-profile:before { content: "\e008"; }
.glyphicon-message:before { content: "\2709"; }
.glyphicon-off:before { content: "\e017"; }



/***** theme-borgers2/aardvark_fonts.css end *****/

/***** theme-borgers2/responsive.css start *****/



/************************************* 551px a 990px ********************************/

@media (min-width: 551px) and (max-width: 990px) {

td#middle-column{
width:80%;
}
td#right-column{
width:10%;
}
td#right-column{
width:10%;
}
div#content table.generaltable.boxaligncenter{
width:90%;
}
.surround {
width: 90%;
}
#tooldesc_8{
	position:relative;
	display:block;
	float:left;
	margin-right:auto;
	margin-left:40%;
}
div#block1.sideblock{
	width:100%;
	display:none;
}
div.loginbox
{
	width:100% !important;
	margin-left:auto !important;
	margin-right:auto !important;
}
.cajacategorias{
	width:45% !important;
}
}

/********************************* 550px **********************************/
@media (max-width: 550px){

body{
	background:#FFF !important;
}

div.surround div#page div#content{
	margin-top:30px;
}

#cabecera{
width:100%;
height:100px;
}
td#middle-column{
width:100%;
}
div#content table.generaltable.boxaligncenter{
width:100%;
}
.surround {
width: 100%;
}
#tooldesc_8{
	position:relative;
	display:block;
	float:left;
	margin-right:auto;
	margin-left:40%;
}
div#block1.sideblock{
	width:100%;
	display:none;
}
div.loginbox
{
	width:100% !important;
	margin-left:auto !important;
	margin-right:auto !important;
}
.cajacategorias{
	width:100% !important;
}
}/***** theme-borgers2/responsive.css end *****/