/* ===============================
   DC Tracking - Estilo futurista
   Solo decorado visual. No modifica funcionamiento.
================================= */

*{
  box-sizing: border-box;
}

html{
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color:#eaf7ff;
  background:
    radial-gradient(circle at 15% 15%, rgba(0,180,255,.28), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(0,255,200,.18), transparent 24%),
    radial-gradient(circle at 50% 95%, rgba(0,78,255,.20), transparent 35%),
    linear-gradient(135deg, #030712 0%, #06111f 42%, #02040a 100%);
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,220,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,220,255,.055) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 90%);
}

body:after{
  content:"";
  position:fixed;
  inset:-80px;
  pointer-events:none;
  background:conic-gradient(from 180deg, transparent, rgba(0,195,255,.13), transparent, rgba(0,255,190,.10), transparent);
  filter:blur(55px);
  opacity:.7;
}

.dc-panel{
  position:relative;
  z-index:1;
  width:min(920px, calc(100% - 28px));
  margin:38px auto;
  padding:26px;
  border:1px solid rgba(0,225,255,.35);
  border-radius:26px;
  background:linear-gradient(145deg, rgba(6,18,35,.82), rgba(2,8,18,.92));
  box-shadow:
    0 0 30px rgba(0,194,255,.18),
    inset 0 0 28px rgba(0,220,255,.06);
  backdrop-filter: blur(10px);
}

.dc-header{
  text-align:center;
  margin-bottom:24px;
}

.dc-kicker{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 13px;
  border:1px solid rgba(0,234,255,.45);
  border-radius:999px;
  color:#9df7ff;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  background:rgba(0,180,255,.08);
  box-shadow:0 0 16px rgba(0,220,255,.16);
}

.dc-title{
  margin:0;
  font-size:clamp(27px, 5vw, 46px);
  line-height:1.05;
  letter-spacing:.5px;
  color:#ffffff;
  text-shadow:0 0 18px rgba(0,225,255,.65), 0 0 36px rgba(0,105,255,.32);
}

.dc-subtitle{
  margin:12px auto 0;
  max-width:620px;
  color:#b7d5e6;
  font-size:15px;
  line-height:1.55;
}

.dc-search-card{
  margin:0 auto 20px;
  padding:18px;
  border:1px solid rgba(118,239,255,.24);
  border-radius:18px;
  background:rgba(2,12,26,.72);
  box-shadow:inset 0 0 24px rgba(0,180,255,.07);
}

.dc-search-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.dc-label{
  width:100%;
  color:#d8fbff;
  font-weight:bold;
  font-size:14px;
  letter-spacing:.4px;
}

#txtSearch{
  flex:1 1 260px;
  min-height:46px;
  padding:0 15px;
  border:1px solid rgba(0,218,255,.45);
  border-radius:13px;
  color:#fff;
  font-size:16px;
  outline:none;
  background:linear-gradient(180deg, rgba(5,22,40,.95), rgba(3,12,24,.95));
  box-shadow:0 0 0 3px rgba(0,208,255,.07), inset 0 0 16px rgba(0,180,255,.10);
}

#txtSearch:focus{
  border-color:#6ff8ff;
  box-shadow:0 0 0 4px rgba(0,210,255,.14), 0 0 24px rgba(0,210,255,.22);
}

#btnBuscar{
  min-height:46px;
  padding:0 24px;
  border:0;
  border-radius:13px;
  color:#00111b;
  font-size:15px;
  font-weight:bold;
  letter-spacing:.5px;
  cursor:pointer;
  background:linear-gradient(135deg, #6ff8ff, #15b9ff 50%, #72ffd6);
  box-shadow:0 0 18px rgba(0,217,255,.42), 0 8px 18px rgba(0,0,0,.35);
  transition:transform .18s ease, filter .18s ease;
}

#btnBuscar:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

.tab{
  margin:12px 0 0;
  padding-left:0;
  color:#8fefff;
  text-align:center;
  font-size:12px;
  font-weight:normal;
}

.results-shell{
  overflow:hidden;
  border:1px solid rgba(0,220,255,.28);
  border-radius:20px;
  background:rgba(1,8,17,.68);
  box-shadow:0 0 24px rgba(0,195,255,.12), inset 0 0 18px rgba(0,220,255,.05);
}

.tabla_encabezado{
 border-collapse: collapse;
 border: 2px solid rgba(111,248,255,.55);
 font: normal 11px verdana, arial, helvetica, sans-serif;
 text-align: left;
/* word-wrap: break-word;*/
}

#title1{
  width:100%;
  border-collapse:collapse;
}

.div_interna{
 height:350px; 
 overflow:auto; /* Aquí esta el truco de poder mover la tabla sin mover el encabezado */
 /*margin:0 auto;*/
 scrollbar-color:#26ddff #071323;
}

.div_interna::-webkit-scrollbar{
  width:10px;
}
.div_interna::-webkit-scrollbar-track{
  background:#071323;
}
.div_interna::-webkit-scrollbar-thumb{
  background:linear-gradient(#68f6ff, #168eff);
  border-radius:999px;
}

.tabla_interna {
  width:100%;
  border-collapse: collapse;
  border: 0;
  font: normal 18px verdana, arial, helvetica, sans-serif;
  text-align: left;
 /* word-wrap: break-word; */
}

.th1 {   /*Columna 1 (cabecera/título de columna) */
      width:100%;
	/* // word-wrap:break-word; */
	  padding:14px 18px;
	  border:0;
	  background:linear-gradient(90deg, rgba(0,208,255,.28), rgba(0,255,190,.12));
      color:#ffffff;
      font-size:16px;
      font-weight:bold;
      letter-spacing:1px;
      text-transform:uppercase;
      text-shadow:0 0 12px rgba(0,225,255,.70);
	 }
.th2 {
      width:85px;
/*	 // word-wrap: break-word; */
	  border: 2px solid rgba(111,248,255,.55);
	  padding-left:5px;
	  background-color:rgba(240,240,255,.10);
      color:#ffffff;
	 }

.td1 {           /*Columna 1 de datos (Producto) */
 width:465px; 
 /*//word-wrap: break-word; */
 padding:12px 16px;
 color:#eafaff;
 border-bottom:1px solid rgba(111,248,255,.10);
    }
.td2 {           /*Columna 2 de datos (Precio) */
  width:80px;
  /*//word-wrap: break-word; */
  padding:12px 16px;
  color:#b9e8f7;
  border-bottom:1px solid rgba(111,248,255,.10);
     }
	 
.tpar {
       background-color: rgba(0,180,255,.06);  /*Color de fila par*/
      }
.timpar {
       background-color: rgba(255,255,255,.025);  /*Color de fila impar*/
      }

.tabla_interna tr{
  transition:background .18s ease, box-shadow .18s ease;
}

.tabla_interna tr:hover{
  background:rgba(0,222,255,.10);
  box-shadow:inset 3px 0 0 #6ff8ff;
}

.tabla_interna b{
  color:#72ffd6;
  text-shadow:0 0 10px rgba(114,255,214,.35);
}

.dc-footer{
  margin-top:18px;
  text-align:center;
  color:#7daabd;
  font-size:12px;
}

@media (max-width:620px){
  .dc-panel{
    margin:16px auto;
    padding:17px;
    border-radius:20px;
  }
  .dc-search-row{
    display:block;
  }
  #txtSearch,
  #btnBuscar{
    width:100%;
    margin-top:9px;
  }
  .tabla_interna{
    font-size:15px;
  }
  .td1,.td2{
    width:auto;
    padding:11px 12px;
  }
}