/* Hábitos — CSS plano, no pasa por el compilador.
   Solo se apoya en las clases de componente que ya existen en app.css
   (card, btn-primary, btn-ghost, field, label, muted, font-display). */

.hb-azul     { --hb: #2F80ED; }
.hb-turquesa { --hb: #06B6A4; }
.hb-verde    { --hb: #35B84A; }
.hb-ambar    { --hb: #F59E0B; }
.hb-coral    { --hb: #FB6D3A; }
.hb-rosa     { --hb: #EC4899; }
.hb-morado   { --hb: #8B5CF6; }
.hb-indigo   { --hb: #6366F1; }

.hb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hb-h1 { font-size: 1.875rem; line-height: 1.2; margin: 0 0 .25rem; }
.hb-h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; }
.hb-sub { margin: 0 0 1.5rem; }
.hb-block { margin-bottom: 1.5rem; }
.hb-mt { margin-top: .5rem; }
.hb-strong { font-weight: 600; }
.hb-small { font-size: .875rem; }
.hb-tiny { font-size: .75rem; }

/* --- Tarjeta de hábito --- */
.hb-row { display: flex; align-items: center; gap: 1rem; }
.hb-grow { flex: 1; min-width: 0; }
.hb-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.hb-name {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.hb-ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background-color: color-mix(in srgb, var(--hb) 18%, transparent);
    color: var(--hb);
}

.hb-ico-lg { width: 2.75rem; height: 2.75rem; border-radius: .75rem; }
.hb-ico-plain { color: var(--hb); display: inline-flex; }

.hb-tag {
    border-radius: .5rem;
    padding: .125rem .5rem;
    font-size: 11px;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--hb) 16%, transparent);
    color: var(--hb);
}

.hb-tag-com { background-color: #E8F0F9; color: #4366A1; }
.dark .hb-tag-com { background-color: rgba(67, 102, 161, .35); color: #AAC6E7; }

.hb-lock { color: #a8a29e; display: inline-flex; }

/* --- Puntos de los últimos días --- */
.hb-dots { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .75rem; }

.hb-dot { width: .625rem; height: .625rem; border-radius: 9999px; background-color: #e7e5e4; }
.dark .hb-dot { background-color: #44403c; }
.hb-dot-on { background-color: var(--hb); }
.hb-dot-skip { width: .625rem; height: .625rem; }

.hb-streak { margin-left: .375rem; font-size: .75rem; }

/* --- Botón de marcar el día --- */
.hb-check {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 2px solid #d6d3d1;
    background: transparent;
    color: transparent;
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.dark .hb-check { border-color: #44403c; }
.hb-check:active { transform: scale(.94); }
.hb-check-on { background-color: var(--hb); border-color: var(--hb); color: #fff; }

/* --- Números del mes --- */
.hb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
.hb-stat { text-align: center; }
.hb-stat-num { font-size: 1.875rem; line-height: 1.2; margin: 0; }
.hb-stat-label { font-size: .75rem; margin: .25rem 0 0; }

/* --- Calendario --- */
.hb-month { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.hb-month-name { font-weight: 600; margin: 0; }
.hb-nav { padding: .25rem .75rem; font-size: .875rem; }
.hb-nav-off { padding: .25rem .75rem; color: transparent; }

.hb-week, .hb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem; }
.hb-week { text-align: center; font-size: 11px; font-weight: 600; }
.hb-grid { margin-top: .375rem; }

.hb-cell {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 600;
    background-color: #f5f5f4;
    color: #a8a29e;
}

.dark .hb-cell { background-color: rgba(41, 37, 36, .7); color: #78716c; }
.hb-cell-on { background-color: var(--hb); color: #fff; }
.hb-cell-future { background-color: transparent; border: 1px dashed #d6d3d1; }
.dark .hb-cell-future { border-color: #44403c; }
.hb-cell-off { opacity: .45; }

/* --- Chips --- */
.hb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.hb-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: .75rem;
    border: 1px solid #e7e5e4;
    background-color: #fff;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.dark .hb-chip { border-color: #292524; background-color: #1c1917; }
.hb-chip-on { background-color: var(--hb); border-color: var(--hb); color: #fff; }
.dark .hb-chip-on { background-color: var(--hb); border-color: var(--hb); color: #fff; }

/* --- Formulario --- */
.hb-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.hb-opt { cursor: pointer; display: inline-flex; }
.hb-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.hb-swatch { display: block; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-color: var(--hb); }
.hb-opt input:focus-visible + .hb-swatch,
.hb-opt input:checked + .hb-swatch { outline: 2px solid var(--hb); outline-offset: 3px; }

.hb-box {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    border: 1px solid #d6d3d1;
    font-size: .875rem;
    font-weight: 600;
    color: #78716c;
}

.dark .hb-box { border-color: #44403c; }
.hb-opt input:checked + .hb-box { border-color: #4366A1; color: #4366A1; background-color: #F4F8FC; }
.dark .hb-opt input:checked + .hb-box { border-color: #6498D4; color: #AAC6E7; background-color: rgba(67, 102, 161, .25); }

.hb-fieldset { border: 1px solid #e7e5e4; border-radius: .75rem; padding: 1rem; }
.dark .hb-fieldset { border-color: #292524; }
.hb-legend { padding: 0 .25rem; font-size: .875rem; font-weight: 600; }

.hb-choice { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; margin-top: .75rem; }
.hb-choice:first-of-type { margin-top: 0; }
.hb-choice-title { font-weight: 600; }
.hb-choice-help { display: block; }

.hb-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hb-form > * + * { margin-top: 1.25rem; }
.hb-danger { color: #9F1239; }

/* --- Tira de la comunidad --- */
.hb-strip {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .25rem;
    scrollbar-width: none;
}

.hb-strip::-webkit-scrollbar { display: none; }
.hb-strip-item { width: 15rem; flex-shrink: 0; scroll-snap-align: start; }
.hb-person { display: flex; align-items: center; gap: .75rem; }
.hb-avatar { width: 2.25rem; height: 2.25rem; border-radius: 9999px; object-fit: cover; }
.hb-person-name { font-size: .875rem; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-person-com { font-size: .75rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-done { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 0; font-size: .875rem; font-weight: 600; color: var(--hb); }
.hb-done span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Archivados --- */
.hb-arch { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.hb-arch-name { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .875rem; }
.hb-arch-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .hb-check { transition: none; }
}

/* --- Matriz del mes: filas de hábitos, columnas de días --- */
.hb-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hb-matrix { border-collapse: separate; border-spacing: 3px; }

.hb-matrix-head {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    font-weight: 600;
    background-color: #fff;
    padding-right: .5rem;
    min-width: 8.5rem;
    max-width: 8.5rem;
}

.dark .hb-matrix-head { background-color: #1c1917; }

.hb-matrix-name { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; }
.hb-matrix-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hb-matrix-day { font-size: 10px; font-weight: 600; text-align: center; width: 1.5rem; }
.hb-matrix-total { font-size: 11px; font-weight: 600; text-align: center; padding-left: .375rem; }

.hb-box-day {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: .3125rem;
    border: 0;
    padding: 0;
    background-color: #f0efec;
    cursor: pointer;
}

.dark .hb-box-day { background-color: #2c2825; }
.hb-box-day-on { background-color: var(--hb); }
.hb-box-day-off { opacity: .45; }
.hb-box-day-future { background-color: transparent; border: 1px dashed #d6d3d1; cursor: default; }
.dark .hb-box-day-future { border-color: #44403c; }
.hb-box-day:focus-visible { outline: 2px solid var(--hb); outline-offset: 2px; }

/* --- Mis hábitos dentro de la comunidad --- */
.hb-mine { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.hb-mine-name { display: flex; align-items: center; gap: .375rem; flex: 1; min-width: 0; font-size: .9375rem; font-weight: 600; }
.hb-mine-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-mine-switch { flex-shrink: 0; }

.hb-check-sm { width: 2.25rem; height: 2.25rem; }

.hb-switch {
    display: block;
    width: 2.75rem;
    height: 1.625rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: #d6d3d1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.dark .hb-switch { background-color: #44403c; }
.hb-switch-on { background-color: var(--hb); }

.hb-switch-knob {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: .1875rem;
    border-radius: 9999px;
    background-color: #fff;
    transition: transform .15s ease;
}

.hb-switch-on .hb-switch-knob { transform: translateX(1.125rem); }
.hb-switch:focus-visible { outline: 2px solid var(--hb); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .hb-switch, .hb-switch-knob { transition: none; }
}

/* --- Día saltado: neutro, ni cumplido ni fallado --- */
.hb-dot-skipped {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #d6d3d1;
}

.dark .hb-dot-skipped { box-shadow: inset 0 0 0 2px #57534e; }

.hb-check-skipped { border-style: dashed; color: #a8a29e; }
.hb-box-day-skipped { background-color: transparent; box-shadow: inset 0 0 0 2px #d6d3d1; }
.dark .hb-box-day-skipped { box-shadow: inset 0 0 0 2px #57534e; }

.hb-cell-skipped {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #d6d3d1;
    color: #a8a29e;
}

.dark .hb-cell-skipped { box-shadow: inset 0 0 0 2px #57534e; }

.hb-freq { font-size: .75rem; margin: .625rem 0 0; }
.hb-stat-meta { font-size: 1rem; font-weight: 400; }

/* --- Gráfica de los últimos meses --- */
.hb-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    height: 8.5rem;
    margin-top: 1rem;
}

.hb-chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.hb-chart-num { font-size: 11px; font-weight: 600; margin-bottom: .25rem; }
.hb-chart-bar { display: block; width: 100%; max-width: 2.5rem; border-radius: .375rem .375rem 0 0; background-color: var(--hb); }
.hb-chart-label { font-size: 11px; margin-top: .375rem; text-transform: capitalize; }

/* --- Listas internas de oración --- */
.lst-back { display: inline-block; font-size: .875rem; font-weight: 600; text-decoration: none; margin-bottom: 1rem; }
.lst-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; color: inherit; text-decoration: none; }
.lst-title { font-weight: 600; margin: 0 0 .25rem; }
.lst-arrow { font-size: 1.5rem; color: #a8a29e; }

.lst-tag {
    display: inline-block;
    margin-left: .5rem;
    border-radius: .5rem;
    padding: .125rem .5rem;
    font-size: 11px;
    font-weight: 600;
    background-color: #f5f5f4;
    color: #78716c;
}

.dark .lst-tag { background-color: #292524; color: #a8a29e; }
.lst-tag-alert { background-color: #FFF1F2; color: #BE123C; }
.dark .lst-tag-alert { background-color: rgba(190, 18, 60, .2); color: #FDA4AF; }

.lst-progress {
    display: block;
    width: 3.5rem;
    height: .375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: #e7e5e4;
    overflow: hidden;
}

.dark .lst-progress { background-color: #44403c; }
.lst-progress-fill { display: block; height: 100%; border-radius: 9999px; background-color: #14958B; }

.lst-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.lst-x { border: 0; background: none; cursor: pointer; padding: .25rem .5rem; font-size: .875rem; }

.lst-focus { text-align: center; padding: 2rem 1.25rem; }
.lst-person { font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #78716c; margin: 0 0 .75rem; }
.dark .lst-person { color: #a8a29e; }
.lst-body { font-size: 1.25rem; line-height: 1.6; white-space: pre-line; margin: 0 0 1rem; }