:root{
  --bg:#f7f9fc;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#5a6476;
  --line:#e5e9f2;
  --brand:#0b5bd3;
  --brand2:#0847a8;
  --ok:#0f7b3a;
  --warn:#b45309;
  --err:#b91c1c;
  --radius:14px;
  --shadow: 0 12px 30px rgba(10,20,40,.08);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:linear-gradient(180deg, #eef4ff 0%, var(--bg) 40%, var(--bg) 100%);
}
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px;
}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 10px 0 18px;
}
.kicker{
  color:var(--muted);
  font-size:14px;
  letter-spacing:.02em;
}
h1{margin:4px 0 0; font-size: 28px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card-title{
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--text);
}
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .grid{grid-template-columns: 1fr;}
  .header{flex-direction:column; align-items:flex-start}
}
.field .label{
  display:block;
  font-size: 13px;
  color:var(--muted);
  margin:0 0 6px;
}
.input{
  width:100%;
  padding: 11px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font-size: 14px;
}
.input:focus{
  border-color: rgba(11,91,211,.6);
  box-shadow: 0 0 0 4px rgba(11,91,211,.12);
}
.divider{
  height:1px;
  background:var(--line);
  margin: 16px 0;
}
.policy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
}
.link{
  background:transparent;
  border:0;
  padding:0;
  color:var(--brand);
  cursor:pointer;
  font-weight:600;
}
.hint{color:var(--muted); font-size:13px;}
.slots{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.slots.empty{
  color: var(--muted);
  font-size: 14px;
}
.slot{
  border:1px solid var(--line);
  background:#fff;
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:600;
}
.slot:hover{
  border-color: rgba(11,91,211,.45);
}
.slot.active{
  background: rgba(11,91,211,.10);
  border-color: rgba(11,91,211,.75);
  color: var(--brand2);
}
.actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
}
.btn{
  border:0;
  background: var(--brand);
  color:#fff;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight:700;
  cursor:pointer;
}
.btn:hover{ background: var(--brand2); }
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.btn.ghost{
  background: transparent;
  border:1px solid var(--line);
  color: var(--text);
}
.btn.ghost:hover{
  border-color: rgba(11,91,211,.35);
  color: var(--brand2);
}
.status{
  font-size: 13px;
  color: var(--muted);
}
.status[data-type="ok"]{ color: var(--ok); font-weight:700;}
.status[data-type="warn"]{ color: var(--warn); font-weight:700;}
.status[data-type="error"]{ color: var(--err); font-weight:700;}
.modal{
  border:0;
  border-radius: var(--radius);
  padding:0;
  width:min(560px, calc(100vw - 30px));
  box-shadow: var(--shadow);
}
.modal::backdrop{
  background: rgba(10,20,40,.45);
}
.modal-inner{
  padding: 18px;
}
.modal-inner h3{
  margin:0 0 10px;
}
.modal-inner ul{
  margin:0 0 16px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
}
.footer{
  margin-top: 14px;
  color: var(--muted);
  text-align:center;
}
.session-timer{
  margin-top: .35rem;
  font-size: .95rem;
  font-weight: 700;
  color: #b91c1c; /* rojo */
}

.session-timer.paused{
  color: #6b7280; /* gris (pausado) */
}