/* MWZSystem.Ui: estilos comunes. Propiedad de MWZSystems.
   Se carga después de Bootstrap y antes del tema de la aplicación, que solo define --mwz-font y --mwz-primary. */

:root {
  --mwz-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mwz-primary: #1d5fbf;
  --mwz-primary-rgb: 29, 95, 191;
  --mwz-primary-dark: color-mix(in srgb, var(--mwz-primary) 80%, #000);
  --mwz-sidebar-width: 16rem;
  --mwz-small: .889rem; /* 16 px: nada se escribe más pequeño */
  --mwz-touch-y: .5rem; /* relleno que deja botones y campos en 45 px de alto */

  --bs-body-font-family: var(--mwz-font);
  --bs-body-color: #1f2933;
  --bs-secondary-color: #52606d;
  --bs-primary: var(--mwz-primary);
  --bs-primary-rgb: var(--mwz-primary-rgb);
  --bs-link-color: var(--mwz-primary);
  --bs-link-color-rgb: var(--mwz-primary-rgb);
  --bs-link-hover-color: var(--mwz-primary-dark);
  --bs-focus-ring-color: rgba(var(--mwz-primary-rgb), .35);
}

/* 18 px de base; al ser porcentaje respeta el tamaño que la persona configuró en su equipo */
html { font-size: 112.5%; }

body { background: #f4f6f8; }

small, .small, .form-text, .form-label, .invalid-feedback, .valid-feedback, .dropdown-header,
.breadcrumb, .badge, .btn-sm, .form-control-sm, .form-select-sm, .table-sm, figcaption, .text-muted {
  font-size: var(--mwz-small);
}
.text-muted, .form-text { color: var(--bs-secondary-color) !important; }
.form-label { font-weight: 600; margin-bottom: .25rem; }

.mwz-saltar { z-index: 2100; }
a { text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--mwz-primary); outline-offset: 2px; }

/* --- Botones y campos: color de la aplicación y alto para el dedo --- */
.btn { --bs-btn-padding-y: var(--mwz-touch-y); --bs-btn-font-weight: 600; }
.btn-sm { --bs-btn-padding-y: .55rem; --bs-btn-font-size: var(--mwz-small); }
.btn-primary {
  --bs-btn-bg: var(--mwz-primary); --bs-btn-border-color: var(--mwz-primary);
  --bs-btn-hover-bg: var(--mwz-primary-dark); --bs-btn-hover-border-color: var(--mwz-primary-dark);
  --bs-btn-active-bg: var(--mwz-primary-dark); --bs-btn-active-border-color: var(--mwz-primary-dark);
  --bs-btn-disabled-bg: var(--mwz-primary); --bs-btn-disabled-border-color: var(--mwz-primary);
  --bs-btn-focus-shadow-rgb: var(--mwz-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--mwz-primary); --bs-btn-border-color: var(--mwz-primary);
  --bs-btn-hover-bg: var(--mwz-primary); --bs-btn-hover-border-color: var(--mwz-primary);
  --bs-btn-active-bg: var(--mwz-primary); --bs-btn-active-border-color: var(--mwz-primary);
  --bs-btn-disabled-color: var(--mwz-primary); --bs-btn-disabled-border-color: var(--mwz-primary);
  --bs-btn-focus-shadow-rgb: var(--mwz-primary-rgb);
}
.form-control, .form-select { padding-top: var(--mwz-touch-y); padding-bottom: var(--mwz-touch-y); border-color: #8795a1; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--mwz-primary); box-shadow: 0 0 0 .2rem rgba(var(--mwz-primary-rgb), .25);
}
.form-check { display: flex; align-items: center; gap: .6rem; min-height: 2.5rem; padding-left: 0; }
.form-check .form-check-input { float: none; flex: none; width: 1.35em; height: 1.35em; margin: 0; border-color: #8795a1; }
.form-check-input:checked { background-color: var(--mwz-primary); border-color: var(--mwz-primary); }
.form-switch .form-check-input { width: 2.4em; }
.nav-link { --bs-nav-link-padding-y: var(--mwz-touch-y); }
.dropdown-menu { --bs-dropdown-item-padding-y: var(--mwz-touch-y); --bs-dropdown-link-active-bg: var(--mwz-primary); --bs-dropdown-font-size: 1rem; }
.pagination { --bs-pagination-padding-y: var(--mwz-touch-y); --bs-pagination-color: var(--mwz-primary);
  --bs-pagination-hover-color: var(--mwz-primary-dark); --bs-pagination-active-bg: var(--mwz-primary);
  --bs-pagination-active-border-color: var(--mwz-primary); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--mwz-primary-rgb), .25); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--mwz-primary); }
.list-group { --bs-list-group-active-bg: var(--mwz-primary); --bs-list-group-active-border-color: var(--mwz-primary); }
.progress { --bs-progress-bar-bg: var(--mwz-primary); }

/* --- Validación --- */
.field-validation-error, .invalid-feedback { display: block; color: #b42318; font-weight: 600; margin-top: .25rem; }
.field-validation-valid, .validation-summary-valid { display: none; }
.validation-summary-errors { border: 1px solid #f1aeb5; border-left: .35rem solid #b42318; background: #fdf3f2; color: #7a1a12;
  border-radius: var(--bs-border-radius); padding: .75rem 1rem; margin-bottom: 1rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.input-validation-error, .form-control.is-invalid, .form-select.is-invalid { border-color: #b42318; }

/* --- Estructura de página --- */
.mwz-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  grid-template-areas: "top" "main" "foot"; }
.mwz-topbar { grid-area: top; display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .35rem 1rem;
  background: #fff; border-bottom: 1px solid #d9dee3; position: sticky; top: 0; z-index: 1020; }
.mwz-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; color: var(--bs-body-color);
  text-decoration: none; min-height: 2.5rem; min-width: 0; }
.mwz-brand:hover { color: var(--mwz-primary); }
.mwz-topbar-end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.mwz-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: var(--bs-border-radius); background: transparent; color: var(--bs-body-color); font-size: 1.4rem; }
.mwz-icon-btn:hover { background: #eef1f4; }
.mwz-sidebar { grid-area: side; background: #fff; }
.mwz-menu { list-style: none; margin: 0; padding: .75rem .5rem; display: flex; flex-direction: column; gap: .15rem; }
.mwz-menu a { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .4rem .8rem; border-radius: var(--bs-border-radius);
  color: var(--bs-body-color); text-decoration: none; font-weight: 500; }
.mwz-menu a:hover { background: #eef1f4; }
.mwz-menu a[aria-current="page"] { background: rgba(var(--mwz-primary-rgb), .12); color: var(--mwz-primary-dark); font-weight: 700; }
.mwz-menu .bi { font-size: 1.2rem; flex: none; }
.mwz-menu ul { list-style: none; margin: .15rem 0 .35rem 1.35rem; padding: 0 0 0 .5rem; border-left: 2px solid #d9dee3;
  display: flex; flex-direction: column; gap: .1rem; }
.mwz-menu ul a { font-size: var(--mwz-small); }
/* Grupo plegable del menú lateral */
.mwz-menu-grupo { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.75rem; padding: .4rem .8rem; border: 0;
  border-radius: var(--bs-border-radius); background: transparent; color: var(--bs-body-color); font: inherit; font-weight: 500; text-align: left; }
.mwz-menu-grupo:hover { background: #eef1f4; }
.mwz-menu-grupo:not(.collapsed) { font-weight: 700; }
.mwz-menu-chevron { margin-left: auto; font-size: .9rem !important; transition: transform .15s; }
.mwz-menu-grupo:not(.collapsed) .mwz-menu-chevron { transform: rotate(180deg); }
.mwz-menu ul.collapse:not(.show) { display: none; }
@media (prefers-reduced-motion: reduce) { .mwz-menu-chevron { transition: none; } }
.mwz-menu-titulo { padding: .9rem .8rem .25rem; font-size: var(--mwz-small); font-weight: 700; color: var(--bs-secondary-color); }
.mwz-menu-separador { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #d9dee3; }
@media (max-width: 767.98px) {
  /* Abierto como panel la página queda fija: el menú necesita su propio desplazamiento o lo que no cabe queda inalcanzable */
  .mwz-sidebar .mwz-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* panel */
  .mwz-sidebar .mwz-menu > li { flex: none; }
}
.mwz-brand img { max-height: 2.25rem; width: auto; }
.mwz-main-ancho { padding: 0 !important; }
.mwz-main { grid-area: main; padding: 1rem; min-width: 0; }
.mwz-main:focus { outline: 0; }
.mwz-footer { grid-area: foot; padding: .75rem 1rem; text-align: center; color: var(--bs-secondary-color); font-size: var(--mwz-small); }

@media (min-width: 768px) {
  .mwz-shell:not(.mwz-sin-menu) { grid-template-columns: var(--mwz-sidebar-width) minmax(0, 1fr);
    grid-template-areas: "top top" "side main" "side foot"; }
  .mwz-sidebar { border-right: 1px solid #d9dee3; }
  .mwz-main { padding: 1.5rem 2rem; }
  .mwz-menu-toggle { display: none; }
}

/* --- Navegación superior: grupos desplegables en la barra; en pantallas chicas es un panel lateral --- */
.mwz-topnav { min-width: 0; }
.mwz-topnav-list { list-style: none; margin: 0; padding: .75rem .5rem; display: flex; flex-direction: column; gap: .15rem; }
.mwz-topnav-link { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 2.75rem; padding: .4rem .8rem; border: 0;
  border-radius: var(--bs-border-radius); background: transparent; color: var(--bs-body-color); text-decoration: none; font-weight: 500;
  font-family: inherit; font-size: 1rem; text-align: left; white-space: nowrap; }
.mwz-topnav-link:hover, .mwz-topnav-link[aria-expanded="true"] { background: #eef1f4; color: var(--bs-body-color); }
.mwz-topnav-link[aria-current="page"], .mwz-topnav-link.mwz-grupo-activo { background: rgba(var(--mwz-primary-rgb), .12);
  color: var(--mwz-primary-dark); font-weight: 700; }
.mwz-topnav-link .bi { font-size: 1.15rem; flex: none; }
.mwz-topnav .dropdown-item[aria-current="page"] { font-weight: 700; color: var(--mwz-primary-dark); background: rgba(var(--mwz-primary-rgb), .12); }
.mwz-cuenta { width: auto; min-width: 2.75rem; padding: 0 .5rem; gap: .4rem; font-size: 1.4rem; }
@media (max-width: 991.98px) {
  .mwz-topnav .mwz-topnav-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* panel */
  .mwz-topnav .mwz-topnav-list > li { flex: none; }
  /* Dentro del panel lateral los grupos se abren en su lugar, sin flotar */
  .mwz-topnav .dropdown-menu { position: static !important; transform: none !important; border: 0; box-shadow: none;
    margin: 0 0 .35rem 1.35rem; padding: 0 0 0 .5rem; border-left: 2px solid #d9dee3; border-radius: 0; }
}
@media (min-width: 992px) {
  .mwz-nav-superior .mwz-menu-toggle { display: none; }
  .mwz-topnav-list { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; gap: .15rem; }
  .mwz-topnav-link { width: auto; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .mwz-nav-superior .mwz-menu-toggle { display: inline-flex; }
}

/* --- Tarjetas y tablas --- */
.card { border-color: #d9dee3; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.card-header { background: #fff; font-weight: 700; }
.table { --bs-table-hover-bg: rgba(var(--mwz-primary-rgb), .06); vertical-align: middle; }
.table > thead th { font-size: var(--mwz-small); font-weight: 700; color: var(--bs-secondary-color); white-space: nowrap; }
.mwz-page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.mwz-page-title h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
div.dt-container .dt-search input, div.dt-container .dt-length select { min-height: 2.5rem; }
div.dt-processing { font-weight: 600; }

/* Filas plegadas en teléfono: un signo de más o de menos en lugar del triángulo de DataTables */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  content: "+"; border: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  margin-right: .5rem; border-radius: 50%; background: var(--mwz-primary); color: #fff; font-weight: 700; line-height: 1;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before { content: "\2212"; border: 0; }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }

/* --- Select2 con el mismo alto, borde y color que los demás campos --- */
.select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + 1rem + 2px); padding-top: var(--mwz-touch-y);
  padding-bottom: var(--mwz-touch-y); border-color: #8795a1; color: var(--bs-body-color); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--mwz-primary); box-shadow: 0 0 0 .2rem rgba(var(--mwz-primary-rgb), .25); }
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--mwz-primary); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { padding: .6rem .75rem; font-size: 1rem; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: rgba(var(--mwz-primary-rgb), .12); color: var(--bs-body-color); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background-color: var(--mwz-primary); color: #fff; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { min-height: 2.5rem; font-size: 1rem; }
.is-invalid + .select2-container--bootstrap-5 .select2-selection { border-color: #b42318; }

/* --- Carga --- */
.mwz-loading-bar { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 2000; overflow: hidden; background: rgba(var(--mwz-primary-rgb), .2); }
.mwz-loading-bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--mwz-primary); animation: mwz-barra 1.1s ease-in-out infinite; }
@keyframes mwz-barra { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.mwz-busy { position: relative; pointer-events: none; }
.mwz-busy > * { opacity: .45; }
.mwz-busy::after { content: ""; position: absolute; top: calc(50% - 1rem); left: calc(50% - 1rem); width: 2rem; height: 2rem; border-radius: 50%;
  border: .25rem solid rgba(var(--mwz-primary-rgb), .25); border-top-color: var(--mwz-primary); animation: mwz-giro .8s linear infinite; }
@keyframes mwz-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mwz-loading-bar::after { animation: none; width: 100%; opacity: .6; }
  .mwz-busy::after { animation-duration: 2.5s; }
}

/* --- Avisos y confirmación --- */
/* Bajo la barra superior, para no tapar el menú de la cuenta ni los botones de guardar; por debajo del menú lateral abierto y de las ventanas */
.mwz-toasts { position: fixed; right: 0; top: 3.75rem; z-index: 1035; padding: .5rem 1rem; display: flex; flex-direction: column; gap: .5rem;
  max-width: 100%; pointer-events: none; }
.mwz-toast { --bs-toast-font-size: 1rem; --bs-toast-max-width: 26rem; --mwz-toast-color: #1a7f4b; pointer-events: auto;
  border: 1px solid #d9dee3; border-left: .4rem solid var(--mwz-toast-color); background: #fff; box-shadow: 0 .5rem 1.25rem rgba(16, 24, 40, .16); }
.mwz-toast-info { --mwz-toast-color: #1c64a8; }
.mwz-toast-warning { --mwz-toast-color: #9a5b00; }
.mwz-toast-error { --mwz-toast-color: #b42318; }
.mwz-toast .toast-body { display: flex; align-items: flex-start; gap: .6rem; color: var(--bs-body-color); }
.mwz-toast .bi { font-size: 1.3rem; color: var(--mwz-toast-color); flex: none; }
.mwz-toast-text { min-width: 0; overflow-wrap: anywhere; }
.mwz-toast-title { font-weight: 700; color: var(--mwz-toast-color); }
.mwz-toast .btn-close { margin-left: auto; width: 1.5rem; height: 1.5rem; flex: none; }
.mwz-confirm .modal-body { font-size: 1.05rem; white-space: pre-line; }
.mwz-confirm .modal-footer .btn { min-width: 7rem; }

/* --- Tablero --- */
/* Rejilla: las columnas se acomodan solas al ancho disponible (con o sin menú lateral), con 15rem como mínimo.
   Los tamaños de las gráficas van en atributos SVG. */
.mwz-tablero { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-bottom: 1rem; }
.mwz-tablero > * { min-width: 0; margin: 0; }
.mwz-ancho-4 { grid-column: 1 / -1; }
/* Desde 992 px siempre caben al menos dos columnas, aun con el menú lateral. */
@media (min-width: 992px) { .mwz-ancho-2 { grid-column: span 2; } }
.mwz-tono-neutral { --mwz-tono: var(--mwz-primary); }
.mwz-tono-ok { --mwz-tono: #1a7f37; }
.mwz-tono-aviso { --mwz-tono: #9a6700; }
.mwz-tono-peligro { --mwz-tono: #b42318; }
.mwz-indicador, .mwz-grafica { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1rem; }
.mwz-indicador { display: flex; align-items: center; gap: .85rem; min-height: 5.5rem; border-left: .35rem solid var(--mwz-tono); color: inherit; text-decoration: none; }
a.mwz-indicador:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12); color: inherit; }
.mwz-indicador > i { font-size: 1.9rem; color: var(--mwz-tono); flex: none; }
.mwz-indicador-texto { display: grid; min-width: 0; overflow-wrap: break-word; }
.mwz-indicador-texto strong, .mwz-anillo-texto strong { font-size: 1.9rem; line-height: 1.15; }
.mwz-indicador-texto span, .mwz-detalle, .mwz-vacio, .mwz-serie-extremos { color: var(--bs-secondary-color); }
.mwz-grafica > figcaption, .mwz-grafica > h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
.mwz-vacio { margin: 0; }
.mwz-etiqueta { min-width: 0; overflow-wrap: anywhere; }
.mwz-barra { display: block; width: 100%; height: .75rem; border-radius: .4rem; overflow: hidden; }
.mwz-barra rect { fill: var(--mwz-tono); }
.mwz-barra .mwz-pista { fill: #e4e9ee; }
.mwz-renglones, .mwz-leyenda, .mwz-pendientes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.mwz-renglon-texto { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.mwz-leyenda { margin-top: .75rem; }
.mwz-leyenda li { display: flex; align-items: center; gap: .5rem; }
.mwz-leyenda strong { margin-left: auto; }
.mwz-muestra { width: 1rem; height: 1rem; border-radius: .2rem; background: var(--mwz-tono); flex: none; }
.mwz-anillo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mwz-anillo svg { width: 5.5rem; height: 5.5rem; flex: none; }
.mwz-anillo circle { fill: none; stroke-width: 3.2; stroke: #e4e9ee; }
.mwz-anillo .mwz-avance { stroke: var(--mwz-tono); }
.mwz-anillo-texto { display: grid; flex: 1 1 6rem; min-width: 0; overflow-wrap: break-word; }
.mwz-serie svg { display: block; width: 100%; height: 9rem; }
.mwz-serie rect { fill: var(--mwz-primary); }
.mwz-serie-extremos { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--mwz-small); }
.mwz-serie summary { cursor: pointer; padding: .6rem 0; color: var(--mwz-primary); font-weight: 600; }
.mwz-pendientes li { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--bs-border-color); }
.mwz-pendientes li > i { font-size: 1.4rem; color: var(--mwz-primary); flex: none; }
.mwz-pendiente-texto { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mwz-pendiente-texto span { color: var(--bs-secondary-color); }
.mwz-pendientes li .btn { flex: none; }
.mwz-pendientes > .btn { margin-top: .75rem; }
.mwz-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.mwz-paginacion p { margin: 0; }
.mwz-paginacion .pagination { flex-wrap: wrap; }

/* --- Página de error --- */
.mwz-error { max-width: 34rem; margin: 3rem auto; text-align: center; }
.mwz-error .bi { font-size: 3.5rem; color: var(--mwz-primary); }

/* --- Teléfono --- */
@media (max-width: 767.98px) {
  .mwz-toasts { left: 0; }
  .mwz-toast { --bs-toast-max-width: 100%; }
  .mwz-page-title h1 { font-size: 1.35rem; }
  .modal-footer .btn { flex: 1 1 auto; }
}

/* --- Impresión: solo el contenido --- */
@media print {
  .mwz-topbar, .mwz-sidebar, .mwz-footer, .mwz-toasts, .mwz-loading-bar { display: none !important; }
  .mwz-shell { display: block; }
  .mwz-main { padding: 0; }
  body { background: #fff; }
}