*{box-sizing:border-box;}

:root{
  --azul:#1565c0;
  --azul-oscuro:#0d47a1;
  --fondo1:#e3f2fd;
  --fondo2:#fffde7;
  --texto:#123;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(135deg,var(--fondo1),var(--fondo2));
  color:var(--texto);
}

header{
  text-align:center;
  padding:28px 14px 18px;
}

h1{
  margin:0;
  color:var(--azul-oscuro);
  font-size:clamp(30px,5vw,54px);
}

header p{
  margin:8px auto 0;
  max-width:850px;
  font-size:18px;
}

button{
  border:0;
  border-radius:999px;
  padding:11px 18px;
  font-weight:bold;
  cursor:pointer;
  background:var(--azul);
  color:white;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  touch-action:manipulation;
}

button:hover{background:var(--azul-oscuro);}
button:disabled{opacity:.55;cursor:not-allowed;}
button.danger{background:#e53935;}
button.danger:hover{background:#b71c1c;}
button.secondary{background:#455a64;}
button.secondary:hover{background:#263238;}

.card{
  background:white;
  border-radius:22px;
  padding:24px;
  box-shadow:0 4px 16px rgba(0,0,0,.16);
}

.container{
  width:min(900px,94vw);
  margin:20px auto 40px;
}

.form-grid{display:grid;gap:14px;}

label{
  font-weight:bold;
  color:#0d47a1;
}

input, textarea{
  width:100%;
  border:2px solid #bbdefb;
  border-radius:14px;
  padding:13px 14px;
  font-size:18px;
  font-family:inherit;
  outline:none;
}

textarea{
  min-height:140px;
  resize:vertical;
}

input:focus, textarea:focus{
  border-color:#1565c0;
  box-shadow:0 0 0 3px rgba(21,101,192,.15);
}

.small{font-size:14px;color:#455a64;}

.ok,.error,.warn{
  display:none;
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  font-weight:bold;
}

.ok{
  background:#e8f5e9;
  border-left:8px solid #43a047;
  color:#1b5e20;
}

.error{
  background:#ffebee;
  border-left:8px solid #e53935;
  color:#b71c1c;
  white-space:pre-wrap;
}

.warn{
  background:#fff8e1;
  border-left:8px solid #fbc02d;
  color:#795548;
}

.links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:18px;
}

.screen-body{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.8),transparent 18%),
    radial-gradient(circle at 85% 10%,rgba(255,255,255,.5),transparent 16%),
    linear-gradient(135deg,#e3f2fd,#fffde7);
}

.screen-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 24px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  box-shadow:0 3px 14px rgba(0,0,0,.12);
  position:sticky;
  top:0;
  z-index:10;
}

.screen-header h1{font-size:clamp(24px,4vw,44px);}

.counter{
  font-weight:bold;
  background:#fffde7;
  border:2px solid #fdd835;
  color:#795548;
  padding:8px 14px;
  border-radius:999px;
}

.board{
  padding:24px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px;
  align-items:start;
}

.postit{
  --rot:0deg;
  background:#fff176;
  padding:18px 16px 16px;
  min-height:150px;
  border-radius:8px 8px 18px 8px;
  box-shadow:
    0 12px 18px rgba(0,0,0,.18),
    inset 0 -18px 24px rgba(0,0,0,.05);
  transform:rotate(var(--rot));
  position:relative;
  overflow-wrap:anywhere;
  animation:pop .25s ease-out;
}

.postit::before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  width:46px;
  height:14px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,255,255,.45);
  border-radius:4px;
}

.postit .name{
  font-weight:bold;
  color:#263238;
  margin-bottom:10px;
  font-size:15px;
}

.postit .answer{
  font-size:20px;
  line-height:1.25;
  white-space:pre-wrap;
}

.postit .time{
  margin-top:14px;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

@keyframes pop{
  from{transform:scale(.7) rotate(var(--rot)); opacity:0;}
  to{transform:scale(1) rotate(var(--rot)); opacity:1;}
}

.empty{
  grid-column:1/-1;
  text-align:center;
  color:#607d8b;
  padding:50px 20px;
  font-size:24px;
}

.admin-grid{display:grid;gap:20px;}
.admin-list{display:grid;gap:12px;}

.admin-item{
  background:#f8fbff;
  border-radius:14px;
  padding:14px;
  border-left:7px solid #1565c0;
  display:grid;
  gap:8px;
}

.admin-item strong{color:#0d47a1;}
.admin-actions{display:flex;flex-wrap:wrap;gap:8px;}

.config-box{
  background:#fff8e1;
  border-left:8px solid #fbc02d;
  padding:14px;
  border-radius:14px;
  margin-top:14px;
  line-height:1.45;
}

code{
  background:#eef3f8;
  padding:2px 5px;
  border-radius:5px;
}

@media(max-width:700px){
  .screen-header{
    flex-direction:column;
    text-align:center;
  }

  .board{
    grid-template-columns:1fr;
    padding:16px;
  }
}