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

/* ============================================================
   RESET UNIVERSAL
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; }
img, video, svg { max-width: 100%; height: auto; display: block; }

/* ============================================================
   VARIABLES
   ============================================================ */
: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);
}

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

body::after {
    content: "Sitio creado por Masari";
    position: fixed; right: 18px; bottom: 14px; z-index: 9999;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(5,11,25,0.5); backdrop-filter: blur(6px);
    color: rgba(234,241,255,0.62);
    font-family: "Sora", "Manrope", sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    pointer-events: none; user-select: none;
    box-shadow: 0 10px 24px rgba(2,6,23,0.22);
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
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);
    margin: 0;
}

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

/* ============================================================
   ENLACES CON ESTILO DE CHIP
   ============================================================ */
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 14px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 0.9rem;
}
a.title-link:hover, a.app-logo:hover, a.logo:hover { opacity: 0.88; }

/* ============================================================
   SUPERFICIES / TARJETAS
   Las clases que son "tarjetas reales" (visibles como bloques)
   reciben fondo, borde y sombra.
   .checklist-section y .equipo-section son INTERNAS y NO
   reciben estilos de tarjeta aqui — se estilizan en el CSS
   especifico del formulario.
   ============================================================ */
.card,
.login-card,
.landing-container,
.grid-item,
.checklist-item,
.equipo-card-numeric,
.navigation-footer,
.app-header-main,
.app-header,
.main-footer,
.dashboard-footer,
.app-footer,
.selector-header .header-content {
    background: var(--rt-surface);
    border: 1px solid var(--rt-line);
    border-radius: 16px;
    box-shadow: var(--rt-shadow);
    backdrop-filter: blur(3px);
    width: 100%;
    box-sizing: border-box;
    color: var(--rt-text);
}

/* Centrado maximo para formularios de login */
.login-card, .landing-container {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Header de aplicacion */
.app-header, .app-header-main {
    background: linear-gradient(140deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
    border-radius: 20px;
}

/* ============================================================
   TEXTOS DENTRO DE TARJETAS
   ============================================================ */
.card p, .card label, .card small,
.checklist-item p, .checklist-item label,
.item-details p, .module-content p,
.input-group label {
    color: var(--rt-text);
}

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

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

/* ============================================================
   BLOQUE DE INFORMACION (bloque verde)
   ============================================================ */
.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;
}

/* ============================================================
   TEXTOS SECUNDARIOS
   ============================================================ */
.geo-status, .hint, .card p,
.item-footer, .login-footer,
.dashboard-footer p, .main-footer p,
.header-welcome p, .item-details p {
    color: var(--rt-text-soft);
}

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

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

/* ============================================================
   INPUTS
   Los inputs nunca desbordan su contenedor.
   ============================================================ */
input, select, textarea,
.input-wrapper input,
.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    color: var(--rt-title);
    background: rgba(14, 31, 56, 0.82);
    border: 1px solid rgba(160, 196, 255, 0.35);
    font-family: "Manrope", sans-serif;
}

input:focus, select:focus, textarea:focus,
.input-wrapper input:focus,
.input-group input:focus,
.input-group select:focus,
.input-group textarea: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::placeholder, textarea::placeholder,
.input-group input::placeholder,
.input-group textarea::placeholder {
    color: var(--rt-text-soft);
}

/* ============================================================
   BOTONES DE CHECKLIST (OK / NA / CN)
   ============================================================ */
.btn-check, .btn-opt {
    background: rgba(167, 195, 224, 0.3);
    border: 1px solid rgba(191, 214, 240, 0.5);
    color: #eaf3ff;
    cursor: pointer;
    font-family: inherit;
}
.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);
    cursor: pointer; font-family: inherit;
}
.btn-note:hover { background: rgba(168, 191, 214, 0.58); color: #fff; }

/* Botones dentro de checklist-item */
.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;
}
.checklist-item .button-group .btn-check.active[data-value="OK"] {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
.checklist-item .button-group .btn-check.active[data-value="NA"] {
    background: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #fff !important;
}
.checklist-item .button-group .btn-check.active[data-value="CN"] {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}

/* ============================================================
   BOTONES PRIMARIOS / SECUNDARIOS
   ============================================================ */
.btn-login, .btn-submit, .cta-button, .btn-primary, .btn-main {
    background: linear-gradient(135deg, var(--rt-brand), var(--rt-brand-2));
    border: none; color: #08202a;
    cursor: pointer; font-family: inherit;
}

.btn-geo, .btn-file, .primary-action {
    background: linear-gradient(135deg, var(--rt-brand), var(--rt-brand-2));
    color: #08202a; font-weight: 700;
    cursor: pointer; font-family: inherit;
}

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

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

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@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);
    }
    body::after { right: 10px; bottom: 10px; font-size: 10px; padding: 5px 9px; }
    .card, .login-card   { border-radius: 14px; }
    .app-header, .app-header-main { border-radius: 14px; }
    h1 { font-size: clamp(1.3rem, 5vw, 1.7rem); }
    h2 { font-size: clamp(1.1rem, 4vw, 1.45rem); }
}

@media (max-width: 640px) {
    .card, .login-card, .checklist-item, .equipo-card-numeric { border-radius: 12px; }
    .app-header, .app-header-main { border-radius: 12px; }
    h3 { font-size: clamp(0.95rem, 3.5vw, 1.1rem); }
    h4 { font-size: clamp(0.85rem, 3vw, 1rem); }
}

@media (max-width: 480px) {
    .card, .login-card { border-radius: 10px; }
    .checklist-item    { border-radius: 10px; }
    .equipo-card-numeric { border-radius: 10px; }
}

@media (max-width: 400px) {
    .login-card, .landing-container { max-width: 100%; }
}