/* ============================== */
/* Variables */
/* ============================== */
:root {
    --color-deg-superior: #f9f9f9;
    --color-deg-inferior: #efe9e2;
    /* Guardamos el degradado completo en una variable */
    --gradient-principal: linear-gradient(to bottom, var(--color-deg-superior), var(--color-deg-inferior));
    --gradient-SECUNDARIO: linear-gradient(to bottom, var(--color-deg-inferior), var(--color-principal));
    --color-principal: #c0a27a;       /* Un rojo para destacar */
    --color-icono: #87aceb;
    --color-texto-parrafo: #555555;
    --color-titulos: #000000;
    /* Actualizamos la variable de fuente */
    --fuente-principal: 'Montserrat', sans-serif;
}

/* ============================== */
/* Reset básico */
/* ============================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: var(--gradient-principal);
    background-attachment: fixed; /* Opcional: para que el fondo no se mueva al hacer scroll */
    min-height: 100vh;
    color: var(--color-texto-parrafo);
    font-family: var(--fuente-principal);
    -webkit-font-smoothing: antialiased; /* Hace que la fuente se vea más nítida */
}

/* Imagen del logotipo de Hacienda */
.img-hacienda {
    width: 320px;
    height: auto;
    border-radius: 2px;
    margin-bottom: 20px;
}

/* ============================== */
/* Contenedor de alerta */
/* ============================== */
.contenedor-alerta {
    background: var(--gradient-principal);
    border: 1px solid var(--color-principal); /* Borde delgado con el color principal */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(119, 45, 45, 0.308); /* Sombra suave */
    max-width: 800px;
    margin: 0;
}
/* Franja interna color café */
.franja-info {
    background: var(--color-principal);
    border-radius: 10px;
    padding: 10px 20px;
}
/* Estilo para el icono */
.icono-info {
    width: 23px;
    height: 23px;
    object-fit: contain;
}
/* Estilo para el texto H2 */
.texto-alerta {
    font-size: 1rem; /* Ajusta el tamaño para que no se vea gigante */
    color: var(--color-titulos);
    font-weight: 600;
    line-height: 1.2;
}


/* ============================== */
/* Tarjeta de datos */
/* ============================== */
/* Contenedor principal de la tarjeta */
.card-datos {
    max-width: 100%;
    border: 1px solid var(--color-principal);
    border-radius: 8px;
    overflow: hidden; /* Para que el encabezado respete las esquinas redondeadas */
    background-color: var(--gradient-principal);
    box-shadow: 0 4px 6px rgba(119, 45, 45, 0.308); /* Sombra suave */
    margin-top: 40px;
}
/* Encabezado con degradado café/dorado */
.card-header-custom {
    background: var(--gradient-SECUNDARIO);
    color: var(--color-texto-parrafo);
    padding: 8px 15px;
    font-weight: bold;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-principal);
}
/* Cuerpo de la tarjeta */
.card-body-custom {
    padding: 18px 30px 40px 30px;
    background-color: var(--gradient-principal);
}
/* Estilos de la tabla interna para alinear texto */
.tabla-datos {
    border-collapse: collapse;
    width: auto;
}
.tabla-datos td {
    padding: 4px 8px;
    font-size: 1rem;
}
/* Estilo para las palabras en negrita (Folio, RFC, etc) */
.etiqueta {
    font-weight: bold;
    text-align: right;
    color: var(--color-texto-parrafo);
    width: 80px; /* Ajusta este ancho según necesites */
}
/* Estilo para los valores */
.valor {
    color: var(--color-texto-parrafo);
    text-align: left;
}