/* Variables de color para la paleta desértica elegante */
:root {
    --arena-claro: #fcf8f3;
    --arena-medio: #e0d8cf;
    --verde-bajo:  #a6b3a5;    
    --arena-oscuro: #c6b2a0;
    --naranja-suave: #f2a677;
    --naranja-fuerte: #d47e4d;
    --marron-claro: #a0826a;
    --marron-oscuro: #785a4a;
    --verde-oscuro: #193620;
    --col-oscuro:  #352116;
    --texto-oscuro: #3d2f2d;
    --texto-oscuro_2: #1d1615;
    --marron-medio: #836a5d;
    --verde-salvia: #8b9d83;   
    --verde-text: #0f2b04;
    --verde-salvia_2: #5c81ac;
    --azul_procced: #7198c5;
    --yellow-mate: #e3c290;
    --yellow-medium: #ce994a;
    --borde-input: #bdae9c;
    --borde-mar-input: #cbdaf1;
    --borde-mar-draw: #202d41;
    --borde-ok: #53ae83;
    --borde-error: #661e16;
    --col-error: #753129;
    --footer-background-rgb:  #352116;
    --footer-background-rgb-base:  #241711;
    --fondo-gradient-inicio: #ffffff;
    --fondo-gradient-medio: #f0ece7;
    --fondo-gradient-fin: #fff1e3;
    --select-fondo: var(--arena-claro);
    --select-borde: var(--borde-input);
    --select-texto: var(--texto-oscuro);
    --select-focus-borde: var(--naranja-suave);
    --select-focus-borde: var(--naranja-suave);
    --alerta-fondo: #e0d8cf;
    --alerta-borde: var(--borde-input);
    --alerta-texto: var(--marron-oscuro);
    --footer-background-rgb:   #241711;
    --btn-confirm-bg: #a8d8c4;        /* Fondo */
    --btn-confirm-bg-hover: #8ec9b4;  /* Fondo al pasar el ratón */
    --btn-confirm-text: #2a5546;      /* Texto */
    --btn-main-bg: #f2cda0;
    --btn-main-bg-hover: #f0be8a;
    --btn-main-text: #6d4c23;
    --btn-neutral-bg: #b3cde0;
    --btn-neutral-bg-hover: #9ab8d0;
    --btn-neutral-text: #314a5a;
    --color-disabled:  #b3cde0;
    --btn-danger-bg: #ffb3ba;
    --btn-danger-bg-hover: #ff9aa2;
    --btn-danger-text: #5c2a2f;
    --btn-special-bg: #75af4e;
    --btn-special-bg-hover: #1c8655;
    --btn-special-text: #1d1d17;
    --rojo-pastel: #ff9999; /* Un rojo suave y pastel */
    --rojo-pastel-hover: #ff7f7f; /* Un poco más oscuro para hover */
    --rojo-pastel-texto: #c00; /* Texto oscuro para contraste */
    --color-success:var(--borde-ok)
    --color-success-hover:var(--btn-confirm-text);
    --color-secondary:var(--azul_procced);
    --color-secondary-hover: #05457a;
    --color-primary:var(--btn-special-bg-hover);
    --color-background: var(--fondo-gradient-medio); /* #f0ece7 */
    --color-card-background: var(--fondo-gradient-inicio); /* #ffffff */
    --texto-medio: var(--marron-medio); /* #836a5d */
    --fondo-input: var(--fondo-gradient-inicio); /* #ffffff */
    --borde-tabla: var(--arena-medio); /* #e0d8cf */
    --fondo-claro: var(--arena-claro); /* #fcf8f3 */
    --color-accent: var(--borde-mar-draw); /* #202d41 */
    --shadow-small: 0 3px 10px rgba(0, 0, 0, 0.07);

    --meli-yellow: #fff159;
    --green_basic: #917741ff;
    --meli-blue: #3483fa;
    --meli-bg: #ebebeb;
    --card-bg: #ffffff;
    --text-main: #333;
    --text-secondary: #182424;
    --text-grey: #666;
    --green-traffic: #00a650;
    --red-traffic: #ff3b3b;
}


body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Ya la tienes, es una buena elección */
    margin: 0;
    min-height: 100%;
    /* Ocupa al menos el 100% de la altura de la ventana */
    color: var(--texto-oscuro);
    line-height: 1;

    /* Fondo principal con degradado desértico */
    background: linear-gradient(135deg,
            var(--fondo-gradient-inicio),
            var(--fondo-gradient-medio),
            var(--fondo-gradient-fin));
    background-attachment: fixed;
    /* Opcional: fija el degradado para que no se mueva con el scroll */
}


main {
    width: 100%;
    max-width: 1600px;
    /* Limita el ancho máximo para pantallas grandes */
    margin: 0 auto;
    /* Centra el main */
    padding: .2em;
    background-color: transparent;
    /* Deja que el body defina el fondo */
    box-sizing: border-box;
}


/* Estilo para los detalles expandidos (si decides implementar un modal o expansión) */
.details-row {
    background-color: var(--arena-oscuro);
    color: white;
    padding: 10px;
    border-bottom: 1px solid var(--marron-claro);
    font-size: 0.9em;
}



/* Responsividad para móviles */
@media (max-width: 768px) {
    main {
        margin: 1em auto;
        padding: 1em;
        border-radius: 0;
        /* Sin bordes redondeados en móvil */
        box-shadow: none;
        /* Sin sombra en móvil */
    }

    h2 {
        font-size: 1.5em;
        margin-bottom: 1em;
    }


    footer {
        padding: 1em;
        /* Reducir padding del footer en móvil */
        font-size: 0.8em;
        gap: 0.5em;
    }

    .footer-links {
        flex-direction: column;
        /* Apilar los enlaces en móvil */
        gap: 0.8em;
    }
}


.img-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin: 0 0.1em;
    vertical-align: middle;
    display: inline-block;
}
.img-btn:hover {
    transform: scale(1.1);
}


.text-warning{
    color: var(--alerta-texto);
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 12px;

}