/* Reset y Estilos Globales */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif; 
}
body { 
    background: #f4f4f7; 
    padding-bottom: 90px; /* SOLUCIÓN: Mayor holgura de seguridad para la navegación PWA inferior */
    color: #333; 
}

/* Barra superior con marquesina en movimiento */
header { 
    background: #ff6600; 
    color: white; 
    padding: 15px 0; 
    text-align: center; 
    font-weight: bold; 
    font-size: 20px;
    overflow: hidden; 
    position: relative;
    width: 100%;
}

header .texto-movil {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; 
    animation: marquesinaTalavisos 12s linear infinite; 
}

@keyframes marquesinaTalavisos {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); } 
}

a { 
    text-align: center; 
    text-decoration: none; 
    color: #ff6600; 
}

/* Contenedores y Formularios */
.container { 
    padding: 15px; 
    max-width: 600px; 
    margin: 0 auto; 
}
.form-group { 
    margin-bottom: 15px; 
}
label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: bold; 
}
input, textarea, select { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    font-size: 16px; 
    background-color: white;
}
button { 
    width: 100%; 
    background: #ff6600; 
    color: white; 
    border: none; 
    padding: 12px; 
    border-radius: 8px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background 0.2s;
}
button:active {
    background: #e05a00;
}

/* --- LISTA DE AVISOS (Estilo Mobile First) --- */

/* Tarjeta de aviso corregida para soportar botones inferiores */
.aviso-card { 
    background: white; 
    margin-bottom: 15px; 
    display: flex; 
    flex-direction: column; /* SOLUCIÓN: Agrupación vertical (textos/foto arriba, WhatsApp abajo) */
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); 
    position: relative;
}

/* Tarjetas Destacadas */
.aviso-destacado {
    border: 2px solid #ff6600;
    background: #fffcf5; 
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.12);
}

/* Imagen adaptativa optimizada */
.aviso-img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* Visualización completa sin recortes */
}

/* Caja de detalles interna */
.aviso-detalles { 
    padding: 0 12px; 
    display: flex; 
    flex-direction: column; 
    flex: 1;
    min-width: 0; 
}

.precio { 
    color: #ff6600; 
    font-weight: bold; 
    font-size: 18px; 
}
.ubicacion { 
    color: #777; 
    font-size: 12px; 
}

/* Botón de WhatsApp adaptable de ancho completo inferior */
.btn-whatsapp {
    display: block;
    background: #25D366;
    color: white !important;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.2s;
}
.btn-whatsapp:active {
    background: #1ebd58;
}

/* Vista de Detalles (Tarjetas Grandes Internas) */
.galeria-contenedor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.foto-grande {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain; 
    background: #eef0f3;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Barra de Navegación Inferior PWA */
.bottom-nav { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 60px; 
    background: white; 
    display: flex; 
    border-top: 1px solid #ddd; 
    z-index: 1000; 
}
.nav-item { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    color: #555; 
    text-decoration: none;
}
.nav-item:active { 
    background-color: #f0f0f0; 
}

/* Tablas e Interfaces Administrativas */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 15px; 
    background: white; 
}
th, td { 
    border: 1px solid #ddd; 
    padding: 10px; 
    text-align: left; 
    font-size: 14px; 
}
th { 
    background: #ff6600; 
    color: white; 
}
.btn-danger { 
    background: #dc3545; 
    padding: 5px; 
    color: white; 
    border-radius: 4px; 
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/* Footer Corporativo de Créditos */
.site-footer {
    text-align: center;
    padding: 15px;
    font-size: 12px;
    color: #888;
    background: #eef0f3;
    border-top: 1px solid #ddd;
    margin-top: 20px;
}