/* LOG · azul del ecosistema (Azul Halo), M ámbar. Mobile-first, botones grandes. Rojo = infracciones. */
:root {
  color-scheme: dark;
  --fondo: #08121D;
  --panel: #0F1E2F;
  --panel-2: #142940;
  --linea: #1F3B5A;
  --texto: #DCE9F7;
  --suave: #8CA6C2;
  --senal: #3FA9F5;
  --senal-suave: rgba(63, 169, 245, .14);
  --m: #FFB800;
  --m-suave: rgba(255, 184, 0, .13);
  --ok: #3DD68C;
  --ok-suave: rgba(61, 214, 140, .12);
  --espera: #F2C14E;
  --espera-suave: rgba(242, 193, 78, .12);
  --cierre: #F2706B;
  --cierre-suave: rgba(242, 112, 107, .12);
  --display: "Rajdhani", "Barlow", system-ui, sans-serif;
  --cuerpo: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 12px;
}
* { box-sizing: border-box; }
html, body { background: var(--fondo); color: var(--texto); }
body {
  margin: 0;
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0) 16px calc(24px + env(safe-area-inset-bottom, 0));
}
body.con-modal { overflow: hidden; }
main, .top, .fijados, .pie { width: 100%; max-width: 560px; margin-inline: auto; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; }
.m { color: var(--m); }

/* ---- encabezado ---- */
.top { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 14px; border-bottom: 1px solid var(--linea); }
.marca { font-family: var(--display); font-weight: 700; font-size: 2.1rem; letter-spacing: .12em; margin: 0; line-height: 1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.marca small { font-family: var(--cuerpo); font-weight: 600; font-size: .85rem; letter-spacing: .04em; color: var(--suave); }
.quien { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 6px; }
.quien-datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.quien-nombre { font-weight: 600; }
.quien-grupo { color: var(--suave); font-size: .95rem; }
.btn-cambiar { flex: none; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--m); background: var(--m-suave); color: #FFE3A3; font-weight: 700; font-size: 1rem; }
.btn-cambiar:active { background: rgba(255, 184, 0, .3); }

/* ---- vistas ---- */
.vista { padding: 20px 0 8px; }
.titulo { font-family: var(--display); font-weight: 700; font-size: 1.7rem; line-height: 1.15; margin: 0 0 8px; }
.ayuda { color: var(--suave); margin: 0 0 18px; }
.error { background: var(--cierre-suave); border: 1px solid var(--cierre); color: #FFD6D3; border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; }
.vacio { color: var(--suave); border: 1px dashed var(--linea); border-radius: var(--radio); padding: 22px 16px; text-align: center; margin: 4px 0 0; }
.cuando { font-weight: 600; }

/* ---- formulario de entrada ---- */
label { display: block; font-weight: 600; margin: 18px 0 6px; }
input[type="text"] {
  width: 100%; font: inherit; font-size: 1.35rem; letter-spacing: .04em;
  padding: 14px 16px; min-height: 58px;
  background: var(--panel); color: var(--texto);
  border: 2px solid var(--linea); border-radius: var(--radio);
}
input[type="text"]:focus { border-color: var(--senal); outline: none; }
#inCodigo { text-transform: uppercase; }
.pin { -webkit-text-security: disc; letter-spacing: .4em; }
.aviso { border-radius: var(--radio); padding: 14px 16px; margin-bottom: 8px; background: var(--cierre-suave); border: 1px solid var(--cierre); }

/* ---- botones ---- */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 14px 18px; border-radius: var(--radio); font-weight: 700; font-size: 1.1rem; border: 2px solid transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--senal); color: #04101C; margin-top: 24px; }
.btn-sec { background: transparent; color: var(--texto); border-color: var(--linea); }
.btn-sec:active { background: var(--senal-suave); border-color: var(--senal); }

/* ---- resumen: lo que llevo ---- */
.resumen { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.resumen-etiqueta { color: var(--suave); font-size: .9rem; font-weight: 600; letter-spacing: .03em; }
.resumen-puntos { font-family: var(--display); font-weight: 700; font-size: 2.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.resumen-puntos small { font-size: 1.2rem; color: var(--suave); }
.resumen-detalle { grid-column: 1 / -1; color: var(--suave); font-size: .92rem; }
.anillo { width: 64px; height: 64px; grid-row: 1 / 3; grid-column: 2; }
.anillo circle { fill: none; stroke-width: 7; }
.anillo .fondo-anillo { stroke: var(--panel-2); }
.anillo .avance { stroke: var(--ok); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .6s ease; }
.anillo text { fill: var(--texto); font-family: var(--display); font-weight: 700; font-size: 15px; }

/* ---- pestañas ---- */
.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 16px 0 12px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 4px; }
.pestana { min-height: 50px; border: 0; border-radius: 9px; background: transparent; color: var(--suave); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pestana[aria-selected="true"] { background: var(--panel-2); color: var(--texto); box-shadow: inset 0 -3px 0 var(--m); }
.badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--cierre); color: #2A0806; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }

/* ---- prácticas ---- */
.practicas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.practica { background: var(--panel); border: 1px solid var(--linea); border-left: 5px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.practica[data-fase="working"] { border-left-color: var(--ok); }
.practica[data-fase="soon"] { border-left-color: var(--espera); }
.practica[data-fase="ended"] { border-left-color: var(--linea); }
.practica.nueva-nota { animation: destello 2.4s ease-out 1; }
@keyframes destello { 0%, 30% { box-shadow: 0 0 0 3px var(--ok); } 100% { box-shadow: 0 0 0 0 transparent; } }
.practica-cabeza { width: 100%; text-align: left; background: none; border: 0; color: var(--texto); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start; }
.practica-nombre { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.nota { grid-row: 1 / 3; grid-column: 2; text-align: right; font-family: var(--display); font-weight: 700; line-height: 1; }
.nota b { font-size: 1.9rem; color: var(--ok); font-variant-numeric: tabular-nums; }
.nota span { display: block; color: var(--suave); font-size: .95rem; margin-top: 2px; }
.nota.sin { color: var(--suave); font-family: var(--cuerpo); font-weight: 600; font-size: .85rem; max-width: 92px; }
.practica-estado { font-size: .95rem; color: var(--suave); }
.practica-estado.trabajando { color: var(--ok); font-weight: 600; }
.practica-estado.pronto { color: var(--espera); font-weight: 600; }
.practica-estado.terminada { color: var(--cierre); font-weight: 600; }

/* El reloj grande del tiempo de trabajo */
.reloj { margin: 0 16px 14px; border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid; }
.reloj-texto { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.reloj-cifra { font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.reloj.trabajando { background: var(--ok-suave); border-color: var(--ok); }
.reloj.trabajando .reloj-cifra { color: var(--ok); }
.reloj.poco { background: var(--espera-suave); border-color: var(--espera); }
.reloj.poco .reloj-cifra { color: var(--espera); }
.reloj.ultimo { background: var(--cierre-suave); border-color: var(--cierre); }
.reloj.ultimo .reloj-cifra { color: var(--cierre); }
.reloj.pronto { background: var(--espera-suave); border-color: var(--espera); }
.reloj.pronto .reloj-cifra { color: var(--espera); }
.reloj.terminada { background: var(--cierre-suave); border-color: var(--cierre); }
.reloj.terminada .reloj-cifra { font-size: 1.15rem; font-family: var(--cuerpo); color: #FFD6D3; }

.practica-cuerpo { padding: 0 16px 16px; border-top: 1px solid var(--linea); }
.instrucciones { white-space: pre-line; margin: 12px 0; }
.material { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.material .btn { justify-content: flex-start; text-align: left; text-decoration: none; min-height: 56px; background: var(--senal-suave); border-color: var(--senal); color: var(--texto); }
.material .btn small { margin-left: auto; color: var(--suave); font-weight: 500; }
.revision { color: var(--suave); font-size: .9rem; margin: 12px 0 0; }
.extendida { color: var(--ok); font-size: .9rem; font-weight: 600; }

/* ---- infracciones ---- */
.inf-resumen { background: var(--cierre-suave); border: 1px solid var(--cierre); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 10px; }
.inf-resumen.limpia { background: var(--ok-suave); border-color: var(--ok); }
.inf-resumen strong { font-family: var(--display); font-size: 1.5rem; }
.infracciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.infraccion { background: var(--panel); border: 1px solid var(--linea); border-left: 5px solid var(--cierre); border-radius: var(--radio); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.inf-motivo { font-weight: 700; font-size: 1.05rem; }
.inf-veces { grid-row: 1 / 3; grid-column: 2; text-align: right; font-family: var(--display); font-weight: 700; line-height: 1; }
.inf-veces b { display: block; font-size: 1.9rem; color: var(--cierre); font-variant-numeric: tabular-nums; }
.inf-veces span { color: var(--suave); font-size: .9rem; }
.inf-cuando { color: var(--suave); font-size: .92rem; }
.etiqueta { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; background: var(--cierre-suave); color: #FFC9C5; border: 1px solid var(--cierre); vertical-align: 2px; }
.infraccion.saldada { border-left-color: var(--linea); opacity: .75; }
.infraccion.saldada .inf-motivo, .infraccion.saldada .inf-veces b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--suave); }
.saldada-nota { grid-column: 1 / -1; color: var(--ok); font-size: .9rem; font-weight: 600; }

.actualizado { color: var(--suave); font-size: .8rem; text-align: center; margin: 18px 0 0; }

/* ---- avisos ---- */
.fijados { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fijados:empty { display: none; }
.fijado { background: var(--senal-suave); border: 1px solid var(--senal); border-radius: 10px; padding: 10px 14px; }
.fijado strong { display: block; }

/* ---- modal de aviso: mantener presionado 2 s ---- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 10, 18, .82); }
.modal-caja { width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 24px 20px 20px; }
.modal-caja h3 { font-family: var(--display); font-size: 1.6rem; margin: 0 0 14px; }
.aviso-texto { white-space: pre-line; margin: 0 0 20px; }
.btn-mantener { position: relative; overflow: hidden; background: var(--panel-2); color: var(--texto); border-color: var(--senal); user-select: none; -webkit-user-select: none; touch-action: none; }
.mantener-relleno { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--senal-suave); border-right: 2px solid var(--senal); }
.btn-mantener.llenando .mantener-relleno { width: 100%; transition: width 2s linear; }
.mantener-texto { position: relative; }

.pie { margin-top: auto; padding-top: 28px; text-align: center; color: var(--suave); font-size: .85rem; }

@media (max-width: 360px) {
  .reloj-cifra { font-size: 2rem; }
  .pestana { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn-mantener.llenando .mantener-relleno { transition: width 2s steps(4) !important; }
}