/* Estilos del layout interno autenticado (Layout/AppLayout.razor).
   Portado de public/css/menu.css: la clase .icons-bar original NO es una barra lateral a
   todo lo alto — es un cintillo flotante (position:fixed, ancho fijo, alto según su
   contenido) con fondo gris translúcido rgba(133,133,133,.74), esquinas redondeadas sólo
   del lado que da al contenido (border-radius: 0 10px 10px 0) y resalte verde #4CAF50 en
   hover (.dropdown1:hover). Ese es el mismo patrón que se replica aquí.
   Archivo independiente, sólo para este layout. */

:root {
    --app-menu-rail: 61px;
    --app-menu-radius: 12px;
}

.app-loading {
    padding: 40px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.app-shell {
    min-height: 100vh;
    background-color: #f4f4f4;
}

/* ---------- Menú: cintillo de iconos flotante en el borde izquierdo ---------- */
/* No es una barra lateral a todo lo alto: el alto lo da su propio contenido
   (8 iconos), igual que .icons-bar en menu.css (sin top/bottom fijos). */

.app-menu {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--app-menu-rail);
    background-color: rgba(133, 133, 133, .82);
    display: flex;
    flex-direction: column;
    z-index: 30;
    border-radius: 0 var(--app-menu-radius) var(--app-menu-radius) 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
    /* Sin overflow:hidden a propósito: recortaría la etiqueta que se despliega
       al pasar el cursor (ver .app-menu-item span más abajo). */
}

.app-menu-item:first-child {
    border-top-right-radius: var(--app-menu-radius);
}

.app-menu-item:last-child {
    border-bottom-right-radius: var(--app-menu-radius);
}

.app-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--app-menu-rail);
    height: 54px;
    flex: 0 0 auto;
    padding-left: 13px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    background-color: transparent;
    transition: background-color .15s ease;
}

.app-menu-item img {
    /* Los iconos originales son PNG de 32x32: no se agrandan más que su
       tamaño nativo para que no se vean borrosos. */
    height: 32px;
    width: 32px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Etiqueta: oculta por defecto (sólo iconos); se despliega como flyout al
   pasar el cursor, fuera del riel, sin desplazar los demás elementos. */
.app-menu-item span {
    position: absolute;
    top: 5px;
    left: 100%;
    height: calc(100% - 10px);
    display: flex;
    align-items: center;
    padding: 0 18px;
    background-color: #4CAF50;
    border-radius: 0 var(--app-menu-radius) var(--app-menu-radius) 0;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.app-menu-item:hover,
.app-menu-item.active {
    background-color: #4CAF50;
}

.app-menu-item:hover span {
    opacity: 1;
    transform: translateX(0);
}

/* Submenú de "Cargas en línea" (port del .dropdown1/.dropdown1-content de menu.css): en vez
   de la etiqueta única que despliegan los demás items al pasar el cursor, este item despliega
   dos enlaces propios ("Cargas en Línea"/"Cargas"). No lleva <span> de etiqueta simple. */
.app-menu-item--parent {
    cursor: default;
}

.app-submenu {
    position: absolute;
    top: 5px;
    left: 100%;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    background-color: #4CAF50;
    border-radius: 0 var(--app-menu-radius) var(--app-menu-radius) 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.app-menu-item--parent:hover {
    background-color: #4CAF50;
}

.app-menu-item--parent:hover .app-submenu {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.app-submenu-item {
    padding: 12px 18px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.app-submenu-item:hover {
    background-color: rgba(255, 255, 255, .18);
}

/* Barra de hamburguesa: oculta en escritorio (ver medio de pantalla más abajo).
   Sólo existe para el modo responsivo. Atraviesa toda la pantalla y su alto es
   exactamente el del icono que contiene, en la esquina superior izquierda. */
.app-menu-bar {
    display: none;
    align-items: center;
    width: 100%;
    height: 34px;
    padding-left: 10px;
    box-sizing: border-box;
    background-color: rgba(133, 133, 133, .9);
}

.app-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: none;
    border-radius: 4px;
    background: #4CAF50;
    cursor: pointer;
    padding: 8px;
    box-sizing: border-box;
}

.app-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 1px;
}

/* ---------- Encabezado: continuo a todo lo ancho de la pantalla ---------- */
/* El menú es un cintillo flotante con z-index por encima; NO recorta ni
   empuja el encabezado — sólo se deja hueco (padding-left) para que el logo
   no quede debajo del cintillo cuando ambos coinciden en altura. */

.app-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 24px 10px calc(var(--app-menu-rail) + 24px);
    background-color: #fff;
    flex-wrap: wrap;
    /* Encabezado fijo y siempre visible al hacer scroll. Por debajo del menú (z-index 30)
       para que el cintillo/desplegable lo sigan cubriendo. */
    position: sticky;
    top: 0;
    z-index: 25;
    /* Sombra tenue en el borde inferior para distinguirlo del contenido que pasa por debajo. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.app-logo-link {
    flex: 0 0 auto;
}

.app-logo {
    height: 110px;
    width: auto;
}

.app-logo-perf {
    height: 105px;
    width: auto;
    margin-left: auto;
}

.app-user-info {
    flex: 1 1 260px;
    text-align: right;
    font-style: italic;
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-top: 30px;
}

.app-user-label {
    font-size: 22px;
    font-style: italic;
}

.app-user-nombre {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.15;
}

.app-user-meta {
    color: #666;
}

.app-client-picker {
    margin-top: 4px;
    width: 100%;
    max-width: 280px;
}

.app-client-picker .app-client-combo {
    width: 100%;
    font-size: 13px;
}

.app-client-picker select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}


/* ---------- Contenido (desplazado por el ancho del riel) ---------- */

.app-content {
    margin: 16px 24px 32px calc(var(--app-menu-rail) + 24px);
    padding: 16px;
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
}

/* ---------- Responsivo (móvil): se oculta el cintillo, aparece la barra de hamburguesa --- */
/* En vez del cintillo siempre visible (pensado para pasar el cursor, algo que un dedo no
   puede hacer), en pantallas chicas el menú se oculta por completo. La barra de hamburguesa
   ocupa su lugar arriba a la izquierda, y el menú se despliega justo debajo de su icono con
   un efecto deslizante (crece hacia abajo desde ahí, como si "saliera" del icono). */

@media (max-width: 860px) {
    :root {
        /* Sin cintillo fijo por defecto: no se reserva hueco en el encabezado/contenido. */
        --app-menu-rail: 0px;
    }

    .app-menu-bar {
        display: flex;
        /* Fija y siempre visible al hacer scroll; el menú desplegable (fixed, top: 34px)
           queda anclado justo debajo de ella. */
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .app-menu {
        /* Anclado justo debajo del icono de hamburguesa (esquina superior izquierda),
           no centrado como en escritorio. */
        top: 34px;
        left: 0;
        transform: none;
        width: 220px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        box-shadow: 3px 3px 16px rgba(0, 0, 0, .35);
        border-top-left-radius: 0;
        transition: max-height .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
    }

    .app-menu.app-menu--open {
        max-height: 420px;
        opacity: 1;
        pointer-events: auto;
    }

    .app-menu--open .app-menu-item {
        width: 100%;
        height: 48px;
        padding: 0 16px;
    }

    .app-menu--open .app-menu-item img {
        height: 26px;
        width: 26px;
    }

    /* Con el panel abierto ya no hace falta el flyout: el texto se ve siempre,
       en línea junto al icono (un dedo no puede "pasar el cursor"). */
    /* El submenú de "Cargas en línea" también pasa de flyout-al-pasar-el-cursor a lista fija,
       apilada debajo del icono (igual que el resto de los items en este modo). */
    .app-menu--open .app-menu-item--parent {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 8px;
    }

    .app-menu--open .app-submenu {
        position: static;
        flex-direction: column;
        width: 100%;
        margin: 8px 0 0 14px;
        background: transparent;
        border-radius: 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .app-menu--open .app-submenu-item {
        padding: 8px 0;
    }

    .app-menu--open .app-menu-item span {
        position: static;
        height: auto;
        margin-left: 14px;
        padding: 0;
        background: transparent;
        border-radius: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .app-topbar {
        /* Debajo de la barra de hamburguesa (34px), también fija. */
        top: 34px;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 10px 12px;
        justify-content: space-between;
        align-items: center;
    }

    /* Logo derecho oculto en responsivo. */
    .app-logo-perf {
        display: none;
    }

    /* Logo a la izquierda, a la misma altura que Bienvenido / nombre del usuario. */
    .app-logo {
        height: 70px;
        max-width: 100%;
    }

    .app-user-info {
        flex: 1 1 0;
        min-width: 0;
        text-align: right;
        align-items: flex-end;
        padding-top: 0;
    }

    .app-user-label {
        font-size: 18px;
    }

    .app-user-nombre {
        font-size: 21px;
    }

    .app-client-picker {
        max-width: 100%;
    }

    .app-content {
        margin: 12px;
    }
}

/* ---------- Indicador de carga al cambiar de cliente (Layout/CargandoCliente.razor) ---------- */

.app-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 10px;
    border: 4px solid #d6dde6;
    border-top-color: rgb(0, 20, 50);
    border-radius: 50%;
    animation: app-giro .8s linear infinite;
}

.app-spinner--grande {
    width: 64px;
    height: 64px;
    border-width: 7px;
    border-top-color: #4CAF50;
    margin-bottom: 16px;
}

.app-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 20, 50, .45);
    backdrop-filter: blur(2px);
}

.app-overlay-caja {
    min-width: 260px;
    padding: 28px 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.app-overlay-texto {
    font-size: 18px;
    font-weight: 600;
    color: rgb(0, 20, 50);
}

@keyframes app-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-spinner {
        animation-duration: 2.4s;
    }
}

/* ---------- Área administrativa (Pages/Admin) ---------- */

.admin-titulo {
    margin-bottom: 16px;
}

.admin-subtitulo {
    margin: 8px 0 16px;
}

.admin-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 16px;
}

.admin-filtro {
    display: flex;
    flex-direction: column;
}

.admin-filtro label {
    margin-bottom: 4px;
    font-weight: bold;
}

.admin-filtro select {
    min-width: 180px;
}

.admin-filtro--ancho {
    min-width: 260px;
}

.admin-filtro--boton {
    justify-content: flex-end;
}

dxbl-grid.admin-grid {
    --dxbl-grid-header-bg: rgb(0, 20, 50);
    --dxbl-grid-header-color: #fff;
}

tr.admin-fila-alterna {
    --dxbl-grid-row-bg: #f4f6f8;
}

.admin-tarjeta {
    max-width: 640px;
    padding: 18px 22px;
    background-color: #fafafa;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
}

.admin-tarjeta--pendiente {
    border-style: dashed;
    color: #555;
}






/* Edición de filas (Configuración de contactos). */
tr.admin-fila-editada > td {
    background-color: #e4ecff !important;
}

.admin-lapiz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: rgb(0, 20, 50);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.admin-lapiz:hover {
    background-color: rgba(0, 20, 50, .08);
}

.admin-lapiz--confirmar {
    color: #fff;
    background-color: #2e7d32;
}

.admin-lapiz--confirmar:hover {
    background-color: #256b29;
}

/* Campo obligatorio vacío o inválido tras intentar guardar. */
.admin-invalida {
    outline: 2px solid #d32f2f;
    outline-offset: -1px;
    border-radius: 4px;
}

span.admin-invalida {
    color: #d32f2f;
    font-weight: 600;
    outline: none;
}

.admin-acciones {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.admin-lapiz--descartar {
    color: #b71c1c;
}

.admin-lapiz--descartar:hover {
    background-color: rgba(183, 28, 28, .1);
}

/* Filtro con la etiqueta a la izquierda del control, en la misma línea. */
.admin-filtro--linea {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.admin-filtro--linea label {
    margin-bottom: 0;
}

/* Formulario en tarjeta con encabezado azul (mismo estilo que "Cambio de contraseña" de Perfil). */
.admin-form-tarjeta {
    max-width: 460px;
    margin: 16px 0;
    border: 1px solid #d8dde3;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 20, 50, 0.12);
    overflow: hidden;
}

.admin-form-encabezado {
    padding: 12px 18px;
    background: rgb(0, 20, 50);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.admin-form {
    padding: 18px;
}

.admin-form-fila {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.admin-form-fila label {
    font-weight: bold;
    margin-bottom: 4px;
}

.admin-form-fila--boton {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.admin-form-guardando {
    color: #666;
    font-style: italic;
}

.admin-requerido {
    color: #d32f2f;
}

.admin-campo-invalido {
    border-color: #d32f2f;
}

.admin-error-campo {
    margin-top: 4px;
    font-size: 13px;
    color: #d32f2f;
}

/* Textos sin espacios (correos, URL) saltan de línea en vez de cortarse con "…" en los grids admin. */
dxbl-grid.admin-grid td {
    overflow-wrap: anywhere !important;
}

/* Usuarios: fila clicable que abre el formulario emergente de edición. */
dxbl-grid.admin-grid--clic tbody tr {
    cursor: pointer;
}

/* Formulario de usuario: 50% del ancho de pantalla (mínimo 780 px, máximo 95% de la ventana).
   DevExpress fija el ancho (y max-width: 500px) en el diálogo, por eso llevan !important. */
dxbl-modal-dialog.admin-usuario-popup {
    width: 50vw !important;
    min-width: min(780px, 95vw);
    max-width: 95vw !important;
}

.admin-usuario-form {
    position: relative;
    padding: 4px 2px;
}

/* "Guardando…" sobre el formulario: tapa los campos y evita pulsar dos veces. */
.admin-guardando {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: rgba(255, 255, 255, .88);
    font-size: 18px;
    font-weight: 600;
    color: rgb(0, 20, 50);
}

/* Varios errores de validación, uno por línea. */
.admin-errores {
    white-space: pre-line;
}

/* Botones del formulario de usuario, alineados a la derecha. */
.admin-usuario-botones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Título de sección a la izquierda y su acción principal a la derecha, al mismo nivel. */
.admin-encabezado-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 16px;
}

.admin-encabezado-seccion .admin-subtitulo {
    margin: 0;
}