/* ============================================
   MI HABIT TRACKER — identidad visual
   Paleta: burdeos como color de firma (el mismo que ya usabas
   en tu Excel), sobre papel cálido, con un verde salvia apagado
   para lo cumplido en vez del verde chillón habitual.
   Tipografía: Fraunces (display, con carácter) + Inter (cuerpo)
   + IBM Plex Mono (números, fechas, porcentajes).
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    --wine: #7A2039;
    --wine-dark: #5C1830;
    --wine-light: #A8395A;
    --cream: #FBF4EC;
    --paper: #FFFFFF;
    --ink: #2B2320;
    --ink-soft: #6E6259;
    --sage: #6B8F71;
    --sage-light: #E4EEE3;
    --line: #EAE0D4;
    --gold: #C08A3E;
    --radius: 14px;
    --shadow: 0 2px 10px rgba(90, 30, 45, 0.06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--wine-dark);
    margin: 0;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

a { color: var(--wine); text-decoration: none; }

/* --- Layout --- */
.app-shell {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 16px 100px;
    min-height: 100vh;
}

.topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.topbar .date-label {
    font-size: 13px;
    color: var(--ink-soft);
    text-transform: capitalize;
}

.logout-link {
    font-size: 13px;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--paper);
}

/* --- Nav inferior fija (estilo app móvil) --- */
.tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-around;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 20;
}

.tabbar a {
    flex: 1;
    text-align: center;
    font-size: 9.5px;
    color: var(--ink-soft);
    padding: 6px 0;
    font-weight: 500;
}

.tabbar a .icon { display: block; font-size: 17px; margin-bottom: 2px; }
.tabbar a.active { color: var(--wine); }

/* --- Tarjetas / secciones --- */
.card {
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
}

.section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wine);
    margin-bottom: 10px;
}

/* --- Lista de hábitos (checklist tipo sello) --- */
.habit-list { list-style: none; margin: 0; padding: 0; }

.habit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
}

.habit-row:last-child { border-bottom: none; }

.habit-check {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--wine-light);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    color: transparent;
    transition: all .18s ease;
}

.habit-row.done .habit-check {
    background: var(--sage);
    border-color: var(--sage);
    color: white;
}

.habit-icon { font-size: 18px; width: 24px; text-align: center; }

.habit-name {
    flex: 1;
    font-size: 15px;
    transition: color .18s ease;
}

.habit-row.done .habit-name {
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--sage);
}

/* --- Tareas específicas (añadir / quitar) --- */
.task-row { display: flex; align-items: center; gap: 10px; }
.task-delete {
    color: var(--ink-soft);
    font-size: 18px;
    padding: 4px 8px;
    cursor: pointer;
}
.task-delete:hover { color: var(--wine); }

.add-task-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.add-task-form input[type=text] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: var(--cream);
}

.btn {
    background: var(--wine);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.btn:hover { background: var(--wine-dark); }
.btn-ghost {
    background: transparent;
    color: var(--wine);
    border: 1px solid var(--wine-light);
}

/* --- Sello circular de progreso (el elemento de firma) --- */
.seal-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.seal {
    position: relative;
    width: 92px; height: 92px;
    flex-shrink: 0;
}

.seal canvas { width: 100%; height: 100%; }

.seal-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 18px;
    color: var(--wine-dark);
}

.seal-meta { flex: 1; }
.seal-meta .big { font-size: 15px; font-weight: 600; }
.seal-meta .small { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* --- Navegación de periodo (semana / mes) --- */
.period-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.period-nav button {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 34px; height: 34px;
    font-size: 16px;
    color: var(--wine);
    cursor: pointer;
}

.period-label { font-family: 'Fraunces', serif; font-size: 17px; color: var(--wine-dark); }

/* --- Login --- */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    background: var(--paper);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(90,30,45,0.12);
    padding: 36px 30px;
    max-width: 360px;
    width: 100%;
    text-align: center;
}

.login-card .seal-emoji {
    font-size: 40px;
    display: block;
    margin-bottom: 6px;
}

.login-card h1 { font-size: 24px; margin-bottom: 4px; }
.login-card p { color: var(--ink-soft); font-size: 13px; margin-bottom: 22px; }

.login-card input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 15px;
    margin-bottom: 12px;
    background: var(--cream);
}

.login-card .btn { width: 100%; padding: 12px; }
.error-msg { color: var(--wine); font-size: 13px; margin-bottom: 10px; }

/* --- Charts grid en stats --- */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.chart-grid .card { padding: 12px; text-align: center; margin-bottom: 0; }
.chart-grid .label { font-size: 11px; color: var(--ink-soft); margin-top: 6px; }

@media (max-width: 420px) {
    .chart-grid { grid-template-columns: 1fr; }
}

.empty-note {
    color: var(--ink-soft);
    font-size: 13px;
    text-align: center;
    padding: 10px 0;
}

/* --- Imagen evolutiva --- */
.evolution-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg, #FFFDF9, var(--paper));
}

.evolution-img-wrap {
    width: 84px; height: 84px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

.evolution-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    transition: opacity .25s ease;
}

.evolution-text .big { font-size: 15px; font-weight: 600; color: var(--wine-dark); }
.evolution-text .small { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* --- Tabla anual --- */
.year-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

.year-table th, .year-table td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid var(--line);
}

.year-table th {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.year-table td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; }
.year-table tr.current-month { background: var(--sage-light); }

/* --- Cuadrícula mensual completa (tipo Excel) --- */
.grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.grid-table {
    border-collapse: collapse;
    font-size: 11px;
    white-space: nowrap;
}

.grid-table th, .grid-table td {
    border: 1px solid var(--line);
    text-align: center;
    padding: 0;
}

.grid-sticky {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--paper);
    text-align: left !important;
}

.grid-corner { background: var(--paper); z-index: 4; }

.grid-week-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--wine-dark);
    padding: 4px 2px;
}

.grid-day-num {
    width: 26px;
    min-width: 26px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    padding: 3px 0;
}

.grid-day-abbr {
    width: 26px;
    min-width: 26px;
    font-size: 9px;
    color: var(--ink-soft);
    padding: 2px 0 4px;
}

.grid-habit-name {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    padding: 6px 8px;
    font-size: 12px;
    white-space: normal;
    display: table-cell;
}

.grid-habit-icon { margin-right: 4px; }

.grid-cell {
    width: 26px;
    min-width: 26px;
    height: 30px;
    cursor: pointer;
    background: var(--paper);
}

.grid-cell .grid-check {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
    color: transparent;
    font-size: 13px;
}

.grid-cell.done {
    background: var(--sage-light);
}

.grid-cell.done .grid-check {
    color: var(--sage);
    font-weight: 700;
}

.grid-total-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wine-dark);
    padding: 6px 8px;
    background: var(--cream);
}

.grid-total-cell {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-soft);
    background: var(--cream);
}

/* ============================================
   RESPONSIVE DE ESCRITORIO
   Mobile-first por defecto; a partir de aquí,
   aprovechamos el ancho en pantallas grandes.
   ============================================ */
@media (min-width: 700px) {
    .app-shell:not(.app-shell-wide) { max-width: 760px; }
}

@media (min-width: 1000px) {
    .app-shell:not(.app-shell-wide) {
        max-width: 1080px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        align-items: start;
    }
    .app-shell:not(.app-shell-wide) > .topbar,
    .app-shell:not(.app-shell-wide) > .period-nav,
    .app-shell:not(.app-shell-wide) > .card-wide {
        grid-column: 1 / -1;
    }
    /* La barra inferior de pestañas queda mejor centrada, no a todo lo ancho de un monitor */
    .tabbar { max-width: 1080px; left: 50%; transform: translateX(-50%); border-radius: 16px 16px 0 0; }
}

.app-shell-wide {
    max-width: 100% !important;
}

@media (min-width: 1000px) {
    .app-shell-wide .grid-scroll { max-width: 1400px; margin: 0 auto; }
}

/* --- Avatar de energía evolutivo --- */
.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.avatar-wrap {
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-glow {
    position: absolute;
    inset: -35%;
    border-radius: 50%;
    filter: blur(3px);
    transition: background .35s ease;
    animation: avatarPulse 2.6s ease-in-out infinite;
}

.avatar-badge {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 4px 14px rgba(43, 35, 32, 0.18);
    transition: background .35s ease, transform .2s ease;
}

.avatar-container.bump .avatar-badge { transform: scale(1.14); }

.avatar-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color .35s ease;
}

@keyframes avatarPulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.09); }
}

.avatar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 4px 0 8px;
}

.avatar-row .divider {
    width: 1px;
    height: 60px;
    background: var(--line);
}

/* --- Tabla de resumen anual --- */
.year-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

.year-table th, .year-table td {
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.year-table th {
    color: var(--wine);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.year-table td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; }