/* =========================== SegurosAdmin – Theme CSS Archivo: static/css/seg_amdin.css Requiere: Bootstrap 5 + fuente Inter en el =========================== */ /* --------- Variables y base --------- */ :root{ --sa-bg:#0b1020; --sa-primary:#5dd6ff; --sa-accent:#8b5cf6; --sa-text:#dbeafe; --sa-muted:#94a3b8; --sa-card:rgba(255,255,255,.06); --sa-border:rgba(255,255,255,.08); /* Paleta utilitaria para métricas/etiquetas */ --sa-green:#16a34a; --sa-red:#e11d48; --sa-cyan:#06b6d4; --sa-yellow:#f59e0b; --sa-slate:#64748b; } /* Tipografía y body */ html,body{ font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; } body{ scroll-behavior:smooth; background:var(--sa-bg); color:var(--sa-text); } /* Utilidades de tema */ .sa-muted{color:var(--sa-muted)} .sa-border-top{border-top:1px solid var(--sa-border)} .sa-shadow{box-shadow:0 0 60px rgba(93,214,255,.15)} .sa-title{font-weight:800; letter-spacing:.4px; color:#dbeafe} .sa-subtle{color:var(--sa-muted)} /* Contenedor con fondo del board */ .sa-board{ background:#0b1020; border-radius:16px; padding:1.25rem; } /* --------- Navbar --------- */ .sa-nav{ backdrop-filter: blur(8px); background: rgba(11,16,32,.6); border-bottom:1px solid var(--sa-border); } .sa-nav .nav-link{ color:var(--sa-muted); font-weight:600; } .sa-nav .nav-link:hover{color:#fff} .sa-brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; color:#fff; text-decoration:none; } .sa-brand-badge{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--sa-primary),var(--sa-accent)); box-shadow:0 0 24px rgba(93,214,255,.35); } /* --------- Hero --------- */ .sa-hero{ position:relative; overflow:hidden; background: radial-gradient(900px 500px at 80% -120px, rgba(139,92,246,.35), transparent 60%), radial-gradient(800px 480px at -10% 10%, rgba(93,214,255,.25), transparent 50%), linear-gradient(180deg, #0b1020 0%, #0b1020 60%, #0f172a 100%); } .sa-kicker{ letter-spacing:.18em; text-transform:uppercase; color:var(--sa-muted); } /* CTAs */ .sa-cta-primary{ background: linear-gradient(135deg, var(--sa-primary), var(--sa-accent)); color:#0b1020; border:0; font-weight:700; box-shadow:0 0 40px rgba(93,214,255,.3); } .sa-cta-primary:hover{filter:brightness(1.05)} .sa-cta-ghost{ border:1px solid var(--sa-border); color:#e5ecff; background:transparent; } .sa-cta-ghost:hover{background:rgba(255,255,255,.06)} /* --------- Cards y tablas --------- */ .sa-card{ background:var(--sa-card); border:1px solid var(--sa-border); border-radius:16px; padding:12px; } /* Tablas “glass” */ .sa-table thead th{ position:sticky; top:0; background:rgba(15,23,42,.7); backdrop-filter:blur(6px); color:#e2e8f0; font-weight:700; border-bottom:1px solid var(--sa-border); } .sa-table tbody tr{background:transparent} .sa-table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)} .sa-table td, .sa-table th{border-color:var(--sa-border); color:#e5e7eb} .sa-chip{ display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.8rem; background:rgba(255,255,255,.08); border:1px solid var(--sa-border); color:#e2e8f0; } /* --------- Tarjetas de métricas --------- */ .sa-stat{ background:var(--sa-card); border:1px solid var(--sa-border); border-radius:16px; padding:16px 18px; height:100%; transition:transform .15s ease, box-shadow .15s ease; } .sa-stat:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(93,214,255,.15)} .sa-stat .sa-k{font-size:.95rem; font-weight:600; opacity:.85} .sa-stat .sa-v{font-size:2rem; font-weight:800; line-height:1; margin-top:4px} .sa-stat .sa-link{font-size:.9rem; text-decoration:underline; color:#c7d2fe} /* Barra superior de color en métricas */ .sa-stat::before{ content:""; display:block; height:6px; margin:-16px -18px 10px; border-top-left-radius:16px; border-top-right-radius:16px; } .sa-g::before{ background:linear-gradient(90deg,var(--sa-green),#22c55e)} .sa-r::before{ background:linear-gradient(90deg,var(--sa-red),#fb7185)} .sa-c::before{ background:linear-gradient(90deg,var(--sa-cyan),#22d3ee)} .sa-y::before{ background:linear-gradient(90deg,var(--sa-yellow),#fbbf24)} .sa-s::before{ background:linear-gradient(90deg,var(--sa-slate),#94a3b8)} /* --------- “Dispositivo” para screenshots del hero --------- */ .sa-device{ background: rgba(255,255,255,.06); border: 1px solid var(--sa-border); border-radius: 18px; box-shadow: 0 8px 40px rgba(93,214,255,.18); } .sa-bezel{ border-radius: 12px; border: 1px solid var(--sa-border); } .sa-glow{ position:absolute; right:-20px; top:-20px; width:260px; height:260px; background: radial-gradient(closest-side, var(--sa-accent), transparent 70%); filter: blur(40px); opacity:.35; pointer-events:none; } /* --------- Botones “píldora” para filtros --------- */ .sa-pill{ border:1px solid var(--sa-border); color:#e2e8f0; background:transparent; } .sa-pill.active, .sa-pill:hover{background:rgba(255,255,255,.08)} /* --------- Alertas y modal sobre fondo oscuro --------- */ .alert{border-radius:12px} /* Estilo de alertas de formulario (sustituye tu .custom-form-alert anterior) */ .custom-form-alert{ background:#2a1215 !important; color:#ffd7db !important; border:1px solid #5c1f25 !important; } /* Modal custom que ya usabas */ .modal-custom{ display:none; position:fixed; z-index:1050; inset:0; background:rgba(0,0,0,.55); } .modal-content-custom{ background:#0f172a; color:#fff; margin:10% auto; padding:20px; border-radius:16px; width:92%; max-width:560px; border:1px solid var(--sa-border); } .close-modal{cursor:pointer} /* --------- Ajustes responsivos menores --------- */ @media (max-width: 991.98px){ .sa-v{font-size:1.75rem} .sa-hero .display-4{font-size:2.25rem} } /* Fin del tema */ /* ===== Hero: tamaño fijo y centrado del carrusel ===== */ .sa-frame{ max-width: 560px; /* ajusta a 600 si lo quieres un poco mayor */ width: 100%; margin: 0 auto; /* centrado en mobile */ border-radius: 18px; } .sa-hero .carousel{ background: var(--sa-card); border:1px solid var(--sa-border); } .sa-hero .carousel-inner{ border-radius: 14px; } .sa-hero .carousel-item{ padding: 0; } /* Asegura que las imágenes nunca excedan la caja */ .sa-hero .carousel-item picture, .sa-hero .carousel-item img{ display:block; width:100%; height:auto; border-radius: 12px; } @media (min-width: 992px){ .sa-frame{ margin-left:auto; margin-right:0; } /* alineado a la derecha en desktop */ }