/* SEIMA · Reloj, alarmas, temporizador y cronómetro (2026-10-13).
   La capa usa las variables monocromas: el contenido de cuadernos y chats no se modifica. */
.ck-app {
  --ck-bg: var(--mono-bg, #F5F7FF);
  --ck-surface: var(--mono-surface, #fff);
  --ck-line: var(--mono-line, #dedede);
  --ck-ink: var(--mono-ink, #121b42);
  --ck-soft: var(--mono-soft, #56608A);
  --ck-accent: var(--mono-accent, #121b42);
  --ck-on-accent: var(--mono-on-accent, #fff);
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: calc(58px + env(safe-area-inset-top)) minmax(0, 1fr) auto;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--ck-bg);
  color: var(--ck-ink);
  font-family: Manrope, Inter, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity .2s ease, transform .2s ease;
}
.ck-app.is-open { opacity: 1; pointer-events: auto; transform: none; }
.ck-app *, .ck-app *::before, .ck-app *::after { box-sizing: border-box; }
.ck-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: end; min-height: 58px; padding: env(safe-area-inset-top) 10px 8px; border-bottom: 1px solid var(--ck-line); background: var(--ck-surface); }
.ck-head h2 { margin: 0; color: var(--ck-ink); font-size: 18px; line-height: 32px; text-align: center; }
.ck-back, .ck-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--ck-ink); cursor: pointer; }
.ck-back:hover, .ck-icon:hover { background: var(--mono-accent-soft, #eee); }
.ck-body { width: min(760px, 100%); min-height: 0; overflow: auto; margin: 0 auto; padding: 18px 16px calc(102px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.ck-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ck-line); background: var(--ck-surface); }
.ck-tabs button { display: grid; justify-items: center; gap: 3px; min-width: 0; min-height: 52px; padding: 5px 2px; border: 0; border-radius: 14px; background: transparent; color: var(--ck-soft); font: 700 10px/1.15 Manrope, system-ui, sans-serif; cursor: pointer; }
.ck-tabs button svg { width: 23px; height: 23px; }
.ck-tabs button[aria-current="page"] { background: var(--ck-accent); color: var(--ck-on-accent); }
.ck-summary { margin: 0 0 14px; color: var(--ck-soft); font-size: 14px; text-align: center; }
.ck-summary b { color: var(--ck-ink); }
.ck-alarms, .ck-world, .ck-laps { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.ck-alarm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--ck-line); border-radius: 18px; background: var(--ck-surface); }
.ck-alarm.is-off { opacity: .58; }
.ck-alarm-main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; align-items: center; min-width: 0; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ck-alarm-time { grid-row: span 2; white-space: nowrap; color: var(--ck-ink); font: 800 clamp(30px, 10vw, 44px)/.9 DM Mono, ui-monospace, monospace; letter-spacing: -.08em; }
.ck-alarm-time small { margin-left: 7px; letter-spacing: 0; font: 700 10px/1 Manrope, system-ui, sans-serif; }
.ck-alarm-meta { min-width: 0; overflow: hidden; color: var(--ck-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ck-alarm-days { display: flex; gap: 3px; padding-top: 7px; }
.ck-alarm-days i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ck-bg); color: var(--ck-soft); font: 800 10px/1 Manrope, system-ui, sans-serif; font-style: normal; }
.ck-alarm-days i.on { background: var(--ck-accent); color: var(--ck-on-accent); }
.ck-switch { position: relative; display: inline-flex; width: 46px; height: 28px; flex: none; cursor: pointer; }
.ck-switch input { position: absolute; opacity: 0; }
.ck-switch i { width: 100%; height: 100%; border: 1px solid var(--ck-line); border-radius: 999px; background: var(--ck-bg); transition: background .18s ease; }
.ck-switch i::after { content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ck-soft); transition: transform .18s ease, background .18s ease; }
.ck-switch input:checked + i { background: var(--ck-accent); border-color: var(--ck-accent); }
.ck-switch input:checked + i::after { transform: translateX(18px); background: var(--ck-on-accent); }
.ck-empty { display: grid; min-height: 240px; place-content: center; gap: 12px; color: var(--ck-soft); text-align: center; }
.ck-empty svg { justify-self: center; color: var(--ck-ink); }
.ck-note { margin: 18px auto 0; max-width: 420px; color: var(--ck-soft); font-size: 12px; line-height: 1.45; text-align: center; }
.ck-fab { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(86px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--ck-accent); color: var(--ck-on-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); cursor: pointer; }
.ck-editor { display: grid; gap: 16px; max-width: 520px; margin: 0 auto; }
.ck-field, .ck-bigtime { display: grid; gap: 8px; }
.ck-label { color: var(--ck-soft); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ck-bigtime input { width: 100%; border: 0; border-bottom: 2px solid var(--ck-line); border-radius: 0; padding: 6px 0 10px; background: transparent; color: var(--ck-ink); font: 800 clamp(42px, 17vw, 74px)/1 DM Mono, ui-monospace, monospace; text-align: center; }
.ck-field input:not([type="checkbox"]), .ck-field select { width: 100%; min-height: 46px; border: 1px solid var(--ck-line); border-radius: 12px; padding: 0 12px; background: var(--ck-surface); color: var(--ck-ink); font: inherit; }
.ck-row, .ck-actions, .ck-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ck-row > :first-child { flex: 1; }
.ck-inline { grid-template-columns: 1fr auto; align-items: center; }
.ck-days, .ck-chips, .ck-seg { display: flex; flex-wrap: wrap; gap: 7px; }
.ck-day, .ck-chips button, .ck-seg button, .ck-btn { min-height: 38px; border: 1px solid var(--ck-line); border-radius: 10px; padding: 7px 11px; background: var(--ck-surface); color: var(--ck-ink); font: 700 13px/1.2 Manrope, system-ui, sans-serif; cursor: pointer; }
.ck-day { width: 38px; padding: 0; border-radius: 50%; }
.ck-day[aria-pressed="true"], .ck-seg button[aria-pressed="true"], .ck-chips button[aria-pressed="true"], .ck-btn.is-primary { border-color: var(--ck-accent); background: var(--ck-accent); color: var(--ck-on-accent); }
.ck-btn.is-danger { border-color: #b83838; color: #b83838; }
.ck-actions { justify-content: stretch; }
.ck-actions button { flex: 1; }
.ck-flip { display: grid; min-height: 160px; place-items: center; margin: 8px 0; }
.ck-flip [data-flip-clock] { transform: scale(1.08); transform-origin: center; }
.ck-date { margin: 10px 0 18px; color: var(--ck-soft); font-size: 14px; text-align: center; text-transform: capitalize; }
.ck-format { justify-content: center; margin-bottom: 26px; }
.ck-h3 { margin: 0 0 10px; color: var(--ck-ink); font-size: 16px; }
.ck-world li { display: grid; grid-template-columns: minmax(0, 1fr) auto 42px; align-items: center; gap: 10px; min-height: 62px; padding: 10px 10px 10px 14px; border: 1px solid var(--ck-line); border-radius: 14px; background: var(--ck-surface); }
.ck-world span { min-width: 0; display: grid; gap: 3px; }
.ck-world b, .ck-world small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-world b { color: var(--ck-ink); font-size: 14px; }
.ck-world small { color: var(--ck-soft); font-size: 12px; }
.ck-world strong { color: var(--ck-ink); font: 800 18px/1 DM Mono, ui-monospace, monospace; }
.ck-world .ck-muted { display: block; color: var(--ck-soft); text-align: center; }
.ck-units { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 5px; max-width: 440px; margin: 14px auto 24px; }
.ck-units > b { color: var(--ck-soft); font-size: 28px; }
.ck-unit { display: grid; grid-template-columns: 32px 1fr 32px; grid-template-rows: 42px auto; align-items: center; border: 1px solid var(--ck-line); border-radius: 14px; overflow: hidden; background: var(--ck-surface); }
.ck-unit input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--ck-ink); font: 800 24px/1 DM Mono, ui-monospace, monospace; text-align: center; -moz-appearance: textfield; }
.ck-unit input::-webkit-outer-spin-button, .ck-unit input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.ck-unit span { grid-column: 1 / -1; padding: 3px 0 7px; color: var(--ck-soft); font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; }
.ck-step { width: 32px; height: 42px; border: 0; background: transparent; color: var(--ck-ink); font-size: 18px; cursor: pointer; }
.ck-presets { justify-content: center; margin-bottom: 28px; }
.ck-round { display: grid; place-items: center; width: 70px; height: 70px; border: 0; border-radius: 50%; background: var(--ck-accent); color: var(--ck-on-accent); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); cursor: pointer; }
.ck-round:disabled { opacity: .4; cursor: not-allowed; }
.ck-ring { position: relative; width: min(72vw, 280px); aspect-ratio: 1; margin: 12px auto 20px; }
.ck-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ck-ring circle { fill: none; stroke-width: 8; }
.ck-ring-bg { stroke: var(--ck-line); }
.ck-ring-fg { stroke: var(--ck-accent); stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.ck-ring-text { position: absolute; inset: 0; display: grid; place-content: center; gap: 7px; text-align: center; }
.ck-ring-text strong, .ck-watch strong { color: var(--ck-ink); font: 800 clamp(32px, 10vw, 48px)/1 DM Mono, ui-monospace, monospace; letter-spacing: -.07em; }
.ck-ring-text small { color: var(--ck-soft); font-size: 12px; }
.ck-watch { display: grid; min-height: 180px; place-content: center; text-align: center; }
.ck-laps { margin-top: 24px; }
.ck-laps li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--ck-line); color: var(--ck-soft); font-size: 13px; }
.ck-laps b, .ck-laps small { color: var(--ck-ink); font-family: DM Mono, ui-monospace, monospace; }
.ck-laps small { color: var(--ck-soft); }
.ck-laps .is-best b { color: #1f7a44; }
.ck-laps .is-worst b { color: #b83838; }
.ck-app button:focus-visible, .ck-app input:focus-visible, .ck-app select:focus-visible { outline: 3px solid var(--ck-accent); outline-offset: 2px; }
body.clock-app-open { overflow: hidden; }
@media (min-width: 700px) {
  .ck-app { inset: 4vh max(6vw, 40px); border: 1px solid var(--ck-line); border-radius: 24px; box-shadow: 0 22px 70px rgba(0, 0, 0, .35); }
  .ck-body { padding-left: 28px; padding-right: 28px; }
  .ck-fab { position: absolute; right: 28px; bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) { .ck-app, .ck-switch i, .ck-switch i::after, .ck-ring-fg { transition: none; } }

/* Reloj grande y nítido dentro del menú (2026-10-13, pedido de Edilberto): sin los botoncitos de colores
   (sus funciones están en las pestañas de abajo) y con tarjetas de buen tamaño según la pantalla. */
.ck-flip { min-height: 0 !important; margin: 18px 0 6px !important; }
body .ck-flip [data-flip-clock] { transform: none !important; font-size: clamp(13px, 5.2vw, 30px) !important; }
body .ck-flip .fc-controls, body .ck-flip .fc-date { display: none !important; }
body .ck-flip .fc-clock { justify-content: center; }
body .ck-flip .fc-card { box-shadow: 0 .35em 1em rgba(0, 0, 0, .28); }
:root[data-theme="dark"] body .ck-flip .fc-card { --fc-card: #1B2550; box-shadow: 0 0 0 1px #2A3A7A, 0 .35em 1em rgba(0, 0, 0, .6); }
.ck-date { font-size: 15px; font-weight: 700; text-transform: none !important; }
.ck-date::first-letter { text-transform: uppercase; }

/* Tableros de tarjetas en Alarma, Temporizador y Cronómetro: el mismo diseño del reloj principal (2026-10-13). */
.ck-board { display: grid; place-items: center; margin: 16px 0 6px; }
body .ck-board .fc-wrap { font-size: clamp(12px, 4.8vw, 28px); }
body .ck-board .fc-clock { display: flex; align-items: flex-end; justify-content: center; gap: .45em; }
body .ck-board .fc-card { box-shadow: 0 .35em 1em rgba(0, 0, 0, .28); }
body .ck-board .fc-card.fc-small { margin-left: 0; }
:root[data-theme="dark"] body .ck-board .fc-card { --fc-card: #1B2550; box-shadow: 0 0 0 1px #2A3A7A, 0 .35em 1em rgba(0, 0, 0, .6); }
.ck-editor .ck-board { margin-top: 4px; }
.ck-progress { height: 6px; margin: 14px auto 4px; width: min(320px, 86%); border-radius: 999px; background: var(--ck-line, #ddd); overflow: hidden; }
.ck-progress i { display: block; height: 100%; background: var(--ck-accent, #121b42); border-radius: inherit; transition: width .2s linear; }
.ck-summary { text-align: center; }

/* Ajustes del editor de alarma: tablero centrado y campo de hora que no se sale de la pantalla. */
.ck-editor { min-width: 0; }
.ck-editor .ck-board { justify-self: stretch; width: 100%; }
body .ck-editor .ck-bigtime input { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; font-size: 22px !important; padding: 10px 14px; letter-spacing: .02em; }
.ck-body { overflow-x: hidden; }

/* Segundos (y centésimas) con la MISMA tarjeta que horas y minutos: misma proporción, esquinas, letra y línea
   de la mitad; solo un poco más pequeña (pedido de Edilberto, 2026-10-13). */
body .ck-app .fc-wrap .fc-num, body .ck-app .fc-wrap .fc-ampm { font-family: "Bebas Neue", Oswald, "Arial Narrow", "Roboto Condensed", Impact, sans-serif !important; }
body .ck-app .fc-clock { display: flex; align-items: center; justify-content: center; gap: .45em; }
body .ck-app .fc-card.fc-small { width: 3.9em; height: 3.9em; border-radius: .375em; margin-left: .2em; }
body .ck-app .fc-small .fc-top, body .ck-app .fc-small .fc-flap-top { border-radius: .375em .375em 0 0; }
body .ck-app .fc-small .fc-bottom, body .ck-app .fc-small .fc-flap-bottom { border-radius: 0 0 .375em .375em; }
body .ck-app .fc-small .fc-num { font-size: 3.45em; padding-bottom: .3em; -webkit-text-stroke-width: .045em; }
body .ck-app .fc-card.fc-small::after { height: .08em; margin-top: -.04em; }

/* Temporizador: se elige el tiempo en las tarjetas grandes, con ＋ arriba y − abajo de cada una (2026-10-13). */
body .ck-setboard .fc-wrap { font-size: clamp(11px, 3.9vw, 22px); }
body .ck-setboard .fc-clock { align-items: flex-start; gap: .7em; }
.ck-setcol { display: flex; flex-direction: column; align-items: center; gap: .45em; }
.ck-setcol > span { font: 700 12px Manrope, system-ui, sans-serif; color: var(--ck-soft, #56608A); text-transform: uppercase; letter-spacing: .06em; }
body .ck-setcol .ck-step { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; cursor: pointer;
  background: var(--ck-surface, #fff); border: 1px solid var(--ck-line, #ddd); color: var(--ck-ink, #121b42); font: 800 1.15em/1 Manrope, system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08); -webkit-tap-highlight-color: transparent; }
body .ck-setcol .ck-step:active { transform: scale(.92); background: var(--ck-accent, #121b42); color: var(--ck-on-accent, #fff); }
body .ck-setcol .ck-step:focus-visible { outline: 2px solid var(--ck-accent, #121b42); outline-offset: 2px; }
.ck-presets { justify-content: center; margin-top: 14px; }

body .ck-setboard .fc-wrap { font-size: clamp(12px, 4.6vw, 26px); }
body .ck-body > .ck-round[data-timer="start"] { margin: 22px auto 0; }