*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#f5efe7;
  color:#3C1F1B;
}

/* NAVBAR */

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
}

.hamburger span{
  display:block;
  width:25px;
  height:3px;
  background:#3C1F1B;
  border-radius:3px;
  transition:transform 0.3s, opacity 0.3s;
}

.hamburger.open span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

.hamburger.open span:nth-child(2){
  opacity:0;
}

.hamburger.open span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

header{
  background:#c8a96e;
  padding:0;
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 32px;
  background:#c8a96e;
  max-width:100%;
  margin:0 auto;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:bold;
  color:#3C1F1B;
  font-size:15px;
}

.logo img{
  height:50px;
  width:auto;
  border-radius:50%;
}

nav ul{
  display:flex;
  list-style:none;
  gap:30px;
}

nav a{
  text-decoration:none;
  color:#3C1F1B;
  font-weight:600;
  position:relative;
  font-size:15px;
}

nav ul li:first-child a::after{
  content:'';
  position:absolute;
  bottom:-5px;
  left:50%;
  transform:translateX(-50%);
  width:28px;
  height:3px;
  background:#848C42;
  border-radius:2px;
}

/* HERO */

.hero{
  position:relative;
  background:#848C42;
  color:white;
  text-align:center;
  min-height:260px;
  clip-path:url(#heroClip);
  filter:drop-shadow(0 3px 0 #4a5118);
  z-index:2;
}

.hero::before{
  display:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
  padding:45px 20px 70px;
}

.hero h1{
  font-size:38px;
  margin-bottom:15px;
  font-weight:800;
}

.hero p{
  font-size:18px;
  line-height:1.7;
  max-width:760px;
  margin:0 auto 30px;
}

.hero-btn{
  display:inline-block;
  background:rgba(50,58,15,0.85);
  color:#fff;
  padding:14px 44px;
  border-radius:50px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:background 0.2s;
}

.hero-btn:hover{
  background:rgba(35,42,10,0.95);
}

/* TARJETAS */

.cards{
  position:relative;
  background-image:url('../img/fondo.jpeg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  padding:60px 20px 80px;
  margin-top:-55px;
  z-index:1;
  text-align:center;
}

@supports (-webkit-touch-callout: none){
  .hero,
  .cards{
    background-attachment:scroll;
  }
}

.cards::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
}

.cards-titulo{
  position:relative;
  z-index:1;
  text-align:center;
  color:#fff;
  font-size:1.8rem;
  font-weight:700;
  margin:0 0 24px 0;
  text-shadow:0 2px 8px rgba(0,0,0,0.45);
}

.cards-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,340px));
  gap:40px;
  justify-content:center;
  max-width:800px;
  margin:0 auto;
}

.card{
  background:rgba(255,248,242,0.78);
  padding:36px 28px 28px;
  border-radius:22px;
  border:none;
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
  text-align:center;
  display:flex;
  flex-direction:column;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter:blur(2px);
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
}

.card-icon{
  width:70px;
  height:70px;
  background:#848C42;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}

.card-icon svg{
  width:32px;
  height:32px;
  fill:white;
}

.card h2{
  margin-bottom:4px;
  color:#872323;
  font-size:20px;
}

.card-divider{
  position:relative;
  width:60px;
  height:1.5px;
  background:#d4c0a8;
  margin:8px auto 18px;
}

.card-divider::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:8px;
  height:8px;
  background:#AE8A66;
  border-radius:50%;
}

.card p{
  margin-bottom:20px;
  color:#5C4034;
  flex:1;
}

.cards-grid .botones{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid #f0e4d4;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}

.cards-grid .btn{
  background:#872323;
  color:#fff;
  padding:11px 20px;
  font-weight:700;
  font-size:14px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background 0.2s;
  width:100%;
  box-sizing:border-box;
}

.cards-grid .btn::after{
  content:'';
}

.cards-grid .btn:hover{
  background:#6B1F25;
}

.cards-grid .btn-secondary{
  background:#848C42;
  color:#fff;
  font-size:14px;
  border-radius:10px;
}

.cards-grid .btn-secondary:hover{
  background:#656e32;
  color:#fff;
}

/* BOTONES */

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

.btn{
  background:#AE8A66;
  color:white;
  padding:14px 18px;
  text-decoration:none;
  border-radius:8px;
  font-weight:700;
  display:inline-block;
  transition:0.2s ease;
}

.btn:hover{
  background:#872323;
}

.btn-secondary{
  background:#872323;
  color:white;
}

.btn-secondary:hover{
  background:#6B1F25;
}

/* LOGIN */

.login-body{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:60px 20px 40px;
  min-height:100vh;
  background-image:url('../img/fondo.jpeg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

.login-container{
  background:rgba(255,248,242,0.82);
  padding:40px;
  width:90%;
  max-width:350px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(60, 30, 20, 0.08);
  text-align:center;
}

.login-container h2{
  margin-bottom:20px;
  color:#872323;
}

.login-container input,
.login-container select{
  width:100%;
  padding:12px;
  margin-bottom:15px;
  border:1px solid #ccc;
  border-radius:6px;
}

.login-container button{
  width:100%;
  border:none;
  cursor:pointer;
  margin-top:10px;
  background:#AE8A66;
  color:white;
  padding:12px;
  border-radius:6px;
}

.volver{
  display:block;
  margin-top:10px;
  text-decoration:none;
  color:#872323;
}

.olvide-password{
  display:block;
  margin-top:4px;
  text-decoration:none;
  color:#AE8A66;
  font-size:13px;
}

.olvide-password:hover{
  color:#872323;
  text-decoration:underline;
}

.recuperar-mensaje-ok{
  background:#f0f7eb;
  border:1px solid #848C42;
  border-radius:8px;
  padding:20px;
  color:#2e7d32;
  font-size:14px;
  line-height:1.7;
  text-align:center;
}

.login-container p{
  margin-bottom:20px;
  color:#5C4034;
}

/* FORMULARIO */

.login-container form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* SECCIONES ADICIONALES */

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  justify-content:center;
  margin-top:25px;
}

.btn-outline{
  background:transparent;
  border:2px solid rgba(255,255,255,0.9);
  color:white;
}

.btn-outline:hover{
  background:rgba(255,255,255,0.15);
}

.section-subtitle{
  color:#5C4034;
  max-width:720px;
  margin:8px auto 30px;
  font-size:16px;
}

.bio-section{
  padding:60px 20px;
  background:#f9f0e6;
}

.bio-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}

.bio-image-wrapper{
  display:flex;
  justify-content:center;
}

.bio-image{
  width:100%;
  max-width:500px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 10px 25px rgba(60, 30, 20, 0.08);
}

.bio-text{
  color:#3C1F1B;
  text-align:justify;
}

.bio-text h2{
  margin-bottom:18px;
  color:#872323;
}

.bio-text p{
  margin-bottom:16px;
  line-height:1.8;
  color:#5C4034;
}

.gallery{
  padding:60px 20px;
  background:#f5efe7;
  text-align:center;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  max-width:1100px;
  margin:0 auto;
}

.gallery-item{
  background:#fff8f2;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(60, 30, 20, 0.08);
  transition:transform 0.3s;
}

.gallery-item:hover{
  transform:translateY(-6px);
}

.gallery-item img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.caption{
  padding:14px;
  font-size:14px;
  color:#5C4034;
}

.contacto{
  padding:40px 20px;
  text-align:center;
  background:#B49357;
  color:white;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  max-width:960px;
  margin:0 auto;
  align-items:start;
}

.contact-card{
  background:transparent;
  color:#3C1F1B;
  padding:28px;
  border-radius:16px;
  text-align:left;
}

.contact-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:18px;
}

.contact-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  min-width:24px;
  margin-top:4px;
}

.contact-icon svg{
  width:20px;
  height:20px;
  fill:#000;
}

.contact-label{
  margin:0 0 6px;
  font-weight:700;
  color:#872323;
}

.emergency-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.emergency-list li{
  font-size:15px;
}

.map-placeholder{
  background:transparent;
  border-radius:12px;
  padding:40px;
  color:#3C1F1B;
  font-weight:600;
}

.footer{
  padding:24px 20px;
  text-align:center;
  background:#efe2d6;
  color:#5C4034;
  font-size:14px;
}

.login-header{
  padding:12px 20px;
  text-align:center;
  background:#848C42;
  color:white;
  font-size:14px;
  font-weight:600;
}

@media(max-width:870px){
  .contact-grid{
    grid-template-columns:1fr;
  }

  .navbar{
    flex-wrap:wrap;
    border-radius:20px;
  }

  .hamburger{
    display:flex;
  }

  nav{
    display:none;
    width:100%;
  }

  nav.nav-open{
    display:block;
  }

  nav ul{
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:14px 0;
  }

  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media(max-width:768px){
  .bio-grid{
    grid-template-columns:1fr;
  }

  .bio-image{
    max-width:100%;
  }

  .hero h1{
    font-size:28px;
  }

  .hero p{
    font-size:16px;
  }

  .section-subtitle{
    font-size:14px;
  }
}

@media(max-width:500px){
  .gallery-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .hero::before{
    height:90%;
    border-radius:0 0 40% 40%;
  }

  .hero-inner{
    padding:60px 16px 40px;
  }

  .hero h1{
    font-size:22px;
  }

  .login-container{
    padding:28px 18px;
  }

  nav ul{
    gap:8px;
  }

  nav a{
    font-size:13px;
  }

  .logo span{
    font-size:14px;
  }

  .logo img{
    height:50px;
  }

  .contacto{
    padding:30px 16px;
  }
}

/* BARRA DE FORTALEZA DE CONTRASEÑA */

.password-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}

.password-wrapper input{
  width:100%;
  padding-right:42px !important;
  margin-bottom:0 !important;
}

.toggle-password{
  position:absolute;
  right:10px;
  background:none !important;
  border:none !important;
  cursor:pointer;
  padding:0 !important;
  display:flex;
  align-items:center;
  margin-top:0 !important;
  width:auto !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.eye-icon{
  width:20px;
  height:20px;
  fill:#888;
  transition:fill 0.2s;
}

.toggle-password:hover .eye-icon{
  fill:#872323;
}

.strength-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
}

#password-strength-bar{
  flex:1;
  height:8px;
  background:#e0e0e0;
  border-radius:4px;
  overflow:hidden;
}

#password-strength-fill{
  height:100%;
  width:0%;
  border-radius:4px;
  transition:width 0.35s ease, background-color 0.35s ease;
}

#password-strength-text{
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  min-width:80px;
}

#password-criteria{
  list-style:none;
  padding:0;
  margin:0;
  text-align:left;
}

#password-criteria li{
  font-size:12px;
  color:#aaa;
  padding:2px 0;
  transition:color 0.2s;
}

#password-criteria li::before{
  content:"✗ ";
  color:#e53935;
}

#password-criteria li.ok{
  color:#2e7d32;
}

#password-criteria li.ok::before{
  content:"✓ ";
  color:#2e7d32;
}

/* MODAL ÉXITO */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999;
}

.modal-box{
  background:#fff8f2;
  border-radius:16px;
  padding:40px 36px;
  text-align:center;
  max-width:360px;
  width:90%;
  box-shadow:0 8px 30px rgba(60,30,20,0.18);
  animation:modalEntrar 0.3s ease;
}

@keyframes modalEntrar{
  from{ transform:scale(0.85); opacity:0; }
  to{   transform:scale(1);    opacity:1; }
}

.modal-icono{
  width:64px;
  height:64px;
  background:#848C42;
  color:white;
  font-size:34px;
  font-weight:bold;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.modal-icono-error{
  background:#872323 !important;
}

.modal-box h3{
  color:#2e7d32;
  font-size:20px;
  margin-bottom:10px;
}

.modal-box p{
  color:#5C4034;
  font-size:14px;
  line-height:1.7;
  margin-bottom:24px;
}

/* ESTILOS PARA INICIO CIUDADANO */

#solicitudForm{
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
}

.campo-grupo{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.campo-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:13px;
  color:#872323;
}

.campo-icono{
  width:16px;
  height:16px;
  fill:#872323;
  flex-shrink:0;
}

.campo-opcional{
  font-weight:400;
  color:#999;
  font-size:12px;
}

.campo-select{
  width:100%;
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  background:#fff;
  color:#3C1F1B;
  cursor:pointer;
  transition:border-color 0.2s;
}

.campo-select:focus{
  outline:none;
  border-color:#AE8A66;
  box-shadow:0 0 0 3px rgba(174,138,102,0.15);
}

.campo-textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#3C1F1B;
  resize:vertical;
  transition:border-color 0.2s;
}

.campo-textarea:focus{
  outline:none;
  border-color:#AE8A66;
  box-shadow:0 0 0 3px rgba(174,138,102,0.15);
}

.campo-file{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:2px dashed #AE8A66;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  color:#AE8A66;
  font-weight:600;
  transition:background 0.2s, border-color 0.2s;
}

.campo-file:hover{
  background:#fff3e8;
  border-color:#872323;
  color:#872323;
}

.campo-file svg{
  width:18px;
  height:18px;
  fill:#AE8A66;
  flex-shrink:0;
  transition:fill 0.2s;
}

.campo-file:hover svg{
  fill:#872323;
}

.campo-file input[type="file"]{
  display:none;
}

.campo-file-nombre{
  font-size:12px;
  color:#848C42;
  margin:0;
  word-break:break-all;
  min-height:16px;
}

.solicitud-btn{
  width:100%;
  margin-top:4px;
  border:none;
  cursor:pointer;
  font-size:15px;
}

.doc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.doc-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.campo-file-doc{
  font-size:13px;
  padding:8px 12px;
}

#solicitudesList{
  text-align:left;
}

.solicitud-item{
  background:#f9f9f9;
  padding:15px;
  margin-bottom:10px;
  border-radius:8px;
  border-left:4px solid #AE8A66;
}

.solicitud-item h4{
  margin:0 0 8px 0;
  color:#872323;
}

.solicitud-item p{
  margin:4px 0;
  font-size:14px;
}

.evidencias{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.evidencia-img{
  max-width:100px;
  max-height:100px;
  border-radius:6px;
  border:1px solid #ddd;
}

#logout{
  cursor:pointer;
  color:#872323;
  text-decoration:underline;
}

/* PORTAL CIUDADANO - LAYOUT COMPACTO */

.ciudadano-layout{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:24px;
  justify-content:center;
  max-width:1000px;
  margin:0 auto;
}

.ciudadano-layout .card{
  flex:1;
  min-width:280px;
  max-width:460px;
  padding:22px 18px;
  display:flex;
  flex-direction:column;
}

.ciudadano-layout .card > p{
  flex:none;
  margin-bottom:12px;
}

#solicitudesList{
  overflow-y:auto;
  max-height:480px;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#AE8A66 #f5efe7;
}

#solicitudesList::-webkit-scrollbar{
  width:6px;
}

#solicitudesList::-webkit-scrollbar-track{
  background:#f5efe7;
  border-radius:4px;
}

#solicitudesList::-webkit-scrollbar-thumb{
  background:#AE8A66;
  border-radius:4px;
}

#solicitudesList::-webkit-scrollbar-thumb:hover{
  background:#872323;
}

#solicitudForm{
  gap:12px;
}

#solicitudForm .campo-select,
#solicitudForm .campo-textarea{
  padding:7px 10px;
  font-size:13px;
}

#solicitudForm .campo-label{
  font-size:12px;
}

#solicitudForm .campo-file{
  padding:7px 11px;
  font-size:12px;
}

#solicitudForm .campo-file svg{
  width:15px;
  height:15px;
}

#solicitudForm .campo-file-doc{
  padding:6px 10px;
}

#solicitudForm .doc-grid{
  gap:8px;
}

#solicitudForm .solicitud-btn{
  font-size:14px;
}

@media(max-width:768px){
  .ciudadano-layout{
    flex-direction:column;
    align-items:stretch;
  }

  .ciudadano-layout .card{
    max-width:100%;
  }
}

/* SECCIÓN MI PERFIL */

.perfil-section{
  background-image:url('../img/fondo.jpeg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  padding:50px 20px 70px;
  text-align:center;
}

.perfil-card{
  background:rgba(255,248,242,0.78);
  backdrop-filter:blur(2px);
  border-radius:22px;
  padding:36px 28px 28px;
  max-width:480px;
  margin:0 auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  text-align:center;
}

.perfil-avatar{
  width:72px;
  height:72px;
  background:#848C42;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.perfil-avatar svg{
  width:36px;
  height:36px;
  fill:white;
}

.perfil-card h3{
  color:#872323;
  font-size:20px;
  margin-bottom:22px;
}

.perfil-info{
  text-align:left;
  border:1px solid #e8d8c8;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:8px;
}

.perfil-dato{
  display:flex;
  align-items:center;
  padding:13px 16px;
  gap:12px;
  border-bottom:1px solid #e8d8c8;
}

.perfil-dato:last-child{
  border-bottom:none;
}

.perfil-etiqueta{
  font-weight:700;
  font-size:12px;
  color:#AE8A66;
  text-transform:uppercase;
  letter-spacing:0.5px;
  min-width:70px;
}

.perfil-valor{
  color:#3C1F1B;
  font-size:14px;
  word-break:break-all;
}

/* ACORDEONES DE PERFIL */

.perfil-accion{
  border-top:1px solid #e8d8c8;
  margin-top:4px;
  text-align:left;
}

.perfil-accion-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 4px;
  background:none;
  border:none;
  cursor:pointer;
  color:#3C1F1B;
  border-radius:8px;
  transition:background 0.15s;
}

.perfil-accion-toggle:hover{
  background:#f0e8dc;
}

.accion-icono{
  width:34px;
  height:34px;
  background:#848C42;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.accion-icono svg{
  width:17px;
  height:17px;
  fill:white;
}

.accion-texto{
  flex:1;
  font-weight:700;
  font-size:14px;
  text-align:left;
}

.perfil-chevron{
  width:22px;
  height:22px;
  fill:#AE8A66;
  transition:transform 0.22s;
  flex-shrink:0;
}

.perfil-accion-toggle.abierto .perfil-chevron{
  transform:rotate(180deg);
}

.perfil-accion-body{
  padding:4px 4px 14px;
}

.perfil-accion-body .campo-grupo{
  margin-bottom:0;
}

.perfil-input{
  width:100%;
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:14px;
  background:#fff;
  color:#3C1F1B;
  transition:border-color 0.15s;
}

.perfil-input:focus{
  outline:none;
  border-color:#848C42;
}

.perfil-msg{
  font-size:13px;
  padding:8px 12px;
  border-radius:8px;
  margin-top:10px;
  display:none;
  text-align:left;
}

.perfil-msg.ok{
  background:#f0f7eb;
  color:#2e7d32;
  border:1px solid #848C42;
  display:block;
}

.perfil-msg.error{
  background:#fdf0f0;
  color:#872323;
  border:1px solid #c0392b;
  display:block;
}

/* ZONA PELIGRO */

.perfil-accion-peligro{
  border-top:1px solid #e8d8c8;
  padding-top:18px;
  margin-top:10px;
}

.btn-peligro{
  background:#c0392b;
  color:#fff;
  border:none;
  cursor:pointer;
  width:100%;
  padding:13px 20px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  transition:background 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn-peligro:hover{
  background:#a93226;
}

.btn-peligro svg{
  width:18px;
  height:18px;
  fill:white;
  flex-shrink:0;
}

/* MODAL CONFIRMAR ELIMINACIÓN */

.modal-box h3.modal-titulo-peligro{
  color:#872323;
}

.modal-botones{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.modal-botones .btn{
  flex:1;
  min-width:110px;
  border:none;
  cursor:pointer;
  font-size:14px;
  padding:12px 16px;
  border-radius:10px;
  font-weight:700;
}

@media(max-width:768px){
  .login-body,
  .perfil-section{
    background-attachment:scroll;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
  }
}