/* welcome.css — pantalla de bienvenida con estética BabelOS (Win95/pixel),
   deliberadamente distinta del resto de la app (que replica el look real
   del proyecto de referencia). Todo prefijado con .lab-welcome- para no
   chocar nunca con las clases de Bootstrap ya cargadas en la página.

   Nota: esta pantalla vive DENTRO de la ventana real de BabelOS (que ya
   tiene su propia barra de título con ícono/minimizar/cerrar) — por eso
   NO dibuja una segunda "ventana" con su propia barra de título encima:
   eso se veía como dos barras apiladas, mal puesto. Acá solo hay un
   panel con borde pixel, sin chrome de ventana propio. */

.lab-welcome-wrap {
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 16px 48px;
    overflow-y: auto;
    /* Azul marino/pizarra (no verde/teal: se confunde con el fondo del
       escritorio de BabelOS). */
    background: linear-gradient(160deg, #24344d 0%, #10192a 100%);
    font-family: 'Courier New', Courier, monospace;
    color: #000;
}

.lab-welcome-panel {
    width: 100%;
    max-width: 860px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
    padding: 22px 26px 26px;
}

.lab-welcome-h1 {
    font-size: 1.9rem;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.15;
}

.lab-welcome-tagline {
    font-size: 0.95rem;
    color: #333;
    margin: 0 0 16px;
}

.lab-welcome-desc {
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 14px 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.lab-welcome-desc strong { font-weight: bold; }

.lab-welcome-roles-label {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 0 10px;
}

.lab-welcome-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.lab-welcome-role-btn {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 1px 1px 0 #000;
    padding: 14px 14px 16px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: #000;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lab-welcome-role-btn:hover {
    background: #d4d4d4;
}

.lab-welcome-role-btn:active {
    border-color: #808080 #fff #fff #808080;
    box-shadow: none;
    padding: 15px 13px 15px 15px;
}

.lab-welcome-role-icon {
    font-size: 26px;
    line-height: 1;
}

.lab-welcome-role-name {
    font-weight: bold;
    font-size: 1rem;
    margin-top: 2px;
}

.lab-welcome-role-tag {
    font-size: 0.75rem;
    color: #444;
}

.lab-welcome-role-desc {
    font-size: 0.85rem;
    color: #222;
    line-height: 1.5;
    margin-top: 2px;
}

.lab-welcome-footer {
    font-size: 0.75rem;
    color: #444;
    margin-top: 20px;
    text-align: center;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .lab-welcome-roles { grid-template-columns: 1fr; }
    .lab-welcome-panel { padding: 18px 16px 20px; }
    .lab-welcome-h1 { font-size: 1.6rem; }
}