/* Base mobile-first */
html, body {
  font-size: 1rem; /* tamaño base legible en móviles */
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", system-ui, sans-serif;
  background: #f7fbfd;
  color: #222;
}

.hidden { display:none !important; }

/* --- Header --- */
header {
  background: #4cc9f0;
  color: #fff;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0 0 1rem 1rem;
}


/* --- Main layout --- */
main {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Buscador --- */
#buscar {
  width: 100%;
  padding: 1rem;
  border-radius: 2rem;
  border: none;
  font-size: 1rem;
  background: #eaf7ff;
  outline: none;
  box-sizing: border-box;
}

/* --- Chips dinámicos --- */
.categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  background: #eaf7ff;
  padding: 0.7rem 1.2rem;
  border-radius: 2rem;
  border: 1px solid #4cc9f0;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
}
.chip.activo {
  background: #4cc9f0;
  color: #fff;
  transform: scale(1.05);
}

/* --- Avisos --- */
.avisos {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* separación entre avisos */
}

.aviso {
  background: #fff;
  border-radius: 1rem;
  padding: 1.2rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-size: 1rem;
}
.aviso h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}
.aviso p {
  font-size: 0.95rem;
  line-height: 1.4;
}
.aviso small {
  color: #777;
}

/* --- Botones --- */
.btn {
  background: #4cc9f0;
  color: #fff;
  border: none;
  padding: 0.9rem 1.4rem;
  font-size: 1rem;
  border-radius: 2rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out;
}
.btn:hover {
  background: #38bdf8;
  transform: scale(1.03);
}
.btn:active {
  transform: scale(0.97);
}

/* --- Botón flotante (FAB) --- */
.fab {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  background: #fff; /* 👈 blanco o celeste, como prefieras */
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s;
  z-index: 1100;
  overflow: hidden; /* 👈 asegura que el icono no se salga del círculo */
}

/* FAB directo con el logo */
.fab-icon {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  width: 70px;    /* 👈 ajustá tamaño a gusto */
  height: 70px;
  cursor: pointer;
  z-index: 1100;
  transition: transform 0.2s;
}

.fab-icon:hover {
  transform: scale(1.05);
}

footer {
  text-align: center;
  padding: 1rem 0;
  color: #555;
  font-family: "Poppins", sans-serif;
}

footer .year {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  color: #222;
}

footer .tagline {
  font-size: 0.8rem;
  margin: 0;
  margin-bottom: 100px;
  color: #777;
}





/* --- Drawer lateral para publicar aviso --- */
/* --- Drawer lateral para publicar aviso --- */
/* --- Drawer --- */
/* --- Drawer --- */
/* --- Drawer estilo modal de pantalla completa --- */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  z-index: 9999;
  display: none;                 /* 👈 oculto por defecto */
  overflow-y: auto;              /* 👈 si es más largo que la pantalla */
}

.drawer.active {
  display: block;                /* 👈 visible al activar */
}

.drawer h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 22px;
  color: #00aaff;
  text-align: center;
}

/* Inputs y selects */
.drawer select,
.drawer textarea,
.drawer input {
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  background: #fff;
  box-sizing: border-box;
}

/* Botones */
.drawer button {
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  margin: 10px 5px;
  cursor: pointer;
  font-size: 16px;
  min-width: 100px;
}

.drawer .enviar {
  background: #9ef01a;
  font-weight: bold;
  color: #000;
}

.drawer .cancelar {
  background: #ccc;
  color: #000;
}

/* --- Mobile friendly --- */
@media (max-width: 600px) {
  .drawer {
    padding: 15px;
  }

  .drawer button {
    width: 100%;
    margin: 8px 0;
  }
}



/* Carrusel de categorías */
#categorias {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;        /* 👈 scroll horizontal */
  overflow-y: hidden;
  padding: 0.8rem 0.2rem;
  -webkit-overflow-scrolling: touch; /* suave en iOS */
  scrollbar-width: none;   /* oculta scroll en Firefox */
  scroll-snap-type: x mandatory; /* 👈 snap tipo carrusel */
}
#categorias::-webkit-scrollbar {
  display: none; /* oculta scroll en Chrome/Safari */
}

#categorias {
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0.2rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#categorias::-webkit-scrollbar {
  display: none;
}

.catCard {
  flex: 0 0 auto;
  width: 110px;
  background: #fff;
  border-radius: 1rem;
  padding: 0.8rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.2s;
}
.catCard:hover {
  transform: scale(1.05);
}
.catCard .semi {
  width: 100%;
  height: 50px;
}
.catCard .num {
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
}
.catCard .label {
  font-size: 0.85rem;
  color: #555;
}

/* --- Filtros modernos --- */
.filtros-avanzados {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #333;
}

.filtros-avanzados label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  font-size: 0.8rem;
  font-weight: 500;
  color: #555;
}

/* Select estilizado */
.filtros-avanzados select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 1rem;
  background: #eaf7ff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 1rem center;
  background-size: 1rem;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.filtros-avanzados select:focus {
  outline: none;
  background-color: #dff4ff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}






/* --- Drawer formulario moderno --- */
/* --- Drawer lateral para publicar aviso --- */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%); /* oculto */
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 12px rgba(0,0,0,0.2);
  padding: 1.5rem;
  padding-left: 1.2rem;   /* 👈 asegura margen interno a la izquierda */
  padding-right: 1.2rem;  /* 👈 margen derecho parejo */
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 1000;
  box-sizing: border-box; /* 👈 respeta padding en width */
  opacity: 0;
}

.drawer.active {
  transform: translateX(0); /* aparece desde la derecha */
  opacity: 1;
}


.drawer h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  color: #4cc9f0;
  text-align: center;
}

/* --- inputs y selects --- */
.drawer input,
.drawer textarea,
.drawer select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 1rem;
  background: #eaf7ff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 1rem center;
  background-size: 1rem;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.drawer textarea {
  min-height: 120px;
  resize: none;
  line-height: 1.5;
}

.drawer input:focus,
.drawer textarea:focus,
.drawer select:focus {
  outline: none;
  background-color: #dff4ff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* --- Botones --- */
.drawer button {
  padding: 1rem;
  border-radius: 1rem;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer .btn.enviar {
  background: #9ef01a; /* verde lima */
  color: #222;
  font-weight: 600;
}
.drawer .btn.enviar:hover {
  background: #8bdc12;
}

.drawer .btn.cancelar {
  background: #eee;
  color: #444;
}
.drawer .btn.cancelar:hover {
  background: #ddd;
}


/* --- Botones en modales Swal --- */
.swal2-popup {
  border-radius: 1.2rem !important;
  font-family: "Poppins", sans-serif;
}

.swal2-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  width: 100%;
}

.swal2-actions .btn-whatsapp,
.swal2-actions .btn-compartir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  border-radius: 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.swal2-actions .btn-whatsapp {
  background: #4cc9f0;
  color: #fff;
  border: none;
}
.swal2-actions .btn-whatsapp:hover {
  transform: scale(1.03);
  background: #38bdf8;
}

.swal2-actions .btn-compartir {
  background: #9ef01a;
  color: #222;
  border: none;
}
.swal2-actions .btn-compartir:hover {
  transform: scale(1.03);
  background: #8bdc12;
}

/* Botones dentro del Swal */
.btn-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  margin-top: 0.8rem;
  border-radius: 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  border: none;
}

.btn-modal span {
  font-size: 1.3rem;
  margin-right: 0.5rem;
}

/* WhatsApp (celeste) */
.btn-whatsapp {
  background: #4cc9f0;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-whatsapp:hover {
  background: #38bdf8;
  transform: scale(1.03);
}

/* Compartir (verde lima) */
.btn-compartir {
  background: #9ef01a;
  color: #222;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-compartir:hover {
  background: #8bdc12;
  transform: scale(1.03);
}

/* Contenedor de acciones */
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

/* Cada acción con ícono + texto */
.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Botones circulares minimalistas */
.circle-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: none;              /* 👈 quita borde */
  outline: none;             /* 👈 quita borde azul */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.circle-btn:focus {
  outline: none;             /* 👈 evita borde en focus */
}

.circle-btn:active {
  transform: scale(0.92);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #1ebe5d);
  color: #fff;
}

.btn-compartir {
  background: linear-gradient(135deg, #4cc9f0, #1da9d7);
  color: #fff;
}



/* Texto debajo del ícono */
.action small {
  font-size: 0.9rem;
  color: #444;
}


.buscador-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.buscador-wrapper input {
  flex: 1;
}

.icon-btn {
  background: #4cc9f0; /* celeste */
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.icon-btn:hover {
  background: #38bdf8;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
  fill: #fff; /* blanco */
}

/* Estado apagado (default) */
.icon-btn {
  background: #bdecff; /* celeste muy tenue */
}
.icon-btn svg {
  opacity: 0.5; /* ícono blanquito apagado */
}

/* Estado encendido */
.icon-btn.active {
  background: #4cc9f0; /* celeste fuerte */
}
.icon-btn.active svg {
  opacity: 1; /* ícono full visible */
}

/* --- Tarjetas modernas --- */
.card {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem 1rem 1.5rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  animation: fadeInUp 0.4s ease;
}


.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.card h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}
.card p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.4;
  margin: 0.2rem 0 0.6rem;
}
.card small {
  color: #777;
  font-size: 0.8rem;
}

.card {
  position: relative;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem 1rem 1.5rem 1rem; /* 👈 más padding abajo */
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  animation: fadeInUp 0.4s ease;
}

.card h3 {
  margin-top: 0.5rem; /* 👈 separa del badge */
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}

.badge {
  position: absolute;
  top: -0.6rem;
  right: -0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  color: #fff;
  z-index: 5;
}

.badge.ok { background: #e6ffcc; color: #222; }
.badge.manana { background: #f77f00; }
.badge.hoy { background: #ffb703; }
.badge.vencido { background: #e63946; }


/* Animación de entrada */
.fade-in-up {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}







/* --- Slider bonito --- */
#radioKm {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 10px;
  outline: none;
  background: #f0f0f0; /* color base */
}

#radioKm::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4cc9f0;
  border: 2px solid #fff;
  cursor: pointer;
  margin-top: -5px;
}

#radioKm::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4cc9f0;
  border: 2px solid #fff;
  cursor: pointer;
}








/* PANEL Contenedor principal del formulario */
.form-edit {
  max-width: 400px;        /* ancho máximo */
  margin: 20px auto;       /* centrado horizontal */
  padding: 20px;           /* espacio interno */
  background: #fff;        /* fondo blanco */
  border-radius: 10px;     /* bordes redondeados */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* sombra suave */
  display: flex;
  flex-direction: column;
  gap: 15px;               /* separación entre elementos */
}

/* Inputs y textarea */
.form-edit input,
.form-edit textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Botones */
.form-edit button {
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.form-edit .btn-guardar {
  background: #6c63ff;
  color: #fff;
}

.form-edit .btn-cancelar {
  background: #ddd;
  color: #333;
}


/* ESTILO PARA LAS VISTAS DE UN AVISO EN MODO EDICIÓN */
.badge-vistas {
  position: absolute;
  top: -8px;
  left: 8px;
  background: #4cc9f0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.card {
  position: relative; /* necesario para posicionar el globito */
}


.chip {
  display: inline-block;
  padding: 6px 14px;
  margin: 4px;
  border-radius: 20px;
  background: #f0f0f0;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  user-select: none;
}

.chip:hover {
  background: #e0e0e0;
}

.chip.activo {
  background: #ccff99; /* verde lima suave */
  color: #000;
  font-weight: bold;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

.catCard.activo {
  background: #ccff99; /* verde lima suave */
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  transform: scale(1.02);
}

/* Estado activo para las categorías */
#categorias .catCard.activo {
  background-color: #e6ffcc; /* verde lima muy suave */
  border: 2px solid #9ef01a; /* verde más fuerte para destacar */
  box-shadow: 0 0 8px rgba(158, 240, 26, 0.4);
  transform: scale(1.03);
  transition: all 0.2s ease;
}

.panel-actions {
  display: flex;
  justify-content: center;
  gap: 10px; /* separación entre botones */
  margin-top: 20px;
}

.panel-actions .btn {
  flex: none;           /* no ocupar todo el ancho */
  padding: 10px 20px;   /* tamaño cómodo */
  border-radius: 20px;  /* bordes redondeados */
  min-width: 120px;     /* mismo ancho mínimo */
}


#cargarMas {
  display: inline-block;   /* que se ajuste al contenido */
  padding: 10px 25px;
  margin: 20px auto;       /* centrado */
  background-color: #4cc9f0;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  width: auto;             /* 👈 no ocupa todo el ancho */
}

#cargarMas:hover {
  background-color: #38a8d8;
}


.card .aviso-link {
  color: #000;             /* negro */
  text-decoration: none;   /* sin subrayado */
  font-weight: bold;       /* resaltar como título */
}

.card .aviso-link:hover {
  text-decoration: underline; /* opcional */
}


.detalle-aviso {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.detalle-aviso h2 {
  margin-top: 0;
  color: #333;
}

.detalle-aviso p {
  font-size: 1.1em;
  line-height: 1.4;
}

.header-detalle {
  display: flex;
  justify-content: center;   /* Centra horizontal */
  align-items: center;       /* Centra vertical */
  padding: 15px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.logo-detalle {
  max-width: 180px;   /* Tamaño máximo del logo */
  height: auto;       /* Mantener proporciones */
}

h2 {
  font-size: 1.4rem;
  margin: 0 0 5px;
  color: #222;
}

h3 {
  font-size: 1.1rem;
  margin: 0 0 10px;
  font-weight: normal;
  color: #666;
}

.volver-wrapper {
  text-align: center;
  margin: 20px 0;
}

.btn-peque {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #4cc9f0;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-peque:hover {
  background-color: #38a9d3;
}


    .form-edit {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 15px;
      text-align: center;
    }
    .form-edit textarea,
    .form-edit input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 16px;
      box-sizing: border-box;
    }
    .form-edit button {
      padding: 10px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn-guardar { background: #6c63ff; color: #fff; }
    .btn-cancelar { background: #ddd; color: #333; }

    .vigencia-msg {
  font-size: 0.9em;
  color: #444;
  margin: 10px 0 15px;
  text-align: center;
}

.vigencia-texto {
  font-size: 0.9em;
  color: #555;
  margin: 10px 0;
  text-align: center;
}


/* BREADCRUMB */

.breadcrumb {
  font-size: 0.9em;
  margin: 15px 0;
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  margin-right: 8px;
}

.breadcrumb li::after {
  content: "›";
  margin-left: 8px;
  color: #aaa;
}

.breadcrumb li:last-child::after {
  content: "";
}

.breadcrumb a {
  color: #4cc9f0; /* azul suave, consistente con tu estilo */
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 10px 0;
}

.breadcrumb li {
  margin-right: 5px;
}

.breadcrumb li+li:before {
  content: "›";
  margin-right: 5px;
  color: #666;
}

.breadcrumb a {
  text-decoration: none;
  color: #0077cc;
}

.breadcrumb li[aria-current="page"] {
  color: #333;
  font-weight: bold;
}


.nav-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: "Poppins", sans-serif;
  z-index: 1000;
}

.nav-item {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: #444;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nav-item i {
  font-size: 1.2rem;
  color: #4cc9f0;
}




.metricas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1rem 0;
}

.metrica-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
}

.metrica-card i {
  font-size: 1.5rem;
  color: #4cc9f0;
  margin-bottom: 0.5rem;
}

.metrica-card .valor {
  font-size: 1.4rem;
  font-weight: bold;
  color: #222;
}

.metrica-card .label {
  font-size: 0.9rem;
  color: #555;
}

.modal-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.circle-btn.edit {
  background: #e0f4ff; /* celeste suave */
  color: #0d6efd;     /* azul */
}

.circle-btn.delete {
  background: #ffe0e0; /* rojo suave */
  color: #dc3545;      /* rojo fuerte */
}

.circle-btn:hover {
  transform: scale(1.1);
}

.card {
  position: relative;
  padding-bottom: 3rem; /* espacio para los botones */
}

.modal-actions {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;  /* 👈 ahora alineados a la derecha */
  display: flex;
  gap: 0.6rem;
}

.circle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.circle-btn.edit {
  background: #e0f4ff; /* celeste suave */
  color: #0d6efd;     /* azul */
}

.circle-btn.delete {
  background: #ffe0e0; /* rojo suave */
  color: #dc3545;      /* rojo fuerte */
}

.circle-btn:hover {
  transform: scale(1.1);
}





/* --- Botones de acción en el detalle (index.php) --- */
.detail-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none !important;   /* 👈 elimina borde feo */
  outline: none !important;  /* 👈 elimina highlight de foco */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.detail-btn.whatsapp {
  background: #e0f9e5;   /* verde suave */
  color: #25d366;
}

.detail-btn.share {
  background: #e0f0ff;   /* celeste suave */
  color: #0d6efd;
}

.detail-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem; /* 👈 deja espacio debajo del texto */
}


.aviso-detalle {
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.5;
}

.aviso-localidad {
  margin-top: 0.5rem;
  font-weight: 500;
  color: #444;
}

.aviso-descripcion {
  margin-top: 0.8rem;
  font-size: 1rem;
  color: #222;
}

.aviso-fecha {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #4cc9f0; /* celeste oficial Avisitos */
}

.aviso-vencimiento {
  margin-top: 0.8rem;
  font-weight: bold;
  color: #333;
}

.detail-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
}

.nav-footer .fa-whatsapp {
  font-size: 1.5rem;   /* agranda un poco más que los otros */
  color: #25d366;      /* verde oficial WhatsApp */
  font-weight: 900;    /* simula más grosor */
}





.aviso-line {
  margin: 0.3rem 0;
}

.aviso-line.categoria {
  font-weight: 600;
  font-size: 1.1rem;
  color: #222;
}

.aviso-line.localidad {
  font-size: 0.95rem;
  color: #555;
}

.aviso-line.localidad i {
  color: #4cc9f0; /* celeste oficial Avisitos */
  margin-right: 4px;
}

.aviso-line.descripcion {
  font-size: 0.95rem;
  color: #333;
}

.aviso-line.fecha {
  font-size: 0.85rem;
  color: #4cc9f0; /* celeste oficial Avisitos */
}

#filtrosSticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;

  /* 🔹 Forzar ancho completo */
  width: 100vw;
  margin-left: calc(-50vw + 50%); /* truco: rompe el contenedor y ocupa toda la pantalla */
}

.buscador-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.buscador-wrapper input {
  flex: 1;
}

.filtros-selects {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.filtros-selects select {
  flex: 1;
}

/* Estilo uniforme para inputs y selects */
.buscador-wrapper input,
.filtros-selects select {
  background: #eaf6ff;   /* mismo celeste claro */
  border: none;
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.95rem;
  color: #333;
  outline: none;
}

/* Ajustar selects */
.filtros-selects select {
  flex: 1;
  appearance: none; /* quita flecha nativa (opcional) */
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Ícono de flecha para selects (opcional, si querés reemplazarla) */
.filtros-selects select {
  background-image: url("data:image/svg+xml,%3Csvg fill='%234cc9f0' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  padding-right: 2rem; /* espacio para flecha */
}

.footer-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #333;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-item i {
  font-size: 20px;
  margin-bottom: 3px;
  color: #4cc9f0; /* celeste oficial */
}

.footer-item span {
  font-size: 11px;
  color: #333;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  background: #fff;
  padding: 6px 0 4px;
  border-top: 1px solid #ddd;
  z-index: 1000;
}

.footer .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #333;
  text-decoration: none;
}

.footer .nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
  color: #4cc9f0;
}


/* 🔹 Contenedor central publicar */
/* Contenedor del botón publicar */
.nav-publish {
  position: relative;
  top: -20px; /* flota el círculo, pero el texto queda en línea */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}

/* Círculo */
.nav-publish .circle {
  width: 60px;
  height: 60px;
  background: #e3f6fc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  margin-bottom: 6px; /* espacio entre círculo y texto */
}

/* Logo dentro */
.nav-publish img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

/* Texto debajo */
.nav-publish span {
  font-size: 12px;
  font-weight: 600;
  color: #4cc9f0;
  line-height: 1;
}









.carrusel-vistos {
  margin: 20px 0;
}

.carrusel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.carrusel-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  scrollbar-width: none; /* Firefox */
}
.carrusel-scroll::-webkit-scrollbar {
  display: none; /* Chrome */
}

.carrusel-card {
  min-width: 180px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex-shrink: 0;
}





/* ===========================
   Vistos recientemente
   =========================== */
.vistos-recientes {
  background: #f9fafc;
  border-radius: 12px;
  padding: 15px;
  padding-bottom: 15px;
  margin: 15px 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.vistos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.vistos-header h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.link-ver-todos {
  font-size: 13px;
  color: #4cc9f0;
  text-decoration: none;
  font-weight: 500;
}
.link-ver-todos:hover {
  text-decoration: underline;
}

.vistos-carrusel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 20px; /* 👈 aire debajo de las tarjetas */
  scroll-snap-type: x mandatory;
}
.vistos-carrusel::-webkit-scrollbar {
  display: none; /* Chrome */
}

.vistos-card {
  min-width: 140px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 10px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.vistos-card:hover {
  transform: translateY(-3px);
}

.vistos-cat {
  font-size: 12px;
  font-weight: 600;
  color: #4cc9f0;
  margin-bottom: 4px;
}

.vistos-desc {
  font-size: 13px;
  color: #555;
  flex: 1;
  margin-bottom: 8px;
  line-height: 1.3em;
}

.vistos-btn {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #4cc9f0;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}
.vistos-btn:hover {
  background: #3ab0d8;
}

/* Contenedor del bloque de vistos */
.vistos-recientes {
  max-width: 100%; /* asegura que ocupe todo */
  margin: 15px auto;
  padding: 0 12px; /* igual al listado de avisos */
  box-sizing: border-box;
}

/* Header (título + link Ver todos) */
.vistos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 4px;
}

.vistos-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.vistos-header a {
  font-size: 13px;
  color: #00aaff;
  text-decoration: none;
}

/* Carrusel horizontal */
.vistos-scroll {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 12px;
  scrollbar-width: none; /* oculta scroll en Firefox */
}

.vistos-scroll::-webkit-scrollbar {
  display: none; /* oculta scroll en Chrome/Safari */
}

/* Tarjetas dentro del carrusel */
.visto-card {
  flex: 0 0 80%; /* ancho relativo (casi full pantalla) */
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-size: 14px;
}

.visto-card h4 {
  font-size: 14px;
  margin: 0 0 4px;
  color: #0077cc;
}

.visto-card p {
  font-size: 13px;
  color: #555;
  margin: 0 0 8px;
}

.visto-card .btn-small {
  display: inline-block;
  background: #00aaff;
  color: #fff;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
}


/* ===== Estilos para la página de Vistos por vos ===== */

.vistos-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.vistos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.vistos-header h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vistos-header h2::before {
  content: "👁️";
  font-size: 1rem;
}

.vistos-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.visto-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.visto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.visto-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #444;
}

.visto-card p {
  font-size: 0.85rem;
  color: #666;
  margin: 0 0 10px 0;
}

.visto-card .btn-ver {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  background: #4cc9f0;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}

.visto-card .btn-ver:hover {
  background: #38bdf8;
}

/* Botón limpiar */
.limpiar-btn {
  display: block;
  margin: 20px auto 0;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 20px;
  background: #f1f5f9;
  color: #444;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.limpiar-btn:hover {
  background: #e2e8f0;
}


/* Tarjeta en página de detalle */
.card-detalle {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.badge-detalle {
  display: inline-block;
  background: #e3f6fc;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
}

.modal-actions-detalle {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 25px; /* 👈 margen extra para que no pise el texto */
}

.action-detalle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Botones de acción en detalle */
.circle-btn-detalle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;         /* Fondo blanco limpio */
  border: 2px solid #4cc9f0;   /* Borde celeste como tu identidad */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.circle-btn-detalle i {
  font-size: 22px;
  color: #4cc9f0;              /* Ícono en celeste */
}

/* Hover */
.circle-btn-detalle:hover {
  background: #4cc9f0;         /* Celeste sólido */
  transform: translateY(-2px);
}

.circle-btn-detalle:hover i {
  color: #fff;                 /* Ícono blanco en hover */
}

/* Texto pequeño debajo */
.action-detalle small {
  margin-top: 6px;
  font-size: 12px;
  color: #666;                 /* Gris más legible */
}








/* Contenedor de acciones del popup */
.actions-popup {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 15px;
}

/* Cada acción dentro del popup */
.action-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: #555;
}

/* Botón circular exclusivo del popup */
.circle-btn-popup {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid #4cc9f0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.circle-btn-popup:hover {
  background: #e3f6fc;
  transform: scale(1.1);
}

/* Iconos SOLO dentro del popup */
.circle-btn-popup-icon {
  font-size: 22px;
  color: #4cc9f0;
}











/* Contenedor centrado sobre el footer */
.app-install-wrapper {
  position: fixed;
  bottom: 100px; /* más arriba para que quede por encima del círculo Publicar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999; /* siempre por encima */
  text-align: center;
}

/* Botón Instalar App */
.btn-app {
  background: #d9f99d;        /* verde claro igual que fondo de TODOS */
  border: 2px solid #9ef01a;  /* verde borde igual que arco TODOS */
  color: #000;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-app:hover {
  background: #c6f47b;        /* un poco más fuerte en hover */
  border-color: #70c000;      /* borde más oscuro en hover */
}

/* Tooltip IOS */
.tooltip-app {
  margin-top: 6px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  display: none;
  max-width: 220px;
  line-height: 1.4;
}

.hidden {
  display: none !important;
}






.drawer {
  position: fixed;
  top: 0;
  right: -100%; /* oculto fuera de pantalla */
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.3);
  padding: 20px;
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 9999;
}

.drawer.active {
  right: 0; /* entra al viewport */
}


.drawer.active {
  transform: translateX(0) !important;
  opacity: 1 !important;
  z-index: 99999 !important;
}






/* Overlay */
.menulateral-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 999;
}
.menulateral-overlay.active { display: block; }

/* Menú */
.menulateral {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 80%;
  max-width: 320px;
  background: #eaf7ff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;

  /* Blindado contra escalado global */
  font-size: 16px !important;
}
.menulateral.active { transform: translateX(0); }

/* Header */
.menulateral-header { text-align: center; }
.menulateral-logo { max-width: 140px; height: auto; }

/* Divider */
.menulateral-divider {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0.8rem 0;
}

/* Opciones */
.menulateral-seccion {
  margin: 10px 0; /* antes estaba seguro en 20px o más */
  padding: 0;
}

.menulateral-label {
  font-weight: 600;
  margin-bottom: 0.4rem;
  display: block;
}
.menulateral-font {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.menulateral-font-btn,
.menulateral-font-reset {
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.menulateral-font-size {
  min-width: 40px;
  text-align: center;
  font-weight: bold;
}
.menulateral-btn {
  width: 100%;
  padding: 0.8rem;
  border: none;
  border-radius: 6px;
  background: #fff;
  text-align: left;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  cursor: pointer;
}
.menulateral-btn i { margin-right: 6px; color: #4cc9f0; }

/* Footer */
.menulateral-footer {
  text-align: center;
  font-size: 14px;
  color: #555;
}

/* Asegura que Swal aparezca arriba de todo */
.swal2-container {
  z-index: 3000 !important;
}



/* Contenedor general del menú */
.menulateral {
  position: fixed;
  top: 0; left: 0;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: #eaf7ff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 2000;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 👈 Header arriba, body en medio, footer abajo */
  padding: 1rem;
  box-shadow: 2px 0 12px rgba(0,0,0,0.2);
}

/* Contenido del menú */
.menulateral-body {
  flex: 1;               /* ocupa el espacio intermedio */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 👈 empuja letra + notificaciones al pie */
  gap: 1rem;
}

/* Footer */
.menulateral-footer {
  text-align: center;
  font-size: 14px;
  color: #555;
  padding-top: 0.8rem;
  border-top: 1px solid #ddd;
}




/* Estilo uniforme para todos los ítems del footer */
.nav-footer .nav-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #333;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-footer .nav-item i {
  font-size: 20px;
  color: #4cc9f0;
  margin-bottom: 2px;
}




/* Botón de notificaciones */
.menulateral-btn {
  width: 100%;
  padding: 0.8rem 1rem;
  background: #fff;
  border: none;
  border-radius: 0.6rem;
  font-size: 16px;
  color: #333;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Estado activo (notificaciones ON) */
.menulateral-btn.active {
  background: #4cc9f0;
  color: #fff;
}

.menulateral-btn.active i {
  color: #fff;
}









/* Bloque de copyright */
.footer-info {
  text-align: center;
  margin-top: 2rem;
  padding: 1rem 0;
  font-family: "Poppins", sans-serif;
  color: #555;
  background: none;
  position: relative;
  z-index: 1;
}

/* Asegura que quede visible encima del footer fijo */
.footer-info .year {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  color: #222;
}

.footer-info .tagline {
  font-size: 0.85rem;
  margin: 0.2rem 0 0;
  color: #777;
}

/* 👇 espacio para que el contenido no quede tapado por el footer fijo */
body {
  padding-bottom: 100px; /* ajusta según la altura de .nav-footer */
}




/* --- Avisitos: thumbnail lateral en listado --- */
.aviso-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.av-thumb-l{
  width:72px;
  height:72px;
  border-radius:12px;      /* bordes redondeados */
  object-fit:cover;        /* 1:1 bien recortado */
  flex:0 0 72px;
  background:#f2f2f2;
}

.av-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.av-categoria{font-weight:600; line-height:1.1;}
.av-localidad{font-size:.9rem; color:#666;}
.av-desc{color:#222;}
.av-fecha{font-size:.85rem; color:#777;}

/* un poco de aire en la tarjeta */
.avisos .card{padding:10px 12px;}

/* un poquito más grande en pantallas medianas */
@media (min-width:480px){
  .av-thumb-l{width:84px;height:84px;flex-basis:84px;border-radius:14px;}
}
@media (min-width:768px){
  .av-thumb-l{width:96px;height:96px;flex-basis:96px;border-radius:16px;}
}





/* Evitar scroll de fondo mientras está el recorte abierto */
html.no-scroll, body.no-scroll { overflow: hidden !important; }

/* --- Recorte 1:1 --- */
.cropper-wrap{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  z-index:2147483647; /* más alto que cualquier overlay con !important */
}
.cropper-wrap.hidden{display:none}
.cropper-card{background:#fff;border-radius:16px;max-width:92vw;width:560px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cropper-area{max-height:60vh;overflow:hidden;border-radius:16px 16px 0 0}
.cropper-area img{display:block;max-width:100%;height:auto}
.cropper-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px}
/* Evita el retardo de 300ms en mobile y dobles toques */
.cropper-wrap, .cropper-card button { touch-action: manipulation; }