/* Sistema visual compartido: controles y etiquetas HTML consistentes. */
:root {
    --ds-primary: #1677ff;
    --ds-primary-hover: #0958d9;
    --ds-danger: #dc2626;
    --ds-success: #059669;
    --ds-radius: 10px;
    --ds-control-height: 42px;
    --ds-border: var(--border, var(--line, #d9e2ec));
    --ds-surface: var(--surface, var(--panel, #ffffff));
    --ds-surface-soft: var(--surface-2, var(--panel-soft, #f7f9fc));
    --ds-text: var(--text, var(--ink, #122033));
    --ds-muted: var(--muted, #64748b);
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
    --ds-border: #334155;
    --ds-surface: #111827;
    --ds-surface-soft: #172033;
    --ds-text: #eef4ff;
    --ds-muted: #9aa8bc;
}

body { color: var(--ds-text); }
button, input, select, textarea { font: inherit; }
button, [role="button"] { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--ds-primary) 30%, transparent); outline-offset: 2px; }

label { display: inline-block; margin-bottom: 6px; color: var(--ds-text); font-size: 12px; font-weight: 650; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width: 100%; min-height: var(--ds-control-height); padding: 9px 12px;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
    color: var(--ds-text); background: var(--ds-surface);
}
textarea { min-height: 108px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ds-muted); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ds-primary) 45%, var(--ds-border)); }
input:focus, select:focus, textarea:focus { border-color: var(--ds-primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 15%, transparent); }
input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; opacity: .6; }

:is(.button, .primary-button, .btn-primary) {
    display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 14px; border: 1px solid var(--ds-primary); border-radius: var(--ds-radius);
    color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; background: var(--ds-primary);
}
:is(.button, .primary-button, .btn-primary):hover { border-color: var(--ds-primary-hover); color: #fff; background: var(--ds-primary-hover); }
:is(.button, .primary-button, .btn-primary):active { transform: translateY(1px); }
:is(.btn-outline-primary, .secondary-button) { border-radius: var(--ds-radius); }

table { border-collapse: separate; border-spacing: 0; }
th { color: var(--ds-muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
th, td { border-color: var(--ds-border); }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: var(--ds-surface-soft); }

:is(.alert, .form-alert) { border-radius: var(--ds-radius); border-color: color-mix(in srgb, var(--ds-danger) 40%, var(--ds-border)); }
:is(.alert.success, .form-alert.success) { border-color: color-mix(in srgb, var(--ds-success) 40%, var(--ds-border)); color: var(--ds-success); background: color-mix(in srgb, var(--ds-success) 10%, var(--ds-surface)); }

dialog { border: 1px solid var(--ds-border); border-radius: 16px; color: var(--ds-text); background: var(--ds-surface); box-shadow: 0 24px 60px rgba(15, 23, 42, .22); }
dialog::backdrop { background: rgba(15, 23, 42, .52); backdrop-filter: blur(3px); }
small, .muted { color: var(--ds-muted); }
.fa-solid, .fa-regular, .fa-brands { display: inline-block; line-height: 1; }
.close-button .fa-solid { font-size: 16px; }
.trust-row .fa-solid, .auth-features .fa-solid, .onboarding-copy li .fa-solid { color: var(--ds-success); }

/* DataTables locales: mismo lenguaje visual para todos los listados. */
.dt-container { color: var(--ds-text); font-size: 13px; }
.dt-container .dt-search input,
.dt-container .dt-length select {
    min-height: 36px; padding: 6px 10px; border: 1px solid var(--ds-border);
    border-radius: 8px; color: var(--ds-text); background: var(--ds-surface);
}
.dt-container .dt-paging .dt-paging-button {
    min-width: 34px; margin-left: 4px; padding: 6px 9px; border: 1px solid var(--ds-border) !important;
    border-radius: 7px; color: var(--ds-text) !important; background: var(--ds-surface) !important;
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
    border-color: var(--ds-primary) !important; color: #fff !important; background: var(--ds-primary) !important;
}
table.dataTable > tbody > tr > td.dtr-control::before { border-color: var(--ds-primary); background-color: var(--ds-primary); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:first-child::before { margin-right: 8px; }
.dtr-details { width: 100%; margin: 0; padding: 8px 0; list-style: none; }
.dtr-details > li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ds-border); }
.dtr-title { color: var(--ds-muted); font-weight: 700; }

@media (max-width: 640px) {
    :is(.button, .primary-button, .btn-primary) { width: 100%; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}