/**
 * Clearis — Reloj digital Clearis (estilos de front)
 * @license AFL 3.0
 *
 * Identidad Clearis (paleta verde) mediante tokens --cle-*.
 */

.cle-reloj {
  --cle-primary: #6F9B3B;
  --cle-primary-600: #5f8732;
  --cle-primary-700: #4f7029;
  --cle-accent: #8FC15B;
  --cle-light: #C0E59C;
  --cle-tint: #f6faee;
  --cle-tint-2: #edf4dd;
  --cle-line: #e7eed9;
  --cle-ink: #2c3720;
  --cle-text: #46503a;
  --cle-muted: #828c70;
  --cle-white: #ffffff;
  --cle-r: 14px;
  --cle-r-sm: 10px;

  font-family: inherit;
  color: var(--cle-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin: 0 auto;
}

.cle-reloj * {
  box-sizing: border-box;
}

/* Variables tipográficas tabulares para que la hora no "baile" */
.cle-reloj .clk-time,
.cle-reloj .clk-flip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.cle-reloj .clk-greeting {
  font-size: 15px;
  font-weight: 600;
  color: var(--cle-primary-700);
  letter-spacing: .2px;
}

.cle-reloj .clk-date {
  font-size: 13px;
  color: var(--cle-muted);
  text-transform: capitalize;
}

.cle-reloj .clk-suffix {
  font-size: .42em;
  font-weight: 600;
  color: var(--cle-muted);
  margin-left: .35em;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ============================================================
 * Diseño 1 — Digital clásico (LED)
 * ============================================================ */
.cle-reloj--digital .clk-led {
  display: inline-flex;
  align-items: baseline;
  padding: 14px 22px;
  background: var(--cle-ink);
  border-radius: var(--cle-r);
  box-shadow: inset 0 0 0 2px rgba(143, 193, 91, .25), 0 6px 18px rgba(44, 55, 32, .18);
}

.cle-reloj--digital .clk-time {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--cle-accent);
  text-shadow: 0 0 10px rgba(143, 193, 91, .55);
}

.cle-reloj--digital .clk-sep {
  animation: cleRelojBlink 1s steps(1) infinite;
}

@keyframes cleRelojBlink {
  50% { opacity: .25; }
}

/* ============================================================
 * Diseño 2 — Flip clock (tarjetas)
 * ============================================================ */
.cle-reloj--flip .clk-flip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cle-reloj--flip .clk-group {
  display: inline-flex;
  gap: 4px;
}

.cle-reloj--flip .clk-card {
  position: relative;
  min-width: 38px;
  padding: 10px 8px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--cle-white);
  background: linear-gradient(180deg, var(--cle-primary-600) 0%, var(--cle-primary-700) 50%, var(--cle-primary-700) 50%, var(--cle-primary-600) 100%);
  border-radius: var(--cle-r-sm);
  box-shadow: 0 4px 12px rgba(44, 55, 32, .22);
  text-align: center;
  overflow: hidden;
}

/* Línea central de "bisagra" del flip */
.cle-reloj--flip .clk-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .22);
}

.cle-reloj--flip .clk-card.is-flip {
  animation: cleRelojFlip .45s ease;
}

@keyframes cleRelojFlip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(-18deg) scale(.98); filter: brightness(.85); }
  100% { transform: rotateX(0deg); }
}

.cle-reloj--flip .clk-colon {
  font-size: 26px;
  font-weight: 800;
  color: var(--cle-primary-700);
}

/* ============================================================
 * Diseño 3 — Minimalista
 * ============================================================ */
.cle-reloj--minimal .clk-time {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 3px;
  color: var(--cle-ink);
}

.cle-reloj--minimal .clk-sep {
  color: var(--cle-primary);
  font-weight: 400;
}

.cle-reloj--minimal .clk-date {
  font-weight: 400;
  letter-spacing: .5px;
}

/* ============================================================
 * Diseño 4 — Con fecha y saludo
 * ============================================================ */
.cle-reloj--datetime {
  padding: 18px 24px;
  background: var(--cle-tint);
  border: 1px solid var(--cle-line);
  border-radius: var(--cle-r);
  gap: 4px;
  min-width: 230px;
}

.cle-reloj--datetime .clk-time {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--cle-primary-700);
}

.cle-reloj--datetime .clk-sep {
  color: var(--cle-accent);
}

.cle-reloj--datetime .clk-date {
  font-size: 14px;
}

/* Respeto del usuario que prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .cle-reloj--digital .clk-sep,
  .cle-reloj--flip .clk-card.is-flip {
    animation: none;
  }
}