/* Rumbo — estética "estudio": verde bosque, fondo gris claro, barra lateral, tarjetas amplias. Móvil primero y modo oscuro. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fondo: #f3f5f4;
  --superficie: #ffffff;
  --superficie-2: #f2f6f4;
  --menta: #e2f0ea;
  --texto: #15232a;
  --tenue: #5b6a70;
  --borde: #e1e7e4;
  --primario: #1b4d44;
  --primario-hover: #153e37;
  --primario-texto: #ffffff;
  --verde-texto: #1b4d44;
  --enlace: #1b5a4d;
  --barra: #22705d;
  --ok: #22705d;
  --acento: #d9772b;
  --peligro: #b23a22;
  --aviso-fondo: #fdf4e6;
  --aviso-borde: #ebc088;
  --foco: #e0a33a;
  --heroe: #1b4d44;
  --heroe-texto: #eef7f3;
  --heroe-tenue: #b7d2c8;
  --heroe-linea: rgb(255 255 255 / 0.22);
  --anillo-pista: #ecf1ef;
  --simple: #22705d; --media: #2a6480; --amplia: #6a4a93;
  --radio: 18px;
  --radio-chico: 11px;
  --sombra: 0 1px 2px rgb(16 40 34 / 0.04);
  --lateral: 290px;
  color-scheme: light dark;
}
/* Modo noche: por el botón (data-tema="oscuro") o, en automático, si el sistema está en oscuro. */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0d1614;
  --superficie: #14201d;
  --superficie-2: #1a2925;
  --menta: #1d3831;
  --texto: #e5eeeb;
  --tenue: #9db1aa;
  --borde: #243631;
  --primario: #2a7a66;
  --primario-hover: #2b7e69;
  --verde-texto: #5cc79f;
  --enlace: #7fcbb4;
  --barra: #4fb392;
  --ok: #5cc79f;
  --acento: #f0a261;
  --peligro: #ff9180;
  --aviso-fondo: #33291a;
  --aviso-borde: #8a6a36;
  --heroe: #173f37;
  --heroe-texto: #eef7f3;
  --heroe-tenue: #a9c9be;
  --anillo-pista: #22322e;
  --simple: #5cc79f; --media: #7cbfe0; --amplia: #c3a6ee;
  --sombra: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0d1614;
    --superficie: #14201d;
    --superficie-2: #1a2925;
    --menta: #1d3831;
    --texto: #e5eeeb;
    --tenue: #9db1aa;
    --borde: #243631;
    --primario: #2a7a66;
    --primario-hover: #2b7e69;
    --verde-texto: #5cc79f;
    --enlace: #7fcbb4;
    --barra: #4fb392;
    --ok: #5cc79f;
    --acento: #f0a261;
    --peligro: #ff9180;
    --aviso-fondo: #33291a;
    --aviso-borde: #8a6a36;
    --heroe: #173f37;
    --heroe-texto: #eef7f3;
    --heroe-tenue: #a9c9be;
    --anillo-pista: #22322e;
    --simple: #5cc79f; --media: #7cbfe0; --amplia: #c3a6ee;
    --sombra: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.55 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01";
}
a { color: var(--enlace); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; font-weight: 800; overflow-wrap: anywhere; letter-spacing: -0.025em; }
h2 { font-size: 0.78rem; font-weight: 700; margin: 2rem 0 0.75rem; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.16em; }
h3 { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
p { margin: 0.4rem 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
svg { flex: none; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: 0.5rem 1rem; z-index: 40; }
.saltar:focus { left: 0.5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura: barra lateral + contenido ---------- */
.app { min-height: 100vh; }
.lateral {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  background: var(--superficie); border-top: 1px solid var(--borde);
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
}
.lateral .marca, .lateral-titulo, .sello { display: none; }
.nav { display: flex; justify-content: space-around; gap: 0.25rem; }
.nav a {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex: 1;
  color: var(--tenue); text-decoration: none; font-size: 0.72rem; font-weight: 600;
  padding: 0.4rem 0.25rem; border-radius: var(--radio-chico); min-height: 52px; justify-content: center;
}
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current="page"] { background: var(--menta); color: var(--verde-texto); font-weight: 800; }
.nav a:hover { color: var(--verde-texto); }

.contenido { min-width: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.barra-superior {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1rem; padding-top: max(0.85rem, env(safe-area-inset-top));
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.barra-superior p { margin: 0; }
.miga, .guardado { display: none; color: var(--tenue); font-size: 0.95rem; white-space: pre; }
.guardado { font-size: 0.85rem; color: var(--enlace); }
.fecha-top { display: flex; align-items: center; gap: 0.5rem; color: var(--tenue); font-size: 0.9rem; margin-left: auto !important; }
.fecha-top::first-letter { text-transform: uppercase; }
.fecha-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Botón día / noche */
.tema-boton { min-height: 40px; padding: 0.35rem 0.8rem; gap: 0.45rem; border-radius: 999px; font-size: 0.875rem; color: var(--texto); background: var(--superficie-2); }
.tema-boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema-boton .icono-sol, .tema-boton[data-oscuro="true"] .icono-luna { display: none; }
.tema-boton[data-oscuro="true"] .icono-sol { display: block; }
@media (max-width: 420px) { .tema-texto { display: none; } .tema-boton { padding: 0.35rem 0.6rem; } }
@media (max-width: 899px) {
  .barra-superior { flex-wrap: nowrap; gap: 0.6rem; }
  .fecha-top { min-width: 0; font-size: 0.85rem; }
  .fecha-top svg { display: none; }
  .fecha-top span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tema-boton { flex: none; }
}

.marca { display: flex; align-items: center; gap: 0.6rem; color: var(--verde-texto); text-decoration: none; }
.marca-icono { width: 30px; height: 30px; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.04em; color: var(--verde-texto); }
.marca-sub { font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--texto); margin-top: 0.3rem; font-weight: 600; }

main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
main:focus { outline: none; }

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: var(--lateral) 1fr; }
  .lateral {
    position: sticky; inset: 0 auto auto 0; height: 100vh; border-top: 0; border-right: 1px solid var(--borde);
    display: flex; flex-direction: column; padding: 2.25rem 1.5rem 1.5rem;
  }
  .lateral .marca { display: flex; margin: 0 0 3rem 1rem; }
  .lateral .marca-icono { width: 36px; height: 36px; }
  .lateral .marca-nombre { font-size: 2.1rem; }
  .lateral-titulo { display: block; margin: 0 0 1rem 1.25rem; }
  .nav { flex-direction: column; justify-content: flex-start; gap: 0.35rem; }
  .nav a { flex-direction: row; gap: 1rem; font-size: 1rem; font-weight: 500; color: var(--texto); padding: 0.85rem 1.25rem; min-height: 0; justify-content: flex-start; flex: none; }
  .nav a[aria-current="page"] { font-weight: 700; }
  .sello { display: block; margin-top: auto; padding-left: 1.25rem; color: var(--tenue); font-size: 0.8rem; }
  .contenido { padding-bottom: 0; }
  .barra-superior { padding: 1.9rem 3rem; gap: 2rem; }
  .marca-movil { display: none; }
  .miga, .guardado { display: block; }
  .fecha-top { font-size: 1rem; }
  main { padding: 3.25rem 3rem 4rem; }
}

/* ---------- Tipografía de encabezados ---------- */
.ceja { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tenue); margin: 0 0 0.6rem; }
.cabecera-grande { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cabecera-grande > div { min-width: 0; }
.titular { font-size: clamp(1.9rem, 4.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
.bajada { color: var(--tenue); font-size: 1.05rem; margin: 0.9rem 0 0; }
.bajada::first-letter { text-transform: uppercase; }
.volver { display: inline-block; margin-bottom: 1rem; font-weight: 600; text-decoration: none; }
.volver:hover { text-decoration: underline; }

/* ---------- Botones y formularios ---------- */
button, .boton {
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: 0.55rem 1rem; border-radius: var(--radio-chico);
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none;
}
button:hover, .boton:hover { background: var(--superficie-2); }
button svg, .boton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.primario { background: var(--primario); color: var(--primario-texto); border-color: transparent; font-weight: 700; }
.primario:hover { background: var(--primario-hover); }
.grande-boton { min-height: 52px; padding: 0.7rem 1.4rem; font-size: 1.05rem; }
.peligro { color: var(--peligro); border-color: var(--peligro); background: transparent; }
.peligro-texto { color: var(--peligro); }
.chico { min-height: 38px; padding: 0.3rem 0.8rem; font-size: 0.875rem; }
.plano { border-color: transparent; background: transparent; color: var(--enlace); }
.plano:hover { background: var(--menta); }
.fila-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }

label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
legend { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; padding: 0; }
input, select, textarea {
  font: inherit; width: 100%; min-height: 46px; padding: 0.55rem 0.8rem;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--texto);
}
input:focus, select:focus, textarea:focus { border-color: var(--barra); outline: none; box-shadow: 0 0 0 3px var(--menta); }
textarea { min-height: 5rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--primario); margin: 0; box-shadow: none; }
.campo { margin: 0 0 1rem; }
fieldset.campo { border: 0; padding: 0; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 0.75rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 0.9rem; }
.checks label { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; margin: 0; min-height: 40px; }
.checks.columna { flex-direction: column; gap: 0; }
.ayuda { color: var(--tenue); font-size: 0.9rem; }
.error { color: var(--peligro); font-size: 0.9rem; font-weight: 700; }
.ok { color: var(--ok); font-weight: 700; margin: 0.25rem 0 0; }

.opciones { display: grid; gap: 0.5rem; }
.opcion {
  display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; cursor: pointer; font-weight: 500;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.75rem 0.85rem;
}
.opcion input { margin-top: 0.15rem; }
.opcion small { display: block; color: var(--tenue); font-size: 0.85rem; font-weight: 500; }
.opcion:has(input:checked) { border-color: var(--barra); background: var(--menta); }
form .solo-tiempo { display: none; }
form.es-tiempo .solo-tiempo { display: grid; }
form.es-tiempo .solo-resultado { display: none; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.35rem; box-shadow: var(--sombra); }
.aviso { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: var(--radio-chico); padding: 0.85rem 1rem; margin: 0.75rem 0; }
.aviso p { margin: 0 0 0.4rem; }
.vacio { color: var(--tenue); padding: 1.25rem; text-align: center; border: 1px dashed var(--borde); border-radius: var(--radio); margin: 0.5rem 0; background: var(--superficie); }
.vacio p { margin: 0; }
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.cabecera > div { min-width: 0; }
.fecha { color: var(--tenue); margin: 0.1rem 0 0; }
.fecha::first-letter { text-transform: uppercase; }
.descripcion { color: var(--tenue); white-space: pre-line; }
.zona-peligro { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.cargando { color: var(--tenue); }

/* ---------- Mi día: tarjeta verde, anillo y números ---------- */
.rejilla-hoy { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 0.5rem; }
@media (min-width: 900px) { .rejilla-hoy { grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); gap: 1.75rem; } }
.heroe {
  background: var(--heroe); color: var(--heroe-texto); border-radius: 22px;
  padding: 1.75rem 1.5rem; display: flex; flex-direction: column; min-width: 0;
}
@media (min-width: 900px) { .heroe { padding: 2.25rem 2.5rem; } }
.insignia {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgb(255 255 255 / 0.1); border-radius: 8px; padding: 0.45rem 0.8rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.insignia svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.heroe-titulo { font-size: clamp(1.55rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; margin: 1.5rem 0 0.75rem; color: var(--heroe-texto); text-transform: none; overflow-wrap: anywhere; }
.heroe-texto { color: var(--heroe-tenue); font-size: 1.02rem; margin: 0 0 1.5rem; }
.heroe .boton-claro { align-self: flex-start; background: #fff; color: #1b4d44; border-color: transparent; font-weight: 700; min-height: 50px; padding: 0.65rem 1.35rem; font-size: 1.02rem; }
.heroe .boton-claro:hover { background: #eef6f2; }
.heroe .boton-contorno { background: transparent; color: var(--heroe-texto); border-color: var(--heroe-linea); min-height: 50px; }
.heroe .boton-contorno:hover { background: rgb(255 255 255 / 0.08); }
.heroe .fila-botones { margin-top: 0; }
.heroe-texto strong { color: var(--heroe-texto); }
#plan { scroll-margin-top: 1rem; }
#plan:focus { outline: none; }
.heroe-pasos { list-style: none; display: flex; align-items: center; gap: 0.9rem; padding: 0; margin: 2rem 0 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--heroe-tenue); flex-wrap: wrap; }
.heroe-pasos li { display: flex; align-items: center; gap: 0.9rem; }
.heroe-pasos li + li::before { content: ""; width: 44px; height: 1px; background: var(--heroe-linea); }
.heroe-pasos b { font-size: 0.95rem; letter-spacing: 0.02em; font-weight: 600; color: var(--heroe-texto); margin-right: 0.35rem; }
.heroe-pasos .actual { color: var(--heroe-texto); }
.heroe-meta { display: block; margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.9; }
@media (max-width: 560px) {
  .heroe-pasos { gap: 0.55rem; margin-top: 1.5rem; flex-wrap: nowrap; font-size: 0.66rem; letter-spacing: 0.12em; }
  .heroe-pasos li { gap: 0.55rem; }
  .heroe-pasos li + li::before { width: 16px; }
  .heroe-pasos b { margin-right: 0.15rem; font-size: 0.85rem; }
}

.anillo-tarjeta { display: flex; flex-direction: column; align-items: center; text-align: center; }
.anillo-tarjeta .item-cabeza { width: 100%; align-items: center; }
.anillo-tarjeta h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--texto); text-transform: none; letter-spacing: -0.01em; }
.llama { width: 24px; height: 24px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linejoin: round; }
.anillo { position: relative; width: 184px; height: 184px; margin: 1.5rem auto 1rem; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 12; }
.anillo .pista { stroke: var(--anillo-pista); }
.anillo .valor { stroke: var(--barra); stroke-linecap: round; }
.anillo-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anillo-num { font-size: 2.9rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.anillo-meta { color: var(--tenue); font-size: 1rem; margin-top: 0.35rem; }
.anillo-tarjeta .ayuda { margin: 0.25rem 0 0; }

.estadisticas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
@media (min-width: 900px) { .estadisticas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem; margin-top: 1.75rem; } }
@media (max-width: 899px) {
  .stat { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1rem; }
  .stat-icono { width: 42px; height: 42px; border-radius: 11px; }
}
.stat { display: flex; align-items: center; gap: 1.1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem 1.35rem; }
.stat-icono { width: 50px; height: 50px; border-radius: 13px; background: var(--menta); color: var(--verde-texto); display: grid; place-items: center; flex: none; }
.stat-icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stat-num { font-size: 1.65rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.stat-texto { color: var(--tenue); font-size: 0.9rem; }

/* ---------- Barras de progreso ---------- */
.barra { height: 8px; border-radius: 999px; background: var(--anillo-pista); overflow: hidden; margin: 0.5rem 0 0.35rem; }
.barra > span { display: block; height: 100%; background: var(--barra); border-radius: 999px; }
.barra.grande { height: 11px; }
.barra.enorme { height: 16px; margin: 0.75rem 0; }
.barra.fina { height: 6px; margin: 0.25rem 0 0.2rem; }
.barra.completa > span { background: var(--ok); }
.pct { font-weight: 800; color: var(--verde-texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pct.grande { font-size: 1.25rem; }
.pct.enorme { font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; }
.item-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.item-cabeza > :first-child { min-width: 0; overflow-wrap: anywhere; }
.titulo-tarjeta { margin: 0; font-size: 1.1rem; color: var(--texto); text-transform: none; letter-spacing: -0.01em; }
.subtitulo { margin: 1rem 0 0.5rem; font-size: 1rem; }
.subtitulo-chico { font-size: 0.72rem; color: var(--tenue); margin: 0.9rem 0 0.35rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; }
.ritmo { margin-top: 0.7rem; font-size: 0.875rem; color: var(--tenue); }
.ritmo .pct { font-size: 0.85rem; font-weight: 700; }

/* ---------- Listas: plan, recomendaciones, proyectos, tareas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.item, .rec, .idea { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra); }
.item { border-left: 5px solid var(--primario); }
.item.hecho { border-left-color: var(--ok); background: var(--superficie-2); box-shadow: none; }
.item.hecho h3 { color: var(--tenue); }
.rec { border-style: dashed; border-color: color-mix(in srgb, var(--barra) 35%, var(--borde)); }
.meta { color: var(--tenue); font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; margin: 0.25rem 0 0; }
.porque { font-size: 0.9rem; color: var(--tenue); margin: 0.4rem 0 0; }

.proyecto-tarjeta { display: block; text-decoration: none; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.35rem; box-shadow: var(--sombra); }
.proyecto-tarjeta:hover { border-color: var(--barra); }
.proyecto-tarjeta.apagado { opacity: 0.8; }
.proyecto-tarjeta h3 { font-size: 1.2rem; }
@media (min-width: 900px) { .lista-proyectos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.objetivo { margin: 0 0 1.25rem; }
.titulo-objetivo { font-size: 1.25rem; }
.acciones-objetivo { border-top: 1px solid var(--borde); padding-top: 0.6rem; margin-top: 1.1rem; gap: 0.25rem; }
.lista.tareas { margin-top: 0.9rem; gap: 0.55rem; }
.tarea { border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie-2); }
.tarea > details > summary { cursor: pointer; padding: 0.8rem 0.95rem; list-style: none; display: block; border-radius: 14px; }
.tarea > details > summary::-webkit-details-marker { display: none; }
.tarea > details > summary .titulo::before { content: "›"; display: inline-block; width: 1.1em; color: var(--tenue); font-weight: 800; transition: transform 0.15s; }
.tarea > details[open] > summary .titulo::before { transform: rotate(90deg); }
.tarea .titulo { font-weight: 700; }
.tarea > details > summary > .meta, .tarea > details > summary > .item-cabeza { display: flex; }
.tarea.hecha .titulo { color: var(--tenue); }
.tarea-cuerpo { padding: 0 0.95rem 0.95rem; }
.pasos { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; }
.pasos label { display: flex; align-items: center; gap: 0.65rem; font-weight: 500; font-size: 0.95rem; min-height: 40px; margin: 0; cursor: pointer; }
.pasos input:checked + span { text-decoration: line-through; color: var(--tenue); }
.agregar-paso { display: flex; gap: 0.5rem; margin: 0.25rem 0; }
.agregar-paso input { min-height: 40px; padding: 0.3rem 0.7rem; }
.agregar-paso button { flex: none; }

.chip { display: inline-block; font-size: 0.76rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; color: var(--tenue); }
.chip.tamano-simple { color: var(--simple); } .chip.tamano-media { color: var(--media); } .chip.tamano-amplia { color: var(--amplia); }
.chip.en-plan { color: var(--ok); }
.chip.falta { color: var(--peligro); }
.chip.etapa { color: var(--amplia); }
.vencida { color: var(--peligro); font-weight: 700; }

details.porque { margin-top: 0.35rem; font-size: 0.9rem; }
details.porque summary { cursor: pointer; color: var(--enlace); }
details.porque ul { margin: 0.25rem 0 0; padding-left: 1.2rem; color: var(--tenue); }
details.bloque { margin-top: 1rem; }
details.bloque > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details.bloque.chico > summary { min-height: 36px; font-size: 0.9rem; color: var(--tenue); }

/* Meta concreta, logro y etapas */
.criterio { margin: 0.5rem 0 0; font-size: 0.95rem; }
.logro { border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); border-radius: 14px; padding: 0.9rem 1rem; margin: 0.9rem 0; background: var(--menta); }
.logro p { margin: 0 0 0.25rem; }
.lista-etapas { padding-left: 1.2rem; margin: 0.25rem 0 0; }
.lista-etapas > li { margin: 0.5rem 0 0.75rem; }
.lista-etapas p { margin: 0.15rem 0; }
.lista-faltantes { margin: 0 0 0 2rem; padding-left: 1rem; }

/* Notas */
.notas { list-style: none; margin: 0.35rem 0; padding: 0; display: grid; gap: 0.4rem; }
.nota { display: flex; gap: 0.5rem; align-items: flex-start; justify-content: space-between; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: 0.45rem 0.7rem; font-size: 0.925rem; }
.nota.falta { border-left: 4px solid var(--peligro); }
.nota p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fecha-nota { color: var(--tenue); font-size: 0.85rem; }
.texto-nota { white-space: pre-line; }
.acciones-nota { display: flex; gap: 0.25rem; flex: none; }
.acciones-nota button { min-height: 32px; padding: 0.15rem 0.55rem; }
.donde-nota { margin: 0.75rem 0 0.25rem; }

/* Historial */
.navegar-dias { display: flex; justify-content: space-between; gap: 0.5rem; margin: 0 0 1.25rem; }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }

/* Ideas: consejos y galería de proyectos */
details.consejos { background: var(--menta); border-radius: var(--radio-chico); padding: 0.1rem 0.9rem; margin: 0 0 1rem; font-size: 0.9rem; }
details.consejos > summary { cursor: pointer; font-weight: 700; color: var(--verde-texto); min-height: 40px; display: flex; align-items: center; }
details.consejos ul { margin: 0 0 0.75rem; padding-left: 1.1rem; }
details.consejos li { margin: 0.3rem 0; }
.plantilla { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 14px; padding: 1rem 1.1rem; }
.plantilla h3 { font-size: 1.05rem; }
.plantilla-objetivos { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.plantilla .fila-botones { justify-content: space-between; }

/* Menú "Más" (acciones poco frecuentes) */
details.mas { position: relative; display: inline-block; }
details.mas > summary {
  list-style: none; cursor: pointer; min-height: 38px; padding: 0.3rem 0.8rem; border-radius: var(--radio-chico);
  display: inline-flex; align-items: center; font-size: 0.875rem; font-weight: 600; color: var(--enlace);
}
details.mas > summary::-webkit-details-marker { display: none; }
details.mas > summary:hover, details.mas[open] > summary { background: var(--menta); }
.mas-menu { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; padding: 0.5rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); }

/* Mi día: momento, regreso, revisión, bandeja y números tocables */
.momento { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; color: var(--tenue); margin: 0.6rem 0 0; font-size: 0.95rem; }
.momento svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.momento strong { color: var(--texto); }
.aviso.regreso, .aviso.revision {
  background: var(--menta); border-color: color-mix(in srgb, var(--barra) 40%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.7rem 1rem;
}
.aviso.regreso p, .aviso.revision p { margin: 0; flex: 1 1 260px; font-size: 0.93rem; }
fieldset.checks { border: 0; padding: 0; }
.semana-barras.vacia { height: 48px; }
.bandeja { margin: 0 0 1.25rem; }
.icono-suave { width: 22px; height: 22px; fill: none; stroke: var(--tenue); stroke-width: 1.7; stroke-linejoin: round; }
.lista-bandeja { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.lista-bandeja li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; background: var(--superficie-2); border-radius: 10px; padding: 0.4rem 0.4rem 0.4rem 0.8rem; overflow-wrap: anywhere; }
button.stat { width: 100%; text-align: left; font-weight: 400; min-height: 0; cursor: pointer; justify-content: flex-start; }
button.stat:hover { background: var(--superficie); border-color: var(--barra); }
.stat-num, .stat-texto { display: block; }
.estadisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .estadisticas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vencido-claro { border: 1px solid var(--heroe-linea); border-radius: 12px; padding: 0.75rem 0.9rem; margin: 0 0 1.25rem; }
.vencido-claro p { margin: 0 0 0.5rem; color: var(--heroe-texto); }
.vencido-claro .fila-botones { margin-top: 0; }
.heroe .vencido-claro .boton-contorno { min-height: 38px; }
.aviso.vencido { margin: 0.6rem 0 0; }
.lista-revision { list-style: none; padding: 0; margin: 0.25rem 0 0.5rem; display: grid; gap: 0.4rem; }
.lista-revision li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--borde); padding: 0.3rem 0; }
.checks.foco label { align-items: flex-start; }

/* Motivación: para qué, nuevo comienzo y celebraciones */
.para-que { display: block; margin-bottom: 0.6rem; padding-left: 0.7rem; border-left: 3px solid var(--heroe-tenue); color: var(--heroe-texto); font-weight: 600; }
.nuevo-comienzo { margin: 0.5rem 0 0; color: var(--verde-texto); font-weight: 600; }
.toast-icono { font-weight: 800; font-size: 1.1rem; }
.toast.toast-avance { background: var(--primario); color: #fff; }
.toast.toast-grande { background: var(--primario); color: #fff; padding: 0.8rem 0.7rem 0.8rem 1.2rem; font-size: 1.05rem; }
.toast.toast-grande .toast-icono { color: #ffd38a; font-size: 1.3rem; }
@media (prefers-reduced-motion: no-preference) {
  .toast-grande { animation: celebrar 0.5s ease-out; }
  @keyframes celebrar { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
}

/* Semana en 7 barras */
.semana { margin: 0 0 1.25rem; }
.semana-barras { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; align-items: end; height: 120px; margin: 0.75rem 0 0.25rem; }
.dia-barra { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.3rem; text-decoration: none; color: var(--tenue); font-size: 0.75rem; font-weight: 700; }
.dia-barra-valor { width: 100%; max-width: 38px; min-height: 4px; background: var(--barra); border-radius: 8px 8px 3px 3px; }
.dia-barra-valor[style="height:0%"] { background: var(--anillo-pista); }
.dia-barra.actual { color: var(--verde-texto); }
.dia-barra.actual .dia-barra-valor { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Bienvenida */
.niveles { padding-left: 1.3rem; margin: 0.75rem 0; color: var(--heroe-tenue); }
.niveles li { margin: 0.35rem 0; }
.niveles strong { color: var(--heroe-texto); }
.instrucciones { padding-left: 1.3rem; margin: 0 0 1rem; color: var(--tenue); font-size: 0.9rem; }
.lista-ayuda { padding-left: 1.2rem; }
.lista-ayuda li { margin: 0.45rem 0; }

/* Ajustes */
.dias { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 0.5rem 0.75rem; }
.seccion { margin-top: 1.25rem; }
.seccion h2 { margin-top: 0; }
.especiales { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.especiales li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--borde); padding: 0.25rem 0; }

/* Diálogo y aviso flotante */
dialog { border: 1px solid var(--borde); border-radius: 20px; background: var(--superficie); color: var(--texto); padding: 1.5rem; width: min(580px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); }
dialog::backdrop { background: rgb(10 25 21 / 0.55); }
dialog h2 { margin: 0 0 1.1rem; color: var(--texto); text-transform: none; letter-spacing: -0.02em; font-size: 1.35rem; font-weight: 800; }
.toast {
  position: fixed; left: 1rem; right: 1rem; margin: 0 auto; width: fit-content; z-index: 30;
  bottom: calc(88px + env(safe-area-inset-bottom));
  background: #1f2b2e; color: #f1f5f4; border-radius: 12px; padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  display: flex; align-items: center; gap: 0.9rem; box-shadow: 0 8px 24px rgb(0 0 0 / 0.22); max-width: calc(100vw - 2rem); font-weight: 600;
}
@media (min-width: 900px) { .toast { bottom: 1.5rem; } }
.toast[hidden] { display: none; }
.toast button { background: transparent; color: inherit; border-color: rgb(255 255 255 / 0.4); min-height: 36px; flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .barra > span { transition: width 0.3s ease; }
  .anillo .valor { transition: stroke-dashoffset 0.5s ease; }
}

/* Guía */
.piezas { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pieza { background: var(--superficie-2); border-radius: var(--radio-chico); padding: 0.9rem 1rem; border-left: 4px solid var(--barra); }
.pieza p { margin: 0.25rem 0; }
.bienvenida-duda { margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ¿Qué es esto? */
.clasif-cosa { font-weight: 700; color: var(--verde-texto); margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.clasif-pregunta { font-size: 1.2rem; margin: 0.25rem 0 0.4rem; }
.clasif-respuestas { margin: 1rem 0 1.25rem; }
.clasif-respuestas button { min-width: 110px; min-height: 48px; font-size: 1.05rem; }
.clasif-resultado { font-size: 1.15rem; margin: 0 0 0.25rem; }
.clasif-resultado strong { color: var(--verde-texto); }

/* Tutorial: panel flotante con seguimiento en vivo */
.tutorial {
  position: fixed; z-index: 25; left: 0.5rem; right: 0.5rem;
  bottom: calc(80px + env(safe-area-inset-bottom));
  max-height: 46vh; overflow-y: auto;
  background: var(--superficie); color: var(--texto); border: 2px solid var(--primario); border-radius: 16px;
  padding: 0.75rem 1rem 0.6rem; box-shadow: 0 10px 30px rgb(0 0 0 / 0.2);
}
@media (min-width: 900px) { .tutorial { left: auto; right: 1.5rem; bottom: 1.5rem; width: 380px; max-height: 70vh; padding: 1rem 1.25rem 0.75rem; } }
.tutorial h2 { margin: 0.35rem 0 0.25rem; color: var(--texto); text-transform: none; letter-spacing: -0.01em; font-size: 1.1rem; font-weight: 800; }
.tutorial-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.tutorial-ceja { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); }
.tutorial-puntos { list-style: none; padding: 0; margin: 0.35rem 0 0; display: flex; gap: 4px; }
.tutorial-puntos li { flex: 1; height: 5px; border-radius: 3px; background: var(--anillo-pista); }
.tutorial-puntos li.pasado { background: var(--barra); }
.tutorial-puntos li.actual { background: var(--acento); }
.tutorial-texto { margin: 0.2rem 0 0.4rem; font-size: 0.93rem; }
.tutorial-estado { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 700; color: var(--acento); margin: 0.3rem 0; }
.tutorial-estado.hecho { color: var(--ok); }
.tutorial-espera { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); flex: none; }
.tutorial-logro { margin: 0.4rem 0 0; padding: 0.35rem 0.6rem; border-radius: 8px; background: var(--menta); color: var(--verde-texto); font-weight: 700; font-size: 0.88rem; }
.tutorial .fila-botones { margin-top: 0.4rem; gap: 0.4rem; }
.tutorial-pastilla {
  position: fixed; z-index: 25; right: 0.75rem; bottom: calc(84px + env(safe-area-inset-bottom));
  border-radius: 999px; background: var(--primario); color: var(--primario-texto); border-color: var(--primario);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.2); gap: 0.4rem;
}
.tutorial-pastilla svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (min-width: 900px) { .tutorial-pastilla { right: 1.5rem; bottom: 1.5rem; } }
body.con-tutorial .contenido { padding-bottom: calc(46vh + 96px); }
@media (min-width: 900px) { body.con-tutorial .contenido { padding-bottom: 0; } body.con-tutorial main { padding-right: calc(380px + 3rem); } }
body.con-tutorial .toast { top: calc(0.75rem + env(safe-area-inset-top)); bottom: auto; }
.tutorial-foco { outline: 3px solid var(--acento) !important; outline-offset: 3px; position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tutorial-foco { animation: tutorial-pulso 1.6s ease-in-out infinite; }
  @keyframes tutorial-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgb(217 119 43 / 0.55); } 50% { box-shadow: 0 0 0 8px rgb(217 119 43 / 0); } }
  .tutorial-espera { animation: tutorial-latido 1.2s ease-in-out infinite; }
  @keyframes tutorial-latido { 50% { opacity: 0.3; } }
}

/* v0.9: auditoría */
.lista-bandeja button { min-height: 40px; }
.lista-bandeja .acciones-nota { gap: 0.4rem; }
.lista-bandeja button[data-accion="descartar-bandeja"] { min-width: 40px; margin-left: 0.35rem; font-size: 1.1rem; }
.aviso.error-guardado { background: color-mix(in srgb, var(--peligro) 12%, var(--superficie)); border-color: var(--peligro); }
.toast.toast-error { background: var(--peligro); color: #fff; }
.fila-ciclo { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.4rem 0.8rem 0.2rem; margin: 0 0 0.6rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 0.75rem; }
.fila-ciclo legend { font-weight: 700; font-size: 0.85rem; color: var(--tenue); padding: 0 0.3rem; }
.fila-ciclo .campo { margin-bottom: 0.4rem; }
.ciclo-proximos li strong { color: var(--texto); }
.lista-bandeja li { flex-wrap: wrap; }
.lista-bandeja li > span:first-child { flex: 1 1 11rem; min-width: 0; }
.lista-bandeja .acciones-nota { margin-left: auto; }

/* Riesgo de plazo */
.riesgo { margin: 0.5rem 0; font-size: 0.92rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.riesgo-chip { background: var(--menta); color: var(--verde-texto); font-weight: 700; }
.riesgo-alto .riesgo-chip, .riesgo.vencido .riesgo-chip { background: color-mix(in srgb, var(--peligro) 14%, var(--superficie)); color: var(--peligro); }
.riesgo.ok { color: var(--texto); }
.texto-riesgo { color: var(--peligro); }

/* Tareas en espera */
.chip.espera { background: color-mix(in srgb, var(--acento) 16%, var(--superficie)); color: var(--texto); border-color: color-mix(in srgb, var(--acento) 50%, transparent); }

/* Objetivos por cantidad */
form .solo-unidades { display: none; }
form.es-tiempo.con-unidad .solo-unidades { display: block; }
form.es-tiempo.con-unidad .solo-horas { display: none; }
.campo-ancho { grid-column: 1 / -1; }

/* Mi avance */
.avance { margin: 0 0 1.25rem; }
.avance-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; margin: 0.75rem 0 0.5rem; }
@media (min-width: 900px) { .avance-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.avance-dato { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.avance-dato .stat-num { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.avance-metas { list-style: none; padding: 0; margin: 0.25rem 0 0.5rem; display: grid; gap: 0.6rem; }
.aviso.carga { background: var(--aviso-fondo); }
.aviso.carga .fila-botones { margin-top: 0.5rem; }

/* Resultados (indicadores) */
.resultados { margin: 0.75rem 0 0.25rem; }
.lista-resultados { list-style: none; padding: 0; margin: 0.25rem 0 0.5rem; display: grid; gap: 0.4rem; }
.lista-resultados li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; background: var(--superficie-2); border-radius: 10px; padding: 0.4rem 0.5rem 0.4rem 0.8rem; }
.lista-resultados .resultado-dato { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.lista-resultados.solo-lectura li { padding: 0.4rem 0.8rem; flex-wrap: wrap; }
.lista-resultados button { min-width: 56px; min-height: 44px; font-weight: 800; flex: none; }
.resultado-objetivo { margin: 0.5rem 0 0; font-weight: 700; color: var(--texto); }

/* v0.14: facilidad de uso */
details.plegable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: "+"; font-size: 1.4rem; font-weight: 700; color: var(--enlace); flex: none; width: 1.5rem; text-align: center; }
details.plegable[open] > summary::after { content: "−"; }
details.plegable > summary h2 { margin: 0; }
details.plegable[open] > summary { margin-bottom: 0.5rem; }
.resumen-dia { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--tenue); }
.resumen-dia button { padding-left: 0; }
/* Tarjeta de «hoy» compacta en el teléfono: el anillo al lado del texto, no un bloque enorme */
@media (max-width: 899px) {
  .anillo-tarjeta { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1rem; align-items: center; text-align: left; padding: 1rem 1.1rem; }
  .anillo-tarjeta .item-cabeza { grid-column: 1 / -1; }
  .anillo-tarjeta .anillo { width: 96px; height: 96px; margin: 0.25rem 0; grid-row: 2 / span 2; }
  .anillo-num { font-size: 1.6rem; }
  .anillo-meta { font-size: 0.7rem; margin-top: 0.1rem; }
  .anillo circle { stroke-width: 14; }
  .anillo-tarjeta p { grid-column: 2; margin: 0 0 0.25rem; }
}
/* Dedo en pantalla táctil: todo lo que se toca mide al menos 44 px */
@media (pointer: coarse) {
  .chico, button.chico, .boton.chico { min-height: 44px; }
  .acciones-nota button, .lista-bandeja button { min-height: 44px; }
  details.mas > summary, details.consejos > summary { min-height: 44px; }
  .pasos label, .checks label { min-height: 44px; }
}

/* Tutorial discreto: en los pasos de acción, la explicación va a un toque y el panel ocupa poco */
.tutorial-detalle { margin: 0.1rem 0 0.3rem; }
.tutorial-detalle > summary { cursor: pointer; color: var(--enlace); font-weight: 700; font-size: 0.85rem; min-height: 32px; display: flex; align-items: center; }
.tutorial-detalle .tutorial-texto { margin: 0.1rem 0 0.3rem; }
@media (max-width: 899px) {
  .tutorial { max-height: 34vh; padding: 0.55rem 0.85rem 0.45rem; }
  .tutorial-puntos { display: none; }
  .tutorial h2 { font-size: 1rem; margin: 0.15rem 0 0.1rem; }
  .tutorial-texto { font-size: 0.88rem; margin: 0.1rem 0 0.25rem; }
  .tutorial .fila-botones { margin-top: 0.25rem; gap: 0.3rem; }
  body.con-tutorial .contenido { padding-bottom: calc(34vh + 96px); }
}

/* Cierre del día e instalar */
.aviso.cierre { background: var(--menta); border-color: color-mix(in srgb, var(--barra) 40%, transparent); }
.aviso.cierre p { margin: 0 0 0.5rem; }
.aviso.cierre select { width: 100%; }
.aviso.cierre .fila-botones { margin-top: 0.5rem; }