@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --primary-color: #D783B2;
    --primary-hover-color: #C96AA0;
    --accent-color: #5FAFD4;
    --accent-hover-color: #4A9BC1;
    --primary-soft: #F8EAF2;
    --accent-soft: #EAF6FB;
    --bg-soft: #FFF9FC;
    --bg-strong: #FFF2F8;
    --surface-color: #FFFFFF;
    --surface-muted: #FFF7FB;
    --text-color: #2F3341;
    --text-muted: #6B7280;
    --border-color: rgba(215, 131, 178, 0.22);
    --border-strong: rgba(95, 175, 212, 0.24);
    --shadow-soft: 0 16px 40px rgba(215, 131, 178, 0.12);
    --shadow-strong: 0 18px 38px rgba(95, 175, 212, 0.16);
    --card-lift-y: -6px;
    --card-scale: 1.01;
    --card-transition-duration: 420ms;
    --card-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    background:
        radial-gradient(circle at top right, rgba(95, 175, 212, 0.12), transparent 28%),
        radial-gradient(circle at top left, rgba(215, 131, 178, 0.14), transparent 34%),
        linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 100%);
    color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.stat-value {
    font-family: 'Philosopher', Georgia, serif;
}

p,
small,
label,
input,
select,
textarea,
button,
.btn,
.nav-link,
.table,
.alert,
.form-text,
.text-muted,
.section-kicker,
.page-kicker,
.landing-badge,
.stat-label {
    font-family: 'Poppins', Arial, sans-serif;
}

a {
    color: var(--accent-color);
}

a:hover {
    color: var(--accent-hover-color);
}

.login-page {
    min-height: 100vh;
    background-image:
        linear-gradient(rgba(255, 249, 252, 0.9), rgba(255, 249, 252, 0.92)),
        url('fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.navbar-soft {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 28px rgba(47, 51, 65, 0.06);
}

.brand-with-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-color);
    text-decoration: none;
}

.brand-with-logo:hover {
    color: var(--primary-color);
}

.brand-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(215, 131, 178, 0.22));
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(215, 131, 178, 0.15), rgba(95, 175, 212, 0.2));
    border: 1px solid rgba(215, 131, 178, 0.24);
    box-shadow: var(--shadow-soft);
}

.brand-mark img {
    width: 44px;
    height: 44px;
}

.card-soft {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
}

.card-soft,
.landing-feature-card,
.landing-section-card,
.info-tile,
.stat-card {
    transition:
        opacity var(--card-transition-duration) var(--card-transition-easing),
        transform var(--card-transition-duration) var(--card-transition-easing),
        box-shadow var(--card-transition-duration) var(--card-transition-easing),
        border-color var(--card-transition-duration) ease,
        background-color var(--card-transition-duration) ease;
    will-change: transform;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

.page-card {
    overflow: hidden;
}

.page-card .card-body {
    position: relative;
}

.page-card .card-body::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.section-kicker,
.page-kicker,
.landing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(215, 131, 178, 0.14), rgba(95, 175, 212, 0.16));
    color: var(--primary-color);
    border: 1px solid rgba(215, 131, 178, 0.16);
    font-size: 0.9rem;
    font-weight: 600;
}

.section-title {
    font-weight: 700;
    color: var(--text-color);
}

.landing-main {
    background-image: radial-gradient(circle at top right, rgba(95, 175, 212, 0.16), transparent 42%);
}

.landing-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 251, 0.95)),
        linear-gradient(135deg, rgba(215, 131, 178, 0.08), rgba(95, 175, 212, 0.08));
}

.landing-hero::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -30px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 175, 212, 0.18), transparent 68%);
    pointer-events: none;
}

.landing-copy {
    max-width: 760px;
    color: var(--text-muted) !important;
}

.landing-feature-card,
.landing-section-card,
.info-tile {
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 251, 0.88));
    border: 1px solid rgba(215, 131, 178, 0.16);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(47, 51, 65, 0.05);
}

.landing-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(234, 246, 251, 0.7));
    border: 1px solid rgba(95, 175, 212, 0.2);
}

.landing-cta::before {
    content: "";
    position: absolute;
    inset: auto -40px -70px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 131, 178, 0.16), transparent 65%);
}

.brand-badge-primary,
.brand-badge-accent,
.brand-badge-neutral {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.brand-badge-primary {
    background: var(--primary-soft);
    color: var(--primary-color);
    border: 1px solid rgba(215, 131, 178, 0.2);
}

.brand-badge-accent {
    background: var(--accent-soft);
    color: var(--accent-hover-color);
    border: 1px solid rgba(95, 175, 212, 0.22);
}

.brand-badge-neutral {
    background: rgba(47, 51, 65, 0.06);
    color: var(--text-color);
    border: 1px solid rgba(47, 51, 65, 0.08);
}

.btn {
    border-radius: 12px;
    font-weight: 600;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #C76D9E);
    border-color: var(--primary-color);
    box-shadow: 0 10px 22px rgba(215, 131, 178, 0.24);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--primary-hover-color), #B85F92);
    border-color: var(--primary-hover-color);
}

.btn-outline-secondary,
.btn-outline-primary {
    color: var(--accent-hover-color);
    border-color: rgba(95, 175, 212, 0.42);
    background: rgba(255, 255, 255, 0.72);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #ffffff;
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-link {
    color: var(--primary-color);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--primary-hover-color);
}

.form-control,
.form-select {
    border-radius: 14px;
    border-color: rgba(47, 51, 65, 0.12);
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(95, 175, 212, 0.65);
    box-shadow: 0 0 0 0.2rem rgba(95, 175, 212, 0.18);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.alert {
    border-radius: 16px;
    border-width: 1px;
}

.alert-success {
    color: #1F5E4F;
    background-color: #EBFAF4;
    border-color: #BEE8D8;
}

.alert-warning {
    color: #7A4F15;
    background-color: #FFF8E8;
    border-color: #F6D79A;
}

.alert-danger {
    color: #7B2845;
    background-color: #FDF0F5;
    border-color: #F1BCD1;
}

.alert-info {
    color: #1F5972;
    background-color: #ECF7FC;
    border-color: #B8DEED;
}

.nav-tabs {
    border-bottom-color: rgba(215, 131, 178, 0.18);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border-radius: 14px 14px 0 0;
}

.nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    background: rgba(215, 131, 178, 0.08);
    border-color: rgba(215, 131, 178, 0.18) rgba(215, 131, 178, 0.18) transparent;
    font-weight: 700;
}

.table thead th {
    color: var(--text-color);
    font-size: 0.9rem;
    background: rgba(248, 234, 242, 0.45);
    border-bottom-color: rgba(215, 131, 178, 0.18);
}

.table td,
.table th {
    vertical-align: middle;
}

.modal-content {
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-strong);
}

.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 175, 212, 0.16), transparent 70%);
}

.stat-label {
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.soft-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 246, 251, 0.34));
    border: 1px solid var(--border-strong);
    border-radius: 18px;
}

@media (max-width: 767.98px) {
    .brand-with-logo {
        gap: 0.5rem;
    }

    .brand-logo {
        width: 30px;
        height: 30px;
    }

    .card-soft {
        border-radius: 18px;
    }

    .landing-hero::after,
    .landing-cta::before {
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-soft,
    .landing-feature-card,
    .landing-section-card,
    .info-tile,
    .stat-card {
        transition: none;
    }

    .reveal-on-scroll,
    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: none;
    }
}