/* =====================================================================
   SHAM · Responsive (especificación 08)

   Anchos de corte (los mismos que Helpers/Pantalla.cs):
     Móvil      < 640 px      @media (max-width: 639.98px)
     Tableta    640–1023 px   @media (max-width: 1023.98px)  (móvil incluido)
     Escritorio ≥ 1024 px     sin reglas aquí: el escritorio NO cambia

   Solo tokens del tema. Se carga la última para poder ajustar lo anterior.
   iPhone: respetar env(safe-area-inset-*) y usar 100dvh.
   ===================================================================== */

/* ---------------- Móvil y tableta (< 1024 px) ---------------- */
@media (max-width: 1023.98px) {

    /* Menú lateral: panel desplegable por encima del contenido */
    .sham-sidebar,
    .sham-sidebar.sham-sidebar-compacto {
        position: fixed !important;
        top: calc(3.5rem + env(safe-area-inset-top, 0px));
        bottom: 0;
        left: 0;
        width: min(18rem, 86vw) !important;
        z-index: 1001;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        box-shadow: var(--sham-sombra);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        visibility: hidden;
    }

        .sham-sidebar.sham-menu-abierto {
            transform: none;
            visibility: visible;
        }

    /* En el panel siempre se ven los textos (el modo "solo iconos" es de escritorio) */
    .sham-sidebar-compacto .sham-nav-item span,
    .sham-sidebar-compacto .sham-nav-grupo {
        display: revert;
    }

    .sham-sidebar-compacto .sham-nav-item {
        justify-content: flex-start;
    }

    .sham-nav-item {
        min-height: 2.75rem;
    }

    .sham-menu-velo {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: var(--sham-velo);
    }

    /* Contenido con menos margen */
    #main-content > .rz-p-4 {
        padding: 1rem !important;
    }
}

/* ---------------- Móvil (< 640 px) ---------------- */
@media (max-width: 639.98px) {

    /* Encabezado compacto */
    .sham-header {
        gap: 0.5rem;
        padding: 0 0.5rem 0 0;
        padding-top: env(safe-area-inset-top, 0px);
    }

    :root .sham-header-logo img:not(.sham-logo-corto) {
        display: none !important;
    }

    :root:not([data-sham-tema="oscuro"]) .sham-header-logo img.sham-logo-corto.sham-solo-claro,
    :root[data-sham-tema="oscuro"] .sham-header-logo img.sham-logo-corto.sham-solo-oscuro {
        display: inline-block !important;
    }

    .sham-header-logo img {
        height: 1.75rem;
    }

    .sham-header-logo {
        min-width: 2.5rem;
        height: 2.5rem;
        justify-content: center;
    }

    .rz-dialog-wrapper .rz-dialog-titlebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .sham-icon-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    .sham-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* El menú de perfil no necesita la flecha en el móvil */
    .sham-perfil .rz-navigation-item-icon-children {
        display: none;
    }

    #main-content > .rz-p-4 {
        padding: 0.875rem 0.75rem calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* El cuerpo de Radzen añade su propio margen: en el móvil solo cuenta el de .rz-p-4 */
    #main-content.rz-body {
        padding: 0 !important;
    }

    .sham-footer {
        padding-bottom: calc(0.375rem + env(safe-area-inset-bottom, 0px));
    }

    /* Diálogos a pantalla completa */
    .rz-dialog-wrapper .rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    .rz-dialog-wrapper .rz-dialog-titlebar {
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    }

    .rz-dialog-wrapper .rz-dialog-content {
        flex: 1;
        overflow-y: auto;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Confirmaciones: casi todo el ancho */
    .rz-dialog-wrapper .rz-dialog-confirm,
    .rz-dialog-wrapper .rz-dialog-alert {
        width: calc(100vw - 2rem) !important;
        max-width: 26rem !important;
    }

    /* Botones con tamaño cómodo para el dedo */
    .rz-button {
        min-height: 2.5rem;
        min-width: 2.5rem;
    }

    /* Inicio por rol */
    .sham-inicio-saludo {
        font-size: 1.375rem;
    }

    .sham-segmentos {
        align-self: stretch;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

        .sham-segmentos button {
            flex: 1 0 auto;
            min-height: 2.5rem;
        }

    .sham-barra {
        grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2rem;
    }
}

/* ---------------- Cabecera de página (CabeceraPagina) ---------------- */
.sham-pagina-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.sham-pagina-titulo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

    .sham-pagina-titulo h1 {
        font-size: 1.625rem;
        font-weight: 700;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .sham-pagina-titulo p {
        margin: 0;
        font-size: 0.875rem;
        color: var(--rz-text-secondary-color);
    }

.sham-pagina-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Botón flotante: solo en el móvil (D1) */
.sham-fab {
    display: none;
}

@media (max-width: 639.98px) {
    .sham-pagina-titulo h1 {
        font-size: 1.375rem;
    }

    .sham-pagina-cabecera {
        margin-bottom: 1rem;
    }

    .sham-pagina-principal {
        display: none !important;
    }

    .sham-fab {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        right: calc(1rem + env(safe-area-inset-right, 0px));
        bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
        z-index: 900;
        min-height: 3.5rem;
        padding: 0 1.25rem;
        border: 0;
        border-radius: 1.75rem;
        background: var(--rz-primary);
        color: var(--rz-on-primary);
        font: inherit;
        font-weight: 600;
        box-shadow: var(--sham-sombra);
        cursor: pointer;
        text-decoration: none;
    }

        .sham-fab:hover {
            background: var(--rz-primary-dark);
            color: var(--rz-on-primary-dark);
        }
}

/* ---------------- Lista adaptable: tarjetas (ListaAdaptable) ---------------- */
.sham-lista-adaptable {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sham-lista-herramientas {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.sham-lista-busqueda {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--rz-base-500);
    border-radius: 10px;
    background: var(--sham-superficie);
    color: var(--rz-text-secondary-color);
}

    .sham-lista-busqueda:focus-within {
        border-color: var(--rz-primary);
        box-shadow: 0 0 0 3px var(--rz-primary-lighter);
    }

    .sham-lista-busqueda input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--rz-text-title-color);
        font: inherit;
        font-size: 1rem;   /* 16 px: evita que iPhone haga zoom al enfocar */
        min-height: 2.625rem;
    }

        .sham-lista-busqueda input::placeholder {
            color: var(--rz-text-secondary-color);
            opacity: 1;
        }

.sham-lista-filtros {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 2px;
}

    .sham-lista-filtros button {
        flex: 0 0 auto;
        min-height: 2.5rem;
        padding: 0 0.875rem;
        border-radius: 999px;
        border: 1px solid var(--sham-linea);
        background: var(--sham-superficie);
        color: var(--rz-text-color);
        font: inherit;
        font-size: 0.875rem;
        cursor: pointer;
    }

        .sham-lista-filtros button[aria-pressed="true"] {
            background: var(--sham-suave);
            border-color: var(--rz-primary);
            color: var(--sham-sobre-suave);
            font-weight: 600;
        }

.sham-lista-total {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.sham-tarjetas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.sham-tarjeta {
    background: var(--sham-superficie);
    border: 1px solid var(--sham-linea);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.sham-tarjeta-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.375rem 0.75rem;
}

    /* El texto ocupa lo que haga falta; la etiqueta (chip) baja de línea si no cabe */
    .sham-tarjeta-cabecera > :first-child {
        flex: 1 1 10rem;
        min-width: 0;
    }

    .sham-tarjeta-cabecera > .sham-chip,
    .sham-tarjeta-cabecera > .rz-badge,
    .sham-tarjeta-cabecera > .rz-button {
        flex: 0 0 auto;
    }

.sham-tarjeta-titulo {
    font-weight: 600;
    font-size: 1rem;
    color: var(--rz-text-title-color);
    overflow-wrap: break-word;   /* parte palabras solo si no caben enteras */
}

.sham-tarjeta-sub {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

.sham-tarjeta-datos {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}

    .sham-tarjeta-datos dt {
        color: var(--rz-text-secondary-color);
    }

    .sham-tarjeta-datos dd {
        margin: 0;
        color: var(--rz-text-color);
        overflow-wrap: anywhere;
    }

.sham-tarjeta-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

    .sham-tarjeta-acciones .rz-button {
        min-height: 2.5rem;
        min-width: 2.5rem;
    }

.sham-lista-mas {
    align-self: center;
}

.sham-tarjetas-grupo {
    padding: 0.5rem 0.25rem 0.25rem;
    background: var(--sham-fondo);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.sham-paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

/* Botones de los diálogos: siempre visibles abajo en el móvil */
@media (max-width: 639.98px) {
    .sham-dialogo-botones {
        position: sticky;
        bottom: calc(-1rem - env(safe-area-inset-bottom, 0px));
        z-index: 2;
        margin-top: 1rem;
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
        background: var(--rz-dialog-background-color, var(--sham-superficie));
        border-top: 1px solid var(--sham-linea);
        flex-wrap: wrap;
    }

        .sham-dialogo-botones > .rz-button,
        .sham-dialogo-botones > * {
            flex: 1 1 auto;
        }
}

@media (max-width: 639.98px) {
    /* Campos numéricos: sin flechas (no sirven con el dedo) y a todo el ancho */
    .rz-numeric {
        width: 100%;
    }

        .rz-numeric .rz-numeric-button,
        .rz-numeric .rz-spinner-button {
            display: none !important;
        }

        .rz-numeric .rz-numeric-input {
            padding-inline-end: 0.75rem;
        }

    /* Detalle de cambios de la auditoría: un bloque por campo (Antes / Después) en lugar de tabla */
    .sham-cambios,
    .sham-cambios tbody,
    .sham-cambios tr,
    .sham-cambios td {
        display: block;
        width: 100%;
    }

        .sham-cambios colgroup,
        .sham-cambios thead {
            display: none;
        }

        .sham-cambios tr {
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--sham-linea);
        }

        .sham-cambios td {
            border: 0 !important;
            padding: 0.125rem 0 !important;
        }

        .sham-cambios .sham-cambios-campo {
            font-weight: 600;
            color: var(--rz-text-title-color);
        }

        .sham-cambios td[data-titulo]::before {
            content: attr(data-titulo) ": ";
            color: var(--rz-text-secondary-color);
        }

    /* Campos con altura cómoda para el dedo (40 px) */
    .rz-inputtext,
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric,
    .rz-datepicker > .rz-inputtext,
    .rz-autocomplete {
        min-height: 2.5rem;
    }

    .rz-numeric .rz-numeric-input {
        min-height: 2.5rem;
    }

    .rz-chkbox-box {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Editor de órdenes en tarjetas */
    .sham-check {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.5rem;
        font-size: 0.9375rem;
    }

    .sham-frecuencia {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 0.5rem;
    }
}

@media (max-width: 639.98px) {
    /* Radzen pone transform en el cuerpo y eso haría que el botón flotante (position: fixed)
       se desplazara con el contenido. En el móvil se quita para que quede anclado a la pantalla. */
    #main-content.rz-body {
        transform: none !important;
    }

    /* Formularios de edición: "Eliminar" como icono a la izquierda; Guardar y Cancelar ocupan el resto */
    .sham-form-acciones {
        flex-wrap: nowrap !important;
        align-items: center;
    }

        .sham-form-acciones > .sham-btn-eliminar {
            flex: 0 0 auto !important;
            border: 1px solid var(--rz-danger);
        }

            .sham-form-acciones > .sham-btn-eliminar .rz-button-text {
                display: none;
            }

        .sham-form-acciones > .rz-stack {
            flex: 1 1 auto;
            flex-wrap: nowrap;
            gap: 0.5rem !important;
        }

            .sham-form-acciones > .rz-stack > .rz-button {
                flex: 1 1 0;
                min-width: 0;
            }
}

@media (max-width: 639.98px) {
    /* Barras de botones del móvil: texto en una línea; Guardar y Cancelar sin icono para que quepan */
    .sham-dialogo-botones .rz-button {
        white-space: nowrap;
    }

    .sham-form-acciones > .rz-stack > .rz-button .rz-button-icon-left {
        display: none;
    }
}

@media (max-width: 639.98px) {
    .sham-form-acciones > .sham-btn-eliminar {
        width: 2.5rem;
        padding: 0 !important;
        justify-content: center;
    }

    /* Guardar (primer botón) un poco más ancho que Cancelar */
    .sham-form-acciones > .rz-stack > .rz-button {
        padding-inline: 0.75rem;
    }

        .sham-form-acciones > .rz-stack > .rz-button:first-child {
            flex-grow: 1.5;
        }
}

@media (max-width: 639.98px) {
    /* Enlaces sueltos (no dentro de un texto): zona táctil de 40 px */
    .sham-panel-titulo .sham-link,
    .sham-kpi-detalle .sham-link,
    .sham-acceso-fila .sham-link {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
        min-width: 2.5rem;
    }
}

@media (max-width: 639.98px) {
    /* Botones que en el móvil quedan solo con su icono (p. ej. Pausar en el monitoreo) */
    .sham-solo-icono-movil .rz-button-text {
        display: none;
    }

    .sham-mon-controles {
        gap: 0.5rem !important;
    }
}

/* Herramientas de la lista en escritorio y tableta (especificación 09): buscador, chips, total
   y acción principal en una sola fila encima de la tabla o las tarjetas */
@media (min-width: 640px) {
    .sham-lista-herramientas {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.625rem 1rem;
    }

    .sham-lista-herramientas .sham-lista-busqueda {
        flex: 1 1 14rem;
        max-width: 24rem;
        min-width: 12rem;
    }

    .sham-lista-herramientas .sham-lista-filtros {
        flex-wrap: wrap;
        overflow: visible;
    }

    .sham-lista-accion {
        margin-left: auto;
    }
}