:root {
    --coh-primary: #62b9c6;
    --coh-primary-dark: #16798a;
    --coh-primary-soft: #e9f7f9;
    --coh-ink: #183a41;
    --coh-text: #536c72;
    --coh-surface: #f5f9fa;
    --coh-border: #dfeaec;
    --bs-primary: #16798a;
    --bs-primary-rgb: 22, 121, 138;
    --bs-link-color: #16798a;
    --bs-link-hover-color: #105f6c;
    --bs-body-font-family: "Montserrat", sans-serif;
    --bs-body-color: #536c72;
    --bs-body-bg: #f5f9fa;
    font-synthesis: none;
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Montserrat", sans-serif;
    color: var(--coh-text);
    background: var(--coh-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: var(--coh-primary-dark);
}

.btn-primary {
    --bs-btn-bg: var(--coh-primary-dark);
    --bs-btn-border-color: var(--coh-primary-dark);
    --bs-btn-hover-bg: #105f6c;
    --bs-btn-hover-border-color: #105f6c;
    --bs-btn-active-bg: #0c535e;
    --bs-btn-active-border-color: #0c535e;
    font-weight: 700;
}

.btn:focus-visible,
.btn-link.nav-link:focus-visible,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(98, 185, 198, .28);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #21965d;
}

.invalid {
    outline: 1px solid #cc334d;
}

.validation-message {
    color: #b52840;
}

#blazor-error-ui {
    color-scheme: light only;
    display: none;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    padding: .75rem 1.25rem;
    color: #fff;
    background: #a82e42;
    box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .15);
}

#blazor-error-ui .reload {
    margin-left: .35rem;
    color: #fff;
    font-weight: 700;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: .9rem;
    top: .65rem;
    cursor: pointer;
}

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
    background: #a82e42;
    border-radius: .75rem;
}

.blazor-error-boundary::after {
    content: "Ocurrió un error inesperado.";
}

.loading-progress {
    width: 7rem;
    height: 7rem;
    position: absolute;
    display: block;
    inset: 24vh 0 auto;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #dcebed;
    stroke-width: .55rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.loading-progress circle:last-child {
    stroke: var(--coh-primary);
    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(24vh + 2.8rem) 0 auto .2rem;
    color: var(--coh-primary-dark);
    text-align: center;
    font-size: .75rem;
    font-weight: 800;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Cargando");
}

code {
    color: #b72864;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}
