/* Atomic Design - Moléculas construidas con átomos */

/* Stacks */
.stack-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.stack-horizontal {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-2);
    align-items: center;
}

/* Form Group */
.form-group-atom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

/* Hero/Panel */
.panel-hero {
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    color: var(--text-on-primary);
    background: linear-gradient(145deg, #0b192f 0%, #0f2545 35%, #0f3a63 60%, #0f4f82 78%, #f74617 100%);
    box-shadow: var(--shadow-lg);
}

/* Form surface */
.form-surface {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-4);
}

/* Modal surface */
.modal-surface {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    padding: var(--spacing-4);
}

/* Banner */
.banner-info {
    background: var(--primary-bg);
    color: var(--primary-dark);
    border: 1px solid rgba(0,79,113,0.15);
    border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-3);
}