/* Paleta institucional — Mundo Psicopedagógico */
:root {
    --mp-blue: #123CCF;
    --mp-blue-2: #2744D6;
    --mp-orange: #F75A1F;
    --mp-turquoise: #55C5B8;
    --mp-magenta: #EC1697;
    --mp-yellow: #F7D20A;
    --mp-bg: #F5F6F8;
    --mp-text: #1F1F1F;
    --mp-card-radius: 0.75rem;
    --mp-shadow: 0 0.35rem 1rem rgba(18, 60, 207, 0.08);
    --mp-shadow-lg: 0 0.75rem 2rem rgba(31, 31, 31, 0.08);
    /* Mismo valor que el gutter vertical de Bootstrap `.row.g-3` */
    --mp-form-section-gap: 1rem;
}

html {
    scroll-behavior: smooth;
}

body.app-body,
body.login-body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mp-text);
    background-color: var(--mp-bg);
    min-height: 100vh;
}

.text-brand {
    color: var(--mp-blue);
}

.text-turquoise {
    color: var(--mp-turquoise);
}

.tracking-wide {
    letter-spacing: 0.06em;
}

/* Login */
.login-body {
    position: relative;
    overflow-x: hidden;
}

.login-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
            radial-gradient(1200px 600px at 10% -10%, rgba(18, 60, 207, 0.12), transparent 55%),
            radial-gradient(900px 500px at 100% 20%, rgba(85, 197, 184, 0.18), transparent 50%),
            radial-gradient(700px 400px at 50% 100%, rgba(247, 90, 31, 0.08), transparent 45%),
            var(--mp-bg);
}

.login-main {
    min-height: 100vh;
}

.login-card {
    width: 100%;
    max-width: 28rem;
    border-radius: var(--mp-card-radius);
    box-shadow: var(--mp-shadow-lg);
}

.login-logo-wrap {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(18, 60, 207, 0.08), rgba(85, 197, 184, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

.login-logo {
    object-fit: contain;
    max-height: 100%;
}

.alert-danger-soft {
    background-color: rgba(247, 90, 31, 0.1);
    color: #8a3410;
}

.alert-success-soft {
    background-color: rgba(85, 197, 184, 0.2);
    color: #1d5c54;
}

.slogan {
    font-size: 0.95rem;
}

/* Navbar */
.app-navbar {
    background: linear-gradient(90deg, var(--mp-blue) 0%, var(--mp-blue-2) 100%);
}

.brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.1rem;
}

/* Main app */
.app-main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Module cards */
.module-card {
    border-radius: var(--mp-card-radius);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mp-shadow-lg) !important;
}

.module-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
}

.module-icon--primary {
    background: var(--mp-blue);
}

.module-icon--turquoise {
    background: var(--mp-turquoise);
}

.module-icon--orange {
    background: var(--mp-orange);
}

.module-icon--magenta {
    background: var(--mp-magenta);
}

/* Buttons — primario institucional */
.btn-primary,
.app-btn-primary {
    --bs-btn-bg: var(--mp-blue);
    --bs-btn-border-color: var(--mp-blue);
    --bs-btn-hover-bg: var(--mp-blue-2);
    --bs-btn-hover-border-color: var(--mp-blue-2);
    --bs-btn-active-bg: var(--mp-blue-2);
    --bs-btn-active-border-color: var(--mp-blue-2);
    --bs-btn-focus-shadow-rgb: 18, 60, 207;
    font-weight: 600;
}

.btn-primary:focus-visible,
.app-btn-primary:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(18, 60, 207, 0.25);
}

/**
 * Cuerpo de formulario dentro de tarjetas: varias `.row.g-3` como hijos directos.
 * El `gap` vertical coincide con el gutter de Bootstrap `g-3` (1rem) para que
 * el ritmo sea el mismo que entre columnas al hacer wrap en una sola fila.
 */
.mp-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--mp-form-section-gap);
}

/* Form controls focus */
.form-control:focus {
    border-color: rgba(18, 60, 207, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(18, 60, 207, 0.15);
}

/* Acento decorativo sutil en badges (amarillo solo como detalle) */
.badge.border {
    border-color: rgba(31, 31, 31, 0.08) !important;
}

/* Pacientes — completitud de ficha */
.badge-completion-incomplete {
    background-color: rgba(247, 90, 31, 0.15);
    color: #9a3412;
    border: 1px solid rgba(247, 90, 31, 0.35);
}

.badge-completion-basic {
    background-color: rgba(247, 210, 10, 0.25);
    color: #854d0e;
    border: 1px solid rgba(247, 210, 10, 0.5);
}

.badge-completion-complete {
    background-color: rgba(85, 197, 184, 0.25);
    color: #0f766e;
    border: 1px solid rgba(85, 197, 184, 0.45);
}

.patient-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5c5c5c;
}

/* Entrada/salida — selector de pacientes */
.associated-patients-inner {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(18, 60, 207, 0.12) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.associated-patients--emphasis .associated-patients-inner {
    border-color: rgba(18, 60, 207, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(18, 60, 207, 0.08);
    background: rgba(18, 60, 207, 0.03);
}

.associated-patients--muted .associated-patients-inner {
    opacity: 0.92;
}

.associated-patients.is-invalid-section .associated-patients-inner {
    border-color: rgba(220, 53, 69, 0.45) !important;
}

.patient-picker-empty-state {
    background: rgba(245, 246, 248, 0.9);
    border: 1px dashed rgba(31, 31, 31, 0.12);
}

.patient-picker-chip .btn-outline-danger:hover {
    color: #fff;
}