/* Eliminamos márgenes por defecto del navegador */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Evita scroll horizontal innecesario */
    font-family: Arial, sans-serif;
}

.card {
    background-color: white;
    width: 100vw;       /* 100% del ancho de la ventana */
    min-height: 100vh;  /* Mínimo 100% del alto de la ventana */
    display: flex;
    flex-direction: column;
    box-shadow: none;   /* Quitamos la sombra ya que ocupa toda la pantalla */
}
#imgbarner{
    width: 20%;
}
/* Banner Superior al 100% */
.header-banner {
    background-color: #84b026;
    color: #006600;
    padding: 20px;
    font-weight: bold;
    font-style: italic;
    font-size: 1.2rem;
    border-bottom: 5px solid #333;
    width: 100%;
    box-sizing: border-box;
}

/* Contenedor de contenido flexible */
.content {
    padding: 20px;
    flex-grow: 1; /* Esto empuja al footer hacia abajo si hay poco contenido */
    width: 99%;
    box-sizing: border-box;
}

.title-orange {
    color: #d4a017;
    margin: 0;
    font-size: 1.4rem;
}

.title-green {
    color: #4a7a00;
    margin: 5px 0 25px 0;
    font-size: 1.8rem;
    font-weight: normal;
}

/* Tabla expandida al 100% */
.data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Asegura que las columnas respeten el ancho en móviles */
}

.data-table tr {
    border-bottom: 1px solid #eeeeee;
}

.data-table td {
    padding: 18px 15px;
    vertical-align: middle;
    word-wrap: break-word; /* Evita que textos largos rompan el diseño en móviles */
}

.label {
    background-color: #f5f5f5;
    color: #333;
    font-weight: bold;
    width: 35%; /* Ajuste proporcional */
    font-size: 16px;
}

.value {
    color: #555c66;
    font-size: 16px;
    width: 65%;
}

/* Pie de página al final de la pantalla */
.footer-banner {
    background-color: #cccccc;
    color: #444;
    padding: 20px;
    font-size: 15px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* Ajustes adicionales para móviles muy pequeños */
@media (max-width: 480px) {
    .label {
        font-size: 18px;
        width: 40%;
    }
    .value {
        font-size: 19px;
    }

    

    .title-green {
        font-size: 1.4rem;
    }
}