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

:root {
    --rt-bg-a: #050b19;
    --rt-bg-b: #0a1224;
    --rt-bg-c: #071a2c;
    --rt-surface: rgba(8, 15, 31, 0.74);
    --rt-surface-strong: rgba(15, 26, 51, 0.86);
    --rt-line: rgba(255, 255, 255, 0.18);
    --rt-title: #f4f8ff;
    --rt-text: #eaf1ff;
    --rt-text-soft: #d3ddf3;
    --rt-brand: #22d3ee;
    --rt-brand-2: #34d399;
    --rt-brand-warn: #f59e0b;
    --rt-shadow: 0 18px 36px rgba(2, 6, 23, 0.34);
}

body {
    margin: 0;
    font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
    color: var(--rt-text);
    background:
        radial-gradient(circle at 15% 18%, rgba(52, 211, 153, 0.22) 0%, transparent 36%),
        radial-gradient(circle at 84% 15%, rgba(34, 211, 238, 0.22) 0%, transparent 34%),
        linear-gradient(160deg, var(--rt-bg-a) 0%, var(--rt-bg-b) 45%, var(--rt-bg-c) 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: "Sora", "Manrope", sans-serif;
    color: var(--rt-title);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

p, label, small, span {
    color: inherit;
}

a.title-link,
a.app-logo,
a.logo {
    color: var(--rt-title) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid var(--rt-line) !important;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

a.title-link:hover,
a.app-logo:hover,
a.logo:hover {
    opacity: 0.92;
}

.login-card,
.landing-container,
.card,
.grid-item,
.checklist-item,
.equipo-card-numeric,
.equipo-section,
.checklist-section,
.navigation-footer,
.selector-header .header-content,
.app-header-main,
.app-header,
.main-footer,
.dashboard-footer,
.app-footer {
    background: var(--rt-surface);
    border: 1px solid var(--rt-line);
    border-radius: 16px;
    box-shadow: var(--rt-shadow);
    backdrop-filter: blur(3px);
}

.grid-item,
.card,
.login-card,
.landing-container,
.navigation-footer,
.checklist-item,
.equipo-card-numeric,
.equipo-section,
.checklist-section,
.item-card {
    color: var(--rt-text);
}

.card p,
.card label,
.card small,
.checklist-item p,
.checklist-item label,
.item-details p,
.module-content p,
.block-info,
.input-group label,
.input-group .equipo-helper-text {
    color: var(--rt-text);
}

.block-info {
    background: rgba(20, 39, 63, 0.92) !important;
    border: 1px solid rgba(82, 214, 167, 0.5) !important;
    border-left: 4px solid rgba(52, 211, 153, 0.95) !important;
    color: #edf6ff !important;
}

.app-header-main,
.selector-header,
.app-header {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--rt-line);
    border-radius: 20px;
}

.app-header-main h1,
.app-header-main p,
.selector-header h1,
.selector-header p,
.selector-header .breadcrumb,
.app-header h1,
.app-header p {
    color: var(--rt-title);
}

.selector-header .breadcrumb,
.breadcrumb,
.tag {
    border: 1px solid rgba(34, 211, 238, 0.34);
    background: rgba(34, 211, 238, 0.14);
    color: #c5f8ff;
}

.input-wrapper input,
.input-group input,
.input-group select,
.input-group textarea,
select,
textarea,
input {
    color: var(--rt-title);
    background: rgba(14, 31, 56, 0.82);
    border: 1px solid rgba(160, 196, 255, 0.35);
}

.input-wrapper input:focus,
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
select:focus,
textarea:focus,
input:focus {
    background: rgba(18, 38, 66, 0.95);
    border-color: rgba(34, 211, 238, 0.7);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
    outline: none;
}

.input-wrapper input::placeholder,
.input-group input::placeholder,
.input-group textarea::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--rt-text-soft);
}

.input-wrapper i,
.module-arrow,
.action,
.item-footer,
.login-footer,
.dashboard-footer p,
.main-footer p,
.header-welcome p,
.module-content p,
.item-details p,
.card p,
.block-info,
.geo-status,
.hint {
    color: var(--rt-text-soft);
}

.module-content h3,
.item-details h3,
.card h3,
.checklist-section h4,
.login-header h1 {
    color: var(--rt-title);
}

.item-num,
.item-info span,
.logo,
.app-logo,
.title-link {
    color: #ffffff;
}

.btn-check,
.btn-opt {
    background: rgba(167, 195, 224, 0.3);
    border-color: rgba(191, 214, 240, 0.5);
    color: #eaf3ff;
}

.btn-check:hover,
.btn-opt:hover {
    background: rgba(183, 210, 236, 0.42);
    border-color: rgba(196, 227, 255, 0.72);
    color: #f7fbff;
}

.btn-note {
    background: rgba(148, 172, 196, 0.45);
    color: #f3f8ff;
    border: 1px solid rgba(196, 214, 236, 0.45);
}

.btn-note:hover {
    background: rgba(168, 191, 214, 0.58);
    color: #ffffff;
}

.checklist-item .button-group .btn-check,
.checklist-item .button-group .btn-opt,
.checklist-item .button-group .btn-note {
    background: rgba(32, 56, 88, 0.88) !important;
    border: 1px solid rgba(140, 173, 212, 0.45) !important;
    color: #eaf3ff !important;
}

.checklist-item .button-group .btn-check:hover,
.checklist-item .button-group .btn-opt:hover,
.checklist-item .button-group .btn-note:hover {
    background: rgba(46, 74, 108, 0.92) !important;
    border-color: rgba(169, 203, 241, 0.62) !important;
    color: #f8fbff !important;
}

.btn-login,
.btn-submit,
.cta-button,
.btn-primary,
.primary-action,
.btn-back,
.btn-main {
    background-image: linear-gradient(135deg, var(--rt-brand), var(--rt-brand-2));
    border: none;
    color: #08202a;
}

.btn-reset,
.btn-secondary-outline,
.btn-back,
.btn-alt,
.btn-secondary {
    border: 1px solid var(--rt-line);
    color: var(--rt-title);
    background: rgba(255, 255, 255, 0.06);
}

.btn-secondary-outline,
.btn-back {
    text-decoration: none;
}

.primary-action,
.btn-file,
.btn-geo,
.btn-main {
    color: #08202a;
    font-weight: 700;
}

.btn-file {
    background: linear-gradient(135deg, var(--rt-brand), var(--rt-brand-2));
}

.app-footer,
.dashboard-footer,
.main-footer,
.navigation-footer {
    background: var(--rt-surface-strong);
}

.login-page,
.selector-body,
.dashboard-body {
    color: var(--rt-text);
}

@media (max-width: 768px) {
    body {
        background:
            radial-gradient(circle at 20% 8%, rgba(34, 211, 238, 0.16), transparent 36%),
            linear-gradient(160deg, #050b19, #0b1b33);
    }
}