phronCare/phronCare.UIBlazor/wwwroot/css/app.css

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    color-scheme: light;
    --ph-primary: #3157a4; --ph-primary-hover: #274887; --ph-primary-soft: #e9effb;
    --ph-accent: #159b8c; --ph-danger: #c33d4a; --ph-warning: #b86f0b; --ph-success: #18785d; --ph-info: #2476a8;
    --ph-canvas: #f4f6fa; --ph-surface: #fff; --ph-surface-subtle: #f8fafc; --ph-surface-raised: #fff;
    --ph-border: #dfe5ee; --ph-border-strong: #c8d1df; --ph-text: #1d2939; --ph-text-muted: #667085;
    --ph-sidebar: #202f55; --ph-sidebar-deep: #182442; --ph-sidebar-text: #dce4f3; --ph-sidebar-muted: #9facc4;
    --ph-focus: rgba(49, 87, 164, .22); --ph-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --ph-shadow-md: 0 10px 30px rgba(16, 24, 40, .08);
    --ph-radius-sm: .5rem; --ph-radius: .75rem; --ph-radius-lg: 1rem;
    --background: var(--ph-surface); --text-background: var(--ph-text); --background-highlight: var(--ph-surface-subtle);
    --background-highlight-light: var(--ph-border); --link-color: var(--ph-primary);
}

.dark-mode {
    color-scheme: dark;
    --ph-primary: #8daef2; --ph-primary-hover: #abc2f3; --ph-primary-soft: #263a63;
    --ph-accent: #52c7b8; --ph-danger: #f27a84; --ph-warning: #f1b85c; --ph-success: #63c5a5; --ph-info: #74b9e4;
    --ph-canvas: #101725; --ph-surface: #182131; --ph-surface-subtle: #1d283a; --ph-surface-raised: #202c40;
    --ph-border: #303d52; --ph-border-strong: #435068; --ph-text: #edf2f8; --ph-text-muted: #aab6c8;
    --ph-sidebar: #121b2e; --ph-sidebar-deep: #0e1626; --ph-sidebar-text: #e4eaf4; --ph-sidebar-muted: #91a0ba;
    --ph-focus: rgba(141, 174, 242, .28); --ph-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --ph-shadow-md: 0 12px 32px rgba(0, 0, 0, .28);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--ph-canvas); color: var(--ph-text); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a, .btn-link { color: var(--link-color); }
a { text-underline-offset: .18em; }
h1, h2, h3, h4, h5, h6 { color: var(--ph-text); letter-spacing: -.018em; }
h1:focus { outline: none; }
p { color: var(--ph-text-muted); }
main { min-width: 0; background: var(--ph-canvas); color: var(--ph-text); }
::selection { background: var(--ph-primary-soft); color: var(--ph-text); }
.content { padding-top: 1.5rem; padding-bottom: 2.5rem; }
.content > * { max-width: 1600px; margin-inline: auto; }

.card { overflow: hidden; color: var(--ph-text); background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-sm); }
.card-header, .card-footer { min-height: 4rem; padding: 1rem 1.25rem; color: var(--ph-text); background: var(--ph-surface); border-color: var(--ph-border); }
.card-header { border-bottom: 1px solid var(--ph-border); }
.card-footer { border-top: 1px solid var(--ph-border); }
.card-body { padding: 1.25rem; color: var(--ph-text); background: var(--ph-surface); }
.card-title { font-size: 1.15rem; font-weight: 700; }

.btn { min-height: 2.5rem; padding: .48rem .9rem; border-radius: var(--ph-radius-sm); font-weight: 600; box-shadow: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-sm { min-height: 2.1rem; padding: .35rem .7rem; }
.btn-primary { color: #fff; background: #3157a4; border-color: #3157a4; }
.btn-primary:hover, .btn-primary:focus { color: #fff; background: #274887; border-color: #274887; }
.btn-success { color: #fff; background: #18785d; border-color: #18785d; }
.btn-danger { color: #fff; background: #b93845; border-color: #b93845; }
.btn-warning { color: #2b1a02; background: #f0b24d; border-color: #f0b24d; }
.btn-secondary { color: var(--ph-text); background: var(--ph-surface-subtle); border-color: var(--ph-border-strong); }
.btn-secondary:hover { color: var(--ph-text); background: var(--ph-border); border-color: var(--ph-border-strong); }
.btn-outline-primary { color: var(--ph-primary); border-color: var(--ph-primary); }
.btn-outline-primary:hover { color: #fff; background: #3157a4; border-color: #3157a4; }
.btn.rounded-pill { border-radius: var(--ph-radius-sm) !important; }
.btn:disabled { opacity: .58; cursor: not-allowed; }

.form-label, label { margin-bottom: .42rem; color: var(--ph-text); font-size: .875rem; font-weight: 600; }
.form-control, .form-select, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]) { min-height: 2.65rem; color: var(--ph-text); background-color: var(--ph-surface); border: 1px solid var(--ph-border-strong); border-radius: var(--ph-radius-sm); box-shadow: none; }
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--ph-text-muted); opacity: .78; }
.form-control:focus, .form-select:focus, select:focus, textarea:focus, input:focus { color: var(--ph-text); background-color: var(--ph-surface); border-color: var(--ph-primary); outline: 0; box-shadow: 0 0 0 .22rem var(--ph-focus); }
.form-control:disabled, .form-select:disabled, input:disabled, select:disabled, textarea:disabled { color: var(--ph-text-muted); background: var(--ph-surface-subtle); }
.form-check-input { background-color: var(--ph-surface); border-color: var(--ph-border-strong); }
.form-check-input:checked { background-color: #3157a4; border-color: #3157a4; }
.row + .row { margin-top: 1rem; }
.row > [class*="col-"] > label:first-child { display: inline-block; }
hr { margin: 1.5rem 0; border-color: var(--ph-border); opacity: 1; }
.valid.modified:not([type=checkbox]) { border-color: var(--ph-success); outline: none; }
.invalid { border-color: var(--ph-danger) !important; outline: none; }
.validation-message { display: block; margin-top: .3rem; color: var(--ph-danger); font-size: .82rem; }
.validation-errors { margin: 0 0 1rem; padding: .85rem 1rem .85rem 2rem; color: var(--ph-danger); background: color-mix(in srgb, var(--ph-danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ph-danger) 28%, transparent); border-radius: var(--ph-radius-sm); }

.table-responsive, .ph-table-scroll { overflow-x: auto; border: 1px solid var(--ph-border); border-radius: var(--ph-radius); }
.table { margin-bottom: 0; color: var(--ph-text); background: var(--ph-surface); border-color: var(--ph-border); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .78rem .85rem; color: inherit; background: transparent; border-bottom-color: var(--ph-border); box-shadow: none; }
.table thead th { color: var(--ph-text-muted); background: var(--ph-surface-subtle); font-size: .75rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background-color .12s ease; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: transparent; color: var(--ph-text); background: var(--ph-primary-soft); }
.table-bordered > :not(caption) > * { border-color: var(--ph-border); }
.pagination { flex-wrap: wrap; gap: .25rem; margin-bottom: 0; }
.page-link { min-width: 2.2rem; color: var(--ph-text-muted); background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: .45rem !important; text-align: center; }
.page-link:hover { color: var(--ph-primary); background: var(--ph-primary-soft); border-color: var(--ph-primary); }
.page-item.active .page-link { color: #fff; background: #3157a4; border-color: #3157a4; }
.page-item.disabled .page-link { color: var(--ph-text-muted); background: var(--ph-surface-subtle); border-color: var(--ph-border); opacity: .55; }

.badge { padding: .42em .65em; border-radius: 999px; font-weight: 650; }
.alert { color: var(--ph-text); background: var(--ph-surface-subtle); border-color: var(--ph-border); border-radius: var(--ph-radius); }
.alert-secondary { color: var(--ph-text); background: var(--ph-surface-subtle); }
.modal-content, .blazored-modal { color: var(--ph-text); background: var(--ph-surface-raised) !important; border: 1px solid var(--ph-border) !important; border-radius: var(--ph-radius-lg) !important; box-shadow: var(--ph-shadow-md) !important; }
.modal-header, .modal-footer { border-color: var(--ph-border); }
.modal-body { padding: 1.35rem; }
.modal-footer { gap: .5rem; padding: 1rem 1.35rem; background: var(--ph-surface-subtle); }
.blazored-modal-overlay { background-color: rgba(8, 15, 30, .62) !important; backdrop-filter: blur(2px); }
.blazored-toast { color: var(--ph-text) !important; background: var(--ph-surface-raised) !important; border: 1px solid var(--ph-border) !important; border-radius: var(--ph-radius) !important; box-shadow: var(--ph-shadow-md) !important; }
.blazored-toast-heading { color: var(--ph-text) !important; }
.blazored-toast-message { color: var(--ph-text-muted) !important; }
.empty-state { padding: 2.5rem 1rem; color: var(--ph-text-muted); text-align: center; background: var(--ph-surface-subtle); border: 1px dashed var(--ph-border-strong); border-radius: var(--ph-radius); }
.spinner-border { color: var(--ph-primary); }

#blazor-error-ui { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 2000; display: none; max-width: 50rem; margin-inline: auto; padding: 1rem 3rem 1rem 1rem; color: #fff; background: #8f2833; border-radius: var(--ph-radius); box-shadow: var(--ph-shadow-md); }
#blazor-error-ui a { color: #fff; }
#blazor-error-ui .dismiss { position: absolute; top: .8rem; right: 1rem; cursor: pointer; }
.blazor-error-boundary { padding: 1rem; color: #fff; background: #8f2833; border-radius: var(--ph-radius); }
.blazor-error-boundary::after { content: "Ocurrió un error inesperado."; }
.loading-progress { position: relative; display: block; width: 5.5rem; height: 5.5rem; margin: 28vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--ph-border); stroke-width: .48rem; transform: rotate(-90deg); transform-origin: 50% 50%; }
.loading-progress circle:last-child { stroke: #3157a4; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; inset: calc(28vh + 2.15rem) 0 auto; color: var(--ph-text-muted); font-size: .8rem; font-weight: 700; text-align: center; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Cargando"); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ph-text-muted) 35%, transparent); border: 2px solid transparent; border-radius: 999px; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ph-text-muted) 60%, transparent); background-clip: content-box; }

@media (max-width: 767.98px) {
    .content { padding: 1rem .85rem 2rem !important; }
    .card-header, .card-body, .card-footer { padding: 1rem; }
    .card-header { min-height: auto; }
    .card-header.d-flex, .card-footer .d-flex, .card-body > .d-flex { flex-wrap: wrap; gap: .65rem; }
    .card-body .row { row-gap: 1rem; }
    .table { min-width: 680px; }
    .btn { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }