/* ==========================================================================
   Estilos de la Aplicación
   ========================================================================== */

/*
 * Estilos para la animación de Drag & Drop de las tarjetas (GenericTile).
 * Estos estilos son utilizados por los controladores de Home y de las Apps.
 */

/*
 * Clase aplicada a la tarjeta de destino (sobre la que se pasa el cursor)
 * para crear el efecto de "desplazarse a un lado".
 */
.tile-drag-over {
    transform: scale(0.95);
    /* Hace la tarjeta un poco más pequeña */
    opacity: 0.7;
    /* La hace semitransparente */
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    /* Define la animación */
}

/*
 * Clase estándar de UI5 que se aplica a la tarjeta que se está arrastrando.
 * Le añadimos una sombra para que parezca que "flota" sobre las demás.
 */
.sapUiDnDDragging {
    opacity: 0.9 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/*
 * Estilo para tablas con muchas columnas, para reducir el tamaño de la fuente
 * y que quepan más datos en pantalla sin necesidad de hacer scroll horizontal.
 * Este estilo se aplica a la tabla mediante la propiedad "class" en la vista XML.
 */
/* regla resistente: apunta a los elementos internos que realmente muestran el texto */
.small-table-font,
.small-table-font .sapMText,
.sapMText.small-table-font,
.sapMTextCore.small-table-font {
    font-size: 0.8rem !important;
}

.tiny-table-font,
.tiny-table-font .sapMText,
.sapMText.tiny-table-font,
.sapMTextCore.tiny-table-font {
    font-size: 0.7rem !important;
}

/* Estilo para agregar espacio entre la barra y el navegador */
.customHeaderBar {
    margin-top: 1rem;
}

/* ================================================================= */
/* Definición de Variables de Tema (Root)                            */
/* ================================================================= */
:root {
    --login-bg-light: url("/images/login_background_light.png");
    --login-bg-dark: url("/images/login_background_dark.png");
}

/* ================================================================= */
/* Estilo del Panel Izquierdo (Imagen de Fondo)                      */
/* ================================================================= */

/* 1. Aplicamos la imagen de fondo (light por defecto) 
      SOLO al panel izquierdo. */
.loginLeftPanel {
    background-image: var(--login-bg-light);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 2. Cambia la imagen del panel izquierdo cuando el tema sea oscuro */
html.sapUiTheme-sap_horizon_dark .loginLeftPanel {
    background-image: var(--login-bg-dark);
}


/* ================================================================= */
/* Reglas Responsivas (Layout)                                       */
/* ================================================================= */

/* Responsive: Pantallas pequeñas (Móviles) */
@media (max-width: 767px) {

    /* Oculta el panel izquierdo (el de la imagen) */
    .loginLeftPanel {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background-image: none !important;
        /* Buena práctica al ocultar */
    }

    /* El panel derecho (formulario) ocupa todo el ancho */
    .loginRightPanel {
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box;
    }

    /* Ajusta el formulario dentro del panel derecho */
    .loginFormVBox {
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
    }
}

/* Responsive: Pantallas medianas (Tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
    .loginLeftPanel {
        width: 40% !important;
    }

    .loginRightPanel {
        width: 60% !important;
    }
}


/* ================================================================= */
/* Estilo del Badge de Notificación                                  */
/* ================================================================= */

/* Esta clase da estilo al control <Text> para que parezca un badge */
/* Contenedor relativo para posicionar el badge */
.notificationBadge {
    position: relative;
    /* Ajustes de color y forma */
    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.05rem 0.35rem;
    /* Ajusta el tamaño */
    border-radius: 1rem;
    border: 1px solid white;

    /* Posicionamiento para superponerlo sobre la campana */
    margin-left: -12px;
    /* Mueve el badge a la izquierda */
    margin-bottom: 12px;
    /* Sube el badge */
    z-index: 1;
    /* Asegura que esté por encima */
}