.grid {padding:0 50px 0 50px;}
.grid .grid-subtitulo {font-weight:600; color:#4B5675; font-size:14.3px; padding:0 15px 3px 15px;}
.grid .op {height:46px; padding:10px 0 5px 8px; display:flex; justify-content:space-between; align-items:center;}
.grid .op .titulo {font:20px VVDSCondMed,impact; letter-spacing:0.5px; color:#000;}
.grid .op .titulo i {font-size:19px; color:#8B929C; margin:0 3px 0 0;}

.grid .op .resultados {display: flex; align-items:flex-start; color:#000;}
.grid .op .res-num {font:17.5px VVDSCondMed,impact,arial, font-weight: bold; display:flex; flex-direction:column; align-items:center; margin-right:8px;}
.grid .op .res-can {}
.grid .op .res-pag {font-size:9.5px; margin-top:-2px; font-weight:bold;}
.grid .op .nombreapp {align-items: flex-start; font:23px VVDSCondMed,impact,arial; color:#444; margin-top: -1px;}

.grid .op .botones {1padding:4px; border-radius:6px;}
.grid .fila:after {content:""; display:table; clear:both;}
.grid .tb { width:100%; height:73.5VH;  background:#fff; overflow:auto; border-radius:10px; 1transition: all 0.3s; border:1px solid #F1F1F2; -webkit-box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);}
.grid .tb::-webkit-scrollbar {width:10px; height:10px; background:#F5F5F5; border-radius:20px;}
.grid .tb::-webkit-scrollbar:hover {background: #ffffff;}
.grid .tb::-webkit-scrollbar-thumb {background: #CFD4DA; border-radius: 10px;}
.grid .tb::-webkit-scrollbar-thumb:hover {background:#2265E5;}
.grid .tb::-webkit-scrollbar-track {background:#F5F5F5; border-radius: 20px;}
.grid .tb::-webkit-scrollbar-track:hover {background:#ffffff;}
.grid .tb table {width:100%; border-collapse:collapse;}
.grid .tb table th {height:50px; background:linear-gradient(rgba(255,255,255,0.95), rgba(25,125,255, 0.07)); backdrop-filter: blur(12px); border-bottom:1px solid #F1F1F1; position:sticky; top:0px; z-index:1; vertical-align:top; padding:5px 3px 3px 12px; text-align:left;}
.grid .tb table th span {color:#094EDD; font-size: 15px; cursor: pointer;}
.grid .tb table th span:hover {color:#167BFF; font-weight:700;}
.grid .tb table th i {font-size:14px;}
.grid .tb table th i.orde {background:#FFD43B; padding:2px 4px; border-radius:2px; font-size:14px; color:#183153; FE7006;}
.grid .tb table th i.icon {font-size: 25px; color:#094EDD;}
.grid .tb table th i.icon:hover {color:#FE7006;}
.grid .tb table th:hover {background:#F1FAFF;}
.grid .tb table tr {border-bottom:1px solid #EFF0F2; cursor:pointer; transition: 0.2s;}
.grid .tb table tr:nth-child(even){background:#FAFBFC;}
.grid .tb table tr:hover {background:#F6F9FC; color:#2A3135; border-bottom:1px solid #64C4FD;}
.grid .tb table tr td {height:40px; 1min-width:120px; width:auto; max-width:200px; padding:6px 2px 6px 14px; font-size:15px; color:#000; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.grid .tb .explica {display:flex; flex-direction:row; width:90%; max-width:480px; margin:30px 0 0 0; gap:15px;}
.grid .tb .explica > div {flex:1; padding:4px 20px;justify-content: center;align-items: center;}
.grid .tb .explica .vacio img {width:180px;}
.grid .tb .explica .leer {text-align:left;display:flex;flex-direction:column;border: solid 1px #ccc;
    border-radius: 10px;}
@media (max-width: 768px) {.grid .tb .explica {flex-direction: column;}}

.grid .tb table 11tr.lista:hover {border-bottom:1px solid #ccc;}
.grid .tb table th:hover .frm-input {background:#fff; border:1px solid #1078FF; outline: 0;}
.grid .frm-input {min-width:90px; width:100%; height:28px; margin:6px 0 0 0; padding: 3px 30px 3px 3px; color:#000; border-radius:5px; font:14.5px arial,tahoma; background:#fff; border:1px solid #ccc; transition: 0.2s;}
.grid .frm-input:focus, .grid .frm-input:hover {color:#333333; background:#fff; border:1px solid #1078FF; outline: 0; border-radius:5px; transition: 0.3s;}
.grid .search-btn {height:23px; position:absolute; right:7px; transform:translateY(39%); background:#dbdbdb; border: none; color:#2A3547; font-size: 16px; border-radius:4px; cursor:pointer;}
.grid .search-btn:hover {background:#094EDD; color:#fff;}
.grid .pag {width:35px; height:35px; display:inline-block; font-size:15px; background:#fff; margin:4px 4px 0 2px; border-radius:10px; color:#625EBA; padding-top:9px; text-decoration:none; font-weight:700; transition:0.3s;}
.grid .pag:hover, .grid .activa {background:#357FFF; color:#fff; transform:scale(1.15);  text-decoration:none;}
.grid .pag-ant, .grid .pag-sig {width:35px; height:35px; display:inline-block; font-size:20px; background:rgba (24,24,24,0.6); margin:0 4px; border-radius:10px; color:#625EBA; padding:6px 0 0 4px; text-decoration:none; text-align:center; font-weight:700; transition:0.3s;}
.grid .total-pag {font: 12px arial,verdana; color:#757D80; font-weight:500; margin-top:10px;}
.grid .rango-fecha {min-width:100px; width:75%; padding:1px; font:13px arial,tahoma;}

.grid .label {font-family: 'Helvetica',arial; font-size: 14px; font-weight: bold; white-space:nowrap; margin:3px; padding:6px 10px; display: inline-flex; vertical-align:middle; align-items: center; color: #222; border-radius:5px; cursor:unset; background:#E4E6EB;}  
.grid .label i {font-size:13px; margin:0 4px 0 2px;} 

.grid select {font-weight:bold; width:100%; max-width:400px; padding:6px 4px; font-size:14px;
      border-radius:14px; border:none; 1border:1px solid #ccc;
      transition:background .3s,color .3s
    }
.grid select:hover {color:#000;background:#fff;}
.grid select option {font-weight: bold;}
.grid .dorado {color:#00000;background:rgba(255,223,164,0.2);}
.grid .celeste {color:#fff; background:#01B5FF;}
.grid .rojo {color:#F8285A; background:rgba(248,40,90,0.2);}
.grid .amarillo {color:#A69A08; background:rgba(249,232,13,0.2);}
.grid .naranja {color:#FF9F0C; background:rgba(255,159,12,0.2);}
.grid .verde {color:#17C653; background:rgba(23,198,83,0.2);}
.grid .azul {color:#1B84FF; background:rgba(27,132,255,0.2);}
.grid .plomo {color:#fff; background:#555C60;}
.grid .plata {color:#AFAFAF; background:rgba(185,188,196,0.2);}
.grid .negro {color: #ccc; background:rgba(0,0,0,.9);}
.grid .morado {color:#A17BF1;background:rgba(114,57,234,0.2);}

.frm_pantalla {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.60);
  overflow-x: hidden;
  transition: 0.5s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.frm_pantalla .frm_contenido { position: relative; width: 100%; text-align: center; }
.frm_pantalla a {text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s;}
.frm_pantalla a:hover, .frm_pantalla a:focus {color: #f1f1f1;}
.frm_pantalla .btn_cerrar { position: absolute; z-index: 1; top: -17px; right: 50%; font-size: 60px;}

@media (prefers-color-scheme:dark) {
.grid .op .resultados {color:#ffffff;}
.grid .op .nombreapp  {color:#AAAAAA;}
.grid .tb {background:#191A1F; color:#fff; border:1px solid #08090D; -webkit-box-shadow: 0px 4px 12px 0px rgba(255, 255, 255, 0.04); box-shadow: 0px 4px 12px 0px rgba(255, 255, 255, 0.04);}
.grid .tb::-webkit-scrollbar {width:10px; height:10px; background:#1D1D1E;}
.grid .tb::-webkit-scrollbar:hover {background:#000000;}
.grid .tb::-webkit-scrollbar-thumb {background: #686868; border-radius: 10px;}
.grid .tb::-webkit-scrollbar-track {background:#1D1D1E;}
.grid .tb::-webkit-scrollbar-track:hover {background:#000000;}
.grid .tb table tr {border-bottom:1px solid #2C2F34;}
.grid .tb table tr:nth-child(even){background:#191A1F;}
.grid .tb table th {background:linear-gradient(rgba(40,41,43,0.96), rgba(0,0,0, 0.4)); border-bottom:1px solid #2C2F34;}
.grid .tb table th span {color:#F4F8FD;}
.grid .tb table tr td {color:#848E9C;}
.grid .tb table th:hover {background:#000; border-radius:10px;}
.grid .tb table tr:hover {background:#000; color:#ffffff; border-bottom:1px solid #000000;}
.grid .tb table tr:hover td {color:#fff;}
.grid .frm-input {color:#fff; background:#1B1C22; border:1px solid #616161;}
.grid .tb table th:hover .frm-input {background:#26272F;}
.grid .frm-input:focus, .grid .frm-input:hover {color:#fff; background:#26272F;}
}

@media screen and (max-width: 800px) {
.grid {padding:0 20px 0 20px;}
.grid .tb table {table-layout: auto;}
.grid .tb table th, .grid .tb table td {white-space: nowrap;}
}

@media screen and (max-width: 600px) {
.grid {padding:0 10px 0 10px;}
.11grid .11btn span {display: none;}
.grid .tb {border-radius:0px;}
.grid .tb table th {padding:5px 4px 3px 6px;}
.grid .tb table tr td {padding:2px 2px 2px 6px;}
}

@media screen and (max-width: 421px) {
.grid {padding:0px; border-radius:0;}
.grid .tb {-ms-overflow-style:none; scrollbar-width:none;}
.grid .tb::-webkit-scrollbar {display:none;}
 }