/* ============================================================================
   APRENDIZZAJE · C1 COMPONENTS
   Reusable components for C-migrated screens. No legacy selector overrides.
   ============================================================================ */
.c1-card {
    border: 1px solid var(--c1-line);
    border-radius: var(--c1-radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.97));
    box-shadow: var(--c1-shadow-card), var(--c1-inset-highlight);
}
.c1-card--interactive {
    transition: transform var(--c1-medium) var(--c1-ease), border-color var(--c1-medium) var(--c1-ease), box-shadow var(--c1-medium) var(--c1-ease);
}
@media (hover:hover) and (pointer:fine) {
    .c1-card--interactive:hover { transform: translateY(-3px); border-color: rgba(23,111,229,.32); box-shadow: var(--c1-shadow-float); }
}

.c1-btn {
    min-height: var(--c1-control-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--c1-radius-sm);
    font-family: var(--c1-font-body);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--c1-fast) var(--c1-ease), box-shadow var(--c1-medium) var(--c1-ease), background var(--c1-medium) var(--c1-ease), border-color var(--c1-medium) var(--c1-ease);
}
.c1-btn:focus-visible,
.c1-icon-btn:focus-visible,
.c1-input:focus-visible,
.c1-select:focus-visible,
.c1-textarea:focus-visible { outline: 0; box-shadow: var(--c1-focus-ring); }
.c1-btn:active { transform: translateY(1px) scale(.985); }
.c1-btn[aria-disabled="true"], .c1-btn:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.c1-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #2381f4 0%, var(--c1-primary) 55%, var(--c1-primary-deep) 100%);
    border-color: rgba(10,72,158,.24);
    box-shadow: var(--c1-shadow-blue), inset 0 1px 0 rgba(255,255,255,.3);
}
.c1-btn--secondary { color: var(--c1-primary-deep); background: var(--c1-primary-soft); border-color: rgba(23,111,229,.22); box-shadow: var(--c1-shadow-xs); }
.c1-btn--ghost { color: var(--c1-ink); background: rgba(255,255,255,.75); border-color: var(--c1-line); box-shadow: var(--c1-shadow-xs); }
.c1-btn--danger { color: var(--c1-danger); background: var(--c1-danger-soft); border-color: rgba(190,64,81,.18); }
.c1-btn--reward { color: #684507; background: linear-gradient(135deg,#fffaf0,#fff2c8); border-color: rgba(212,148,24,.24); box-shadow: var(--c1-shadow-reward); }
.c1-btn--lg { min-height: var(--c1-control-h-lg); padding-inline: 22px; border-radius: var(--c1-radius-md); font-size: .95rem; }

.c1-icon-btn {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--c1-line);
    border-radius: var(--c1-radius-sm);
    background: rgba(255,255,255,.9);
    box-shadow: var(--c1-shadow-sm), var(--c1-inset-highlight);
    cursor: pointer;
    color: var(--c1-ink);
}
.c1-icon-btn img { width: 23px; height: 23px; display: block; object-fit: contain; }
.c1-icon-btn--danger { background: var(--c1-danger-soft); border-color: rgba(190,64,81,.18); color: var(--c1-danger); }

.c1-icon-frame {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(23,111,229,.14);
    border-radius: 14px;
    background: linear-gradient(145deg,#fff,#edf5ff);
    box-shadow: 0 8px 18px rgba(15,56,106,.08), inset 0 1px 0 #fff;
}
.c1-icon-frame img { width: 24px; height: 24px; display: block; object-fit: contain; }
.c1-icon-frame--sm { width: 36px; height: 36px; border-radius: 11px; }
.c1-icon-frame--sm img { width: 20px; height: 20px; }
.c1-icon-frame--lg { width: 56px; height: 56px; border-radius: 18px; }
.c1-icon-frame--lg img { width: 31px; height: 31px; }

.c1-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--c1-line);
    border-radius: var(--c1-radius-pill);
    background: rgba(255,255,255,.86);
    color: var(--c1-ink-soft);
    font-size: .73rem;
    font-weight: 800;
    line-height: 1;
}
.c1-pill--primary { color: var(--c1-primary-deep); border-color: rgba(23,111,229,.18); background: var(--c1-primary-soft); }
.c1-pill--success { color: var(--c1-success); border-color: rgba(23,132,93,.18); background: var(--c1-success-soft); }
.c1-pill--reward { color: #865b08; border-color: rgba(212,148,24,.2); background: var(--c1-reward-soft); }

.c1-field { display: grid; gap: 7px; }
.c1-field > label, .c1-field__label { font-size: var(--c1-label); font-weight: 800; color: var(--c1-ink-soft); }
.c1-input, .c1-select, .c1-textarea {
    width: 100%;
    min-height: var(--c1-control-h);
    padding: 10px 13px;
    border: 1px solid var(--c1-line-strong);
    border-radius: var(--c1-radius-sm);
    background: var(--c1-surface);
    color: var(--c1-ink);
    font: inherit;
    transition: border-color var(--c1-fast) var(--c1-ease), box-shadow var(--c1-fast) var(--c1-ease), background var(--c1-fast) var(--c1-ease);
}
.c1-input:hover, .c1-select:hover, .c1-textarea:hover { border-color: #aac2dc; }
.c1-input:focus, .c1-select:focus, .c1-textarea:focus { border-color: var(--c1-primary); background: #fff; outline: 0; }
.c1-textarea { min-height: 120px; resize: vertical; }

.c1-table-shell { overflow: auto; border: 1px solid var(--c1-line); border-radius: var(--c1-radius-lg); background: #fff; box-shadow: var(--c1-shadow-sm); }
.c1-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--c1-ink); font-size: .875rem; }
.c1-table th { position: sticky; top: 0; z-index: 1; padding: 12px 14px; background: #f3f7fb; color: var(--c1-muted); text-align: left; font-size: .7rem; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.c1-table td { padding: 13px 14px; border-top: 1px solid #edf1f6; vertical-align: middle; }
.c1-table tbody tr:hover td { background: #f9fbfe; }

.c1-surface-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 180px;
    padding: 28px;
    border: 1px dashed var(--c1-line-strong);
    border-radius: var(--c1-radius-lg);
    background: linear-gradient(180deg,#fbfdff,#f6f9fd);
    color: var(--c1-muted);
    text-align: center;
}

@media (hover:hover) and (pointer:fine) {
    .c1-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 22px 48px rgba(23,111,229,.25), inset 0 1px 0 rgba(255,255,255,.34); }
    .c1-btn--secondary:hover, .c1-btn--ghost:hover { transform: translateY(-1px); border-color: rgba(23,111,229,.32); }
    .c1-icon-btn:hover { transform: translateY(-1px); border-color: rgba(23,111,229,.3); box-shadow: var(--c1-shadow-card); }
}

@media (max-width: 640px) {
    .c1-btn { min-height: 48px; }
    .c1-icon-btn { width: 48px; height: 48px; }
}

@media (forced-colors: active) {
    .c1-card, .c1-btn, .c1-icon-btn, .c1-pill, .c1-input, .c1-select, .c1-textarea { border: 1px solid CanvasText; box-shadow: none; }
}