@font-face {
    font-family: 'CocoGothic';
    src: url('../fuente/Zetafonts - CocoGothic-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
  --color-amarillo: rgb(254,204,64);
  --color-azul: rgb(84,114,152);
  --color-rosa: rgb(219,76,127);
  --color-naranja: rgb(249,157,52);
  --color-turquesa: rgb(39,187,165);
  --color-gris: rgb(77,77,79);
}


body {
  background: linear-gradient(135deg, #fff5d7 0%, #39bba5 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  margin: 0;
  justify-content: center;
  position: relative;
  font-family: 'CocoGothic', sans-serif;
  color: var(--color-gris);
}



#logo {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 180px;
  height: auto;
  margin: 0;
  background-size: cover;
}
:root{--bg:#f6f8fb;--card:#fff;--muted:#6b7280;--primary:#fecf40;--accent:#27bba5;--radius:12px;--shadow:0 8px 30px rgba(16,24,40,0.06)}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--muted);min-height:100vh}

#logo{position:absolute;top:24px;left:24px;width:100px}
#derecha{position:absolute;top:24px;right:24px;width:80px}

.center-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px}
.login-container{width:360px;background:var(--card);padding:20px;border-radius:14px;box-shadow:var(--shadow);border:1px solid rgba(15,23,42,0.04);text-align:center}
.login-container h2{margin:0 0 12px 0;color:#0f172a}
.login-container input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);margin-bottom:12px}
.login-container input:focus{outline:none;box-shadow:0 8px 30px rgba(39,187,165,0.08);border-color:var(--accent)}
.login-container button{width:100%;padding:10px;border-radius:10px;border:none;background:var(--primary);color:#0f172a;font-weight:700;cursor:pointer}
.login-container button:hover{filter:brightness(0.97)}

@media(max-width:420px){.login-container{width:100%;padding:16px}.center-wrap{padding:18px}}