/* src/modules/user/components/widget.css */
.widget {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    text-decoration: none; /* Por si lo envolvemos en <a> */
    cursor: pointer;
    transition: background 0.2s ease;
}

.widget:active {
    background: rgba(255, 255, 255, 0.05);
}

/* --- VARIANTE: SIMPLE (Borde Blanco, Centrado) --- */
/* Usado para: [ Editar Accesos ] y los botones cuadrados de abajo */
.widget--simple {
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--Blanco);
}

.widget--simple .widget-text {
    color: var(--Blanco);
    font-family: "JetBrains Mono";
    font-size: 16px; /* Base por defecto */
    font-weight: 400;
    line-height: 140%;
}

/* Modificador para el texto pequeño del botón superior */
.widget--simple.small-text .widget-text {
    font-size: 14px; 
}

/* --- VARIANTE: HIGHLIGHT (Borde Verde, Contenido complejo) --- */
/* Usado para: Smart Checks y Smart Training */
.widget--highlight {
    padding: 16px 12px 16px 24px; /* Ajustado visualmente */
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--Verde-acido);
}

.widget-content {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Un poco menos que 12px para que agrupe mejor visualmente */
    flex: 1;
    padding-right: 12px;
}

.widget-title {
    color: var(--Verde-acido);
    font-family: 'Clash Display', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 120%;
    margin: 0;
}

.widget-desc {
    color: var(--Blanco);
    font-family: "JetBrains Mono";
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}

/* Icono Flecha (Arrow) */
.widget-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; 
    height: 24px;


:host([centered]) .widget {
    justify-content: center;
    text-align: center;
    align-items: center;
}