@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Baloo&display=swap');

/* ============ Paleta: verde bosque + verde ejército + 30% negro ============ */
:root{
  --bosque:#1E4D2B;
  --bosque-prof:#123320;
  --ejercito:#4B5320;
  --hoja:#A9C77A;          /* acento claro para foco y detalles */
  --texto:#EAF2DC;
  --texto-suave:#B9C8A6;
  --negro30:rgba(0,0,0,.30);
  --vidrio:rgba(12,28,17,.62);
  --borde:rgba(169,199,122,.28);
  --error:#F0A08A;
}

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, form, fieldset, blockquote{
  padding:0; margin:0; font-size:100%; font-weight:normal;
}
*, *::before, *::after{ box-sizing:border-box; }
table{ border-collapse:collapse; border-spacing:0; }
td, th, caption{ font-weight:normal; text-align:left; }
img, fieldset{ border:0; }
ol{ padding-left:1.4em; list-style:decimal; }
ul{ padding-left:1.4em; list-style:square; }
q:before, q:after{ content:''; }

body{
  min-height:100vh;
  color:var(--texto);
  font-family:'Calibri','Segoe UI',Arial,sans-serif;
  /* capa 30% negro + degradado bosque→ejército sobre la imagen original */
  background-color:var(--bosque-prof);
  background-image:
    linear-gradient(var(--negro30), var(--negro30)),
    linear-gradient(155deg, rgba(30,77,43,.94) 0%, rgba(75,83,32,.90) 100%),
    url(../img/fondogrande.jpg);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

@font-face{
  src:url("../fon/KaushanScript-Regular.ttf");
  font-family:acom;
  font-display:swap;
}

/* Lienzo de partículas (logos) – detrás del formulario */
#particulas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

h1{
  font-family:'Showcard Gothic','Baloo',cursive;
  font-size:24px;
  color:var(--hoja);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  text-align:center;
  padding-top:0;
  height:30px;
  justify-content:center;
  align-items:center;
}

#titlog{
  margin:5px auto 0;
  width:100%;
  height:60px;
  display:flex;
  flex-wrap:nowrap;
  justify-content:left;
  align-items:center;
}

/* ============ Tarjeta de acceso ============ */
#login{
  position:relative;
  z-index:1;
  margin:10px auto 0;
  display:block;
  width:90%;
  max-width:400px;
  padding:24px 20px;
  text-align:center;
  background-color:var(--vidrio);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--borde);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  transition:box-shadow .4s ease, border-color .4s ease;
}
#login:hover,
#login:focus-within{
  border-color:rgba(169,199,122,.55);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

#contin{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}
#contin img{
  width:100%;
  height:auto;
  margin-bottom:15px;
}

#nomcol, #nomcol2{
  font-size:24px;
  font-weight:bold;
  font-family:'Baloo',cursive;
  color:var(--texto);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  overflow-wrap:anywhere;
}
/* Mensajes del controlador (datos incorrectos, usuario inactivo, etc.) */
.mensaje-error{
  margin:10px auto;
  width:80%;
  padding:10px 12px;
  font-size:15px;
  color:#FFE3DA;
  background:rgba(120,30,20,.55);
  border:1px solid rgba(240,160,138,.55);
  border-radius:8px;
}
#nomcol{ margin-bottom:0; }
#nomcol2{ margin-bottom:5px; color:var(--hoja); }

img{
  width:150px;
  height:150px;
  margin:auto;
}

/* ============ Campos ============ */
input[type="text"],
input[type="password"]{
  background-color:rgba(0,0,0,.35);
  margin:auto;
  color:var(--texto);
  font-family:'Calibri','Segoe UI',Arial,sans-serif;
  width:80%;
  height:42px;
  font-size:16px;           /* evita el zoom automático en iOS */
  padding:0 12px;
  border-radius:8px;
  border:1px solid var(--borde);
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder{ color:var(--texto-suave); opacity:1; }

input[type="text"]:focus,
input[type="password"]:focus{
  outline:none;
  background-color:rgba(0,0,0,.5);
  border-color:var(--hoja);
  box-shadow:0 0 0 3px rgba(169,199,122,.30);
}

/* ============ Botones ============ */
input[type="submit"]{
  background-color:var(--bosque);
  background-image:linear-gradient(135deg, var(--bosque), var(--ejercito));
  width:80%;
  color:#fff;
  font-weight:bold;
  border:1px solid rgba(169,199,122,.45);
  border-radius:8px;
  padding:10px 20px;
  font-size:16px;
  cursor:pointer;
  transition:filter .3s ease, transform .2s ease, box-shadow .3s ease;
}
input[type="submit"]:hover{
  filter:brightness(1.25);
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}
input[type="submit"]:active{ transform:translateY(0); }

.intxtb{
  background-color:var(--bosque);
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  border-radius:10px;
  border:0;
  height:42px;
  transition:all .3s ease;
}
.intxtb:hover{
  background-color:var(--ejercito);
  transform:translateY(-2px);
  box-shadow:0 6px 10px rgba(0,0,0,.3);
}

a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible{
  outline:3px solid var(--hoja);
  outline-offset:2px;
}

/* Botones PWA (creados desde el JS) */
.pwa-btn{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  color:#fff;
  border:1px solid rgba(169,199,122,.5);
  padding:8px 16px;
  font-size:16px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:filter .25s ease;
}
.pwa-btn:hover{ filter:brightness(1.2); }
.pwa-instalar{ bottom:80px; background:var(--ejercito); }
.pwa-notif{ bottom:20px; background:var(--bosque); }

#acom{
  font-family:acom;
  font-size:32px;
  color:var(--hoja);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  text-align:center;
  padding-top:0;
  height:40px;
  justify-content:center;
  align-items:center;
}

#inputolvido{ margin:2px auto 0; }

/* ============ Móvil ============ */
@media (max-width:520px){
  body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    overflow-y:auto;
  }

  .background-blur{
    position:absolute;
    inset:0;
    background:rgba(18,51,32,.7);
    filter:blur(15px);
    z-index:-1;
  }

  #login{
    width:99%;
    max-width:400px;
    margin:20px;
    padding:20px;
    background-color:rgba(12,28,17,.78);
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.5);
  }
  #login:hover{ box-shadow:0 14px 28px rgba(0,0,0,.55); }

  #log{
    background-image:url(../img/logo-particula.png);
    background-repeat:no-repeat;
    background-position:calc(100% - 50px);
    background-size:contain;
    text-align:center;
    width:65%;
    height:45px;
    margin:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}