/* ══════════════════════════════════════════════════════════════════════ Piel Financial Running para el back-office · 2026 · Closing The Bell Sólo CSS: la máquina (login, registros, cupones, sponsors) no se toca. Se carga AL FINAL del para ganar el cascade a Bootstrap/Webflow. ══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:wght@400;600;700;800;900&display=swap'); :root{ --fr-tinta:#0b0b0e; --fr-panel:#131318; --fr-panel2:#17171d; --fr-borde:rgba(255,222,0,.25); --fr-borde2:rgba(255,255,255,.09); --fr-oro:#FFDE00; --fr-oro2:#ffe97a; --fr-texto:#e8e8ec; --fr-sec:#9aa3b2; /* variables de Bootstrap 5: el modo oscuro sin tocar el HTML */ --bs-body-bg:var(--fr-tinta); --bs-body-color:var(--fr-texto); --bs-border-color:var(--fr-borde2); /* DataTables 2.x pinta el con --dt-html-background, que por omision es blanco: sobre el tema oscuro dejaba texto casi blanco sobre blanco (Cupones se veia "en blanco"). Aqui se le dan los mismos valores que usa su propio modo oscuro. */ --dt-html-background:var(--fr-panel); --dt-row-hover:255,255,255; --dt-row-stripe:255,255,255; --dt-column-ordering:255,255,255; } html,body{background:var(--fr-tinta) !important;color:var(--fr-texto) !important; font-family:'Lora',Georgia,serif !important;} h1,h2,h3,h4,h5,label,.nav-link,button,.btn,th{font-family:'Poppins',Arial,sans-serif !important;} h1{color:#fff !important;font-weight:800 !important;font-size:26px !important; letter-spacing:.3px;margin:26px 0 6px !important;} h1::after{content:'';display:block;width:56px;height:4px;background:var(--fr-oro); border-radius:2px;margin:12px auto 0;} /* ── navegación ─────────────────────────────────────────────────────── */ nav.navbar, .navbar{background:#0e0e12 !important;border-bottom:1px solid var(--fr-borde) !important; padding:10px 22px !important;} .navbar .nav-link{color:var(--fr-texto) !important;font-weight:600 !important;font-size:13.5px !important; letter-spacing:.5px;border-radius:8px;padding:8px 14px !important;transition:color .15s,background .15s;} .navbar .nav-link:hover{color:var(--fr-oro) !important;background:rgba(255,222,0,.08);} .navbar .navbar-brand{color:#fff !important;font-weight:800 !important;} .navbar-toggler{background:var(--fr-panel) !important;border:1px solid var(--fr-borde2) !important;} /* ── tablas (Registros / Cupones / Sponsors) ────────────────────────── */ .table{--bs-table-bg:transparent;--bs-table-color:var(--fr-texto); --bs-table-striped-bg:rgba(255,255,255,.028);--bs-table-striped-color:var(--fr-texto); --bs-table-hover-bg:rgba(255,222,0,.06);--bs-table-hover-color:#fff; --bs-table-border-color:var(--fr-borde2); border-color:var(--fr-borde2) !important;font-size:13.5px;} .table thead th{background:var(--fr-panel2) !important;color:var(--fr-oro) !important; font-size:11px !important;letter-spacing:1.5px;text-transform:uppercase; border-bottom:1px solid var(--fr-borde) !important;white-space:nowrap;padding:12px 10px !important;} .table td{vertical-align:middle;font-variant-numeric:tabular-nums;color:var(--fr-texto) !important;} .table-responsive{background:var(--fr-panel);border:1px solid var(--fr-borde2); border-radius:14px;padding:6px 10px 10px;} /* ── DataTables: buscador, botones de export, paginación ────────────── */ .dataTables_wrapper{color:var(--fr-sec) !important;} .dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate, div.dt-container .dt-info,div.dt-container .dt-search,div.dt-container .dt-length{ color:var(--fr-sec) !important;font-family:'Poppins',Arial,sans-serif;font-size:12.5px;} .dataTables_filter input,.dt-search input,.dataTables_length select,.dt-length select{ background:var(--fr-panel) !important;color:var(--fr-texto) !important; border:1px solid var(--fr-borde2) !important;border-radius:9px !important;padding:7px 12px !important; outline:none !important;} .dataTables_filter input:focus,.dt-search input:focus{border-color:var(--fr-oro) !important;} .dt-buttons .dt-button, .dt-button{background:var(--fr-panel) !important;color:var(--fr-oro2) !important; border:1px solid var(--fr-borde) !important;border-radius:9px !important; font-family:'Poppins',Arial,sans-serif !important;font-size:12px !important;font-weight:700 !important; padding:8px 16px !important;margin-right:8px !important;background-image:none !important;} .dt-buttons .dt-button:hover,.dt-button:hover{background:rgba(255,222,0,.14) !important;color:#fff !important;} .dataTables_paginate .paginate_button,.dt-paging .dt-paging-button{ color:var(--fr-sec) !important;border-radius:8px !important;border:1px solid transparent !important;background:none !important;} .dataTables_paginate .paginate_button.current,.dt-paging .dt-paging-button.current{ background:var(--fr-oro) !important;color:#0b0b0e !important;font-weight:700 !important;border-color:var(--fr-oro) !important;} .dataTables_paginate .paginate_button:hover,.dt-paging .dt-paging-button:hover{ background:rgba(255,222,0,.12) !important;color:#fff !important;} /* Las variables de arriba cubren el 90 %, pero DataTables pinta bordes y contenedores con negros translucidos que sobre tinta no se ven, y el contenedor de scrollX (scrollX:true en Cupones y Registros) trae su propio fondo. Se fuerzan aqui. */ table.dataTable>tbody>tr,div.dt-scroll,div.dt-scroll-head,div.dt-scroll-body, div.dt-scroll-foot,div.dt-container,div.dataTables_scroll{background-color:transparent !important;} table.dataTable>thead>tr>th,table.dataTable>thead>tr>td{ border-bottom:1px solid var(--fr-borde) !important;} table.dataTable.row-border>tbody>tr>*,table.dataTable.display>tbody>tr>*, table.dataTable>tbody>tr>*{border-top-color:var(--fr-borde2) !important;} div.dt-container.dt-empty-footer .dt-scroll-body, div.dt-container.dt-empty-footer tbody>tr:last-child>*{ border-bottom-color:var(--fr-borde2) !important;} div.dt-scroll-head table.dataTable{border-bottom:none !important;} table.dataTable th.dt-orderable-asc span.dt-column-order::before, table.dataTable th.dt-orderable-desc span.dt-column-order::after{color:var(--fr-oro) !important;} /* ── botones ────────────────────────────────────────────────────────── */ .btn,button[type=submit],input[type=submit]{border-radius:10px !important; font-weight:700 !important;letter-spacing:.4px;font-size:13.5px !important; transition:transform .15s ease,box-shadow .15s ease;} .btn:hover{transform:translateY(-1px);} .btn-primary,.btn-success,button[type=submit],input[type=submit]{ background:linear-gradient(135deg,var(--fr-oro),#ffc400) !important;color:#0b0b0e !important; border:none !important;box-shadow:0 6px 16px rgba(255,196,0,.25);} .btn-secondary,.btn-info{background:var(--fr-panel2) !important;color:var(--fr-texto) !important; border:1px solid var(--fr-borde2) !important;} .btn-danger{background:transparent !important;color:#ff8a8a !important;border:1px solid rgba(255,110,110,.4) !important;} .btn-danger:hover{background:rgba(255,110,110,.12) !important;} .btn-warning{background:transparent !important;color:var(--fr-oro2) !important;border:1px solid var(--fr-borde) !important;} /* ── formularios y modales ──────────────────────────────────────────── */ .form-control,.form-select,input[type=text],input[type=password],input[type=email], input[type=number],input[type=date],select,textarea{ background:var(--fr-panel) !important;color:var(--fr-texto) !important; border:1px solid var(--fr-borde2) !important;border-radius:10px !important; padding:10px 14px !important;font-family:'Lora',Georgia,serif !important;} .form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{ border-color:var(--fr-oro) !important;box-shadow:0 0 0 3px rgba(255,222,0,.15) !important;outline:none !important;} ::placeholder{color:#6b7688 !important;} label{color:var(--fr-sec) !important;font-size:12px !important;font-weight:600 !important;letter-spacing:.5px;} .modal-content{background:var(--fr-panel) !important;color:var(--fr-texto) !important; border:1px solid var(--fr-borde) !important;border-radius:16px !important; box-shadow:0 24px 70px rgba(0,0,0,.6) !important;} .modal-header{border-bottom:1px solid var(--fr-borde2) !important;} .modal-footer{border-top:1px solid var(--fr-borde2) !important;} .modal-title{color:#fff !important;font-weight:800 !important;} .btn-close{filter:invert(1) grayscale(1);} /* ── tarjetas / contenedores genéricos ──────────────────────────────── */ .card,.panel,.well{background:var(--fr-panel) !important;color:var(--fr-texto) !important; border:1px solid var(--fr-borde2) !important;border-radius:14px !important;} .container,.container-fluid{max-width:1280px;} a{color:var(--fr-oro2);} a:hover{color:#fff;} /* ── login (index.php, plantilla Webflow) ───────────────────────────── */ .w-form,.form-block,form{color:var(--fr-texto);} body > img, .imagen-login{filter:none;} [class*="hero"],[class*="section"]{background:transparent !important;} /* barras de scroll a juego */ ::-webkit-scrollbar{height:10px;width:10px} ::-webkit-scrollbar-track{background:var(--fr-tinta)} ::-webkit-scrollbar-thumb{background:#2a2a32;border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:#3a3a44} /* ── remates tras el primer vistazo ─────────────────────────────────── */ /* Botones sin clase (los filtros TODO / PORTAL del dashboard): chips FR */ button:not([class]){background:var(--fr-panel) !important;color:var(--fr-oro2) !important; border:1px solid var(--fr-borde) !important;border-radius:30px !important; font-size:11.5px !important;font-weight:700 !important;padding:8px 18px !important; cursor:pointer;letter-spacing:1.2px;text-transform:uppercase;margin-right:4px; transition:background .15s,color .15s;} button:not([class]):hover{background:rgba(255,222,0,.15) !important;color:#fff !important;} /* El "Entrar" del login viene como btn-info: es el CTA — va en oro */ .btn-info{background:linear-gradient(135deg,var(--fr-oro),#ffc400) !important; color:#0b0b0e !important;border:none !important; box-shadow:0 6px 16px rgba(255,196,0,.25);font-weight:800 !important;} .btn-info:hover{color:#0b0b0e !important;} /* La tarjeta del login (borde blanco Webflow) — a juego con la marca */ [style*="border: 3px solid"],[style*="border:3px solid"]{border:1px solid var(--fr-borde) !important; background:var(--fr-panel) !important;border-radius:20px !important; box-shadow:0 24px 60px rgba(0,0,0,.5) !important;}