/* Nerea Larrea — arreglos sobre el diseño original (ver design-tokens.md) */

/*
 * Menú lateral del móvil. En el original el panel es blanco (#fff) pero UIkit
 * le aplica los colores «sobre fondo oscuro» (blanco al 70 %), así que ni el
 * menú ni la X de cerrar se veían. Se usan los colores que el propio tema da
 * a esos elementos sobre fondo claro.
 */
#tm-mobile .uk-offcanvas-bar { color: #1a171b; }
#tm-mobile .uk-offcanvas-bar .uk-nav-default > li > a,
#tm-mobile .uk-offcanvas-bar .uk-nav-default > li.uk-active > a,
#tm-mobile .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a,
#tm-mobile .uk-offcanvas-bar .uk-nav-default .uk-nav-sub li.uk-active > a,
#tm-mobile .uk-offcanvas-bar .uk-subnav > * > :first-child,
#tm-mobile .uk-offcanvas-bar .uk-close { color: #265080; }
#tm-mobile .uk-offcanvas-bar .uk-nav-default > li > a:hover,
#tm-mobile .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover,
#tm-mobile .uk-offcanvas-bar .uk-close:hover { color: #1a171b; }

/* Logotipo pequeño arriba del panel (el del pie) y texto más grande. */
#tm-mobile .tm-offcanvas-logo { display: block; width: 150px; margin: 10px auto 30px; }
#tm-mobile .tm-offcanvas-logo img { display: block; width: 150px; height: auto; }
#tm-mobile .uk-offcanvas-bar .uk-nav-default { font-size: 25px; line-height: 1.3; }
#tm-mobile .uk-offcanvas-bar .uk-nav-default > li > a { padding: 8px 0; }
#tm-mobile .uk-offcanvas-bar .uk-nav-default .uk-nav-sub { font-size: 20px; padding: 2px 0 8px 18px; }
#tm-mobile .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a { padding: 6px 0; }
/* «Tratamientos» se despliega al pulsarlo: flecha del propio UIkit, en el
   color del menú, y girada cuando está abierto */
#tm-mobile .uk-nav-parent-icon > .uk-parent > a::after { width: 1em; height: 1em; background-size: 60%; background-position: center; transition: transform .2s ease; }
#tm-mobile .uk-nav-parent-icon > .uk-parent > a::after {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23265080%22%20stroke-width%3D%221.4%22%20points%3D%224%201%2010%207%204%2013%22%20%2F%3E%3C%2Fsvg%3E");
}
#tm-mobile .uk-nav-parent-icon > .uk-parent.uk-open > a::after { transform: rotate(90deg); }

/* El cambio de idioma, que en el original no estaba en el menú del móvil:
   alineado y del mismo tamaño que el resto de elementos del menú. */
#module-idioma-mobile .uk-subnav { margin-left: 0; }
#module-idioma-mobile .uk-subnav > * { margin-left: 0; padding-left: 0; }
#module-idioma-mobile .uk-subnav > * > a { font-size: 25px; font-family: Unna; }

/*
 * Aviso de cookies. Los botones son <button> (en el original, <a> sin href).
 * En el teléfono (≤502px) el plugin los pone en bloque a todo lo ancho, pero
 * un <button> no se estira como un <a>: quedaban pegados a la izquierda, sin
 * relleno y con la letra del sistema. Se igualan y, en el teléfono, se
 * colocan en dos columnas para que la barra ocupe menos alto.
 */
#cpnb button.cpnb-button {
  font-family: inherit; line-height: 1.4; border: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
@media (max-width: 502px) {
  #cpnb .cpnb-inner { padding: 16px; }
  #cpnb .cpnb-message { margin-bottom: 12px; }
  #cpnb .cpnb-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #cpnb .cpnb-buttons .cpnb-button {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 100%; min-height: 40px; margin: 0; padding: 8px 6px; line-height: 1.4;
    text-align: center; font-size: 13px;
  }
  #cpnb .cpnb-clear-both { display: none; }
}