:root{
  --bg: #f0f5ff;
  --card: #ffffff;
  --muted: #2c3e50;
  --accent: #3498db;
  --sand: #f1c40f;
  --glass: #555;
  --success: #2ecc71;
  --warn: #f39c12;
  --danger: #e74c3c;
}

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

/* Layout */
body{
  background:var(--bg);
  font-family:'Segoe UI',sans-serif;
  padding:20px;
  color:var(--muted);
}

.app{max-width:1000px;margin:0 auto}
header{text-align:center;margin-bottom:30px}
h1{color:var(--muted);margin-bottom:8px}
.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.controls input,.controls button{padding:10px 16px;font-size:16px;border-radius:8px;border:1px solid #ccc}
.controls input{width:160px}
.primary{background:var(--accent);color:#fff;border:none;cursor:pointer;transition:background .15s}
.primary:hover{background:#2980b9}

/* Grid of clocks */
#clocks-container{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
  margin-top:18px;
}

/* Clock card */
.clock{
  background:var(--card);
  border-radius:12px;
  padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.clock-header{font-weight:700;margin-bottom:8px}
.clock-time{font-family:monospace;font-size:1.05rem;margin-bottom:12px;color:var(--muted)}

/* Hourglass container */
.clock-display{position:relative;width:120px;height:220px;margin:0 auto}
.hourglass{position:relative;width:100%;height:100%}

/* Triangles: técnica border */
.top-glass,.bottom-glass,
.sand-top,.sand-bottom{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:65px solid transparent;
  border-right:65px solid transparent;
}

/* vidrio */
.top-glass{top:0;border-top:120px solid var(--glass)}
.bottom-glass{bottom:0;border-bottom:120px solid var(--glass)}

/* cintura */
.waist{
  position:absolute;
  top:90px;
  left:50%;
  transform:translateX(-50%);
  width:12px;height:40px;
  background:var(--glass);
  border-radius:2px;
}

/* arena (triángulos superpuestos) */
.sand-top,.sand-bottom{
  border-left:60px solid transparent;
  border-right:60px solid transparent;
  z-index:2;
  transition:clip-path .2s linear;
}
.sand-top{
  top:5px;
  border-top:90px solid var(--sand);
  z-index:3
}
.sand-bottom{
  bottom:5px;
  border-bottom:90px solid var(--sand);
  z-index:1
}

/* Buttons */
.clock-buttons{
  margin-top:12px
}
.clock-btn{
  margin:0 4px;
  padding:6px 12px;
  font-size:14px;
  border:none;
  border-radius:6px;
  cursor:pointer
}
.start-btn{
  background:var(--success);
  color:#fff
}
.pause-btn{
  background:var(--warn);
  color:#fff
}
.reset-btn{
  background:var(--danger);
  color:#fff
}
.delete-btn{
  background:#888;
  color:#fff
}

/* finished state */
.clock.finished .sand-top{
  clip-path:inset(100% 0 0 0)
}
.clock.finished .sand-bottom{
  clip-path:inset(0 0 0 0)
}
.clock.finished .stream{
  height:0 !important
}
.clock.finished .clock-time{
  color:var(--danger);
  font-weight:700
}

/* notification */
.notification{
  position:fixed;
  top:20px;
  right:20px;
  background:var(--success);
  color:#fff;
  padding:12px 20px;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  z-index:1000;
  transform:translateX(200%);
  transition:transform .3s ease-out;
}
.notification.show{
  transform:translateX(0)
}

/* footer */
.mi-footer{
  margin-top:18px;
  padding:18px 0;
  text-align:center;
  color:var(--muted)
}
.footer-img{
  display:block;
  margin:8px auto 0 auto;
  width:250px;
  max-width:90%
}

/* pixel grain (arena en píxeles) */
.pixel-grain{
  position:absolute;
  width:4px;
  height:4px;
  background:var(--sand);
  border-radius:50%;
  pointer-events:none;
  z-index:6;
}