:root {
  --navy: #223447;
  --pink: #EF3E55;
  --mint: #00B7C1;
  --orange: #F58233;
  --gris: #f4f5f7;
  --borde: #dde1e6;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0; background: var(--gris); color: var(--navy);
}
a { color: var(--mint); text-decoration: none; }
a:hover { text-decoration: underline; }

header.panel {
  background: var(--navy); color: #fff; padding: 12px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
header.panel .marca { font-weight: 800; letter-spacing: 1px; }
header.panel a { color: #fff; opacity: .85; }
header.panel a:hover { opacity: 1; }
header.panel .derecha { margin-left: auto; font-size: 14px; opacity: .8; }

main { max-width: 1080px; margin: 24px auto; padding: 0 16px; }

.card {
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  padding: 20px; margin-bottom: 18px;
}
h1 { font-size: 24px; margin: 0 0 14px; }
h2 { font-size: 18px; margin: 0 0 12px; }

.flash {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 300; max-width: min(720px, 92vw); box-shadow: 0 6px 24px rgba(34,52,71,.18);
  background: #fff7e6; border: 1px solid var(--orange); border-radius: 10px;
  padding: 10px 16px; font-size: 14px; animation: flash-entra .25s ease;
}
@keyframes flash-entra { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #6b7785; }
tr.ausente td { opacity: .45; text-decoration: line-through; }
tr.ausente td.acciones { text-decoration: none; }

.btn {
  display: inline-block; border: none; border-radius: 8px; cursor: pointer;
  padding: 9px 16px; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--mint); text-decoration: none;
}
.btn:hover { filter: brightness(.95); text-decoration: none; }
.btn.rosa { background: var(--pink); }
.btn.navy { background: var(--navy); }
.btn.chico { padding: 5px 10px; font-size: 12px; }
.btn.gris { background: #8a94a0; }

input[type=text], input[type=email], input[type=date], input[type=password], select, textarea {
  padding: 9px 10px; border: 1px solid var(--borde); border-radius: 8px;
  font-size: 14px; font-family: inherit; width: 100%;
}
form.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
form.inline > div { flex: 1; min-width: 140px; }
form.inline label { display: block; font-size: 12px; color: #6b7785; margin-bottom: 4px; }

.editable { border-bottom: 1px dashed #aab3bd; cursor: text; min-width: 60px; display: inline-block; }
.editable:focus { outline: 2px solid var(--mint); border-radius: 4px; background: #f0fbfc; }

.badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.badge.rosa { background: #fde6ea; color: var(--pink); }
.badge.mint { background: #e0f7f8; color: #007e86; }
.badge.gris { background: #e8ebee; color: #5b6670; }

.kpis { display: flex; gap: 14px; flex-wrap: wrap; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 18px; min-width: 130px; }
.kpi .n { font-size: 28px; font-weight: 800; }
.kpi .l { font-size: 12px; color: #6b7785; }

.grid-graficos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.grid-graficos img { width: 100%; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }

/* ---------- Formulario de participante (móvil) ---------- */
body.evaluar { background: var(--navy); }
.eval-wrap { max-width: 460px; margin: 0 auto; padding: 18px 14px 60px; }
.eval-curso { color: #fff; opacity: .7; font-size: 13px; text-align: center; margin: 6px 0 4px; }
.eval-yo {
  color: #fff; text-align: center; font-size: 14px; margin-bottom: 16px;
}
.eval-yo a { color: var(--mint); }
.eval-card {
  background: #fff; border-radius: 14px; padding: 20px 18px; color: var(--navy);
}
.eval-card h1 { font-size: 20px; text-align: center; }
.lista-nombres { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.lista-nombres button {
  padding: 13px; font-size: 16px; border: 1px solid var(--borde);
  border-radius: 10px; background: #fff; cursor: pointer; text-align: left;
  color: var(--navy);
}
.lista-nombres button:active { background: #e0f7f8; }
.rubro { margin-bottom: 16px; }
.rubro .nombre { font-weight: 700; margin-bottom: 7px; }
.notas { display: flex; gap: 7px; }
.notas button {
  flex: 1; padding: 13px 0; font-size: 17px; font-weight: 700;
  border: 1.5px solid var(--borde); border-radius: 10px; background: #fff;
  cursor: pointer; color: var(--navy);
}
.notas button.activo { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn-enviar {
  width: 100%; padding: 15px; font-size: 17px; font-weight: 800;
  background: var(--mint); color: #fff; border: none; border-radius: 12px;
  cursor: pointer; margin-top: 6px;
}
.btn-enviar:disabled { opacity: .4; }
.pendientes {
  background: var(--orange); color: #fff; font-size: 13px; text-align: center;
  border-radius: 8px; padding: 7px; margin-top: 12px;
}
.ok-msg { text-align: center; padding: 30px 0; }
.ok-msg .tilde { font-size: 56px; color: var(--mint); }

.monitor-grande { text-align: center; padding: 30px 10px; }
.monitor-grande .quien { font-size: 34px; font-weight: 800; }
.monitor-grande .conteo { font-size: 64px; font-weight: 800; color: var(--pink); }
.monitor-grande .sub { color: #6b7785; }

@media (max-width: 640px) {
  th, td { padding: 6px; font-size: 13px; }
  main { margin: 14px auto; }
}

/* --- La sala en U: la mesa dibujada, la gente por fuera --- */
.sala-fila { display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; }
.sala-caja { background:#f8f9fb; border:1px solid var(--borde); border-radius:12px; padding:12px 16px; }
.sala-titulo { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
.sala-borrar-dia { font-size:11px; color:#98a2ae; }
.sala-grid { display:grid; grid-template-columns:auto auto auto; align-items:stretch; justify-items:center; column-gap:8px; width:fit-content; margin:0 auto; }
.sala-grid.arriba { grid-template-areas: "izq mesa der" ". base ."; }
.sala-grid.abajo { grid-template-areas: ". base ." "izq mesa der"; }
.sala-mesa { grid-area:mesa; border:0 solid #223447; border-left-width:12px; border-right-width:12px; }
.sala-mesa.arriba { border-bottom-width:12px; border-radius:0 0 18px 18px; }
.sala-mesa.abajo { border-top-width:12px; border-radius:18px 18px 0 0; }
.sala-col { display:flex; flex-direction:column; justify-content:space-around; }
.sala-col.izq { grid-area:izq; align-items:flex-end; }
.sala-col.der { grid-area:der; align-items:flex-start; }
.sala-basefila { grid-area:base; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:2px 0; }
.sala-chip { background:#fff; border:1px solid var(--borde); border-radius:8px; padding:3px 9px; margin:2px; font-size:13px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.sala-chip[draggable="true"] { cursor:grab; }
.sala-chip-link { cursor:pointer; }
.sala-chip-link:hover { border-color:#00B7C1; color:#00B7C1; }
.sala-chip-actual { outline:2px solid #EF3E55; }
.sala-chip-pool { background:#eef0f3; border-style:dashed; }
.sala-quitar { color:#c3cad2; font-size:11px; text-decoration:none; }
.sala-quitar:hover { color:#EF3E55; }
.sala-hueco { width:13px; height:13px; border:1.5px dashed #b9c2cc; border-radius:50%; flex:none; margin:3px auto; box-sizing:border-box; }
.sala-basefila .sala-hueco { margin:auto 3px; }
.sala-hueco.activo { background:#00B7C1; border-color:#00B7C1; opacity:.7; }
.sala-lectura .sala-hueco { display:none; }
.sala-pool { margin-top:10px; font-size:12px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:#6b7785; }
.sala-pool-label { margin-right:4px; }