/* * ================================================== * GLOBAL CSS — VIDELCA (SECURITY/NIGHT-VISION) v1.4 * ================================================== * Implementa un layout condicional basado en la clase 'with-sidebar' en el . */ /* ---------- Variables y Preferencias de Usuario ---------- */ :root{ /* Fondo y texto (navy profundo) */ --bg-0:#0b1220; /* fondo app */ --bg-1:#0f1b31; /* contenedor/elevación 1 */ --bg-2:#132542; /* contenedor/elevación 2 */ --tx-1:#e9f1ff; /* texto principal */ --tx-2:#cfd9ee; /* texto secundario */ --tx-3:#9ab0c8; /* texto tenue */ /* Marca / acentos seguridad */ --brand:#00ff88; /* verde night-vision (principal) */ --brand-strong:#00e07a; --accent-amber:#ffcc00; /* ámbar alerta */ --accent-red:#ff3b3b; /* sirena/alerta crítica */ --accent-info:#7cbcff; /* informativo */ /* Estados */ --ok:#17d07a; --warn:#ffd24b; --err:#ff5b66; --info:#7cbcff; /* Borde vítreo y radios */ --glass-br: rgba(0,255,136,.35); --radius-lg:16px; --radius-md:12px; --radius-sm:10px; /* Focus ring accesible (doble halo) */ --ring:0 0 0 3px rgba(0,255,136,.30), 0 0 0 6px rgba(0,255,136,.16); /* Tipografía */ --font:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } /* Contraste extra si el SO lo pide */ @media (prefers-contrast: more){ :root{ --tx-2:#eaf1ff; --tx-3:#d6e2ff; --glass-br: rgba(0,255,136,.55); } } /* Menos animaciones si el usuario lo pide */ @media (prefers-reduced-motion: reduce){ *{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important} } /* ---------- Base ---------- */ html,body{ background:var(--bg-0); color:var(--tx-1); font-family:var(--font); } h1,h2,h3,h4,h5{color:#fff;letter-spacing:.3px} a{color:var(--brand);text-decoration:none;transition:color .2s,text-shadow .2s} a:hover{color:#fff;text-shadow:0 0 6px rgba(0,255,136,.35)} hr{border-color:rgba(255,255,255,.08)} /* Focus ring global */ button,.btn,input,select,textarea,.page-link,.form-check-input{outline:none!important} button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.page-link:focus-visible,.form-check-input:focus-visible{box-shadow:var(--ring)!important} /* ================================================== */ /* LAYOUT PRINCIPAL (CONDICIONAL CON SIDEBAR) */ /* ================================================== */ .main-content { padding-top: 24px; padding-bottom: 24px; } footer { padding: 14px 0; text-align: center; color: var(--tx-3); border-top: 1px solid var(--glass-br); } @media (min-width: 992px) { .main-content, footer { margin-left: 0; transition: margin-left .2s ease-out; /* Transición suave */ } /* Aplica el margen solo cuando el body tiene la clase 'with-sidebar' */ body.with-sidebar .main-content, body.with-sidebar footer { margin-left: 260px; /* Ancho del sidebar */ } } /* ---------- Formularios / Inputs ---------- */ .form-label{color:var(--tx-2);font-weight:600} .form-control,.form-select,.input-group{ background:rgba(255,255,255,.06); border:1px solid var(--glass-br); color:#fff; border-radius:var(--radius-sm); } .form-control:focus,.form-select:focus{ background:rgba(255,255,255,.09); border-color:var(--brand); box-shadow:var(--ring); } .form-control::placeholder{color:rgba(233,238,247,.55)} .form-control-plaintext{color:#fff} .input-group-text{background:transparent;border:none;color:var(--brand)} /* Checks/Switch */ .form-check-input{background-color:rgba(255,255,255,.08);border:1px solid var(--glass-br)} .form-check-input:checked{background-color:var(--brand);border-color:var(--brand)} /* ---------- Botones ---------- */ .btn{ border:0;border-radius:var(--radius-sm); font-weight:800;letter-spacing:.35px;text-transform:uppercase; padding:.6rem 1rem; transition:filter .15s,transform .1s,box-shadow .2s; } .btn:active{transform:translateY(1px)} .btn-primary{ background: var(--brand); color:#0b1220; border:1px solid var(--brand-strong); box-shadow:0 6px 18px rgba(0,255,136,.18); } .btn-primary:hover{ background: var(--brand-strong); color:#0b1220; filter:brightness(1.06); box-shadow:0 10px 26px rgba(0,255,136,.22); } .btn-secondary{ background:var(--bg-2);color:var(--tx-1);border:1px solid var(--glass-br); } .btn-secondary:hover{background:#223052;border-color:var(--brand)} .btn-success{background:linear-gradient(45deg,#17d07a,#34e494);color:#07130e} .btn-danger{background:linear-gradient(45deg,#ff5b66,#ff7b84);color:#fff} .btn-warning{background:linear-gradient(45deg,#ffd24b,#ffe37e);color:#111} /* ---------- Badges de estado ---------- */ .badge{border-radius:999px;font-weight:800;padding:.35rem .55rem} .badge.bg-success{background:linear-gradient(45deg,#16b66c,#24d981)!important;color:#07130e} .badge.bg-danger{background:linear-gradient(45deg,#ff5b66,#ff7b84)!important; color: #fff;} .badge.bg-warning{background:linear-gradient(45deg,#ffd24b,#ffe37e)!important;color:#111} .badge.bg-info{background:linear-gradient(45deg, #3b9cff, #7cbcff) !important; color: #fff;} /* ---------- Paginación ---------- */ .pagination{margin-top:1rem;justify-content:center} .page-link{ background:rgba(255,255,255,.06); border:1px solid var(--glass-br); color:var(--tx-1); border-radius:var(--radius-sm)!important; margin: 0 4px; } .page-link:hover{background:rgba(0,255,136,.18);border-color:var(--brand)} .page-item.active .page-link{ background:var(--brand);border-color:var(--brand);color:#03180e;font-weight:800; box-shadow:0 0 0 3px rgba(0,255,136,.30) } .page-item.disabled .page-link{color:rgba(233,238,247,.35);border-color:rgba(0,255,136,.22)} /* ---------- Cards / Paneles ---------- */ .card-glass{ background:linear-gradient(180deg, rgba(19,37,66,.55), rgba(11,18,32,.55)); border:1px solid var(--glass-br); border-radius:var(--radius-md); color:var(--tx-1); box-shadow:0 10px 30px rgba(0,0,0,.25); padding: 1.25rem; } /* ---------- Sidebar (si aplicas) ---------- */ .sidebar,.side-nav{background:#0a0f18;color:var(--tx-2)} .sidebar .nav-link,.side-nav .nav-link{color:var(--tx-2)} .sidebar .nav-link.active,.side-nav .nav-link.active{ background:#0f1829;color:#fff;border-left:3px solid var(--brand) } /* ---------- Utilidades ---------- */ .text-dim{color:var(--tx-2)!important} .text-mute{color:var(--tx-3)!important} .bg-elev-1{background:var(--bg-1)} .bg-elev-2{background:var(--bg-2)} .br-brand{border-color:var(--brand)!important} /* ================================================== */ /* ESTILOS DE TABLA (VERSIÓN FINAL Y ROBUSTA) */ /* ================================================== */ /* 1. Contenedor de la tabla */ .table-responsive { background: var(--bg-1); border: 1px solid var(--glass-br); border-radius: var(--radius-md); overflow-x: auto; /* Permite scroll horizontal si la tabla es muy ancha */ overflow-y: hidden; /* Evita el scroll vertical dentro del contenedor */ } /* 2. Estilos base de la tabla (Aquí está la magia) */ .table { --bs-table-bg: transparent; /* Fondo de celda por defecto */ --bs-table-color: var(--tx-1); /* Color de texto por defecto ¡AHORA SÍ! */ --bs-table-striped-bg: rgba(0, 255, 136, .07); /* Fondo de fila con franja */ --bs-table-striped-color: var(--tx-1); /* Color de texto en fila con franja */ --bs-table-hover-bg: rgba(0, 255, 136, .12); /* Fondo de fila en hover */ --bs-table-hover-color: #fff; /* Texto más brillante en hover */ --bs-table-border-color: rgba(0, 255, 136, .2); /* Borde entre filas */ margin-bottom: 0; border-color: var(--bs-table-border-color); } /* 3. Estilos del encabezado */ .table thead { background: var(--bg-2); } .table thead th { color: var(--brand); /* Color de marca para encabezados */ text-transform: uppercase; letter-spacing: .8px; font-size: .85rem; border-bottom: 2px solid var(--glass-br); } /* 4. Celdas y alineación */ .table td, .table th { vertical-align: middle; padding: .9rem .75rem; } .table tbody tr:last-child > * { border-bottom-width: 0; }