/*
 * Tema Mengisoft del back (diseño A, el mismo que la app móvil). Documentado en docs/diseno.md.
 *
 * Es una capa que se carga DESPUÉS de Metronic y de main.css: no se edita nada de public/assets/metronic/, así una
 * actualización de Metronic no la rompe. Todo el color sale de variables CSS:
 *  - --color-principal* (base.html.twig) son los colores de la empresa (Empresa.colores o, si no tiene, Configuracion.colores).
 *  - --mg-* son los tokens del diseño; los de marca se derivan de los de la empresa y el resto son fijos.
 * Solo modo claro (el back no tiene modo oscuro).
 */

:root {
  /* Marca (por empresa) */
  --mg-primary: var(--color-principal, #0072A3);
  --mg-primary-contrast: var(--color-contraste, #ffffff);
  --mg-primary-dark: var(--color-principalD7, #00668f);
  --mg-primary-tint: #E6F4FB;

  /* Neutros y superficies */
  --mg-ink: #12293A;
  --mg-muted: #5B6B7A;
  --mg-bg: #F4F7FA;
  --mg-surface: #FFFFFF;
  --mg-line: #E3E9EF;
  --mg-field-border: #D5DEE7;

  /* Estados (fijos: no cambian por empresa) */
  --mg-success: #17693A;
  --mg-success-bg: #E3F5EA;
  --mg-warn: #7A5200;
  --mg-warn-bg: #FFF7E6;
  --mg-warn-border: #F1DFB4;
  --mg-error: #C0362C;

  /* Radios */
  --mg-radius-hero: 20px;
  --mg-radius-card: 16px;
  --mg-radius-btn: 14px;
  --mg-radius-field: 12px;
  --mg-radius-icon: 11px;
  --mg-radius-pill: 999px;

  /* Marco oscuro (cabecera y menú): azul muy oscuro, texto atenuado y acento claro; se derivan del color de la empresa más abajo */
  --mg-rail: #0A2133;
  --mg-rail-text: rgba(255, 255, 255, .74);
  --mg-rail-muted: rgba(255, 255, 255, .42);
  --mg-rail-hover: rgba(255, 255, 255, .07);
  --mg-rail-active: rgba(255, 255, 255, .11);
  --mg-rail-line: rgba(255, 255, 255, .08);
  --mg-rail-accent: #7FD3F7;
  --mg-header-h: 64px;

  --mg-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* El tinte se calcula con el color de la empresa si el navegador sabe mezclar colores; si no, queda el azul de marca */
@supports (background: color-mix(in srgb, red 10%, white)) {
  :root {
    --mg-primary-tint: color-mix(in srgb, var(--color-principal) 11%, white);
    --mg-rail: color-mix(in srgb, var(--color-principal) 18%, #0A1722);
    --mg-rail-accent: color-mix(in srgb, var(--color-principal) 45%, white);
  }
}

/* ---------- Base: tipografía y fondo ---------- */
/* Solo texto: los iconos (LineAwesome, Metronic, FontAwesome) llevan su propia familia y no se tocan */
html, body, .btn, .form-control, .custom-select, .custom-file-label, input, select, textarea, button, table,
h1, h2, h3, h4, h5, h6, .dropdown-menu, .modal-content, .select2-container, .select2-results__option,
.m-menu__link-text, .m-portlet__head-text, .m-nav__link-text, .m-dropdown__header-title, .swal2-popup, .toast {
  font-family: var(--mg-font);
}

body {
  font-weight: 400;
  color: var(--mg-ink);
  background-color: var(--mg-bg);
}

.m-wrapper, .m-body .m-content {
  background-color: var(--mg-bg);
}

h1, h2, h3, h4, h5, h6, .m-portlet__head-text {
  color: var(--mg-ink);
  font-weight: 600;
}

.text-muted, .m-section__sub, .m-footer__copyright {
  color: var(--mg-muted) !important;
}

/* ---------- Marco oscuro: cabecera y menú lateral ---------- */
/* Los dos comparten fondo (--mg-rail, un azul muy oscuro derivado del color de la empresa) y forman un marco continuo alrededor del
   contenido. El logo va sobre una pastilla blanca porque es una imagen que sube cada empresa y casi siempre lleva colores oscuros. */
.m-header {
  /* Metronic pinta el fondo de la cabecera en blanco con más especificidad que .m-header */
  background: var(--mg-rail) !important;
  border-bottom: 1px solid var(--mg-rail-line);
  box-shadow: none;
}

.m-brand.m-brand--skin-light {
  background: var(--mg-rail);
  box-shadow: none;
}

.m-brand .m-brand__logo-wrapper {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--mg-radius-icon);
  background: #fff;
}

.layoutLogo {
  max-height: 30px;
  max-width: 150px;
  object-fit: contain;
}

/* Contexto de la pantalla (sede y título), a la izquierda de la cabecera. Solo escritorio: en tablet y móvil no cabe */
.m-header-head {
  position: relative;
  background: transparent;
}

.mg-contexto {
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  max-width: calc(100% - 340px);
  pointer-events: none;
}

.mg-contexto small {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mg-rail-muted);
}

.mg-contexto strong {
  overflow: hidden;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* La campana queda centrada en vertical, a la altura del avatar (Metronic la dejaba 11 px por encima del centro de la cabecera).
   El contador va respecto al centro, no a un valor fijo, para que siga pegado a la campana aunque cambie la altura de la cabecera */
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__notifications > .m-nav__link {
  display: flex;
  align-items: center;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__notifications > .m-nav__link .m-nav__link-badge {
  top: calc(50% - 24px);
}

/* El enlace mide lo que la cabecera: el hover se pinta en el icono (círculo de 40 px) y en el avatar (anillo) */
.m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link {
  background: transparent !important;
}

@media (min-width: 1025px) {
  /* Con la cabecera a 64 px, el relleno de 9 px de Metronic y el avatar de 50 px la estiraban a 68 px */
  .m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link {
    height: var(--mg-header-h);
    padding-top: 0;
    padding-bottom: 0;
  }

  .m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link .m-topbar__userpic img {
    width: 38px;
    height: 38px;
    max-width: 38px !important;
    object-fit: cover;
  }
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link .m-nav__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 1;
  transition: background-color .15s;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link .m-nav__link-icon > i,
.m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link .m-nav__link-icon:hover > i {
  color: var(--mg-rail-text);
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item:hover > .m-nav__link .m-nav__link-icon,
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-dropdown--open > .m-nav__link .m-nav__link-icon {
  background: var(--mg-rail-hover);
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item:hover > .m-nav__link .m-nav__link-icon > i,
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-dropdown--open > .m-nav__link .m-nav__link-icon > i {
  color: #fff;
}

/* Usuario: avatar con nombre y rol al lado (el enlace de Metronic es display: table, de ahí el !important) */
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__user-profile {
  width: auto !important;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-topbar__user-profile > .m-nav__link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
}

.m-topbar__user-profile .m-topbar__userpic {
  display: block !important;
}

.mg-usuario {
  display: none;
  flex-direction: column;
  max-width: 200px;
  line-height: 1.25;
  text-align: left;
}

.mg-usuario__nombre,
.mg-usuario__rol {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mg-usuario__nombre {
  font-size: .84rem;
  font-weight: 600;
  color: #fff;
}

.mg-usuario__rol {
  font-size: .7rem;
  color: var(--mg-rail-muted);
}

@media (min-width: 1200px) {
  .mg-usuario {
    display: flex;
  }
}

.m-topbar__userpic img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mg-rail), 0 0 0 4px rgba(255, 255, 255, .25);
  transition: box-shadow .15s;
}

.m-topbar .m-topbar__nav.m-nav > .m-nav__item:hover .m-topbar__userpic img,
.m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-dropdown--open .m-topbar__userpic img {
  box-shadow: 0 0 0 2px var(--mg-rail), 0 0 0 4px var(--mg-rail-accent);
}

/* Opciones del menú de usuario: en tinta (Metronic las deja en gris claro) */
.m-topbar__user-profile .m-dropdown__body .m-nav__link-text {
  color: var(--mg-ink);
}

.m-topbar__user-profile .m-dropdown__body .m-nav__link-icon {
  color: var(--mg-muted);
}

/* Menús desplegables y notificaciones (tarjetas claras sobre el marco oscuro) */
.m-dropdown .m-dropdown__wrapper {
  border-radius: var(--mg-radius-card);
}

.m-dropdown .m-dropdown__inner {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
  box-shadow: 0 8px 24px rgba(18, 41, 58, .12);
  overflow: hidden;
}

/* ---------- Menú lateral (oscuro; el ítem activo con barra de acento) ---------- */
/* Las reglas llevan el id #m_ver_menu y !important porque Metronic pinta texto, iconos y fondos con mucha especificidad */
.m-aside-left,
.m-aside-left.m-aside-left--skin-light {
  background: var(--mg-rail);
  border-right: 0;
  box-shadow: none;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

#m_ver_menu.m-aside-menu,
#m_ver_menu.m-aside-menu--skin-light {
  background: transparent;
}

#m_ver_menu .m-menu__nav {
  padding: 10px 0 24px;
}

/* Títulos de sección (los pinta sidebar.html.twig cuando cambia la sección) */
#m_ver_menu .m-menu__nav > .m-menu__section.mg-menu-seccion {
  height: auto;
  margin: 0;
  padding: 18px 22px 6px;
}

#m_ver_menu .m-menu__nav > .m-menu__section.mg-menu-seccion:first-child {
  padding-top: 8px;
}

#m_ver_menu .mg-menu-seccion .m-menu__section-text {
  margin: 0;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mg-rail-muted);
}

#m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link {
  /* El ancho descuenta los márgenes: en el menú compacto el enlace es display:table al 100 % y, si no, se desborda */
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 16px) !important;
  margin: 2px 8px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 10px;
  background: transparent !important;
  transition: background-color .15s;
}

#m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text,
#m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-title {
  font-size: 13px;
  font-weight: 500 !important;
  color: var(--mg-rail-text) !important;
}

#m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon,
#m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__ver-arrow {
  color: var(--mg-rail-muted) !important;
}

#m_ver_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link,
#m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link {
  background: var(--mg-rail-hover) !important;
}

#m_ver_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text,
#m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link .m-menu__link-text,
#m_ver_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon {
  color: #fff !important;
}

#m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link {
  background: var(--mg-rail-active) !important;
}

#m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
  font-weight: 600 !important;
  color: #fff !important;
}

#m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
  color: var(--mg-rail-accent) !important;
}

/* Barra de acento del ítem activo, pegada al borde del menú (sustituye a la muesca de Metronic) */
#m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mg-rail-accent);
}

.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link > .m-menu__item-here {
  display: none !important;
}

/* Submenús desplegables (tarjetas claras que salen a la derecha del menú) */
.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__submenu .m-menu__inner {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
  box-shadow: 0 8px 24px rgba(18, 41, 58, .12);
}

.m-aside-menu .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-text {
  color: var(--mg-ink);
}

.m-aside-menu .m-menu__submenu .m-menu__item:hover > .m-menu__link,
.m-aside-menu .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link {
  background: var(--mg-primary-tint);
}

.m-aside-menu .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
.m-aside-menu .m-menu__submenu .m-menu__item:hover > .m-menu__link .m-menu__link-text {
  color: var(--mg-primary);
}

/* En tablet y móvil los submenús se despliegan dentro del panel oscuro (acordeón), no como tarjetas claras */
@media (max-width: 1024px) {
  #m_ver_menu .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-text {
    color: var(--mg-rail-text) !important;
  }

  #m_ver_menu .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-icon {
    color: var(--mg-rail-muted) !important;
  }

  #m_ver_menu .m-menu__submenu .m-menu__item:hover > .m-menu__link,
  #m_ver_menu .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link {
    background: transparent;
  }

  #m_ver_menu .m-menu__submenu .m-menu__item:hover > .m-menu__link .m-menu__link-text,
  #m_ver_menu .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
    color: #fff !important;
  }
}

/* Cabecera a 64 px en escritorio (Metronic la fija a 80 px en varios sitios) */
@media (min-width: 1025px) {
  .m-header,
  .m-header--fixed .m-header,
  .m-brand,
  .m-header--static.m-aside-left--fixed .m-brand {
    height: var(--mg-header-h) !important;
  }

  .m-brand .m-brand__logo,
  .m-header--static.m-aside-left--fixed .m-brand .m-brand__logo {
    height: var(--mg-header-h) !important;
  }

  .m-aside-left--fixed.m-header--fixed .m-aside-left {
    top: var(--mg-header-h);
  }

  .m-header--fixed .m-body {
    padding-top: var(--mg-header-h) !important;
  }
}

/* ---------- Pie ---------- */
.m-footer {
  background: transparent;
  box-shadow: none;
}

/* ---------- Inicio de sesión ---------- */
.m-login.m-login--2 .m-login__wrapper {
  padding: 2rem 1rem;
}

.m-login.m-login--2 .m-login__container {
  max-width: 440px;
  margin: 0 auto;
  padding: 2rem 2rem 1.5rem;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-hero);
  box-shadow: 0 8px 28px rgba(18, 41, 58, .14);
}

.m-login.m-login--2 .m-login__container .m-login__logo {
  text-align: center;
  margin-bottom: 1.25rem;
}

.m-login .m-login__title {
  color: var(--mg-ink);
  font-weight: 700;
  text-align: center;
}

.m-login.m-login--2.m-login-2--skin-2 .m-login__container .m-login__form .form-control {
  height: 52px;
  border-radius: var(--mg-radius-field) !important;
  border: 1px solid var(--mg-field-border) !important;
  background: var(--mg-surface);
  color: var(--mg-ink);
}

.m-login.m-login--2.m-login-2--skin-2 .m-login__container .m-login__form .form-control:focus {
  border-color: var(--mg-primary) !important;
  box-shadow: 0 0 0 3px var(--mg-primary-tint);
}

.m-login .m-login__btn {
  width: 100%;
  min-height: 52px;
  border-radius: var(--mg-radius-btn) !important;
  font-weight: 600;
  letter-spacing: .02em;
}

.m-login .alert.alert-danger {
  border-radius: var(--mg-radius-field);
}

.m-login .m-login__container p {
  color: var(--mg-muted);
}

/*
 * Fondo del inicio de sesión cuando la empresa no sube imagen: el mismo azul oscuro del marco de la aplicación (--mg-rail), con un
 * resplandor del color de la empresa, anillos concéntricos y una rejilla de puntos translúcida. La tarjeta blanca flota encima.
 * Sin color-mix (navegadores antiguos) queda el azul de marca por defecto.
 */
.m-login.m-login--fondo-tema {
  position: relative;
  overflow: hidden;
  background-color: #0A2133;
  background-image:
    radial-gradient(60% 60% at 88% 4%, rgba(0, 114, 163, .40), transparent 62%),
    radial-gradient(50% 55% at 4% 100%, rgba(0, 114, 163, .24), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0),
    linear-gradient(150deg, #06141F 0%, #0A2133 55%, #0E3047 100%);
  background-size: auto, auto, 26px 26px, auto;
}

.m-login.m-login--fondo-tema::before,
.m-login.m-login--fondo-tema::after {
  content: "";
  position: absolute;
  width: 150vmin;
  height: 150vmin;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 52px, rgba(255, 255, 255, .10) 52px 53px);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  mask-image: radial-gradient(circle, #000 0%, transparent 66%);
}

.m-login.m-login--fondo-tema::before {
  top: -75vmin;
  right: -62vmin;
}

.m-login.m-login--fondo-tema::after {
  bottom: -75vmin;
  left: -62vmin;
}

/* Con el color de la empresa, si el navegador sabe mezclar colores */
@supports (background: color-mix(in srgb, red 10%, white)) {
  .m-login.m-login--fondo-tema {
    background-color: var(--mg-rail);
    background-image:
      radial-gradient(60% 60% at 88% 4%, color-mix(in srgb, var(--mg-primary) 42%, transparent), transparent 62%),
      radial-gradient(50% 55% at 4% 100%, color-mix(in srgb, var(--mg-primary) 26%, transparent), transparent 62%),
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0),
      linear-gradient(150deg, color-mix(in srgb, var(--mg-rail) 55%, black) 0%, var(--mg-rail) 55%, color-mix(in srgb, var(--mg-rail) 82%, var(--mg-primary)) 100%);
  }
}

/* Sobre el fondo oscuro, la tarjeta se separa con una sombra más marcada y sin borde */
.m-login.m-login--fondo-tema .m-login__container {
  border-color: transparent;
  box-shadow: 0 28px 70px rgba(0, 12, 24, .5);
}

/* La tarjeta, centrada en vertical (la pantalla tiene la altura de la ventana) */
.m-login.m-login--fondo-tema .m-login__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100vh;
}

.m-login.m-login--fondo-tema .m-login__container {
  width: 100%;
}

/* La tarjeta, por encima de los adornos; el contenedor no recorta su sombra */
.m-login.m-login--fondo-tema .m-login__wrapper {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* =====================================================================================================================
 * Fase 2: componentes comunes (tarjetas, botones, formularios, tablas, modales, avisos, pestañas y desplegables)
 * Forma y aspecto en tema.css; el color de marca ya lo ponen las reglas de main.css con --color-principal*.
 * Metronic fija muchas propiedades con más prioridad (m-btn--square, variantes de color…): donde hace falta, !important.
 * ===================================================================================================================== */
:root {
  --mg-row-alt: #F8FAFC;
  /* Colores sólidos de acción (texto blanco: contraste ≥ 4,5:1) */
  --mg-success-solid: #17803F;
  --mg-danger-solid: #C0362C;
  --mg-warning-solid: #F5A524;
  --mg-error-bg: #FDECEA;
  --mg-shadow-pop: 0 12px 32px rgba(18, 41, 58, .16);
}

/* ---------- Páginas de estado (errores 401/403/404/500 y mantenimiento): tarjeta sobre el fondo del login ---------- */
.mg-estado-pagina {
  max-width: 460px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}

.mg-estado-pagina__codigo {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--mg-primary);
}

.mg-estado-pagina__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--mg-primary-tint);
  color: var(--mg-primary);
  font-size: 1.9rem;
}

.mg-estado-pagina__titulo {
  margin-bottom: .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mg-ink);
}

.mg-estado-pagina__texto {
  margin: .75rem 0 1.5rem;
  font-size: 1rem;
  color: var(--mg-muted);
}

/* ---------- Política de privacidad: texto largo en una tarjeta sobre el fondo de la aplicación ---------- */
.m-login.mg-pagina-legal {
  background: var(--mg-bg);
}

.mg-legal {
  max-width: 860px;
  margin: 32px auto;
  padding: 32px 40px;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-hero);
  color: var(--mg-ink);
}

@media (max-width: 576px) {
  .mg-legal {
    margin: 12px;
    padding: 20px 18px;
  }
}

.mg-legal h2,
.mg-legal h3 {
  margin-top: 1.5rem;
}

.mg-legal h3 span {
  color: var(--mg-muted) !important;
  font-size: .8rem;
  letter-spacing: .08em;
}

/* El título de la página ya está en la cabecera (.mg-contexto): en escritorio se oculta el de la tarjeta. En tablet y móvil la cabecera
   no lo muestra, así que ahí se mantiene. La marca la ponen las plantillas en la cabecera de tarjeta que solo lleva el título. */
@media (min-width: 1025px) {
  .m-portlet__head.mg-titulo-pagina {
    display: none;
  }
}

/* ---------- Tarjetas (portlet) ---------- */
.m-portlet {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
  box-shadow: none;
  background: var(--mg-surface);
}

.m-portlet .m-portlet__head {
  height: auto;
  min-height: 4rem;
  border-bottom: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card) var(--mg-radius-card) 0 0;
}

.m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text {
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: none !important;
  color: var(--mg-ink);
}

.m-portlet .m-portlet__foot {
  border-top: 1px solid var(--mg-line);
  background: transparent;
  border-radius: 0 0 var(--mg-radius-card) var(--mg-radius-card);
}

/* ---------- Botones ---------- */
.btn {
  border-radius: var(--mg-radius-btn);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none !important;
  transition: background-color .15s, border-color .15s, filter .15s;
}

.btn.btn-sm, .btn-group-sm > .btn {
  border-radius: var(--mg-radius-field);
}

/* Metronic fuerza esquinas cuadradas (m-btn--square) y pastilla (m-btn--pill) con !important */
.btn.m-btn--square, .m-btn.m-btn--square, .m-btn--square.btn-sm {
  border-radius: var(--mg-radius-btn) !important;
}

.btn.m-btn--pill, .m-btn.m-btn--pill {
  border-radius: var(--mg-radius-pill) !important;
}

/* Grupos de botones y botones unidos a un campo: solo redondean los extremos del conjunto */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn,
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* «Guardar», «Nuevo»… (btn-success) alineados con la app: la acción principal es del color de marca de la empresa, igual que btn-primary
   (main.css). El verde queda solo para estados de éxito (insignias, texto, avisos). */
.btn.btn-success {
  color: var(--color-contraste, #fff) !important;
  background-color: var(--color-principal) !important;
  border-color: var(--color-principalD7, var(--color-principal)) !important;
}

.btn.btn-success:hover,
.btn.btn-success:focus {
  background-color: var(--color-principalD20, var(--color-principal)) !important;
  border-color: var(--color-principalL5, var(--color-principal)) !important;
}

.btn.btn-danger {
  color: #fff !important;
  background-color: var(--mg-danger-solid) !important;
  border-color: var(--mg-danger-solid) !important;
}

.btn.btn-warning {
  color: var(--mg-ink) !important;
  background-color: var(--mg-warning-solid) !important;
  border-color: var(--mg-warning-solid) !important;
}

.btn.btn-info {
  color: #fff !important;
  background-color: var(--mg-primary-dark) !important;
  border-color: var(--mg-primary-dark) !important;
}

/* btn-brand y btn-accent traían el violeta y el turquesa de Metronic: se alinean con el color de marca (como el primario) */
.btn.btn-brand,
.btn.btn-accent {
  color: var(--mg-primary-contrast) !important;
  background-color: var(--mg-primary) !important;
  border-color: var(--mg-primary) !important;
}

.btn.btn-brand:hover,
.btn.btn-accent:hover,
.btn.btn-brand:focus,
.btn.btn-accent:focus {
  filter: brightness(.9);
}

.btn.btn-secondary, .btn.btn-metal, .btn.btn-default {
  color: var(--mg-ink) !important;
  background-color: var(--mg-bg) !important;
  border-color: var(--mg-field-border) !important;
}

.btn.btn-danger:hover, .btn.btn-warning:hover, .btn.btn-info:hover,
.btn.btn-danger:focus, .btn.btn-warning:focus, .btn.btn-info:focus {
  filter: brightness(.9);
}

.btn.btn-secondary:hover, .btn.btn-metal:hover, .btn.btn-default:hover,
.btn.btn-secondary:focus, .btn.btn-metal:focus, .btn.btn-default:focus {
  background-color: var(--mg-primary-tint) !important;
  border-color: var(--mg-primary) !important;
}

.btn.btn-outline-success {
  color: var(--color-principal) !important;
  border-color: var(--color-principal) !important;
  background-color: transparent !important;
}

.btn.btn-outline-danger {
  color: var(--mg-danger-solid) !important;
  border-color: var(--mg-danger-solid) !important;
  background-color: transparent !important;
}

.btn.btn-outline-warning {
  color: var(--mg-warn) !important;
  border-color: var(--mg-warning-solid) !important;
  background-color: transparent !important;
}

.btn.btn-outline-info {
  color: var(--mg-primary-dark) !important;
  border-color: var(--mg-primary-dark) !important;
  background-color: transparent !important;
}

.btn.btn-outline-secondary, .btn.btn-outline-metal {
  color: var(--mg-muted) !important;
  border-color: var(--mg-field-border) !important;
  background-color: transparent !important;
}

.btn.btn-outline-success:hover, .btn.btn-outline-success:focus {
  color: var(--color-contraste, #fff) !important;
  background-color: var(--color-principal) !important;
}

.btn.btn-outline-danger:hover, .btn.btn-outline-danger:focus {
  color: #fff !important;
  background-color: var(--mg-danger-solid) !important;
}

.btn.btn-outline-warning:hover, .btn.btn-outline-warning:focus {
  color: var(--mg-ink) !important;
  background-color: var(--mg-warning-solid) !important;
}

.btn.btn-outline-info:hover, .btn.btn-outline-info:focus {
  color: #fff !important;
  background-color: var(--mg-primary-dark) !important;
}

.btn.btn-outline-secondary:hover, .btn.btn-outline-metal:hover,
.btn.btn-outline-secondary:focus, .btn.btn-outline-metal:focus {
  color: var(--mg-ink) !important;
  background-color: var(--mg-primary-tint) !important;
  border-color: var(--mg-primary) !important;
}

.btn:focus, .btn.focus {
  outline: 0;
}

.btn:focus-visible {
  outline: 2px solid var(--mg-primary);
  outline-offset: 2px;
}

.btn.disabled, .btn:disabled {
  opacity: .55;
}

/* Botones de la tabla (columnas, limpiar filtros…): sueltos y redondeados, no unidos */
.dt-buttons.btn-group {
  display: inline-flex;
  gap: 6px;
}

.dt-buttons.btn-group > .btn {
  margin-left: 0 !important;
  border-radius: var(--mg-radius-field) !important;
}

/* «Volver» (enlaces) y «Cancelar»/«Cerrar» (modales) eran btn-danger, rojo como si fueran destructivos: pasan a botón neutro con borde.
   Los btn-danger de verdad (borrar, borrar selección…) son <button> sin data-dismiss y siguen en rojo. */
a.btn.btn-danger,
.btn.btn-danger[data-dismiss="modal"] {
  background: var(--mg-surface) !important;
  border: 1px solid var(--mg-field-border) !important;
  color: var(--mg-ink) !important;
}

a.btn.btn-danger:hover,
a.btn.btn-danger:focus,
.btn.btn-danger[data-dismiss="modal"]:hover,
.btn.btn-danger[data-dismiss="modal"]:focus {
  background: var(--mg-bg) !important;
  border-color: var(--mg-muted) !important;
  color: var(--mg-ink) !important;
}

/* ---------- Formularios ---------- */
.form-control, .custom-select, .custom-file-label {
  border-radius: var(--mg-radius-field);
  border-color: var(--mg-field-border);
  background-color: var(--mg-surface);
  color: var(--mg-ink);
}

.form-control:focus, .custom-select:focus {
  box-shadow: 0 0 0 3px var(--mg-primary-tint);
}

.form-control::placeholder {
  color: var(--mg-muted);
  opacity: .75;
}

.form-control:disabled, .form-control[readonly], .custom-select:disabled {
  background-color: var(--mg-bg);
  color: var(--mg-muted);
}

.custom-file-label::after {
  border-radius: 0 var(--mg-radius-field) var(--mg-radius-field) 0;
}

.m-form label, .form-group > label {
  color: var(--mg-ink);
}

.form-control.is-invalid, .custom-select.is-invalid, .is-invalid + .select2-container .select2-selection {
  border-color: var(--mg-error) !important;
}

.invalid-feedback, .m-form__help.text-danger {
  color: var(--mg-error);
}

.input-group-text {
  background: var(--mg-bg);
  border-color: var(--mg-field-border);
  color: var(--mg-muted);
}

fieldset {
  border: 1px solid var(--mg-field-border);
  border-radius: var(--mg-radius-field);
  padding: 15px;
}

/* Casillas y radios de Metronic */
.m-checkbox > span {
  border-radius: 6px;
  border-color: var(--mg-field-border);
}

.m-radio > span {
  border-color: var(--mg-field-border);
}

.m-checkbox > input:checked ~ span, .m-radio > input:checked ~ span {
  border-color: var(--mg-primary);
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--mg-radius-field);
  background-color: var(--mg-surface);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border-radius: var(--mg-radius-pill);
  background: var(--mg-primary-tint);
  border-color: transparent;
  color: var(--mg-primary);
}

.select2-dropdown {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-field);
  box-shadow: var(--mg-shadow-pop);
  overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--mg-primary-tint);
  color: var(--mg-primary);
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--mg-bg);
}

/* Hueco a la derecha para la «x» de borrar y la flecha: sin él pisan el texto en los selectores estrechos */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 2.4rem;
}

/* Selector de fecha */
.datetimepicker, .datepicker, .bootstrap-datetimepicker-widget, .daterangepicker {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
  box-shadow: var(--mg-shadow-pop);
}

/* La cebra de main.css (table tbody tr:nth-child(even)) no es para el calendario del selector de fecha */
.datetimepicker table tbody tr:nth-child(even), .datepicker table tbody tr:nth-child(even),
.bootstrap-datetimepicker-widget table tbody tr:nth-child(even), .daterangepicker table tbody tr:nth-child(even) {
  background-color: transparent;
}

/* ---------- Tablas y DataTables ---------- */
.table, table.dataTable {
  color: var(--mg-ink);
}

.table thead th, table.dataTable thead th {
  background-color: var(--mg-primary-tint) !important;
  color: var(--mg-primary) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--mg-line);
}

/* La cabecera con color de marca (clase de utilidad) sigue el mismo estilo claro */
.table-head-primary thead th {
  background-color: var(--mg-primary-tint) !important;
  color: var(--mg-primary) !important;
}

.table td, .table th, table.dataTable tbody td {
  border-top-color: var(--mg-line);
}

.table-bordered, .table-bordered td, .table-bordered th {
  border-color: var(--mg-line);
}

/* Filtros dentro de la cabecera de la tabla: más bajos, con esquina menos redonda */
table.dataTable thead .form-control, table.dataTable thead .select2-selection {
  border-radius: 8px;
}

/* Fila plana al pasar el ratón (no pisa las filas con color propio) */
table.dataTable tbody tr:not([class*="bg-"]):not(.fila-danger):not(.fila-seleccionada-tabla):not(.selected):hover > td {
  background-color: var(--mg-primary-tint);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--mg-field-border);
  border-radius: var(--mg-radius-field);
  background: var(--mg-surface);
  color: var(--mg-ink);
}

.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--mg-muted);
}

/* Paginación */
.pagination .page-link {
  margin: 0 2px;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-field) !important;
  color: var(--mg-primary);
  background: var(--mg-surface);
}

.pagination .page-item.disabled .page-link {
  color: var(--mg-muted);
  background: var(--mg-bg);
}

/* ---------- Estados de fila en tablas ---------- */
/* Filas de estado suaves: fondo tintado, texto en tinta y una barra de 3 px en el borde izquierdo con el color del estado
   (antes eran de color sólido a toda la fila, con texto blanco). Las clases las ponen los scripts de cada listado. */
table tbody tr.bg-danger,
table tbody tr.fila-danger {
  background: var(--mg-error-bg) !important;
  color: var(--mg-ink) !important;
}

table tbody tr.bg-danger > td:first-child,
table tbody tr.fila-danger > td:first-child {
  box-shadow: inset 3px 0 0 var(--mg-danger-solid);
}

table tbody tr.bg-danger.text-white,
table tbody tr.bg-danger.text-white a,
table tbody tr.fila-danger a {
  color: var(--mg-ink) !important;
}

table tbody tr.bg-danger i,
table tbody tr.fila-danger i {
  color: var(--mg-muted) !important;
}

/* Insertado por el trabajador (partes) */
table tbody tr.insertadoTrabajadorBg {
  background: var(--mg-primary-tint) !important;
}

table tbody tr.insertadoTrabajadorBg > td:first-child {
  box-shadow: inset 3px 0 0 var(--mg-primary);
}

.insertadoTrabajadorTxt {
  color: var(--mg-primary) !important;
}

/* Modificado (fichajes del trabajador) */
table tbody tr.modificadoBg {
  background: var(--mg-warn-bg) !important;
}

table tbody tr.modificadoBg > td:first-child {
  box-shadow: inset 3px 0 0 var(--mg-warning-solid);
}

/* Filas seleccionadas: tinte de marca y texto en tinta (antes, texto blanco sobre azul pálido, casi ilegible) */
.bg-seleccionado,
.dataTables_wrapper .dataTable .selected td,
.fila-seleccionada-tabla {
  background: var(--mg-primary-tint) !important;
  color: var(--mg-ink) !important;
}

table.dataTable tbody tr.selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--mg-primary);
}

table.dataTable tbody tr.selected a,
table.dataTable tbody tr.selected i {
  color: var(--mg-primary) !important;
}

/* Cuadritos de la leyenda de los listados con los mismos colores que las barras de las filas */
.fa-square-full.text-danger {
  color: var(--mg-danger-solid) !important;
}

/* Botones de acción de las filas (QR, editar, borrar…): mismo gris atenuado y hover de marca; el de borrar, en rojo */
table .m-portlet__nav-link.btn {
  color: var(--mg-muted);
}

table .m-portlet__nav-link.btn:hover,
table .m-portlet__nav-link.btn:focus {
  color: var(--mg-primary);
  background: var(--mg-primary-tint) !important;
}

table .m-portlet__nav-link.btn.btn-eliminar:hover,
table .m-portlet__nav-link.btn.m-btn--hover-danger:hover {
  color: var(--mg-danger-solid);
  background: var(--mg-error-bg) !important;
}

/* ---------- Paleta de estados: insignias, texto y avisos con icono ---------- */
/* Metronic trae su propia paleta (violeta, turquesa, rosa, celeste): se sustituye por los tokens de la app. Las insignias pasan a
   pastilla suave (fondo tintado y texto del estado), como las etiquetas de estado de la app. Los contadores (campana, menú) no llevan
   m-badge--wide y se quedan en rojo sólido. */
.m-badge.m-badge--wide,
.badge {
  font-weight: 600;
  border-radius: var(--mg-radius-pill);
}

.m-badge.m-badge--wide.m-badge--success,
.badge.badge-success {
  background: var(--mg-success-bg) !important;
  color: var(--mg-success) !important;
}

.m-badge.m-badge--wide.m-badge--danger,
.badge.badge-danger {
  background: var(--mg-error-bg) !important;
  color: var(--mg-error) !important;
}

.m-badge.m-badge--wide.m-badge--warning,
.badge.badge-warning {
  background: var(--mg-warn-bg) !important;
  color: var(--mg-warn) !important;
}

.m-badge.m-badge--wide.m-badge--info,
.m-badge.m-badge--wide.m-badge--primary,
.m-badge.m-badge--wide.m-badge--brand,
.badge.badge-info,
.badge.badge-primary {
  background: var(--mg-primary-tint) !important;
  color: var(--mg-primary) !important;
}

.m-badge.m-badge--wide.m-badge--metal,
.badge.badge-secondary,
.badge.badge-light {
  background: #EEF2F6 !important;
  color: var(--mg-muted) !important;
}

/* Texto de estado */
.text-primary,
.text-info,
.m--font-brand,
.m--font-primary,
.m--font-info {
  color: var(--mg-primary) !important;
}

.text-success,
.m--font-success {
  color: var(--mg-success) !important;
}

.text-danger,
.m--font-danger {
  color: var(--mg-error) !important;
}

.text-warning,
.m--font-warning {
  color: var(--mg-warn) !important;
}

.btn-link {
  color: var(--mg-primary);
}

/* Avisos con icono (m-alert--outline): borde, icono y texto con el color del estado */
.alert.m-alert--outline.alert-info,
.alert.m-alert--outline.alert-primary {
  border-color: var(--mg-primary) !important;
  color: var(--mg-primary);
}

.alert.m-alert--outline.alert-info.m-alert--icon-solid .m-alert__icon,
.alert.m-alert--outline.alert-primary.m-alert--icon-solid .m-alert__icon {
  background: var(--mg-primary) !important;
}

.alert.m-alert--outline.alert-info.m-alert--icon-solid .m-alert__icon > span,
.alert.m-alert--outline.alert-primary.m-alert--icon-solid .m-alert__icon > span {
  border-left-color: var(--mg-primary) !important;
}

.alert.m-alert--outline.alert-warning {
  border-color: var(--mg-warning-solid) !important;
  color: var(--mg-warn);
}

.alert.m-alert--outline.alert-warning.m-alert--icon-solid .m-alert__icon {
  background: var(--mg-warning-solid) !important;
}

.alert.m-alert--outline.alert-warning.m-alert--icon-solid .m-alert__icon > span {
  border-left-color: var(--mg-warning-solid) !important;
}

.alert.m-alert--outline.alert-danger {
  border-color: var(--mg-danger-solid) !important;
  color: var(--mg-error);
}

.alert.m-alert--outline.alert-danger.m-alert--icon-solid .m-alert__icon {
  background: var(--mg-danger-solid) !important;
}

.alert.m-alert--outline.alert-danger.m-alert--icon-solid .m-alert__icon > span {
  border-left-color: var(--mg-danger-solid) !important;
}

.alert.m-alert--outline.alert-success {
  border-color: var(--mg-success-solid) !important;
  color: var(--mg-success);
}

.alert.m-alert--outline.alert-success.m-alert--icon-solid .m-alert__icon {
  background: var(--mg-success-solid) !important;
}

.alert.m-alert--outline.alert-success.m-alert--icon-solid .m-alert__icon > span {
  border-left-color: var(--mg-success-solid) !important;
}

/* Insertado por el trabajador: tinte más suave (en algunos listados casi todas las filas lo son) */
@supports (background: color-mix(in srgb, red 10%, white)) {
  table tbody tr.insertadoTrabajadorBg {
    background: color-mix(in srgb, var(--color-principal) 6%, white) !important;
  }
}

/* ---------- Firma manuscrita (formularios de parte) ---------- */
/* La firma es un trazo sobre fondo transparente: va sobre una tarjeta blanca con borde fino y una línea de base discreta, y se
   abre ampliada al pulsarla. No usa .table-img (50 px cuadrados con recorte). */
.mg-firma {
  display: inline-block;
  max-width: 100%;
  padding: 6px 12px 4px;
  background: var(--mg-surface);
  border: 1px solid var(--mg-field-border);
  border-radius: var(--mg-radius-field);
  box-shadow: 0 1px 2px rgba(18, 41, 58, .06);
  transition: border-color .15s, box-shadow .15s;
}

.mg-firma:hover {
  border-color: var(--mg-primary);
  box-shadow: 0 4px 14px rgba(18, 41, 58, .10);
}

.mg-firma__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--mg-line);
}

/* ---------- Imágenes en las tablas ---------- */
/* Antes eran cuadrados de 50 px sin más. Las fotos de personas (trabajadores y usuarios) van en círculo con un anillo fino; los logos
   (empresas y sedes) en un recuadro redondeado que no los recorta (object-fit: contain). */
table .table-img {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 2px solid var(--mg-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--mg-line);
  background: var(--mg-bg);
  object-fit: cover;
  transition: box-shadow .15s, transform .15s;
}

table .table-img:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--mg-primary);
  transform: scale(1.06);
}

#tbl_empresas .table-img,
#tbl_sedes .table-img {
  width: 56px;
  height: 44px;
  border-radius: var(--mg-radius-icon);
  background: var(--mg-surface);
  object-fit: contain;
}

/* ---------- Ventanas modales ---------- */
.modal .modal-content, .modal-content {
  border: 0;
  border-radius: var(--mg-radius-hero) !important;
  box-shadow: 0 28px 80px rgba(0, 20, 40, .32);
}

.modal .modal-content .modal-header {
  border-bottom: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-hero) var(--mg-radius-hero) 0 0;
}

.modal .modal-content .modal-header .modal-title {
  font-weight: 600;
  color: var(--mg-ink);
}

.modal .modal-content .modal-footer {
  border-top: 1px solid var(--mg-line);
  border-radius: 0 0 var(--mg-radius-hero) var(--mg-radius-hero);
}

.modal-backdrop.show {
  background-color: #0B1E2C;
  opacity: .55;
}

/* ---------- Avisos ---------- */
.alert, .m-alert {
  border-radius: var(--mg-radius-field);
}

.alert.alert-success:not(.m-alert--outline) {
  color: var(--mg-success);
  background-color: var(--mg-success-bg);
  border-color: transparent;
}

.alert.alert-danger:not(.m-alert--outline) {
  color: var(--mg-error);
  background-color: var(--mg-error-bg);
  border-color: transparent;
}

.alert.alert-warning:not(.m-alert--outline) {
  color: var(--mg-warn);
  background-color: var(--mg-warn-bg);
  border-color: var(--mg-warn-border);
}

.alert.alert-info:not(.m-alert--outline) {
  color: var(--mg-primary-dark);
  background-color: var(--mg-primary-tint);
  border-color: transparent;
}

/* Aviso con icono: el bloque del icono sigue la forma de la tarjeta */
.m-alert.m-alert--icon .m-alert__icon {
  border-radius: var(--mg-radius-field) 0 0 var(--mg-radius-field);
}

/* SweetAlert2 y toastr */
.swal2-popup {
  border-radius: var(--mg-radius-hero);
  font-family: var(--mg-font);
  color: var(--mg-ink);
}

.swal2-title {
  color: var(--mg-ink);
  font-weight: 600;
}

#toast-container > div {
  border-radius: var(--mg-radius-field);
  box-shadow: var(--mg-shadow-pop);
  opacity: 1;
}

/* ---------- Pestañas y píldoras ---------- */
.nav-tabs {
  border-bottom: 1px solid var(--mg-line);
}

.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
  margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
  background: var(--mg-primary-tint);
  border-bottom-color: var(--mg-line);
}

.nav-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--mg-primary);
}

.nav-pills .nav-link {
  border-radius: var(--mg-radius-pill);
}

.nav-pills .nav-link.active {
  background: var(--mg-primary-tint) !important;
  color: var(--mg-primary) !important;
}

/* ---------- Desplegables, insignias y varios ---------- */
.dropdown-menu {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-field);
  box-shadow: var(--mg-shadow-pop);
  padding: .4rem;
}

.dropdown-menu .dropdown-item {
  border-radius: 8px;
}

.dropdown-menu .dropdown-item:hover:not(.active) {
  background: var(--mg-primary-tint);
}

.m-badge {
  border-radius: var(--mg-radius-pill);
}

.tooltip-inner, .popover {
  border-radius: 10px;
}

.progress {
  border-radius: var(--mg-radius-pill);
}

/* =====================================================================================================================
 * Fase 3: pantallas por módulo
 * ===================================================================================================================== */

/* ---------- Dashboards (administración y superadmin) ---------- */
.cardDashboard {
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
  padding: 16px 12px;
}

.cardDashboard .cardTitle {
  margin-bottom: .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mg-muted);
}

.cardDashboard .cardData {
  margin-bottom: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--mg-ink);
  text-wrap: nowrap;
}

.cardDashboard .cardSubData {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--mg-muted);
}

.cardDashboard .cardNota {
  margin-bottom: 0;
  font-size: .85rem;
  color: var(--mg-muted);
}

.graficosWrapper {
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
  padding: 1.5rem;
  background: var(--mg-surface);
}

.filtrosDashboard {
  background: var(--mg-bg);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-field);
  padding: 15px;
}

/* ==========================================================================
   Responsive (tablet y móvil)
   Puntos de corte: 1024 px (Metronic cambia aquí a cabecera y menú móviles), 768 px (tablet vertical, md de Bootstrap)
   y 576 px (móvil, sm de Bootstrap). Escritorio (>1024 px) no cambia.
   ========================================================================== */

/* ---------- Tablet y móvil (hasta 1024 px): cabecera y menú ---------- */
@media (max-width: 1024px) {
  /* Cabecera fina: logo a la izquierda y acciones a la derecha, sin sombra */
  .m-header--fixed-mobile .m-header .m-header-head {
    box-shadow: none;
  }

  .m-brand .m-brand__logo,
  .m-brand .m-brand__tools {
    height: 60px !important;
  }

  .m-brand {
    padding: 0 12px 0 16px;
  }

  .m-brand .m-brand__logo {
    text-align: left;
  }

  .layoutLogo {
    max-height: 32px;
    max-width: 150px;
  }

  .m-brand .m-brand__tools {
    text-align: right;
    white-space: nowrap;
  }

  /* Cada acción es un círculo de 40 px (zona táctil), como los iconos de la cabecera de escritorio */
  .m-brand .m-brand__tools .m-brand__icon {
    position: relative;
    /* Las clases m--visible-tablet-and-mobile-* de Metronic fijan display con !important: se centra con line-height */
    width: 40px;
    height: 40px;
    margin-left: 2px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    transition: background-color .15s;
  }

  .m-brand .m-brand__tools .m-brand__icon > i {
    font-size: 1.1rem;
    line-height: 40px;
  }

  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__icon > i,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__icon:hover > i {
    color: var(--mg-rail-text);
  }

  .m-brand .m-brand__tools .m-brand__icon:hover,
  .m-brand .m-brand__tools .m-brand__icon:active {
    background: var(--mg-rail-hover);
  }

  /* Hamburguesa: botón de 40 px y tres rayas de 2 px claras sobre el marco oscuro (Metronic las pinta de 1 px y violeta) */
  .m-brand .m-brand__tools .m-brand__toggler {
    width: 40px;
    height: 40px;
    margin-left: 2px;
    border-radius: 50%;
  }

  .m-brand .m-brand__tools .m-brand__toggler span {
    top: 19px;
    left: 11px;
    width: 18px;
    height: 2px;
    min-height: 2px;
    border-radius: 2px;
  }

  .m-brand .m-brand__tools .m-brand__toggler span::before,
  .m-brand .m-brand__tools .m-brand__toggler span::after {
    height: 2px;
    min-height: 2px;
    border-radius: 2px;
  }

  .m-brand .m-brand__tools .m-brand__toggler span::before {
    top: -6px;
  }

  .m-brand .m-brand__tools .m-brand__toggler span::after {
    bottom: -6px;
  }

  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler span,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler span::before,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler span::after,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler:hover span,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler:hover span::before,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler:hover span::after,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::before,
  .m-brand.m-brand--skin-light .m-brand__tools .m-brand__toggler.m-brand__toggler--active span::after {
    background: var(--mg-rail-text);
  }

  .m-brand .m-brand__tools .m-brand__toggler:hover,
  .m-brand .m-brand__tools .m-brand__toggler.m-brand__toggler--active {
    background: var(--mg-rail-hover);
  }

  /* Contador de notificaciones pegado a la esquina del icono de la campana */
  .m-brand .m-brand__tools .m-brand__badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--mg-radius-pill);
    font-size: .7rem;
    line-height: 18px;
    text-align: center;
  }

  /* Panel del menú lateral en móvil: ancho contenido, con sombra y sin borde */
  .m-aside-left.m-aside-left--offcanvas {
    width: 280px;
    max-width: 85vw;
    border-right: 0;
    box-shadow: 0 0 40px rgba(18, 41, 58, .25);
  }

  .m-aside-left-overlay {
    background: rgba(11, 30, 44, .55);
  }

  /* Contenido: menos aire lateral para ganar anchura útil */
  .m-content {
    padding: 16px;
  }

  .m-footer {
    padding: 12px 16px;
  }
}

/* ---------- Tablet vertical y móvil (hasta 768 px) ---------- */
@media (max-width: 768px) {
  .m-portlet .m-portlet__head {
    padding: 0 16px;
  }

  .m-portlet .m-portlet__body {
    padding: 16px;
  }

  .m-portlet .m-portlet__foot {
    padding: 16px;
  }
}

/* ---------- Tablet vertical (768 a 991 px): columnas estrechas de los formularios ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  /* col-md-2 y col-md-3 dejan campos de 90-140 px: los selectores y fechas salían recortados */
  .m-content form .row > .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .m-content form .row > .col-md-2 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* ---------- Filtros del dashboard: aire entre campos cuando se apilan (hasta 1199 px) ---------- */
/* Las plantillas del dashboard quitan los márgenes de .mb-2 y .form-group (con !important), así que el espacio va con row-gap */
@media (max-width: 1199px) {
  .filtrosDashboard {
    row-gap: 12px;
    margin-bottom: 8px;
  }

  .filtrosDashboard .row {
    row-gap: 8px;
  }
}

@media (max-width: 767px) {
  .filtrosDashboard {
    padding: 16px;
  }

  .filtrosDashboard p {
    margin-bottom: 0;
    font-weight: 500;
  }

  .filtrosDashboard .text-right {
    text-align: left !important;
  }

  .filtrosDashboard .btn {
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
  }
}

/* Los filtros del dashboard llevan su propia cuadrícula (etiqueta + dos fechas en una fila): la regla anterior no les aplica */
@media (min-width: 768px) and (max-width: 991px) {
  .m-content form .filtrosDashboard .row > .col-md-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
}

/* Leyenda de marcas del listado de fichajes: cada ítem (cuadrito + texto) no se parte entre líneas */
@media (max-width: 1024px) {
  .leyenda-marca {
    display: inline-block;
    margin-bottom: .4rem;
  }
}

/* ---------- Botones seguidos (hasta 1024 px): separación y, si se parten en dos líneas, aire vertical ---------- */
@media (max-width: 1024px) {
  /* Fuera de los grupos de botones y de los de DataTables, que ya llevan su propia separación */
  .m-content :not(.btn-group):not(.btn-group-vertical):not(.dt-buttons):not(.input-group-append):not(.input-group-prepend) > .btn + .btn {
    margin-left: 8px;
  }

  .m-content form .col-12 > .btn,
  .m-portlet__foot .btn,
  .m-form__actions .btn {
    margin-bottom: 8px;
  }
}

/* ---------- Tablet (768 a 1199 px) ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Filtros del dashboard: con el menú plegado y dos grupos en fila, las fechas quedaban recortadas */
  .filtrosDashboard > [class*="col-md-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Móvil (hasta 576 px) ---------- */
@media (max-width: 576px) {
  .m-content {
    padding: 12px;
  }

  .m-portlet .m-portlet__head-text {
    font-size: 1.1rem;
  }

  /* Con el viewport sin límite de zoom, iOS amplía la página al enfocar un campo de menos de 16 px */
  .form-control,
  .custom-select,
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-search--dropdown .select2-search__field,
  .dataTables_wrapper .dataTables_filter input {
    font-size: 16px;
  }

  /* Formularios: las columnas automáticas (.col) se apilan; las que llevan tamaño propio (col-6, col-sm-*…) se respetan */
  .m-content form .row > .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .m-content form .row > .col.m--margin-top-35 {
    margin-top: 0 !important;
  }

  /* Botones de acción de formulario y de listado: tamaño táctil y, si no caben, a todo el ancho */
  .m-portlet__foot .btn,
  .m-form__actions .btn {
    min-height: 42px;
  }

  /* DataTables: controles apilados y a todo el ancho; paginación e información centradas */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    width: 100%;
    margin: 0 0 .75rem;
    text-align: center;
  }

  .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
  }

  .dataTables_wrapper .dataTables_filter input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: .5rem;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Pestañas: una sola línea con desplazamiento horizontal, en vez de apilarse */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  /* Modales: casi a pantalla completa y con menos relleno */
  .modal-dialog {
    max-width: calc(100% - 1rem);
    margin: .5rem auto;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .leyenda-marca {
    font-size: .78rem;
  }

  /* Dashboards: paneles y filtros con menos relleno */
  .graficosWrapper {
    padding: .75rem;
  }

  .filtrosDashboard {
    padding: 10px;
  }
}

/* ---------- Impresión: sin el marco oscuro (cabecera y menú) ---------- */
@media print {
  .m-header,
  .m-aside-left,
  .m-aside-left-overlay,
  .m-aside-left-close {
    display: none !important;
  }

  .m-header--fixed .m-body,
  .m-header--fixed-mobile .m-body {
    padding-top: 0 !important;
  }
}

/* ---------- Calendario de actividad (fichajes, partes, bajas, solicitudes e incidencias en un mismo calendario) ---------- */
.ca-mes-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ca-mes-titulo {
  margin: 0 6px;
  min-width: 150px;
  text-align: center;
  font-weight: 600;
  color: var(--mg-ink);
}

.ca-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-primary-tint);
  color: var(--mg-ink);
  font-size: .86rem;
  text-decoration: none;
}

.ca-chip b {
  font-size: 1rem;
}

.ca-chip-aviso {
  background: var(--mg-warn-bg);
  color: var(--mg-warn);
  box-shadow: inset 0 0 0 1px var(--mg-warn-border);
}

a.ca-chip:hover {
  text-decoration: none;
  filter: brightness(.97);
}

.ca-filtros {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
}

.ca-filtros-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
}

.ca-filtro > label:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mg-muted);
}

.ca-filtro-buscar {
  min-width: 200px;
}

.ca-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.ca-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: .86rem;
  color: var(--mg-ink);
  cursor: pointer;
}

.ca-check input {
  margin: 0;
}

.ca-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px;
  font-size: .8rem;
  color: var(--mg-muted);
}

.ca-muestra {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: -2px;
  border: 1px solid var(--mg-line);
}

.ca-vacio {
  padding: 28px 12px;
  text-align: center;
  color: var(--mg-muted);
}

/* Estados de celda (los comparten la matriz y el mes de un trabajador) */
.ca-baja {
  background: #FBE0DC;
}

.ca-solicitud {
  background: repeating-linear-gradient(45deg, #FFF1CC, #FFF1CC 5px, #FFE39A 5px, #FFE39A 10px);
}

.ca-solicitud-rechazada {
  background: repeating-linear-gradient(45deg, #F1F4F7, #F1F4F7 5px, #DDE3E9 5px, #DDE3E9 10px);
}

.ca-festivo {
  background: #DCEFFA;
}

.ca-i {
  font-size: .78rem;
  line-height: 1;
}

.ca-i-revisar {
  color: #B26A00;
}

.ca-i-sinconexion {
  color: #5B6B7A;
}

.ca-i-curso {
  color: var(--mg-success);
}

.ca-i-parte {
  color: var(--mg-primary);
}

.ca-i-incidencia {
  color: var(--mg-error);
}

.ca-horas {
  font-weight: 600;
  color: var(--mg-ink);
}

/* Matriz: una fila por trabajador y una columna por día */
.ca-matriz-scroll {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-card);
  background: var(--mg-surface);
}

.ca-matriz {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: .82rem;
}

.ca-matriz th,
.ca-matriz td {
  border-right: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}

.ca-matriz thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--mg-surface);
  padding: 6px 2px;
  text-align: center;
  font-weight: 500;
}

.ca-matriz .ca-col-nombre {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 190px;
  max-width: 230px;
  padding: 6px 12px;
  background: var(--mg-surface);
  text-align: left;
  font-weight: 500;
  box-shadow: 1px 0 0 var(--mg-line);
}

.ca-matriz thead .ca-col-nombre {
  z-index: 4;
}

.ca-col-nombre a {
  color: var(--mg-ink);
}

.ca-col-nombre small {
  display: block;
  color: var(--mg-muted);
  font-size: .72rem;
}

.ca-matriz .ca-dia {
  min-width: 42px;
}

.ca-dia-num,
.ca-dia-letra {
  display: block;
  line-height: 1.15;
}

.ca-dia-letra {
  font-size: .68rem;
  color: var(--mg-muted);
}

.ca-matriz td.ca-celda {
  height: 44px;
  min-width: 42px;
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.ca-matriz td.ca-celda:hover {
  outline: 2px solid var(--mg-primary);
  outline-offset: -2px;
}

.ca-matriz .ca-celda .ca-horas {
  display: block;
  line-height: 1.1;
  font-size: .76rem;
}

.ca-iconos {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

.ca-finde:not(.ca-baja):not(.ca-solicitud):not(.ca-solicitud-rechazada):not(.ca-festivo) {
  background: #F5F7F9;
}

.ca-matriz thead .ca-finde {
  background: #F5F7F9;
}

.ca-hoy {
  box-shadow: inset 0 0 0 2px var(--mg-primary);
}

.ca-matriz .ca-col-total {
  min-width: 70px;
  padding: 6px 10px;
  text-align: center;
  font-weight: 600;
  background: var(--mg-surface);
}

.ca-paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.ca-paginas-total {
  margin-left: 8px;
  color: var(--mg-muted);
  font-size: .85rem;
}

/* Mes de un trabajador: rejilla de 7 columnas */
.ca-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.ca-mes-cabecera {
  padding: 4px 0;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--mg-muted);
}

.ca-mes-dia {
  min-height: 92px;
  padding: 6px 8px;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-field);
  cursor: pointer;
}

.ca-mes-dia:hover,
.ca-mes-dia:focus {
  outline: 2px solid var(--mg-primary);
  outline-offset: -2px;
}

.ca-mes-num {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mg-muted);
}

.ca-mes-contenido {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.ca-mes-contenido .ca-horas {
  font-size: .95rem;
}

.ca-texto {
  color: var(--mg-ink);
  font-size: .72rem;
  line-height: 1.2;
}

.ca-mes-contenido .ca-iconos {
  justify-content: flex-start;
  margin-top: 2px;
}

/* Detalle de un día */
.ca-detalle-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.ca-bloque {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--mg-bg);
  border-radius: var(--mg-radius-field);
}

.ca-bloque h6 {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mg-muted);
}

.ca-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 0;
}

.ca-enlace {
  margin-left: auto;
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .ca-mes-nav {
    flex-wrap: wrap;
  }

  .ca-mes-titulo {
    min-width: 0;
    flex: 1;
  }

  .ca-filtro,
  .ca-filtro-buscar {
    width: 100%;
  }

  .ca-filtro-boton {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .ca-filtro-boton .btn {
    flex: 1;
  }

  .ca-matriz .ca-col-nombre {
    min-width: 120px;
    max-width: 140px;
    padding: 6px 8px;
  }

  .ca-mes-grid {
    gap: 3px;
  }

  .ca-mes-dia {
    min-height: 66px;
    padding: 4px;
  }

  .ca-mes-contenido .ca-texto {
    display: none;
  }
}

.ca-trabajador-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.ca-trabajador-nombre {
  margin: 0;
  font-weight: 600;
  color: var(--mg-ink);
}

.ca-trabajador-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}