/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', sans-serif;
    /*background: #f5f7fa;*/
    background: #e4e9f2;
    color: #333;
	padding-top:100px; /* ≈ altura de la topbar; ajústalo si cambias padding */
  position: relative;
}

body::after {
    content: "";
    position: fixed;
    top: 80px; /* empieza debajo del header */
    right: 0;

    height: calc(100vh - 80px); /* ajusta el alto disponible */
    width: 350px;

    background-image: url("../logo/logo-border.png?a=1");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;

    opacity: 0.1;
    pointer-events: none;
    z-index: -1;
}

main {
  padding-top: 30px;
}


/* Login */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-wrapper {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.login-form h2 {
    margin-bottom: 20px;
    text-align: center;
}

.login-form input,
.login-form button {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.login-form button {
    /*background: #0077ff;*/
    background: #2bba41;
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.login-form button:hover {
    background: #639c34;
}

.login-form input[name="codigo"]{
  text-align:center;
  letter-spacing:.2em;
  font-size:1.2rem;
}

.error {
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 10px;
}

.link {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}

.link a {
    /*color: #0077ff;*/
    color: #0A6C8F;
    text-decoration: none;
}

/* Barra superior fija */
.topbar{
  height: 80px;
}

.topbar{
  position:fixed;   /* se ancla al viewport */
  top:0;            /* arriba del todo */
  left:0;
  right:0;
  z-index:1000;     /* encima de cualquier cosa */

  /* tus estilos anteriores */
  display:flex;
  align-items:center;
  justify-content:space-between;
  /*background:#0077ff;*/
  background:#ffffff;
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.topbar .logo img {
    max-height: 70px;  /* ajusta este valor según tu diseño */
    height: auto;
    width: auto;
    padding-left: 20px;
    object-fit: contain;

}

div.logo {
  margin-bottom: -5px;
}

.logo {
    font-weight: bold;
    font-size: 1.2rem;
}

/*========  NAV  ========*/

.logo{font-weight:bold;font-size:1.2rem}


/* hamburguesa oculta en desktop */
.hamburger{
  display:none;
  background:none;border:none;color:#0A6C8F;font-weight:600;font-size:1.6rem;cursor:pointer;
}

/* menú principal */
.nav-menu{
  display:flex;
  padding:0px 20px;
}

.main-menu{
  list-style:none;
  display:flex;
  gap:20px;
  align-items:center;
}
.main-menu a{
  color:#fff;font-weight:500;text-decoration:none;padding:8px 12px;display:block;
}

.log-out{
  color:#053B50;
}

/* sub-menú */
.has-submenu{position:relative}
.submenu-toggle{
  background:none;border:none;/*color:#fff*/color:#053B50;font:inherit;font-weight:500;cursor:pointer;padding:8px 12px;
}
/* 1) Sub-menú: aparece con fade + slide */
.submenu{
  position:absolute;
  top:100%;left:0;
  /*background:#005fd1;*/
  background:#0A6C8F;
  min-width:160px;
  flex-direction:column;
  border-radius:6px;
  overflow:hidden;

  /* lo importante */
  max-height:0;
  opacity:0;
  transform:translateY(-10px);
  transition:max-height .3s ease, opacity .3s ease, transform .3s ease;
}

.denuncia-form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.denuncia-form {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}


/* DESKTOP: hover → despliega */
@media (min-width:769px){
  .has-submenu:hover .submenu{
    max-height:300px;   /* valor grande que cubra tus <li> */
    opacity:1;
    transform:translateY(0);
  }
}

/*========  MÓVIL  ========*/
@media (max-width:768px){
  .submenu-toggle{
  color:#fff;
}

.main-menu a{
  color:#fff;
  background:#0A6C8F;
}

.main-menu a{
  color:#fff;
  background:#0A6C8F;
}

.log-out {
    color: #fff;
}

  .hamburger{
    display:block;
    padding:0px 20px;
  }



  .nav-menu{
    position:absolute;
    top:100%;right:0;
    /*background:#0077ff;*/
    background:#0A6C8F;
    width:220px;
    display:none;          /* oculto hasta pulsar hamb */
    flex-direction:column;
   padding:25px 20px;
  }
  .nav-menu.active{display:flex}

  .main-menu{flex-direction:column;align-items:flex-start;}

  /* sub-menú móvil */
  .submenu{
    position:static;
    background:#004bb5;
    margin-left:15px;
    display:none;
  }
  /* cuando su <li> tiene clase open */
  .has-submenu.open .submenu{display:flex}
}

/* 2) Menú principal en móvil: entra desde la derecha */
@media (max-width:768px){
  .nav-menu{
    position:absolute;
    top:100%;right:0;
    /*background:#0077ff;*/
    background:#0A6C8F;
    width:220px;
    flex-direction:column;
    padding:10px 0;

    /* animación */
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .nav-menu.active{transform:translateX(0)}

  /* sub-menú móvil (misma técnica) */
  .submenu{
    position:static;
    background:#004bb5;
    margin-left:15px;
    max-height:0;
    opacity:0;
    transform:translateY(-10px);
    transition:max-height .3s ease, opacity .3s ease, transform .3s ease;
  }
  .has-submenu.open .submenu{
    max-height:300px;
    opacity:1;
    transform:translateY(0);
  }
}

/* 3) Hamburger giro suave */
.hamburger{transition:transform .3s ease}
.nav-menu.active ~ .hamburger{transform:rotate(90deg)}  /* opcional */

.form-box{max-width:800px;margin:0px auto;padding:20px}
        .form-box h2{margin-bottom:15px;font-size:1.4rem}
        .form-box h3{margin-top:10px;margin-bottom:30px;font-size:1.1rem;color:#0053b8}
        .form-box label{font-weight:500;display:block;margin:10px 0 4px}
        .form-box input,.form-box select,.form-box textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;font-size:.95rem}
        .form-box .radio-group{display:flex;gap:15px;flex-wrap:wrap;margin-top:4px}
        .form-box .radio-group label{font-weight:normal;display:flex;align-items:center;gap:5px}
        .form-box input[type="radio"]{width:auto}
        .form-box .file-box{margin-top:4px}
        .form-box .hidden{display:none}
        .form-box button{/*background:#0077ff;*/background:#2bba41;color:#fff;border:none;padding:12px 20px;border-radius:6px;font-size:1rem;cursor:pointer;margin-top:30px;width:100%}
        .form-box button:hover{/*background:#005fd1*/ background:#639c34}

.form-box form {
  text-align: center;
}

.form-box h2,
.form-box h3,
.form-box label,
.form-box input,
.form-box select,
.form-box textarea,
.checkbox-group {
  text-align: left;
}
        @media(min-width:768px){.form-box button{width:auto}}




/* INICIO MODIFICACIÓN HAMBURGUESA*/
/* Ícono hamburguesa */
.hamburger .icon::before {
  content: "☰";
  line-height: 1;
}

/* Cambiar a X cuando está abierto */
.hamburger.open .icon::before {
  content: "✖";
}

/* Rotación suave opcional */
.hamburger {
  transition: transform .3s ease;
}

.hamburger.open {
  transform: rotate(90deg);
}
/* FIN MODIFICACIÓN HAMBURGUESA*/

.checkbox-group label,
.checkbox-group input[type="checkbox"] {
  cursor: pointer;
}

.radio-group label,
.radio-group input[type="radio"] {
  cursor: pointer;
}