/* Estilos agregados en la versión PHP (reemplazan a react-toastify y
   ajustan elementos que en React eran botones). */

[hidden] { display: none !important; }

.menu-navbar .btn-logout { color: #555; font-weight: bold; }

.js-galeria[data-links] .image-gallery-slide img { cursor: inherit; }

/* Casillas del formulario Únete (verificar perfil / términos) */
.form-content .check-bloque {
    margin: 6px 0 18px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
}
.form-content .check-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-weight: 700;
    color: #333;
}
.form-content .check-fila input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: #25d366;
    cursor: pointer;
}
.form-content .check-fila a {
    color: #1a73e8;
    text-decoration: underline;
}
.form-content .check-ayuda {
    display: block;
    margin: 8px 0 0 28px;
    color: #666;
    font-size: .85rem;
    line-height: 1.4;
}
.form-content #verificacion { margin: -6px 0 18px; }

/* Dirección del prestador: estado de la búsqueda en Google Places */
.form-content .direccion-estado { margin: -8px 0 6px; font-size: .85rem; color: #666; line-height: 1.35; }
.form-content .direccion-estado.direccion-ok { color: #1b7f3a; font-weight: 600; }
.form-content .direccion-estado.direccion-error { color: #c62828; font-weight: 600; }
.form-content .direccion-consejo { margin: 0 0 8px; font-size: .82rem; color: #777; line-height: 1.35; }
.form-content .mapa-confirmacion {
    height: 230px;
    margin: 4px 0 6px;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}
.form-content .direccion-sin-numero {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-weight: 400;
    font-size: .88rem;
    color: #444;
    cursor: pointer;
}
.form-content .direccion-sin-numero input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}
.form-content .verificacion-docs {
    padding: 16px;
    border: 2px solid #f5b700;
    border-radius: 10px;
    background: #fffbea;
}
.form-content .verificacion-titulo { margin: 0 0 4px; font-weight: 700; color: #5a3e00; }
.form-content .verificacion-ayuda { margin: 0 0 14px; font-size: .88rem; color: #6b5a2a; line-height: 1.4; }
.form-content .obligatorio { color: #d32f2f; font-weight: 700; }

.toasts {
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 320px;
    max-width: calc(100vw - 2em);
}
.toast {
    background: #fff;
    color: #333;
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .1), 0 2px 15px rgba(0, 0, 0, .05);
    font-family: Montserrat, sans-serif;
    font-size: .95rem;
    border-left: 6px solid #3498db;
    cursor: pointer;
    transition: opacity .3s, transform .3s;
}
.toast-success { border-left-color: #07bc0c; }
.toast-error   { border-left-color: #e74c3c; }
.toast-warning { border-left-color: #f1c40f; }
.toast-saliendo { opacity: 0; transform: translateX(30px); }

/* Mapa de resultados: ocupa la pantalla debajo del header (--alto-header lo calcula app.js) */
:root { --alto-header: 22vh; }
.overlay-busqueda {
    position: absolute;
    top: var(--alto-header);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--alto-header));
    background-color: rgba(0, 0, 0, .85);
    z-index: 5;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.overlay-busqueda .mapa-expandido-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Columnas de publicidad pegadas al header y repartiendo el alto entre los 5 espacios */
.overlay-busqueda .adsColIzq,
.overlay-busqueda .adsColDer {
    margin-top: 0;
    height: 100%;
    box-sizing: border-box;
    flex: 0 0 17vw;
    width: 17vw;
    min-width: 0;
    overflow: hidden;
}
.overlay-busqueda #map-expandido {
    flex: 1 1 auto;
    min-width: 0;
}
.overlay-busqueda .adsColIzq-slot,
.overlay-busqueda .adsColDer-slot {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
}

/* La X flota sobre el mapa en vez de ocupar un renglón propio */
.overlay-busqueda .cerrar-mapa-expandido {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    margin: 0;
    background: #fff;
    color: #000;
    border: 1px solid #999;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.overlay-busqueda .cerrar-mapa-expandido:hover { background: #eee; }

/* ---- Cartelera de Mensajes ---- */
.mensajes-pagina { max-width: 860px; margin: 24px auto 40px; padding: 0 16px; font-family: Montserrat, sans-serif; }
.mensajes-titulo { margin: 0 0 6px; font-size: 2.2rem; color: #222; }
.mensajes-intro { margin: 0 0 20px; color: #555; line-height: 1.5; }
.mensajes-publicar { background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 4px 14px rgba(0,0,0,.08); margin-bottom: 20px; }
.mensajes-publicar h2 { margin: 0 0 12px; font-size: 1.2rem; color: #128c3e; }
.mensajes-publicar textarea, .mensajes-publicar input[type=text],
.mensaje-responder input, .mensaje-responder textarea, .mensajes-buscar input {
    width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px;
    border: 1px solid #ccc; border-radius: 10px; font-family: inherit; font-size: .95rem;
}
.mensajes-contador { text-align: right; font-size: .78rem; color: #888; margin: 2px 0 8px; }
.mensajes-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.mensajes-campo { flex: 1 1 220px; }
.mensajes-aviso { font-size: .82rem; color: #777; margin: 10px 0; }
.mensajes-boton {
    display: inline-block; padding: 10px 20px; border: none; border-radius: 22px;
    background: #25d366; color: #fff; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none;
}
.mensajes-boton:hover { background: #1fb457; color: #fff; }
.mensajes-boton-chico { padding: 8px 16px; white-space: nowrap; }
.mensajes-buscar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mensajes-limpiar { white-space: nowrap; font-size: .85rem; }
.mensajes-total { color: #666; font-size: .9rem; margin: 6px 0 12px; }
.mensajes-vacio { background: #fff; border-radius: 12px; padding: 20px; color: #777; text-align: center; }
.mensaje-tarjeta { background: #fff; border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.07); border-left: 5px solid #25d366; }
.mensaje-tarjeta.mensaje-propio { border-left-color: #1a73e8; }
.mensaje-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mensaje-rubro { background: #e8f8ee; color: #128c3e; padding: 2px 10px; border-radius: 12px; font-size: .8rem; font-weight: 700; text-transform: capitalize; }
.mensaje-zona { background: #f1f1f1; color: #555; padding: 2px 10px; border-radius: 12px; font-size: .8rem; }
.mensaje-mio { background: #e3eefc; color: #1a73e8; padding: 2px 10px; border-radius: 12px; font-size: .8rem; font-weight: 700; }
.mensaje-texto { margin: 4px 0 10px; font-size: 1.02rem; line-height: 1.45; color: #222; overflow-wrap: anywhere; }
.mensaje-pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: #888; margin-bottom: 10px; }
.mensaje-nota { margin: 0; font-size: .85rem; color: #666; }
.mensaje-nota.mensaje-ok { color: #128c3e; font-weight: 700; }
.mensajes-bienvenida { background: linear-gradient(135deg, #e8f8ee, #f4fbf6); border: 1px solid #c9ecd5; border-radius: 16px; padding: 16px 20px; margin-bottom: 20px; }
.mensajes-bienvenida h2 { margin: 0 0 10px; font-size: 1.2rem; color: #128c3e; }
.bienvenida-columnas { display: flex; gap: 18px; flex-wrap: wrap; }
.bienvenida-columnas > div { flex: 1 1 260px; }
.bienvenida-columnas p { margin: 4px 0 0; font-size: .92rem; line-height: 1.45; color: #444; }
.bienvenida-privacidad { margin: 10px 0 0; font-size: .82rem; color: #666; }
.mensajes-foto { display: block; margin-top: 10px; font-size: .88rem; font-weight: 700; color: #333; }
.mensajes-foto input { display: block; margin-top: 4px; font-weight: 400; max-width: 100%; }
.mensaje-cuerpo { display: flex; gap: 14px; align-items: flex-start; }
.mensaje-contenido { flex: 1; min-width: 0; }
.mensaje-foto img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; display: block; }
.mensaje-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mensaje-botones .mensaje-nota { flex-basis: 100%; }
.mensaje-accion { margin: 0; }
.mensajes-boton-no {
    padding: 10px 18px; border: 1px solid #ccc; border-radius: 22px; background: #fff;
    color: #666; font-weight: 600; font-family: inherit; cursor: pointer;
}
.mensajes-boton-no:hover { background: #f3f3f3; color: #333; }
.mensaje-botones button[disabled] { opacity: .55; cursor: not-allowed; }
.mensaje-botones .mensajes-boton[disabled]:hover { background: #25d366; }
.mensaje-botones .mensajes-boton-no[disabled]:hover { background: #fff; color: #666; }
@media (max-width: 480px) { .mensaje-foto img { width: 80px; height: 80px; } }

/* ---------- Messenger interno (chats) */
.mensajes-encabezado { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mensajes-encabezado .mensajes-titulo { margin: 0; }
.mensajes-boton-chats { position: relative; background: #1a73e8; }
.mensajes-boton-chats:hover { background: #1558b5; }
.chat-volver { display: inline-block; margin-bottom: 8px; font-size: .9rem; text-decoration: none; }
.chat-item {
    display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07); color: #222; text-decoration: none; border-left: 5px solid #ddd;
}
.chat-item:hover { background: #f7faf8; color: #222; }
.chat-item-nuevo { border-left-color: #e53935; }
.chat-avatar {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #e8f8ee;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-item-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-arriba { display: flex; justify-content: space-between; gap: 8px; }
.chat-item-hora { font-size: .75rem; color: #999; white-space: nowrap; }
.chat-item-pedido { font-size: .8rem; color: #128c3e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-ultimo { font-size: .88rem; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-nuevo .chat-item-ultimo { color: #222; font-weight: 700; }
.chat-item-contador {
    display: inline-block; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; margin-left: 6px;
    border-radius: 11px; background: #e53935; color: #fff; font: 700 12px/22px Montserrat, sans-serif; text-align: center;
}
.chat-verificado { color: #a87b00; font-size: .85rem; }
.chat-pagina { display: flex; flex-direction: column; }
.chat-cabecera { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px 14px 0 0; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.chat-detalle { font-size: .85rem; color: #666; text-transform: capitalize; }
.chat-pedido { display: flex; gap: 10px; align-items: flex-start; background: #f4f6f4; padding: 10px 16px; font-size: .88rem; color: #444; border-left: 4px solid #25d366; }
.chat-pedido img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.chat-pedido-etiqueta { display: block; font-size: .72rem; font-weight: 700; color: #128c3e; text-transform: uppercase; }
.chat-mensajes {
    height: calc(100vh - 470px); min-height: 280px; overflow-y: auto; background: #ece5dd; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.chat-burbuja { max-width: 78%; padding: 7px 10px 5px; border-radius: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.12); font-size: .95rem; line-height: 1.35; }
.chat-mia { align-self: flex-end; background: #dcf8c6; border-top-right-radius: 4px; }
.chat-otra { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.chat-burbuja img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin-bottom: 4px; }
.chat-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-hora { display: block; text-align: right; font-size: .68rem; color: #888; margin-top: 2px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; background: #fff; padding: 10px 12px; border-radius: 0 0 14px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.chat-form textarea {
    flex: 1; resize: none; min-height: 42px; max-height: 140px; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid #ccc; border-radius: 20px; font-family: inherit; font-size: .95rem;
}
.chat-adjuntar { flex: 0 0 auto; font-size: 1.5rem; cursor: pointer; padding: 4px; line-height: 1; }
.chat-adjuntar input { display: none; }
.chat-foto-elegida { font-size: .82rem; color: #1a73e8; padding: 6px 12px 0; }
.chat-aviso { font-size: .8rem; color: #777; margin: 10px 4px 0; }
@media (max-width: 600px) {
    .chat-mensajes { height: calc(100vh - 400px); }
    .chat-burbuja { max-width: 88%; }
    .chat-form .mensajes-boton { padding: 10px 14px; }
}

/* Política de privacidad */
.legal-pagina { max-width: 860px; margin: 24px auto 40px; padding: 20px 24px; background: #fff; border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08); font-family: Montserrat, sans-serif; color: #333; line-height: 1.55; }
.legal-pagina h1 { margin: 0 0 4px; font-size: 2rem; color: #222; }
.legal-pagina h2 { margin: 22px 0 8px; font-size: 1.15rem; color: #128c3e; }
.legal-pagina ul { padding-left: 20px; }
.legal-pagina li { margin-bottom: 6px; }
.legal-fecha { margin: 0 0 16px; font-size: .85rem; color: #888; }
.legal-nota { font-size: .82rem; color: #666; }
@media (max-width: 600px) { .legal-pagina { margin: 16px 8px 30px; padding: 16px; } }

/* Imagen horizontal de las laterales: solo en celulares (ver responsive.css) */
.imgLateralMovil { display: none; }

/* "Mensajes" va al lado del logo */
.navbar-container .nav-mensajes-logo {
    position: absolute; left: calc(16.4% + 50px); top: 10px; z-index: 100;
    text-decoration: none; color: #555; font-weight: 700; font-size: 1.6rem; transition: color .3s ease-in-out;
}
.nav-mensajes-logo:hover { color: #25d366; }
@media (max-width: 1024px) {
    .navbar-container .nav-mensajes-logo { position: relative; left: auto; top: auto; margin-left: 30px; font-size: 1.3rem; }
}

/* Circulito rojo con la cantidad de pedidos en "Mensajes" */
.menu-mensajes { position: relative; }
.menu-contador {
    position: absolute; top: -9px; right: -16px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    border-radius: 10px; background: #e53935; color: #fff; font: 700 12px/20px Montserrat, sans-serif; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
@media (max-width: 480px) {
    .menu-contador { top: -8px; right: -9px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; line-height: 16px; }
}
.mensajes-paginas { display: flex; justify-content: center; gap: 16px; align-items: center; margin-top: 16px; font-size: .9rem; }

/* Campo trampa anti-robots: fuera de la pantalla (no display:none, que algunos robots detectan) */
.campo-trampa {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Página Necesidad: formulario y foto centrados, campos del mismo ancho */
.necesidadContainer {
    max-width: 1200px;
    margin: 24px auto;
    padding: 32px 40px;
    justify-content: center;
    align-items: center;
    gap: 56px;
    border-radius: 24px;
}
.necesidadTitulo {
    flex: 0 1 560px;
    font-size: 3.6rem;
    margin: 0;
}
.necesidadTitulo > p { margin: 0; line-height: 1.1; }
.necesidadHr { margin: 18px 0; }
.necesidadTitulo > p.necesidad-cuenta { margin: 0 0 14px; font-size: .95rem; line-height: 1.4; color: #555; }
.formNecesidad { gap: 14px; }
.formNecesidad input,
.formNecesidad textarea,
.formNecesidad button {
    display: block; /* en línea heredaban el interlineado del título y dejaban hueco */
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
}
.necesidadRubro1 { margin-bottom: 0; }
.necesidadImg { flex: 0 1 460px; }
.necesidadImg img { display: block; width: 100%; height: auto; border-radius: 20px; }

/* Ficha del talento al tocar un pin */
.markerDetails.js-detalle {
    margin: 0;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    overflow-y: auto;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: #fff;
    opacity: 1;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    text-align: center;
    z-index: 5;
}
.markerDetails .detalle-foto {
    display: block;
    width: 100%;
    height: 210px;
    margin: 0 0 10px;
    object-fit: cover;
    border-radius: 10px;
    background: #f0f0f0;
}
.detalle-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 15px;
    line-height: 30px;
    z-index: 1;
}
.detalle-cerrar:hover { background: rgba(0, 0, 0, .75); }
.detalle-nombre { margin: 0 0 4px; font-size: 1.15rem; text-transform: capitalize; }
.detalle-distancia { margin: 0 0 10px; color: #777; font-size: .85rem; }
.detalle-dato { margin: 4px 0; font-size: .95rem; overflow-wrap: anywhere; }
.detalle-whatsapp,
.detalle-ingresar {
    display: block;
    margin-top: 10px;
    padding: 10px;
    border-radius: 22px;
    font-weight: 700;
    text-decoration: none;
}
a.detalle-whatsapp,
a.detalle-whatsapp:link,
a.detalle-whatsapp:visited { background: #25d366; color: #fff; }
a.detalle-whatsapp .fa { font-size: 1.2em; }
.detalle-bloqueado {
    margin-top: 6px;
    padding: 12px;
    border-radius: 10px;
    background: #f4f6f4;
}
.detalle-bloqueado p { margin: 0; color: #444; font-size: .95rem; }
a.detalle-ingresar,
a.detalle-ingresar:visited { background: #1a73e8; color: #fff; }

/* Prestadores verificados: pin dorado y sello en la ficha */
.pin-verificado { filter: drop-shadow(0 0 6px rgba(245, 183, 0, .8)); }
.pin-check { color: #fff; font-weight: 900; font-size: 15px; line-height: 1; }
.markerDetails.detalle-es-verificado { box-shadow: 0 0 0 3px #f5b700, 0 8px 28px rgba(0, 0, 0, .3); }
.detalle-sello {
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 12px;
    border-radius: 14px;
    background: linear-gradient(90deg, #f5b700, #ffd54f);
    color: #5a3e00;
    font-weight: 700;
    font-size: .85rem;
}

/* Marcador "¡Ud. está aquí!" del usuario en el mapa */
.pin-usuario {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.pin-usuario-globo {
    position: relative;
    margin-bottom: 10px;
    padding: 7px 14px;
    background: #e53935;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    border: 2px solid #fff;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
    animation: globo-flotar 1.6s ease-in-out infinite;
}
.pin-usuario-globo::after { /* la "colita" del globo */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #e53935;
    border-bottom: 0;
}
.pin-usuario-base { position: relative; display: flex; justify-content: center; }
.pin-usuario-halo {
    position: absolute;
    bottom: -9px;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: rgba(229, 57, 53, .45);
    animation: halo-latido 1.6s ease-out infinite;
}
@keyframes halo-latido {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(3.2); opacity: 0; }
}
@keyframes globo-flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Aviso "Resultados encontrados" arriba del mapa */
.aviso-resultados {
    position: absolute;
    top: calc(var(--alto-header) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: #fff;
    border: 2px solid #25d366;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    font-family: Montserrat, sans-serif;
    animation: aviso-entrar .4s ease-out;
    transition: opacity .4s, transform .4s;
}
.aviso-resultados strong { display: block; font-size: 1.2rem; color: #128c3e; }
.aviso-resultados span { font-size: .9rem; color: #555; }
.aviso-globito { width: 34px; height: 48px; flex-shrink: 0; animation: aviso-rebote 1s ease-in-out infinite; }
.aviso-saliendo { opacity: 0; transform: translate(-50%, -20px); }
.aviso-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aviso-boton {
    padding: 7px 14px;
    border: none;
    border-radius: 18px;
    font-family: Montserrat, sans-serif;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}
.aviso-boton-si { background: #25d366; color: #fff; }
.aviso-boton-si:hover { background: #1fb457; }
.aviso-boton-no { background: #eee; color: #555; }
.aviso-boton-no:hover { background: #ddd; }
.aviso-resultados span.js-aviso-detalle { display: block; }

@keyframes aviso-entrar {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes aviso-rebote {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}