*{
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}
img{
	width: 100%;
}



ul{
    list-style: none;
}

a{
    text-decoration: none;
}




body.scroll-bloqueado {
  overflow: hidden;
}
body{
    background-color: var(--color-primario);
}


.centrar-contenido{
    position: relative;  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
#contenido-principal{
    background-color: var(--color-acento);
}
#footer-principal{
    /*para el color*/
}


.texto-grueso{
    font-family: 'Anton', sans-serif;
}.texto-fino{
    font-family: 'Alegreya Sans SC', sans-serif;
    letter-spacing: -1px;
}

/*BOTONES*/
.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Espacio entre botones */
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.estilo-boton{
  display: inline-flex;        /* o inline-block */
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;

  background: var(--color-secundario);
  color: var(--color-acento);
  font-weight: bold;
  line-height: 1;              /* evita alturas raras en <a> */
  text-decoration: none;       /* quita subrayado del <a> */

  border: none;                /* neutraliza <button> */
  border-radius: 12px;
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;      /* mejor alineación en línea */
  margin-top: 20px;

  transition: background-color .3s ease, transform .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/*FIM BOTONES*/

/* Sombras Arriba y Abajo */
.sombra-arriba::after,
.sombra-abajo::before {
    content: "";
    position: absolute;
    width: 97%;
    left: 50%;
    transform: translate(-50%);
    height: 5px;
}

.sombra-arriba::after {
    bottom: 100%;
    background: radial-gradient(ellipse at 50% 150%, rgba(89, 62, 37, 0.7) 0%, rgba(89, 62, 37, 0) 80%);
}

.sombra-abajo::before {
    top: 100%;
    background: radial-gradient(ellipse at 50% -50%, rgba(89, 62, 37, 0.7) 0%, rgba(89, 62, 37, 0) 80%);
}



p,h1,h2{
    color: var(--color-secundario);;
}

/* Solo aplica el tema cuando venga de cliente-alta y el tema esté activo */
.contenedor-modal[data-boton-original-tipo="cliente-alta"][data-tema-activo="true"] {
  --color-primario: var(--modal-primario);   /* sin fallback autorreferente */
  --color-secundario: var(--modal-secundario);
  --color-acento: var(--modal-acento);
}














/* Círculo rojo mínimo (sin variables) */
.campana-btn{
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;   /* el círculo lo pinta el SVG */
  display: inline-block;
  line-height: 0;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.campana-btn:focus-visible{
  outline: 2px solid rgba(59,130,246,.45);
  outline-offset: 2px;
}

/* El SVG ocupa todo el botón */
.campana-svg{
  width: 100%;
  height: 100%;
  display: block;
}
/* orígenes de rotación */
.campana-svg .bell{ transform-box: fill-box; transform-origin: 50% 16%; }
.campana-svg .clapper{ transform-box: fill-box; transform-origin: 50% 0%; }

/* keyframes */
@keyframes bell-swing{
  0%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}
  45%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}75%{transform:rotate(6deg)}
  85%{transform:rotate(-3deg)}100%{transform:rotate(0)}
}
@keyframes clapper-lag{
  0%{transform:rotate(0)}15%{transform:rotate(-26deg)}30%{transform:rotate(22deg)}
  45%{transform:rotate(-18deg)}60%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}
  85%{transform:rotate(4deg)}100%{transform:rotate(0)}
}

/* activar por clase */
.campana-btn.ring .bell{ animation: bell-swing 900ms ease-in-out both; }
.campana-btn.ring .clapper{ animation: clapper-lag 900ms ease-in-out both; animation-delay: .06s; }

.campana-btn.sonando .bell{ animation: bell-swing 1.4s ease-in-out infinite; }
.campana-btn.sonando .clapper{ animation: clapper-lag 1.4s ease-in-out infinite; animation-delay: .08s; }








/* Contenedor del avatar para anclar superposiciones */
.avatar-wrap{
  position: relative;
  display: inline-block;
}

/* Campana superpuesta, fuera del círculo (esquina superior derecha) */
.campana-overlay{
  position: absolute;
  top: -4px;     /* sácala un poquito fuera */
  right: -4px;
  z-index: 10;
  transition: opacity .2s ease; 
}

/* tamaño de la campana superpuesta */
.campana-btn.campana-overlay{
  width: 22px;
  height: 22px;
}




/* campana sobre el enlace PERFIL del menú de usuario */
.campana-overlay-menu{
  position: absolute;
  top: -6px;
  right: -8px;
  width: 20px;
  height: 20px;
  z-index: 5;
}









/* oculta SOLO cuando el menú de usuario está abierto */
body.menu-usuario-abierto .perfil-contenedor .campana-overlay{
  opacity: 0;
  pointer-events: none;
}