/* ═══════════════════════════════════════════════════════════════════
   RUTINA · Hábitos, trabajo y disciplina
   Se carga DESPUÉS de estilo.css y redefine la identidad visual.
   La lógica (habitos.html → rutina.html) es la misma; cambia la piel.

   Dirección: blanco luminoso con azules — aire, foco y calma.
   Títulos serif con carácter (Fraunces) sobre un sistema limpio,
   para que se sienta otro producto y no un tema de FARU.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Paleta ───────────────────────────────────────────────────────── */
:root{
  --lienzo:#F5F8FD;          /* blanco azulado, con aire */
  --blanco:#FFFFFF;          /* tarjeta */
  --tinta:#16233A;           /* azul noche para el texto */
  --acero:#5A6A85;           /* secundario */
  --linea:#DFE7F3;
  --linea-suave:#EDF2FA;

  /* Acento del tema (el selector de color redefine estas seis) */
  --terra:#1D5FD6;
  --terra-osc:#154AAB;
  --terra-tinte:#E7EFFD;
  --oliva:#1673B4;           /* el tono de "cumplido" */
  --oliva-tinte:#E6F2FB;
  --deg-pleno:#1D5FD6;       /* degradados de progreso */
  --deg-medio:#4A82EC;
  --deg-suave:#7DA8F5;
  --deg-palido:#A9C0E4;
  --ambar:#B8862B;           /* "de ayer" conserva su calidez */
  --ambar-tinte:#FBF3DE;

  --accion:#16233A;
  --accion-hover:#22334F;
  --accion-txt:#FFFFFF;
  --sombra-accion:0 8px 20px -8px rgba(22,35,58,.4);
  --cabecera:#3E5375;

  --sombra-1:0 1px 2px rgba(22,35,58,.05);
  --sombra-2:0 14px 34px -20px rgba(22,35,58,.22);
  --anillo:0 0 0 4px rgba(29,95,214,.2);

  /* Lo que estilo.css llama "verde" acá es el azul de cumplir */
  --verde-faru:var(--oliva);
  --verde-osc:#0F5C93;
  --verde-tinte:var(--oliva-tinte);
  --sombra-verde:0 6px 16px -6px rgba(22,115,180,.4);

  --r-lg:22px;
  --r-md:14px;
}
/* ── Base ─────────────────────────────────────────────────────────── */
body{
  background:var(--lienzo);color:var(--tinta);
  /* Grano sutil de papel */
  background-image:
    radial-gradient(circle at 18% 8%, rgba(29,95,214,.06), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(22,115,180,.05), transparent 44%);
  background-attachment:fixed;
}

/* Títulos en serif: donde FARU es condensada y deportiva, acá hay calma */
h1, h2, h3,
.modulo h2, .modulo h3,
.tablero h2, .tablero h3{
  font-family:'Fraunces','Georgia',serif !important;
  letter-spacing:-.01em;text-transform:none !important;
  font-weight:700;
}
h1{
  font-size:clamp(2rem,4.8vw,3rem);line-height:1.08;
  margin:0 0 12px;font-weight:700;
}
h1 span{
  color:var(--terra);display:block;font-style:italic;font-weight:600;
}
.sub{font-size:1.02rem;color:var(--acero);max-width:620px;line-height:1.6;}
.tablero h2, .modulo h2{
  font-size:1.18rem;letter-spacing:0;margin-bottom:4px;
}

/* ── Nav ──────────────────────────────────────────────────────────── */
.rt-nav{
  background:var(--blanco);border-bottom:1px solid var(--linea);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 0 rgba(22,35,58,.04);
}
.rt-nav a{color:var(--tinta);font-family:'Inter',sans-serif;font-weight:700;
  text-transform:none;letter-spacing:0;font-size:.9rem;}
.rt-nav a:hover{color:var(--terra);}
.rt-nav a.activo{background:var(--terra-tinte);color:var(--terra-osc);}
nav .rt-marca, .rt-nav .rt-marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.rt-logo{display:inline-block;flex-shrink:0;}
.rt-logo{
  width:26px;height:26px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--blanco) 0 34%, transparent 35%),
    conic-gradient(var(--terra) 0 75%, var(--linea) 75% 100%);
  box-shadow:inset 0 0 0 1px rgba(22,35,58,.08);
}
.rt-nombre{
  font-family:'Fraunces','Georgia',serif;font-size:1.35rem;font-weight:700;
  letter-spacing:-.02em;color:var(--tinta);
}
.rt-volver{
  margin-left:auto;font-size:.82rem !important;opacity:.7;
  border:1px solid var(--linea);border-radius:999px;padding:6px 12px !important;
}
.rt-volver:hover{opacity:1;border-color:var(--tinta);}
nav a.tienda{display:none;}           /* la tienda de FARU no va acá */

/* Ícono del menú hamburguesa en tinta (el nav ya no es oscuro) */
#menuHamb span{background:var(--tinta);}
.rt-nav img{display:none;}

/* ── Cabecera del día ─────────────────────────────────────────────── */
.rt-cabeza{padding:8px 0 4px;}
.rt-fecha{
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin:0 0 10px;
}

/* ── Tarjetas ─────────────────────────────────────────────────────── */
.tablero .modulo{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-lg);box-shadow:var(--sombra-1);
}
.tablero .modulo > p.sub, .tablero .modulo .prefs-resumen{color:var(--acero);}

/* Barra "tu día" fija */
.dia-fija{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-lg);
}
.df-pct{font-family:'Fraunces','Georgia',serif;color:var(--terra);font-weight:700;}
.df-barra{background:var(--linea-suave);}
.df-barra > i, .df-relleno{background:var(--terra) !important;}

/* ── Filas de hábitos y tareas ────────────────────────────────────── */
.tarea{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);
}
.tarea:hover{border-color:#BCCDE8;}
.tarea.hecha{
  background:var(--oliva-tinte);border-color:transparent;
}
/* El nombre de lo cumplido: tachado fino y en el tono del papel,
   sin recuadro blanco que desentone con la fila oliva */
.tarea.hecha .tarea-inp{
  color:var(--acero);background:transparent;
  text-decoration-thickness:1px;text-decoration-color:#8FB4D9;
}
.tarea.hecha .tarea-inp:focus{background:rgba(255,255,255,.55);}
.tarea-num{font-family:'Fraunces','Georgia',serif;color:var(--acero);font-weight:600;}
.tarea-inp{font-family:'Inter',sans-serif;font-weight:600;}
.tarea-inp::placeholder{color:#A8B6CC;font-weight:500;}
/* Filas vacías (los ejemplos) aún más suaves: no compiten con lo real */
.tarea:not(.hecha) .tarea-inp[value=""]{font-weight:500;}

/* El check: anillo terracota, relleno oliva al cumplir */
.hab-check, .tarea-check{
  border:2px solid var(--linea);background:var(--blanco);
}
.hab-check:hover, .tarea-check:hover{border-color:var(--terra);}
.tarea.hecha .hab-check, .tarea.hecha .tarea-check{
  background:var(--oliva);border-color:var(--oliva);color:#fff;
}
.hab-hora{
  font-family:'Fraunces','Georgia',serif;font-weight:700;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}

/* Chips (minutos, próximo, a diario, de ayer) */
.chip-crono, .chip-mover, .chip-linkadd, .chip-link, .chip-fantasma{
  font-family:'Inter',sans-serif;font-weight:700;text-transform:none;letter-spacing:0;
  border-radius:999px;
}
.chip-crono{background:var(--tinta);color:var(--blanco);}
.chip-crono:hover{background:var(--terra);}
.chip-mover{background:var(--linea-suave);color:var(--tinta);}
.chip-mover:hover{background:var(--terra-tinte);color:var(--terra-osc);}
.chip-arrastre, .arrastre-tag, .tarea .de-ayer{
  background:var(--ambar-tinte);color:var(--ambar);
}

/* Acciones secundarias al pie de cada bloque */
.btn-suave, .tarea-mas, .hab-mas, .btn-sec,
button.sumar, .sumar-tarea, .habito-mas{
  font-family:'Inter',sans-serif;font-weight:700;text-transform:none;letter-spacing:0;
  border-radius:999px;border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);
}
.btn-suave:hover, .tarea-mas:hover, .hab-mas:hover, .habito-mas:hover{border-color:var(--tinta);}

/* Botón principal de bloque ("Iniciar bloque") */
.bloque-btn, .btn-bloque, .iniciar-bloque{
  background:var(--terra);color:#fff;border:none;border-radius:999px;
  font-family:'Inter',sans-serif;font-weight:800;text-transform:none;letter-spacing:0;
  box-shadow:0 6px 16px -6px rgba(29,95,214,.45);
}
.bloque-btn:hover, .btn-bloque:hover, .iniciar-bloque:hover{background:var(--terra-osc);}

/* Manija de arrastre */
.mover-manija{color:#A8B6CC;}
.mover-manija:hover{color:var(--tinta);background:var(--linea-suave);}
.tarea.arrastrando{box-shadow:0 16px 34px -12px rgba(22,35,58,.3);}

/* ── Cumplimiento (calendario / semanas) ──────────────────────────── */
.cump-dia, .dia-celda{border-radius:6px;}
.cump-dia.lleno, .dia-celda.full{background:var(--oliva);}
.cump-dia.parcial, .dia-celda.mid{background:#7FB5DE;}
.cump-dia.poco, .dia-celda.low{background:#D3E5F5;}
.cump-dia.hoy, .dia-celda.hoy{box-shadow:0 0 0 2px var(--terra);}
.cump-num, .stat-num{font-family:'Fraunces','Georgia',serif;color:var(--tinta);}

/* ── Toast ────────────────────────────────────────────────────────── */
#toastMotiv{
  background:var(--tinta);color:var(--blanco);border-radius:14px;
  font-family:'Inter',sans-serif;
}

/* ── Cronómetro / Pomodoro flotante ───────────────────────────────── */
#faruPomo, .pomo, .crono-flotante{
  background:var(--tinta);color:var(--blanco);border-radius:18px;
}
#faruPomo .pomo-tiempo, .crono-tiempo{font-family:'Fraunces','Georgia',serif;}

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie{color:var(--acero);font-family:'Inter',sans-serif;}
.pie a{color:var(--terra);}

/* ── Menú hamburguesa (auth.js lo pinta oscuro; acá lo adaptamos) ─── */
#menuNav{
  background:var(--blanco) !important;border:1px solid var(--linea);color:var(--tinta);
  box-shadow:var(--sombra-2);
}
#menuNav a{color:var(--tinta) !important;}
#menuNav a:hover{background:var(--linea-suave) !important;}
#menuNav .mn-titulo{color:var(--acero) !important;}
#menuNav svg{stroke:var(--terra);}
.mn-color.elegido{border-color:var(--tinta) !important;}

/* ── Móvil ────────────────────────────────────────────────────────── */
@media (max-width:720px){
  h1{font-size:1.9rem;}
  .rt-nombre{font-size:1.2rem;}
  .rt-volver{display:none;}
}


/* ═══ Temas de color (elegís el tuyo desde el menú) ═══ */
html[data-color="violeta"]{
  --terra:#6D3FD1; --terra-osc:#54309F; --terra-tinte:#F0EAFB;
  --oliva:#8447C4; --oliva-tinte:#F2EAFA;
  --deg-pleno:#6D3FD1; --deg-medio:#8A64DD; --deg-suave:#AB90E8; --deg-palido:#CDBEEF;
  --verde-osc:#5B2FA8; --anillo:0 0 0 4px rgba(109,63,209,.2);
}
html[data-color="bosque"]{
  --terra:#1F7A4D; --terra-osc:#165C3A; --terra-tinte:#E4F3EB;
  --oliva:#3B8A3E; --oliva-tinte:#E9F3E7;
  --deg-pleno:#1F7A4D; --deg-medio:#42986C; --deg-suave:#79B896; --deg-palido:#B2D6C2;
  --verde-osc:#14603B; --anillo:0 0 0 4px rgba(31,122,77,.2);
}
html[data-color="terracota"]{
  --terra:#C2562E; --terra-osc:#A3441F; --terra-tinte:#F9E8DF;
  --oliva:#B4652A; --oliva-tinte:#F8EDDF;
  --deg-pleno:#C2562E; --deg-medio:#D07A50; --deg-suave:#E0A483; --deg-palido:#EDC9B5;
  --verde-osc:#96421D; --anillo:0 0 0 4px rgba(194,86,46,.2);
}
html[data-color="rosa"]{
  --terra:#C13B7A; --terra-osc:#9C2C60; --terra-tinte:#FAE7F0;
  --oliva:#B23E8C; --oliva-tinte:#F8E9F3;
  --deg-pleno:#C13B7A; --deg-medio:#D2639A; --deg-suave:#E294BC; --deg-palido:#EFC3D9;
  --verde-osc:#8F2A59; --anillo:0 0 0 4px rgba(193,59,122,.2);
}
html[data-color="grafito"]{
  --terra:#3E4C5E; --terra-osc:#2B3644; --terra-tinte:#E9EDF1;
  --oliva:#4E6070; --oliva-tinte:#EAEFF2;
  --deg-pleno:#3E4C5E; --deg-medio:#5F7185; --deg-suave:#8B9AAB; --deg-palido:#BEC8D2;
  --verde-osc:#2B3644; --anillo:0 0 0 4px rgba(62,76,94,.2);
}

/* ═══ El selector en el menú ═══ */
.mn-colores{display:flex;gap:10px;padding:6px 14px 10px;flex-wrap:wrap;}
.mn-color{
  width:30px;height:30px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;position:relative;
  box-shadow:inset 0 0 0 1px rgba(22,35,58,.1);
}
.mn-color.elegido{border-color:var(--tinta);}
.mn-color.elegido::after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:900;font-size:.8rem;
}
.mn-color[data-color="azul"]{background:#1D5FD6;}
.mn-color[data-color="violeta"]{background:#6D3FD1;}
.mn-color[data-color="bosque"]{background:#1F7A4D;}
.mn-color[data-color="terracota"]{background:#C2562E;}
.mn-color[data-color="rosa"]{background:#C13B7A;}
.mn-color[data-color="grafito"]{background:#3E4C5E;}


/* ═══ La prueba de 3 días y la compuerta ═══ */
.rt-prueba{
  margin-left:8px;font-family:'Inter',sans-serif;font-size:.74rem;font-weight:800;
  color:var(--terra-osc);background:var(--terra-tinte);border-radius:999px;
  padding:6px 12px;white-space:nowrap;
}
#rutinaGate{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:22px;background:var(--lienzo);
}
.rg-tarjeta{
  max-width:430px;width:100%;background:var(--blanco);border:1px solid var(--linea);
  border-radius:24px;box-shadow:var(--sombra-2);padding:36px 30px;text-align:center;
}
.rg-logo{width:44px;height:44px;display:inline-block;margin-bottom:16px;}
.rg-tarjeta h2{font-family:'Fraunces','Georgia',serif;font-size:1.5rem;margin:0 0 10px;}
.rg-tarjeta p{color:var(--acero);line-height:1.65;font-size:.95rem;margin:0 0 22px;}
.rg-btn{
  display:block;background:var(--terra);color:#fff;text-decoration:none;
  border-radius:14px;padding:15px;font-family:'Inter',sans-serif;font-weight:800;
  font-size:.96rem;box-shadow:0 8px 20px -8px rgba(29,95,214,.5);
}
.rg-btn:hover{background:var(--terra-osc);}
.rg-sesion{
  margin-top:14px;background:none;border:none;color:var(--acero);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.84rem;font-weight:700;text-decoration:underline;
}
.rg-sesion:hover{color:var(--tinta);}
@media (max-width:720px){ .rt-prueba{display:none;} }