/* Panel de NeuroRunner.
   La noche arriba (lo que pasó mientras nadie miraba), el día abajo (el detalle por proyecto).
   Sin estilos en línea: la política de seguridad de contenido no los permite. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fuentes/bricolage.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fuentes/instrument.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --noche: #141a33;
  --noche-alta: #1d2547;
  --noche-linea: #2c3560;
  --luna: #a9b1cc;
  --tinta: #1e2437;
  --gris: #5d6478;
  --gris-claro: #8a90a2;
  --linea: #dce0ea;
  --niebla: #eef0f5;
  --papel: #ffffff;
  --alba: #f4b266;

  --curso: #2f5bd3;       --curso-fondo: #e8eefc;
  --terminada: #1c7c54;   --terminada-fondo: #e6f3ec;
  --integrada: #6b46c1;   --integrada-fondo: #f0ebfa;
  --falla: #b3372b;       --falla-fondo: #fbeae8;
  --espera: #7c8398;      --espera-fondo: #eceef3;

  --titulos: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--niebla);
  color: var(--tinta);
  font: 400 15px/1.55 var(--texto);
  font-feature-settings: "tnum" 1;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--alba); outline-offset: 2px; border-radius: 4px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ la noche */

.noche {
  background: var(--noche);
  color: #fff;
  padding: 0 24px 34px;
}
.barra {
  max-width: var(--ancho);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 0;
}
.marca {
  font: 700 21px/1 var(--titulos);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca img, .marca svg { flex: none; }
.marca small {
  font: 400 13px/1 var(--texto);
  color: var(--luna);
  letter-spacing: 0;
}
.persona { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--luna); }
.persona form { margin: 0; }
.persona a, .persona button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--luna); text-decoration: none;
}
.persona a:hover, .persona button:hover { color: #fff; }
.persona .quien { color: #fff; }

.titular {
  max-width: var(--ancho);
  margin: 46px auto 0;
}
.titular h1 {
  font: 700 clamp(30px, 4.4vw, 50px)/1.06 var(--titulos);
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 21ch;
  text-wrap: balance;
}
.titular p {
  margin: 14px 0 0;
  color: var(--luna);
  font-size: 15px;
}
.titular p strong { color: #fff; font-weight: 600; }
.aviso-viejo { color: var(--alba) !important; }

/* La línea de la noche: 16:00 → 09:00. */
.linea-noche {
  max-width: var(--ancho);
  margin: 38px auto 0;
  position: relative;
}
.linea-noche .cabeza {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--luna); margin-bottom: 10px;
}
.linea-noche .cabeza b { color: #fff; font-weight: 600; font-size: 14px; }
.cielo {
  position: relative;
  height: 64px;
  border-radius: 12px;
  background:
    linear-gradient(90deg,
      #3a3f7a 0%, #262c5c 14%, #151a3a 38%, #10142d 62%, #1f2552 82%, #7a5a6a 93%, var(--alba) 100%);
  overflow: hidden;
}
.cielo::after {             /* horizonte */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255,255,255,.14);
}
.hora-marca {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.07);
}
.ahora-marca {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: #fff; opacity: .75; border-radius: 1px;
}
.punto {
  position: absolute; top: 50%; padding: 0;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--noche);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
  cursor: default;
}
.punto.completada { background: #4cc38a; }
.punto.integrada  { background: #a98bf0; }
.punto.fallida, .punto.rendida { background: #ef7b6e; }
.tramo {
  position: absolute; top: 50%; height: 6px; margin-top: -3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(120,150,255,.25), #7896ff);
}
.tramo::after {
  content: ""; position: absolute; right: -5px; top: -3px;
  width: 12px; height: 12px; border-radius: 50%; background: #7896ff;
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(120,150,255,0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(120,150,255,.55); } }
.horas {
  position: relative; height: 20px; margin-top: 8px;
  font-size: 12px; color: var(--luna);
}
.horas span { position: absolute; transform: translateX(-50%); }
.horas span:first-child { transform: none; }
.horas span:last-child { transform: translateX(-100%); }
.leyenda {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px;
  font-size: 13px; color: var(--luna);
}
.leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.leyenda .l-curso i { background: #7896ff; }
.leyenda .l-completada i { background: #4cc38a; }
.leyenda .l-integrada i { background: #a98bf0; }
.leyenda .l-fallida i { background: #ef7b6e; }

.punto:hover, .punto:focus-visible { transform: scale(1.25); }
.punto, .tramo { cursor: pointer; outline-offset: 3px; }
.tramo::before { content: ""; position: absolute; inset: -10px 0; }   /* más fácil de apuntar */

/* La tarjeta de un punto. */
.tarjeta {
  position: absolute; z-index: 5; width: 320px;
  background: var(--papel); color: var(--tinta);
  border-radius: 12px; padding: 14px 16px 12px;
  box-shadow: 0 12px 32px rgba(8, 10, 30, .35), 0 0 0 1px rgba(20, 26, 51, .06);
  font-size: 14px;
}
.tarjeta[hidden] { display: none; }
.t-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-cabeza .estado { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.t-proyecto { color: var(--gris); font-size: 12.5px; text-align: right; }
.t-titulo { display: block; margin-top: 9px; font: 700 16px/1.3 var(--titulos); }
.t-cuando { display: block; color: var(--gris); font-size: 13px; margin-top: 3px; }
.t-datos { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 10px 0 0; font-size: 13px; }
.t-datos dt { color: var(--gris); }
.t-datos dd { margin: 0; }
.t-resumen { margin: 9px 0 0; color: var(--gris); font-size: 13px; line-height: 1.5; }
.t-ir {
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--integrada); font-weight: 600; font-size: 13px;
}
.t-ir:hover { text-decoration: underline; }

/* El selector de turno y el uso del servidor. */
.cabeza-izq { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.turno { display: inline-flex; background: var(--noche-alta); border-radius: 8px; padding: 3px; }
.turno button {
  border: 0; background: none; cursor: pointer; padding: 4px 11px; border-radius: 6px;
  font-size: 13px; color: var(--luna);
}
.turno button[aria-pressed="true"] { background: #2d3768; color: #fff; font-weight: 600; }
.cielo.dia {
  background: linear-gradient(90deg, #d99a5b 0%, #6f8fc9 16%, #4f79c4 50%, #5a7fc2 78%, #b9778a 94%, var(--alba) 100%);
}
.cielo.dia .punto { border-color: #2c3a73; }
.uso-capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.leyenda .l-uso i { background: rgba(255,255,255,.35); border-radius: 2px; }
.turno-resumen { margin-top: 18px; display: grid; gap: 14px; }
.turno-cifras { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.turno-cifras dt { color: var(--luna); font-size: 12.5px; }
.turno-cifras dd { margin: 2px 0 0; font: 700 20px/1.1 var(--titulos); color: #fff; }
.turno-cifras dt + dd { order: 0; }
.turno-cifras > * { display: block; }
.turno-cifras .turno-vacio { font: 400 13px/1.4 var(--texto); color: var(--luna); }
.turno-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.turno-lista button {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%;
  background: rgba(255,255,255,.04); border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer;
  text-align: left; color: #fff;
}
.turno-lista button:hover { background: rgba(255,255,255,.09); }
.turno-lista .estado { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tl-titulo { font-weight: 600; font-size: 14px; }
.tl-meta { color: var(--luna); font-size: 12.5px; white-space: nowrap; }
.tl-mas { color: var(--luna); font-size: 13px; padding: 2px 12px; }
@media (max-width: 700px) {
  .turno-lista button { grid-template-columns: auto 1fr; }
  .tl-meta { grid-column: 2; white-space: normal; }
}

/* ------------------------------------------------------------ el día */

main { max-width: calc(var(--ancho) + 48px); margin: 0 auto; padding: 34px 24px 80px; }
.herramientas {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.herramientas h2 { font: 700 24px/1.2 var(--titulos); letter-spacing: -0.01em; margin: 0; }
.rango { display: inline-flex; background: #e1e5ee; border-radius: 9px; padding: 3px; }
.rango button {
  border: 0; background: none; padding: 6px 13px; border-radius: 7px; cursor: pointer;
  font-size: 14px; color: var(--gris);
}
.rango button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(20,26,51,.12); }

.proyecto {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-top: 1px solid var(--linea);
}
.proyecto:first-of-type { border-top: 0; }
.proyecto header h3 {
  font: 700 24px/1.15 var(--titulos); letter-spacing: -0.015em; margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.conteo { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--gris); }
.conteo li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.conteo li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.conteo .en_curso i { background: var(--curso); }
.conteo .pendiente i { background: var(--espera); }
.conteo .completada i { background: var(--terminada); }
.conteo .integrada i { background: var(--integrada); }
.conteo .fallida i, .conteo .rendida i { background: var(--falla); }
.conteo b { color: var(--tinta); font-weight: 600; }

.tareas {
  list-style: none; margin: 0; padding: 0;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow: hidden;
}
.tarea + .tarea { border-top: 1px solid var(--linea); }
.tarea > button {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 16px 18px;
}
.tarea > button:hover { background: #f7f8fb; }
.tarea .icono { width: 22px; height: 22px; margin-top: 1px; }
.tarea .nombre { font-weight: 600; font-size: 15.5px; line-height: 1.35; display: block; }
.tarea .resumen { display: block; color: var(--gris); margin-top: 3px; max-width: 70ch; }
.tarea .meta { display: block; color: var(--gris-claro); font-size: 13px; margin-top: 6px; }
.tarea .estado {
  align-self: start; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.estado.en_curso   { color: var(--curso); background: var(--curso-fondo); }
.estado.pendiente  { color: var(--espera); background: var(--espera-fondo); }
.estado.completada { color: var(--terminada); background: var(--terminada-fondo); }
.estado.integrada  { color: var(--integrada); background: var(--integrada-fondo); }
.estado.fallida, .estado.rendida { color: var(--falla); background: var(--falla-fondo); }

.gira { animation: gira 1.1s linear infinite; transform-origin: 50% 50%; }
@keyframes gira { to { transform: rotate(360deg); } }

.detalle {
  padding: 0 18px 18px 58px;
  display: grid; gap: 14px;
  font-size: 14px;
}
.detalle[hidden] { display: none; }
.detalle h4 { margin: 0 0 4px; font: 600 13px/1.3 var(--texto); color: var(--gris); }
.detalle pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font: 13px/1.55 ui-monospace, "Cascadia Mono", Menlo, monospace;
  background: var(--niebla); border-radius: 8px; padding: 12px 14px; max-height: 320px; overflow: auto;
}
.detalle dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.detalle dt { color: var(--gris); }
.detalle dd { margin: 0; overflow-wrap: anywhere; }

.mas {
  width: 100%; border: 0; border-top: 1px solid var(--linea); background: #fafbfd;
  padding: 11px 18px; text-align: left; cursor: pointer; color: var(--gris); font-size: 14px;
}
.mas:hover { color: var(--tinta); }

.vacio {
  padding: 60px 0; max-width: 520px;
}
.vacio h3 { font: 700 22px/1.25 var(--titulos); margin: 0 0 8px; }
.vacio p { color: var(--gris); margin: 0; }

@media (max-width: 860px) {
  .proyecto { grid-template-columns: 1fr; gap: 14px; }
  .conteo { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .detalle { padding-left: 18px; }
  .tarea > button { grid-template-columns: 22px 1fr; }
  .tarea .estado { grid-column: 2; justify-self: start; margin-top: 4px; }
  .persona .quien { display: none; }
  .marca small { display: none; }
}

@media (max-width: 600px) {
  .horas .fina { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gira, .tramo::after { animation: none; }
}

/* ------------------------------------------------------------ entrar y cuenta */

.puerta {
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% 118%, rgba(244,178,102,.34), rgba(244,178,102,0) 60%),
    var(--noche);
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 26px 24px;
}
.puerta .centro { display: grid; place-items: center; }
.forma {
  width: 100%; max-width: 380px;
}
.forma h1 { font: 700 34px/1.1 var(--titulos); letter-spacing: -0.02em; margin: 0 0 8px; }
.forma > p { color: var(--luna); margin: 0 0 28px; }
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 14px; color: #dfe3f2; }
.campo input {
  font: inherit; color: #fff;
  background: var(--noche-alta);
  border: 1px solid var(--noche-linea);
  border-radius: 9px;
  padding: 11px 13px;
}
.campo input:focus { outline: none; border-color: var(--alba); box-shadow: 0 0 0 3px rgba(244,178,102,.2); }
.campo small { color: var(--luna); font-size: 13px; }
.boton {
  width: 100%; margin-top: 6px;
  background: var(--alba); color: var(--noche);
  border: 0; border-radius: 9px; padding: 12px 16px;
  font-weight: 700; font-size: 15px; cursor: pointer;
}
.boton:hover { background: #f7c285; }
.error {
  background: rgba(239,123,110,.12); border: 1px solid rgba(239,123,110,.45); color: #ffd3cd;
  border-radius: 9px; padding: 10px 13px; margin-bottom: 18px; font-size: 14px;
}
.exito {
  background: rgba(76,195,138,.12); border: 1px solid rgba(76,195,138,.45); color: #c9f1dc;
  border-radius: 9px; padding: 10px 13px; margin-bottom: 18px; font-size: 14px;
}
.error:empty, .exito:empty { display: none; }
.pie { color: var(--luna); font-size: 13px; text-align: center; }
.volver { color: var(--luna); font-size: 14px; text-decoration: none; }
.volver:hover { color: #fff; }