* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-image: url('IMG/estrellas\ 3.webp');
      background-attachment: scroll;
      scroll-behavior: smooth;
      /* Force tiling of the background image */
      background-repeat: repeat !important;
      background-size: auto !important;
      background-position: top left;
      color: #fff;
      font-family: 'Courier New', monospace;
      min-height: 100vh;
      animation: animated-machine 60s linear infinite;
    }

@keyframes animated-background {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 100% 100%;
	}
}

@keyframes animated-machine {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 200px 200px;
	}
}
    ::-webkit-scrollbar {
      width: 13px;
      height: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #fff;
      background-image: url("IMG\\thumb.png");
      border-top: 1px solid #bdbdbd;
      border-left: 1px solid #bdbdbd;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
    }
    ::-webkit-scrollbar-track {
      background-color: #fff;
      background-image: url("IMG\\track.png");
    }
    ::-webkit-scrollbar-button:vertical:increment {
      background-image: url("IMG\\scrollbar_abajo.png");
      width: 13px;
      height: 12px;
      border-top: 1px solid #bdbdbd;
      border-left: 1px solid #bdbdbd;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
    }
    ::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("IMG\\scrollbar_arriba.png");
      border-top: 1px solid #bdbdbd;
      border-left: 1px solid #bdbdbd;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      width: 13px;
      height: 12px;
    }
    
    .container {
      display: grid;
      background: #0f192399;
        border: 1px solid #0f192399;
      display: flex;
      flex-direction: column;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 15px;
      background: rgba(26, 26, 26, 0.85);
        border-bottom: 1px solid #141c25ad;
      height: 50px;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .logo {
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    .header-center {
      display: flex;
      gap: 15px;
      font-size: 9px;
      color: #888;
      overflow: hidden;
      width: 60%;
    }

    .header-text {
      white-space: nowrap;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .close-btn {
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      padding: 4px 8px;
      transition: color 0.3s;
    }

    .close-btn:hover {
      color: #ff0000;
    }

    .window-controls {
      display: flex;
      gap: 2px;
    }

    .control-bar {
      width: 16px;
      height: 2px;
      background: #666;
    }

    .diagonal-lines {
      width: 32px;
      height: 16px;
      background: repeating-linear-gradient(
        45deg,
        #666,
        #666 2px,
        transparent 2px,
        transparent 6px
      );
    }

    .row {
      /*display: grid;
       grid-template-columns: 2fr 1fr;
      grid-template-rows: auto auto; */
      gap: 15px;
      padding: 15px;
      min-height: calc(100vh - 100px);
    }

    .panel {
      opacity: 0.5;
      background: rgba(10, 10, 10, 0.85);
        border: 1px solid #141c25ad;
      padding: 15px;
      position: relative;
      box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.02);
      max-height: none;
    }
    
    .panel2 {
      border: 1px solid #141c25ad;
      padding: 12px;
      position: relative;
      box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.02);
      max-height: none;
      background: #0f192399;

    }

    .panel-ajustable {
      max-height: none;
        border:#141c25ad 1px solid;
      padding: 12px;
      position: relative;
      box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.02);
      background: #0f192399;
    }

    .header-quote-section {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background: #0f192382;
        border: 1px solid #141c25ad;
      padding: 15px 10px;
      box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.02);
      height: 150px;
    }
    .boton-degradado {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background: linear-gradient(90deg, #c9c1b13c, #a3523936, #ffb0622d);
        border: 1px solid #141c25ad;
      padding: 15px 10px;
      box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.02);
      height: 150px;
    }

    .quote-text {
      font-family: 'ProggyCleanTTSZBP', sans-serif;
      font-size: 16px;
      color: #fff;
      text-transform: uppercase;
      transition: text-shadow 0.1s;
      margin-bottom: 8px;
    }

    .quote-text2 {
      font-family: 'Noto Serif Gurmukhi', sans-serif;
      font-size: 16px;
      color: #fff;
      text-transform: uppercase;
      transition: text-shadow 0.1s;
      margin-bottom: 8px;
    }
    
    .arrow {
      color: #666;
      font-size: 28px;
    }

    .info-panel {
      grid-column: 1;
      grid-row: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-height: fit-content;
      margin-top: 10px;
      padding: 12px 10px;
      background: #0f192399;
    }
    
    .info-content {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      padding-right: 20px; 
      padding-left: 10px;
    }
    .info-content-scroll {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      overflow: auto;
    }

    .info-text {
      font-family: 'ProggyCleanTTSZBP', sans-serif;
      flex: 1;
      font-size: 17px;
      line-height: 1.3;
      text-align: justify;
      transition: opacity 0.3s;
      overflow: hidden;
      padding: 0 5px;
      padding-right: 20px;
    }


    .bottom-text {
      font-size: 11px;
      color: #666;
      text-align: center;
      margin-top: 10px;
      padding-top: 6px;
      border-top: 1px solid #141c25ad;
      padding-left: 5px;
      padding-right: 5px;
    }

    /* New marquee section - Fixed to scroll to the right */ /*ESTO ES DE LAS ANIMACIONES DE TEXTOS QUE SE DESPLAZAN*/
    .marquee-section {
      grid-column: 1 / span 2;
      grid-row: 3;
      background: linear-gradient(90deg, #c9c1b165, #a3523967, #ffb06267);
        border: 1px solid #141c25ad;
      padding: 8px;
      margin-top: 10px;
      overflow: hidden;
      height: 30px;
      display: flex;
      align-items: center;
    }

    .marquee-content {
      font-size: 10px;
      color: #eEE9DF;
      white-space: nowrap;
      animation: marquee-scroll-right 45s linear infinite;
    }

    @keyframes marquee-scroll-right {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    /* FIN ANIMACION TEXTOS QUE SE DESPLAZAN */


    .image-container {
      grid-column: 2;
      grid-row: 1 / span 2;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: contain;
      background: #2c3b4da6;
    }

    .image-container img {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
    }

    .serial-panel {
      grid-column: 1 / span 2;
      grid-row: 4;
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-template-rows: 1fr 1fr;
      gap: 12px;
      margin-top: 15px;
      background: #0f192399;
      position: relative;
    }

    .serial-image {
      grid-column: 1;
      grid-row: 1 / 3;
      border: 1px solid #444;
      background: #151b2199;
      object-position: center;
      height: 320px;
      width: 320px;
    }
    .serial-image img{
      height: 100%;
      width: 100%;
    }

    .face-placeholder {
      background-image: url(IMG/pinguino\ bebe.gif);
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      position: relative;
    }

    .serial-content {
      grid-column: 2;
      grid-row: 1 / 3;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    /* Floating round.png image - Fixed to stay within container */
    .floating-round {
      position: absolute;
      top: 50px;
      right: 10px;
      width: 60px;
      height: 60px;
      z-index: 10;
    }

    @keyframes float {
      0% {
        transform: translateY(0px) rotate(0deg);
      }
      50% {
        transform: translateY(-10px) rotate(180deg);
      }
      100% {
        transform: translateY(0px) rotate(360deg);
      }
    }
    .serial-title-grande {
      font-size: 32px;
      color: #FFB162 ;/*#FC7643;*/
      border-bottom: thick double #FC7643;/*#AF4F41;*/
      transition: color 0.2s;    
      font-weight: bold;
    letter-spacing: 2px;}
    .serial-title-personajes{
  font-size: 40px; text-align: center; color: white;
  border-bottom: thick double #AF4F41; letter-spacing: 5px; text-transform: uppercase;
}
    .serial-title {
      font-size: 22px;
      color: #FFB162 ;/*#FC7643;*/
      border-bottom: 1px solid #FC7643; /*#AF4F41;*/
      padding-bottom: 4px;
      transition: color 0.3s;
      margin-right: 70px; /* Make space for floating image */
    }
.DL-serial-title {
      font-size: 22px;
      color: #FFB162 ;/*#FC7643;*/
border-top: thick double pink;
    border-bottom: thick double pink;      padding-bottom: 4px;
      transition: color 0.3s;
      margin-right: 70px; /* Make space for floating image */
    }
    .progress-bar {
      width: 100%;
      height: 3px;
      background: #333;
      position: relative;
      overflow: hidden;
    }

    .progress-fill {
      width: 60%;
      height: 100%;
      background: #666;
      transition: width 0.1s linear;
    }

    .small-text {
      font-size: 10px;
      line-height: 1.3;
      color: #888;
    }

    .bottom-section {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      padding: 15px;
      background: #0f192399;
      border-top: 1px solid #333;
      margin-top: 15px;
    }

    .barcode-panel {
      background: #ffb0622d;
      border: 1px solid #ffb162;
      padding: 12px;
      height: 160px;
    }

    .barcode {
      display: flex;
      gap: 2px;
      margin-bottom: 12px;
    }

    .barcode-line {
      width: 2px;
      height: 32px;
      background: #fff;
    }

    .barcode-line.thick {
      width: 4px;
    }

    .serial-right {
      background: #a3523936;
        border: 1px solid #a35139;
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 160px;
    }

    .concentric-circles {
      position: relative;
      width: 50px;
      height: 50px;
    }

    .circle {
      position: absolute;
      border: 1px solid #666;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: border-color 0.1s;
    }

    .circle:nth-child(1) { width: 50px; height: 50px; }
    .circle:nth-child(2) { width: 40px; height: 40px; }
    .circle:nth-child(3) { width: 30px; height: 30px; }
    .circle:nth-child(4) { width: 20px; height: 20px; }
    .circle:nth-child(5) { width: 10px; height: 10px; }

    .lain-panel {
      background-color: #c9c1b13c;
      border: 1px solid #c9c1b1;
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 160px;
    }

    .lain-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .logo-text {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 4px;
    }

    .logo-lines {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .line {
      width: 32px;
      height: 1px;
      background: #666;
    }
/*Podría quitar esto de abajo la verdad*/
    .star-pattern {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .star {
      width: 14px;
      height: 14px;
      position: relative;
    }

    .star::before,
    .star::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 14px;
      height: 2px;
      background: #666;
      transform: translate(-50%, -50%);
    }

    .star::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .star::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
/* Arriba*/
    .dots {
      display: flex;
      gap: 3px;
      color: #666;
      font-size: 10px;
    }

    .footer {
      padding: 30px 15px;
      background: #0f192399;
      border-top: 1px solid #333;
      margin-top: 15px;
    }

    .footer-content {
      max-width: 800px;
      margin: 0 auto;
      color: #666;
      font-size: 10px;
      line-height: 1.5;
      text-align: center;
    }

    .footer-title {
      font-size: 16px;
      color: #fff;
      margin-bottom: 15px;
      border-bottom: 1px solid #333;
      padding-bottom: 8px;
    }

    @keyframes glitch {
      0% { transform: translateX(0); }
      20% { transform: translateX(-1px); }
      40% { transform: translateX(1px); }
      60% { transform: translateX(-1px); }
      80% { transform: translateX(1px); }
      100% { transform: translateX(0); }
    }

    .quote-text:hover {
      animation: glitch 0.3s ease-in-out;
      text-decoration: none;
    }
    .hover-especifico:hover {
      animation: glitch 0.3s;
      animation-iteration-count: infinite;
      text-decoration:none;
      border-color: #ffffff;
      text-shadow: 0 0 12px rgb(0, 166, 199), 
  -1px 0px 0px rgb(199, 0, 129),  
  0px 1px 0px rgb(199, 172, 0), 
  0px -1px 0px rgb(146, 199, 0), 
  0px 0px 5px rgb(199, 0, 56), 
  0px 0px 3px rgb(199, 0, 149);
}
    
    
    @keyframes scan {
      0% { top: 0; }
      100% { top: 100%; }
    }

    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        height: auto;
        padding: 8px;
        gap: 8px;
      }
      
      .header-left,
      .header-center,
      .header-right {
        width: 100%;
      }
      
      .header-center {
        font-size: 7px;
        gap: 8px;
        justify-content: center;
        text-align: center;
      }
      
      .header-right {
        justify-content: center;
      }
      
      .main-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 12px;
        padding: 12px;
        min-height: auto;
      }
      
      .header-quote-section {
        grid-column: 1;
        grid-row: auto;
        height: auto;
        padding: 12px 8px;
      }
      
      .info-panel {
        grid-column: 1;
        grid-row: auto;
        max-height: none;
        margin-top: 0;
        padding: 10px 8px;
      }
      
      .marquee-section {
        grid-column: 1;
        grid-row: auto;
        margin-top: 5px;
        height: 25px;
      }
      
      .image-container {
        grid-column: 1;
        grid-row: auto;
        margin-top: 5px;
      }
      
      .serial-panel {
        grid-column: 1;
        grid-row: auto;
        max-height: none;
        margin-top: 10px;
      }
      
      .image-container img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
      
      .panel,
      .panel2 {
        max-height: none;
        padding: 12px;
      }
      
      .quote-text,
      .quote-text2 {
        font-size: 14px;
      }
      
      .quote-text2 {
        font-size: 12px;
      }
      
      .info-text,
      .small-text {
        font-family: 'ProggyCleanTTSZBP', sans-serif;
        font-size: 8px;
        line-height: 1.3;
      }
      
      .info-content {
        flex-direction: column;
        gap: 10px;
      }
      
      .serial-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
      }
      
      .serial-image {
        grid-column: 1;
        grid-row: 1;
        min-height: 160px;
      }
      
      .serial-image img {
        width: 100%;
        height: auto;
        max-height: 160px;
        object-fit: contain;
      }
      
      .serial-content {
        grid-column: 1;
        grid-row: 2;
      }
      
      .floating-round {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 40px;
        height: 40px;
      }

      
      .serial-info {
        padding-right: 50px;
      }
      
      .bottom-section {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
      }
      
      .barcode-panel,
      .serial-right,
      .lain-panel {
        height: auto;
        min-height: 120px;
      }
      
      .footer {
        padding: 15px 12px;
      }
      
      .footer-content {
        font-size: 9px;
      }
      
      .footer-title {
        font-size: 14px;
      }
      
      marquee {
        width: 100%;
      }
      
      img {
        max-width: 100%;
        height: auto;
      }
    }
    
    @media (max-width: 480px) {
      .header-center {
        font-size: 6px;
      }
      
      .quote-text {
        font-size: 12px;
      }
      
      .quote-text2 {
        font-size: 10px;
      }
      
      .info-text,
      .small-text {
        font-size: 7px;
      }
      
      .floating-round {
        width: 30px;
        height: 30px;
      }
      
      .serial-info {
        padding-right: 40px;
      }
      
      .bottom-section {
        padding: 8px;
        gap: 8px;
      }
      
      .logo-text {
        font-size: 14px;
      }
      
      .concentric-circles {
        width: 40px;
        height: 40px;
      }
      
      .circle:nth-child(1) { width: 40px; height: 40px; }
      .circle:nth-child(2) { width: 32px; height: 32px; }
      .circle:nth-child(3) { width: 24px; height: 24px; }
      .circle:nth-child(4) { width: 16px; height: 16px; }
      .circle:nth-child(5) { width: 8px; height: 8px; }
      
      .line {
        width: 24px;
      }
    }
    
    @media (min-width: 769px) {
      .header-quote-section {
        height: 120px;
      }
      
      .serial-image img {
        max-width: 250px;
        height: auto;
      } 
    }
 /*ACABA EL ESTILOOOOOOOOOOOOOOOOOOOOOOOOOOOO */ /* Esto suelo tenerlo en otro documento, pero no me acuerdo de como sacarlo y que funcione. ¿había que hacer algo arriba para señalar qué archivo contiene el css? creo que sí */
/*Lo he movido a otro documento, espero que funcione */


.zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
  transition: transform .5s;
}

.info-text{
  text-align:justify;
}

.box {
	display:grid;
	grid-template-columns:1fr 2fr;
	grid-gap:5px;
}



/* Delete/ignore if not using profile labels */

.justify {
	padding:0.25rem;
	display:flex;
	justify-content:space-between!important;
}

.label {
	font-weight:bold;
}

.marco-imagen {
    clip-path: polygon(6% 0, 93% 0, 100% 8%, 100% 92%, 93% 100%, 6% 100%, 0 92%, 0 8%);
    transition: all 0.3s ease;
    background: var(--acc);
}

.imagen{
   width:100%; height:100%; background-size: cover; background-position: center;
}

.encabezado-personajes {
  color: white; 
  font-size: 28px; 
  text-transform: uppercase; 
  letter-spacing: 5px; 
  margin: 5px 0 0px 0px; 
  padding-left: 20px; 
  border-left: 4px solid #ffeaea;
  letter-spacing: 4px;
}
::selection {
	color: rgb(255, 225, 253);
	text-shadow: 1px 0px 0px rgb(0, 166, 199), 
  -1px 0px 0px rgb(199, 0, 129),  
  0px 1px 0px rgb(199, 172, 0), 
  0px -1px 0px rgb(146, 199, 0), 
  0px 0px 5px rgb(199, 0, 56), 
  0px 0px 3px rgb(199, 0, 149);
}

:root {
    --tape-gray: #dbd8be;
    --tape-edge-gray: #b7b49d;
}

.tape::before {
    content:"";
    display:block;
    height: 30px;
    margin:-28px auto 5px auto;
    width: 200px;
    background-color: var(--tape-gray);
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
    opacity: 0.5;
    box-shadow:0.5px 0.5px 1px rgb(0,0,0,0.2);
}