/* fondo del encabezado en blanco*/
.header {
    background: rgb(250, 250,250);
}
/* colores en el menú desplegable: fondo, bordes de botón y enlaces individuales*/
.metismenu.mod-menu .mm-collapse {
    background: #e9ecef;
}
.metismenu.mod-menu .metismenu-item>button:focus {
   outline-color:  #e9ecef;
}
.metismenu.mod-menu .mm-collapse .metismenu-item a {
   color: #224fad;;
}
/* Los módulos tienen la clase "card" y para controlar algún módulo específico y darle un css propio utiliza nombreMódulo.card*/
.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}
.main-top.card {
    background: #e1e9f5;
}
.sidebar-left.card {
    background: #e9ecef;
}

/* el footer (pie de página) tiene unos id (emi_footer y desdacado) para que el menú sea horizontal*/
#emi_footer {
   flex-direction: row; 
}
.emi_destacado {
  margin-left:20px;
}

/*cambios en la utilidad "leer mas" para que aparezca en azul el texto y el icono*/
.readmore .btn-secondary {
  background: rgba(90,140,194, 1);
  color: rgba(240,244,251)
}
.readmore .btn-secondary .icon-chevron-right {
  color: rgba(240,244,251)
}
/* el footer tiene la clase footer en Cassiopeia */
.footer {
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

@media (max-width: 768px) { /* Esto se aplica a pantallas de hasta 768px de ancho */
  .header-area {
    display: flex;
    flex-direction: column; /* Organiza los elementos en columna */
  }

 .sidebar-left.card { /* Reemplaza con la clase real de tu menú */
    order: -1; /* Esto asegura que el menú aparezca primero en la columna */
  }
  .below-top { /* Reemplaza con la clase real de tu logo */
    order: 1; /* Esto mueve el logo hacia abajo */
  }
}
/*En el menú de lenguas en la parte superior el flujo es horizontal y juegan los colores y vínculos gracias al id hizkuntzak */
#hizkuntzak {
  flex-direction: row;
}
#hizkuntzak li{
 padding-right: 20px;
  margin-left: 20px;
}
#hizkuntzak li span{
 color: #6c757d;
}
#hizkuntzak li a{
 font-weight: 500;
}
/*
.ul#hizkuntzak .mod-menu li{
display: inline;
padding-right: 20px;
  margin-left: 20px;
}
*/


/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */
/*Emilio
@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');
emilio*/
/* Change some root colors and settings of the document */

/*
:root {
    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;
}
*/
/*Emilio*/

.own {
  --cassiopeia-color-primary: #2F9C95;
  --cassiopeia-color-hover: #174F4B;
  --cassiopeia-color-link: #1C5E5A;
}

/*emilio*/
/* Use the importeed font (See first lines of the document) on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */
/*
body {
   font-family: 'Georama', sans-serif;
}
*/
/* The page header of Cassiopeia has the class "header" so you control it with .header */

/*
.header {
   background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    background: rgb(250, 250,250);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); */
}
/*
/* Smaller banner 
.container-banner .banner-overlay {
    height: 40vh;
}
*/





/*Emilio*/
/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h1 {
    text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
    color: rgba(119, 9, 121, 1);
}

/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: rgba(119, 9, 121, 1);
}
.btn-primary:hover {
    background: rgba(0, 212, 255, 1);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

.item-image {
    border: 2px solid #ff0000;
}

/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;
}

/* or you color all icons with this special statement*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}