/*
  Estándar visual de los mantenedores de Configuración (D-310), extraído de /admin/hotels.
  Encabezado con h1 y acción principal, barra de filtros, conteo como h2, grilla plana y
  diálogos por secciones. Los componentes de Components/Mantenedor usan estas clases; las de
  celda (.mant-secundario, .mant-vacio, ...) las usan las propias páginas en sus RowTemplate.
*/

.mant-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--shk-space-3);
    margin-bottom: var(--shk-space-4);
}

.mant-encabezado-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--shk-space-2);
}

/* Una columna en móvil; en escritorio cada página declara las suyas en --mant-filtros-columnas
   (buscador ancho, selects angostos, "Limpiar filtros" al final). */
.mant-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--shk-space-3);
    align-items: start;
    margin-bottom: var(--shk-space-4);
}

@media (min-width: 960px) {
    .mant-filtros {
        grid-template-columns: var(--mant-filtros-columnas, minmax(0, 2fr) minmax(0, 1fr) auto);
    }
}

.mant-secundario {
    display: block;
    color: var(--shk-ink-muted);
    font-size: var(--shk-caption-font-size);
}

.mant-vacio {
    color: var(--shk-ink-muted);
}

.mant-contacto {
    overflow-wrap: anywhere;
}

.mant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--shk-space-1);
}

.mant-sin-resultados {
    padding: var(--shk-space-4);
    text-align: center;
    color: var(--shk-ink-muted);
}

.mant-acciones {
    text-align: right;
    white-space: nowrap;
}

/* Diálogos de alta/edición: bloques con encabezado real (h3) separados por una línea. */
.mant-dialogo-seccion + .mant-dialogo-seccion {
    margin-top: var(--shk-space-4);
    padding-top: var(--shk-space-4);
    border-top: 1px solid var(--shk-border);
}

/* Dato de sólo lectura dentro de un diálogo (p. ej. el email de una cuenta, que no se edita):
   par etiqueta/valor, nunca un input deshabilitado. */
.mant-dato {
    margin: 0;
}

.mant-dato dt {
    font-size: var(--shk-caption-font-size);
}

.mant-dato dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.mant-dialogo-estado {
    display: flex;
    align-items: center;
    min-height: var(--shk-control-height);
}