/* ====== Tokens ====== */
:root {
    /*--brand: #0b7a6f;*/ /* acento verdoso tipo clínica */
    /*--brand-600: #086459;
    --brand-50: #e9f7f5;
    --ink: #1a1f2b;
    --muted: #6b7280;
    --danger: #c0392b;
    --bg: #f6f7f9;
    --card: #ffffff;
    --rad: 16px;
    --shadow: 0 10px 30px rgba(16,24,40,.08);*/
    --brand: #50b6cf; /* celeste Syscomp */
    --brand-600: #3e9bb2; /* hover */
    --accent: #f5a947; /* naranjo engranaje */
    --ink: #000000;
    --muted: #6b7280;
    --danger: #c0392b;
    --bg: #f7f8fb;
    --card: #ffffff;
    --rad: 16px;
    --shadow: 0 10px 30px rgba(16,24,40,.08);
}

/* ====== Card contenedor del wizard ====== */
.wiz-card {
    background: var(--card);
    border: 1px solid #e7ecf2;
    border-radius: var(--rad);
    box-shadow: var(--shadow);
}

/* ====== Barra de pasos ====== */
.wiz-steps {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
}

    .wiz-steps::before { /* línea base */
        content: "";
        position: absolute;
        left: 1.25rem;
        right: 1.25rem;
        top: 34px;
        height: 4px;
        background: #e9eef5;
        border-radius: 999px;
    }

.wiz-progress { /* progreso (opcional, setea width con style) */
    position: absolute;
    left: 1.25rem;
    top: 34px;
    height: 4px;
    background: var(--brand);
    border-radius: 999px;
    transition: width .25s ease;
}

/* Paso individual */
.wiz-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 72px;
    z-index: 1;
    color: var(--muted);
    font-weight: 600;
    font-size: .9rem;
}

.wiz-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e3f3f1;
    color: var(--brand);
    font-weight: 700;
    border: 2px solid #d5ece9;
}

.wiz-label {
    margin-top: .35rem;
    user-select: none;
}

/* Estados */
.wiz-step.is-active {
    color: var(--ink);
}

    .wiz-step.is-active .wiz-dot {
        background: var(--brand);
        color: #fff;
        border-color: var(--brand);
        box-shadow: 0 0 0 4px var(--brand-50);
    }

.wiz-step.is-complete .wiz-dot {
    background: #fff;
    color: var(--brand);
    border-color: var(--brand);
}

.wiz-step.is-disabled {
    opacity: .5;
}

/* ====== Encabezado del paso ====== */
.wiz-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e7ecf2;
}

.wiz-title {
    color: var(--brand-600);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 800;
    font-size: 1.1rem;
}

/* ====== Cuerpo del paso ====== */
.wiz-body {
    padding: 1.25rem;
}

/* Campos estilo “clínica” */
.field .form-label {
    font-weight: 600;
    color: #2c3343;
    margin-bottom: .25rem;
}

.field .hint {
    display: block;
    font-size: .85rem;
    color: var(--muted);
    margin-top: .25rem;
}

/* Input grande con borde redondeado */
.form-control, .form-select {
    border-radius: 12px;
    border-color: #d9e1ea;
    padding: .65rem .9rem;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 .2rem rgba(11,122,111,.15);
    }

/* Estado inválido (compatible con Bootstrap .is-invalid) */
.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 .2rem rgba(192,57,43,.12) !important;
}

.invalid-text {
    color: var(--danger);
    font-size: .85rem;
    margin-top: .25rem;
}

/* ====== Pie del paso ====== */
.wiz-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e7ecf2;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

    .btn-primary:hover {
        background: var(--brand-600);
        border-color: var(--brand-600);
    }

    .btn-primary:disabled, .btn:disabled {
        background: #dfe4ea;
        border-color: #dfe4ea;
        color: #8b919a;
    }

/* ====== Responsivo ====== */
@media (max-width: 576px) {
    .wiz-steps {
        gap: .25rem;
    }

    .wiz-label {
        display: none;
    }
    /* deja solo los puntos en muy pequeño */
}

/* ====== Accesibilidad ====== */
@media (prefers-reduced-motion: reduce) {
    .wiz-progress {
        transition: none;
    }
}

/* Spinner pequeño dentro de inputs */
.input-wait {
    position: relative;
}

    .input-wait .mini-spinner {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #d9e1ea;
        border-top-color: var(--brand);
        animation: spin .8s linear infinite;
        display: none;
    }

    .input-wait.loading .mini-spinner {
        display: block;
    }

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

#espCalendar .col, #medCalendar .col {
    text-align: center;
}

    #espCalendar .col .btn, #medCalendar .col .btn {
        padding: .35rem .25rem;
        line-height: 1.1;
    }

#espCalendar .fw-semibold, #medCalendar .fw-semibold {
    font-size: .95rem;
}


/* === Calendario mensual compacto (usa tokens existentes) === */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: .5rem;
    margin-top: .5rem;
}

    .calendar-grid .dow {
        text-align: center;
        font-weight: 600;
        color: var(--muted);
    }

    .calendar-grid .day {
        text-align: center;
    }

        .calendar-grid .day .btn {
            width: 100%;
            padding: .35rem .25rem;
            line-height: 1.15;
            border-radius: 12px;
            border-color: #d9e1ea;
        }

            .calendar-grid .day .btn.btn-outline-primary {
                color: var(--brand);
                border-color: var(--brand);
            }

                .calendar-grid .day .btn.btn-outline-primary:hover {
                    background: color-mix(in srgb, var(--brand) 10%, white);
                }

.count-badge {
    display: inline-block;
    min-width: 22px;
    padding: .1rem .35rem;
    border-radius: 999px;
    font-size: .8rem;
    background: color-mix(in srgb, var(--brand) 18%, white);
    color: var(--brand-600);
}

/* Ajustes pills de hora (slot) coherentes con tokens) */
.slot {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid #e5e7eb;
    background: var(--card);
    border-radius: 999px;
    padding: .35rem .7rem;
    margin: .25rem;
    font-weight: 600;
}

    .slot:hover {
        background: color-mix(in srgb, var(--brand) 10%, white);
        border-color: var(--brand);
    }

/* ====== Aditivos para Confirmación elegante ====== */
.avatar-md {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.bg-brand-subtle {
    background: color-mix(in srgb, var(--brand) 12%, white);
}

.text-brand-ink {
    color: var(--brand-600);
}

/* Tarjeta seccional dentro del wizard */
.section-card {
    background: var(--card);
    border: 1px solid #e7ecf2;
    border-radius: 14px;
    padding: 1rem;
}

    .section-card + .section-card {
        margin-top: 1rem;
    }

.section-head {
    display: flex;
    align-items: center;
    padding-bottom: .6rem;
    margin-bottom: .8rem;
    border-bottom: 1px dashed #e7ecf2;
    color: #2c3343;
}

/* Observaciones */
.obs-box {
    background: #fcfdff;
    border: 1px solid #e7ecf2;
    border-radius: 12px;
    padding: .85rem 1rem;
    line-height: 1.5;
    white-space: pre-wrap; /* respeta saltos de línea si llegan desde BD */
}

.obs-empty {
    color: var(--muted);
    background: #fff;
    border-style: dashed;
}

/* Pie pegajoso en móviles para tener acciones siempre visibles */
.sticky-actions {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,.96) 60%, rgba(255,255,255,0));
    backdrop-filter: saturate(1.1) blur(2px);
}

/* Ajustes responsivos finos */
@media (max-width: 576px) {
    .wiz-header .wiz-title {
        font-size: 1rem;
    }

    .avatar-lg {
        width: 56px;
        height: 56px;
    }

    .section-card {
        padding: .85rem;
    }

    .section-head {
        margin-bottom: .6rem;
        padding-bottom: .5rem;
    }
}

a.boton {
    display: inline-flex;
    padding: 0.5em 1em;
    background: var(--card);
    color: black; /* color del texto */
    text-decoration: none; /* quitar subrayado */
    border: 1px solid #e5e7eb;
    border-radius: 999px; /* bordes redondeados */
    font-weight: 600;
    cursor: pointer;
}

    a.boton:hover {
        background: color-mix(in srgb, var(--brand) 10%, white);
        border-color: var(--brand);
    }

    a.boton:active {
        color: var(--ink);
    }

    /*a.boton:focus {
        outline: 2px solid #80bdff;*/ /* accesibilidad */
        /*outline-offset: 2px;
    }*/