/* ============================================================
   Base UI components (ui-*)
   Capa de componentes compartidos del sistema.
   ============================================================ */

/* --- Button: .ui-btn --------------------------------------- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    background: #1d3557;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ui-btn:hover { background: #16294a; color: #fff; }
.ui-btn:focus-visible { outline: 2px solid #2a4d8c; outline-offset: 2px; }
.ui-btn:disabled { cursor: not-allowed; opacity: .6; }

.ui-btn--primary { background: #1d3557; color: #fff; }
.ui-btn--primary:hover { background: #16294a; color: #fff; }

.ui-btn--secondary {
    background: #f0ede9;
    border-color: #d8d5d0;
    color: #1e2433;
}
.ui-btn--secondary:hover { background: #e5e0d9; color: #1e2433; }

.ui-btn--danger { background: #8b3030; color: #fff; }
.ui-btn--danger:hover { background: #732828; color: #fff; }

.ui-btn--soft {
    background: #edf2fa;
    border-color: #b8cce8;
    color: #2a4d8c;
}
.ui-btn--soft:hover { background: #dfe7f5; color: #2a4d8c; }

.ui-btn--sm { padding: .4rem .75rem; font-size: .82rem; border-radius: .4rem; }
.ui-btn--block { width: 100%; }

/* --- Alert: .ui-alert -------------------------------------- */
.ui-alert {
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: .5rem;
    font-size: .92rem;
}
.ui-alert--success { background: #eef8f1; border-color: #96c8a2; color: #24623a; }
.ui-alert--error { background: #fdf0f0; border-color: #d4a0a0; color: #8b3030; }
.ui-alert--warning { background: #fdf5e5; border-color: #ead2a2; color: #7a5126; }
.ui-alert--info { background: #edf2fa; border-color: #b8cce8; color: #2a4d8c; }

/* --- Table: .ui-table / .ui-table-wrap --------------------- */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.ui-table th,
.ui-table td { padding: .8rem 1rem; border-bottom: 1px solid #e5e1dc; text-align: left; }
.ui-table th { color: #1d3557; font-size: .85rem; }
.ui-table td { font-size: .9rem; vertical-align: middle; }
.ui-table tbody tr:hover { background: #f7f5f1; }
.ui-table--striped tbody tr:nth-child(even) { background: #faf8f5; }

/* --- Card / Panel: .ui-card / .ui-panel --------------------- */
.ui-card,
.ui-panel {
    background: #fff;
    border: 1px solid #d8d5d0;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(29, 53, 87, .08);
}
.ui-panel { padding: 1.5rem; }
.ui-card { padding: 1.25rem; }

/* --- Header: .ui-header ------------------------------------- */
.ui-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 2rem;
    background: #fff;
    border-bottom: 1px solid #d8d5d0;
}

/* --- Form controls: .ui-form-group / .ui-input etc ---------- */
.ui-form-group { margin-bottom: 1rem; }
.ui-form-group label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: .85rem;
    color: #2d3240;
}
.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    padding: .65rem .85rem;
    border: 2px solid #d8d5d0;
    border-radius: .5rem;
    background: #fff;
    color: #1e2433;
    font-size: .95rem;
}
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;
    border-color: #2a4d8c;
    box-shadow: 0 0 0 3px rgba(42, 77, 140, .10);
}
.ui-form-inline { display: flex; align-items: center; gap: .75rem; }

/* --- Badge: .ui-badge --------------------------------------- */
.ui-badge {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #edf2fa;
    color: #2a4d8c;
    font-weight: 700;
    font-size: .78rem;
}

/* --- Stats: .ui-stats / .ui-stat ---------------------------- */
.ui-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ui-stat {
    border: 1px solid #d8d5d0;
    border-radius: .5rem;
    padding: 1rem;
    background: #fafafa;
}
.ui-stat span { display: block; color: #5a6478; font-size: .82rem; }
.ui-stat strong { display: block; color: #1d3557; font-size: 1.8rem; }

/* --- Utilidades --------------------------------------------- */
.ui-muted { color: #5a6478; }
.ui-muted-line { display: block; margin-top: .3rem; color: #5a6478; font-size: .78rem; }

@media (max-width: 720px) {
    .ui-btn { width: 100%; }
    .ui-form-inline { align-items: stretch; flex-direction: column; }
    .ui-table { min-width: 640px; }
}