/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #FFD1DC;
  color: #333333;
  font-family: Verdana;
}

/* Contenedor principal del ticket */
.ticket-receiptify {
    background-color: #f6f6f6; /* Color papel blanquecino/gris */
    width: 320px;
    height: 650px; /* Alto del ticket */
    margin: 40px auto; /* Lo centra en la pantalla */
    padding: 20px;
    box-sizing: border-box;
    
    /* Sombra para que parezca que está apoyado sobre la página */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    
    /* Usamos flexbox para acomodar las cosas fácil de arriba a abajo */
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Un truquito para simular un poco de textura de papel muy sutil */
    background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.01) 0%, transparent 20%),
                      radial-gradient(circle at 80% 70%, rgba(0,0,0,0.02) 0%, transparent 30%);
}

/* El título principal */
.ticket-titulo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #222;
    margin-top: 20px;
    letter-spacing: 1.5px;
}

/* Espaciadores */
.espacio-blanco {
    flex-grow: 1; /* Ocupa todo el espacio disponible empujando lo demás abajo */
}

.espacio-chico {
    height: 30px; /* Separación entre las líneas punteadas */
}

.espacio-abajo {
    height: 40px; /* Separación antes de la parte final */
}

/* Las líneas horizontales */
.linea-punteada {
    width: 90%;
    border: none;
    border-top: 2px dashed #666;
    margin: 0;
}

/* El texto de agradecimiento */
.ticket-gracias {
    font-family: 'Courier New', Courier, monospace; /* Fuente estilo máquina de escribir */
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* El código de barras hecho con CSS puro */
.codigo-barras {
    width: 85%;
    height: 60px;
    margin-bottom: 20px;
    /* Dibujamos las líneas negras y blancas usando un linear-gradient */
    background: linear-gradient(to right, 
        #111 0%, #111 4%, transparent 4%, transparent 6%, 
        #111 6%, #111 8%, transparent 8%, transparent 10%,
        #111 10%, #111 14%, transparent 14%, transparent 16%,
        #111 16%, #111 17%, transparent 17%, transparent 22%,
        #111 22%, #111 26%, transparent 26%, transparent 28%,
        #111 28%, #111 30%, transparent 30%, transparent 32%,
        #111 32%, #111 36%, transparent 36%, transparent 38%,
        #111 38%, #111 40%, transparent 40%, transparent 44%,
        #111 44%, #111 48%, transparent 48%, transparent 50%,
        #111 50%, #111 52%, transparent 52%, transparent 56%,
        #111 56%, #111 60%, transparent 60%, transparent 62%,
        #111 62%, #111 68%, transparent 68%, transparent 70%,
        #111 70%, #111 72%, transparent 72%, transparent 76%,
        #111 76%, #111 80%, transparent 80%, transparent 82%,
        #111 82%, #111 84%, transparent 84%, transparent 88%,
        #111 88%, #111 92%, transparent 92%, transparent 94%,
        #111 94%, #111 100%
    );
}