/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 06 2026 | 12:49:31 */
:root {
    --bg-crema: #fdf5e6;
    --color-verde: #1d7345;
    --color-marron: #912a0f;
    --color-card-bg: #f4fbf7;
    --fuente: 'Arial', sans-serif;
}

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

html, body {
    height: 100%;
    font-family: var(--fuente);
    background-color: var(--bg-crema);
}

/* Contenedor adaptado a pantallas y preparado para imprimir en A4 vertical */
.cartel-container {
    max-width: 800px;
    height: 100vh;
    margin: 0 auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Cabecera Principal */
.cartel-header {
    text-align: center;
    margin-bottom: 15px;
}

.logo-coralba {
    font-size: 55px;
    font-weight: 900;
    color: var(--color-verde);
    letter-spacing: 2px;
}

.tagline {
    font-size: 18px;
    color: var(--color-marron);
    font-weight: bold;
    margin-top: -5px;
}

/* Bloque del Escenario */
.escenario-block {
    background-color: var(--color-marron);
    color: white;
    text-align: center;
    padding: 15px;
    border-radius: 25px;
    margin-bottom: 20px;
}

.escenario-block h2 {
    font-size: 22px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.escenario-block h1 {
    font-size: 32px;
    font-weight: bold;
}

/* Distribución inteligente de filas (Flexbox) */
.actuaciones-lista {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1; /* Hace que la lista ocupe todo el espacio vertical disponible */
    margin-bottom: 10px;
}

/* Tarjeta de cada actuación */
.actuacion-item {
    background-color: var(--color-card-bg);
    border: 4px solid var(--color-marron);
    border-radius: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    flex-grow: 1; /* Hace que las tarjetas se estiren por igual si hay 4, 5 o 6 */
    max-height: 80px;
}

/* Bloque de hora a la izquierda */
.hora-bloque {
    border-right: 4px solid var(--color-marron);
    background-color: var(--color-marron); /* Añade el fondo marrón idéntico al escenario */
    padding: 10px 20px;
    text-align: center;
    min-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.hora-texto {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff; /* ANTES: #000 - Cambiado a blanco para que resalte sobre el marrón */
    line-height: 1.2;
}

/* Bloque de información del coro */
.info-bloque {
    padding: 15px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.coro-titulo {
    font-size: 24px;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.coro-detalles {
    font-size: 15px;
    color: #333;
}

.coro-detalles .tipo {
    font-weight: bold;
}

/* Pie de página */
.cartel-footer {
    text-align: center;
    padding-top: 10px;
}

.web-url {
    font-size: 16px;
    color: var(--color-verde);
    font-weight: bold;
}

/* Ajustes de optimización para impresión limpia */
@media print {
    body { background-color: #fff; }
    .cartel-container { padding: 0; height: 100vh; }
}

/* --- Estilos y Posicionamiento para el QR --- */
.qr-posicionamiento {
    position: absolute;
    top: 25px;
    left: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-crema);
    border: 3px solid var(--color-verde);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

#codigo-qr {
    padding: 2px;
}

/* Evita que distorsiones en pantallas de alta densidad */
#codigo-qr img {
    display: block;
}

.qr-subtexto {
    font-size: 9px;
    font-weight: bold;
    color: white;
    background-color: var(--color-verde);
    width: 100%;
    text-align: center;
    margin-top: 4px;
    padding: 2px 0;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Asegurar posicionamiento relativo del contenedor base */
.cartel-container {
    position: relative; 
    max-width: 800px;
    height: 100vh;
    margin: 0 auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}