/* ================================ */
/* CSS completo para MiTrabajador   */
/* ================================ */

/* Contenedor principal con fondo */
.trabajador-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-image: url('/img/trabAlmacen.png'); /* Cambia por tu imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

    /* Overlay oscuro para resaltar el card */
    .trabajador-page::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.1); /* Ajusta la opacidad */
        z-index: 1;
        pointer-events: none; /* Permite que los botones sean clickeables */
    }

    /* Contenedor del card centrado */
    .trabajador-page .trabajador-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;
        z-index: 2; /* Card sobre el overlay */
    }

    /* Card del trabajador */
    .trabajador-page .trabajador-card {
        background-color: rgb(255, 255, 255, 0.55);
        padding: 40px 30px;
        border-radius: 15px;
        box-shadow: 0 8px 20px rgb(0, 0, 0);
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 400px;
        width: 100%;
    }

    /* Nombre de la empresa encima del título */
    .trabajador-page .trabajador-empresa {
        color: #000;
        margin-bottom: 10px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 500;
    }

    /* Título de bienvenida */
    .trabajador-page .trabajador-title {
        color: #000000;
        margin-bottom: 30px;
        text-align: center;
        font-size: 1.8rem;
        font-weight: 600;
    }

    /* Contenedor de botones */
    .trabajador-page .trabajador-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    /* Botones principales */
    .trabajador-page .btn-trabajador {
        padding: 12px 20px;
        font-size: 1rem;
        font-weight: 500;
        color: #fff;
        background-color: #319e9f;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

        /* Hover de botones */
        .trabajador-page .btn-trabajador:hover {
            background-color: #6c757d;
        }

        /* Botón info */
        .trabajador-page .btn-trabajador.info {
            background-color: #6c757d;
        }

            .trabajador-page .btn-trabajador.info:hover {
                background-color: #5a6268;
            }

        /* Botón danger */
        .trabajador-page .btn-trabajador.danger {
            background-color: #6c757d;
        }

            .trabajador-page .btn-trabajador.danger:hover {
                background-color: #c82333;
            }

/* Responsive para tablet/móvil */
@media (max-width: 768px) {
    .trabajador-page .trabajador-card {
        padding: 30px 20px;
    }

    .trabajador-page .trabajador-title {
        font-size: 1.5rem;
    }

    .trabajador-page .trabajador-empresa {
        font-size: 1rem;
    }
}