/* ── Puente de integración con la app real ───────────────────────────
Adapta el cover del prototipo (que usaba un componente de Design)
a la foto real del perro, el avatar y el lápiz del nombre. ──────── */
/* La home entra a sangrado (sin el padding del tab-panel) */
/* OJO: el `display:block` va con `:not([hidden])` para no pisar el
`.tab-panel[hidden] { display:none }` global. Sin eso, esta regla
gana por especificidad (incluye un ID) y deja a tab-rutina ocupando
espacio aunque tenga [hidden] → empuja a las otras tabs fuera de la
viewport y se ven en blanco. */
.home #tab-rutina.tab-panel{ padding:0; }
.home #tab-rutina.tab-panel:not([hidden]){ display:block; }
#screen-app.home{ background:var(--c-bg); color:var(--c-text); }
/* Foto real del perro como fondo del cover (reemplaza al image-slot) */
.home .dBp .cover .cover-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.home .dBp .cover .cover-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:90px; color:#F5EFE0; background:var(--c-field); z-index:0; }
/* El placeholder y la ![]()
respetan el [hidden] que togglea la app
(si no, display:flex/block le ganan a hidden y el placeholder tapa la foto). */
.home .dBp .cover .cover-photo[hidden], .home .dBp .cover .cover-fallback[hidden]{ display:none; }
.home .dBp .cover .cover-fotobtn{ position:absolute; right:12px; bottom:12px; z-index:4; width:34px; height:34px; border-radius:999px; border:1px solid rgba(245,239,224,0.30); background:rgba(20,18,12,0.40); color:#F5EFE0; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.home .dBp .cover .cover-fotobtn svg{ width:16px; height:16px; }
/* Avatar (no existía en el prototipo) — mismo estilo que el theme-toggle */
.home .dBp .cover .cavatar{ position:relative; z-index:4; }
.home .dBp .cover .avatar-btn{ width:32px; height:32px; border-radius:999px; flex:0 0 auto; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(20,18,12,0.38); color:#F5EFE0; border:1px solid rgba(245,239,224,0.30); font-family:var(--body); font-weight:700; font-size:13px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.home .dBp .cover .avatar-menu{ position:absolute; top:40px; right:0; background:var(--c-surface); border:1px solid var(--c-hair); border-radius:12px; padding:6px; min-width:160px; z-index:30; box-shadow:0 12px 34px rgba(0,0,0,0.22); }
.home .dBp .cover .avatar-menu__item{ display:block; width:100%; text-align:left; border:0; background:transparent; padding:10px 12px; border-radius:8px; font-family:var(--body); font-size:14px; color:var(--c-text); cursor:pointer; }
.home .dBp .cover .avatar-menu__item:hover{ background:var(--c-field); }
/* Lápiz de editar perro, junto al nombre grande */
.home .dBp .cover .cbot .nm .edit-dog{ border:0; background:transparent; color:rgba(245,239,224,0.7); cursor:pointer; vertical-align:middle; margin-left:8px; }
.home .dBp .cover .cbot .nm .edit-dog svg{ width:16px; height:16px; }
/* Slogan oficial de marca sobre el cover (entre saludo y nombre del perro) */
.dBp .cover .cbot .slogan{
font-family:var(--body);
font-size:12px;
font-style:italic;
color:rgba(245, 239, 224, 0.82);
letter-spacing:0.2px;
margin-top:4px;
margin-bottom:2px;
/* Velo de contraste: sombra suave para que el slogan sea legible sobre
cualquier foto (donde el scrim del cover aporta poco a esta altura). */
text-shadow:0 1px 2px rgba(10, 9, 6, 0.55), 0 0 10px rgba(10, 9, 6, 0.45);
}
/* Complemento del protocolo */
.home .dBp .band .proto-row .protocol .pp .v-comp{ font-size:11px; color:var(--c-text); opacity:.7; margin-top:3px; }
/* ── Estado activo de pestañas ───────────────────────────────────────
El JS de la app togglea la clase .is-active, pero el prototipo de
Design pinta el activo con .is-on. Acá mapeamos el look de Design a
.is-active (lo que el JS realmente usa) y neutralizamos el toggle y
las subtabs viejos de styles.css. NO se toca ninguna lógica. ─────── */
/* Toggle Rutina / Mi progreso: caja segmentada, botones al 50% */
.home .work-switch.rutina-modo{ display:flex; gap:0; margin:0 0 13px; padding:3px; background:var(--c-field); border:1px solid var(--c-hair-2); border-radius:11px; }
.home .work-switch .rutina-modo__btn{ flex:1; min-width:0; max-width:none; border:0; border-radius:8px; background:transparent; color:var(--c-text-3); }
.home .work-switch .rutina-modo__btn.is-active{ background:var(--c-surface); color:var(--c-text); box-shadow:0 1px 3px rgba(0,0,0,0.12); }
.home[data-theme="oscuro"] .work-switch .rutina-modo__btn.is-active{ background:#39341f; color:var(--c-text); }
/* Subtabs de categoría: pastillas con borde visible; la activa rellena */
.home .subtabs .rutina-subtab{ flex:0 0 auto; border:1px solid var(--c-hair-2); background:transparent; border-radius:999px; color:var(--c-text-2); padding:8px 14px; }
.home .subtabs .rutina-subtab:hover{ border-color:var(--c-text-3); color:var(--c-text); }
.home .subtabs .rutina-subtab.is-active{ background:var(--c-text); color:var(--c-bg); border-color:var(--c-text); }
/* ── Refuerzo SOLO en tema claro ──────────────────────────────────────
Sobre el crema, los bordes de la maqueta (10% de negro) se BORRAN en una
pantalla real (en la herramienta de Design se ven, pero no se reproducen).
Por eso acá los marcamos un poco más fuerte SOLO en claro; el oscuro, que
ya se ve bien, queda intacto. ──────────────────────────────────────── */
.home[data-theme="claro"] .work-switch.rutina-modo{ border-color:rgba(26,26,26,0.20); background:#E7DECA; }
.home[data-theme="claro"] .subtabs .rutina-subtab{ border-color:rgba(26,26,26,0.24); color:#3A362F; }
.home[data-theme="claro"] .subtabs .rutina-subtab.is-active{ background:#1A1A1A; color:#F5EFE0; border-color:#1A1A1A; }
/* Banda de KPI (Clases / Realizada / Por reservar): que se vean las
líneas separadoras y el marco, invisibles en claro al 10% de negro. */
.home[data-theme="claro"] .dBp .band{ border-bottom-color:rgba(26,26,26,0.16); }
.home[data-theme="claro"] .dBp .band .clases{ border-top-color:rgba(26,26,26,0.16); }
.home[data-theme="claro"] .clases .c{ border-right-color:rgba(26,26,26,0.14); }
/* ── "Mi progreso": tarjeta por ejercicio ────────────────────────────
styles.css le daba una tarjeta en crema-sobre-oscuro (invisible en
claro). La adaptamos a los dos temas para que no se sienta vacío.
(Las barritas por semana van adentro de esta tarjeta — pendiente del
backend.) ─────────────────────────────────────────────────────────── */
.home .progreso-lista{ gap:10px; }
.home .progreso-item{ background:var(--c-surface); border:1px solid var(--c-hair-2); border-radius:14px; padding:13px 14px; }
.home .progreso-item__nombre{ color:var(--c-text); }
.home[data-theme="claro"] .progreso-item{ border-color:rgba(26,26,26,0.12); }
/* Historial: mini-gráfico de barras verticales, una por semana desde la
asignación. Altura = cumplimiento; color = estado (rojo/verde/azul).
Scroll horizontal si son muchas semanas. */
.home .progreso-historial{ display:flex; align-items:flex-end; gap:5px; overflow-x:auto; padding:2px 0; margin-top:6px; scrollbar-width:none; -ms-overflow-style:none; }
.home .progreso-historial::-webkit-scrollbar{ height:0; display:none; }
/* Riel visible: cada semana es una ranura, llena o vacía. */
.home .progreso-semana{ position:relative; flex:0 0 auto; width:11px; height:40px; border-radius:5px; background:var(--c-field); overflow:hidden; }
.home[data-theme="claro"] .progreso-semana{ background:#E3DAC6; }
.home .progreso-semana__fill{ position:absolute; left:0; right:0; bottom:0; border-radius:5px; transition:height .25s ease; }
.home .progreso-semana--rojo .progreso-semana__fill{ background:var(--pdli-rojo,#C8102E); }
.home .progreso-semana--verde .progreso-semana__fill{ background:var(--pdli-oliva,#6B7A3A); }
.home .progreso-semana--azul .progreso-semana__fill{ background:#1F4FA8; }
.home .progreso-semana--sin .progreso-semana__fill{ background:var(--c-text-3); }
.home .progreso-semana--actual{ box-shadow:0 0 0 1.5px var(--c-text-3); }
/* ── Lista de ejercicios real con el estilo del prototipo ────────── */
.home #rutina-lista, .home .rutina-lista{ display:flex; flex-direction:column; gap:9px; list-style:none; margin:0; padding:0; }
.home .rutina-renglon{ list-style:none; }
.home .rutina-card{
display:block; background:var(--c-surface); border:1px solid var(--c-hair);
border-radius:13px; padding:13px 14px; cursor:pointer; color:var(--c-text);
transition:border-color .15s ease, transform .1s ease;
}
.home .rutina-card:hover{ border-color:var(--c-hair-2); }
.home .rutina-card:active{ transform:scale(0.99); }
.home .rutina-card--superado{ opacity:.55; }
.home .rutina-card__head{ display:flex; align-items:center; gap:13px; }
.home .rutina-card__nombre-wrap{ flex:1; min-width:0; }
.home .rutina-card__nombre{ font-family:var(--body); font-size:14.5px; font-weight:600; color:var(--c-text); line-height:1.25; margin:0; }
.home .rutina-card__objetivo{ font-family:var(--body); font-size:11px; color:var(--c-text-3); margin:3px 0 0; }
.home .rutina-card__chevron{ flex:0 0 auto; color:var(--c-text-3); width:16px; height:16px; }
.home .rutina-card__desc{ font-family:var(--body); font-size:12px; line-height:1.45; color:var(--c-text-2); margin:8px 0 0; }
.home .rutina-card__progreso{ display:inline-block; margin-top:8px; font-family:var(--body); font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:999px; padding:3px 8px; border:1px solid var(--c-rojo); color:var(--c-rojo); }
.home .rutina-card__progreso--verde{ border-color:var(--c-oliva); color:var(--c-oliva); }
.home .rutina-card__progreso--rojo{ border-color:var(--c-rojo); color:var(--c-rojo); }
/* ────────────────────────────────────────────────────────────
Registro rápido con la huella (Fase 1 · registro lúdico)
Botón de huella en la card, puntos de la semana, burst y
hoja opcional post-registro. 31/08/2026.
──────────────────────────────────────────────────────────── */
.home .rutina-card__head{ align-items:center; }
.home .huella-btn{
flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:none;
background:var(--c-rojo, #C8102E); color:#F5EFE0;
display:grid; place-items:center; cursor:pointer; position:relative;
box-shadow:0 4px 14px rgba(200,16,46,.32);
transition:transform .12s ease, background .25s ease, box-shadow .25s ease;
}
.home .huella-btn svg{ width:28px; height:28px; display:block; }
.home .huella-btn:active{ transform:scale(.88); }
.home .huella-btn--done{ background:var(--c-oliva, #6B7A3A); box-shadow:0 4px 14px rgba(107,122,58,.35); }
@keyframes huella-stamp{ 0%{ transform:scale(.55); } 55%{ transform:scale(1.22); } 100%{ transform:scale(1); } }
.home .huella-btn--pop svg{ animation:huella-stamp .45s ease; }
.home .huella-burst{
position:absolute; left:50%; top:50%; width:15px; height:15px;
margin:-7px 0 0 -7px; color:#F5EFE0; pointer-events:none;
animation:huella-fly .65s ease forwards;
}
.home .huella-burst svg{ width:100%; height:100%; display:block; }
@keyframes huella-fly{
0%{ opacity:1; transform:translate(0,0) scale(.6); }
100%{ opacity:0; transform:translate(var(--dx, 0px), var(--dy, -40px)) scale(1.35); }
}
@media (prefers-reduced-motion: reduce){
.home .huella-btn--pop svg, .home .huella-burst{ animation:none; }
.home .huella-burst{ display:none; }
}
.home .rutina-dots{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.home .rutina-dots__dot{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--c-hair-2, #8A867E); }
.home .rutina-dots__dot--f{ background:var(--c-oliva, #6B7A3A); border-color:var(--c-oliva, #6B7A3A); }
.home .rutina-dots__dot--extra{ background:#E8B62D; border-color:#E8B62D; }
/* Acción dentro del toast (Deshacer) — #toast vive fuera de .home */
.toast__accion{
background:none; border:none; color:#E8B62D; font-weight:700;
font-size:13.5px; margin-left:10px; padding:6px 8px; cursor:pointer;
font-family:inherit;
}
/* Hoja post-registro (reutiliza la mecánica de .susalud-sheet) */
.rapido-sheet__body{ padding:6px 18px calc(18px + env(safe-area-inset-bottom)); }
.rapido-sheet__title{ font-family:var(--display, 'Bebas Neue'); font-size:21px; letter-spacing:1px; margin:2px 0 2px; color:#1A1A1A; }
.rapido-sheet__sub{ font-size:12.5px; color:#6B665B; margin:0 0 14px; }
.rapido-sheet .reporte-pills-label{ color:#6B665B; }
.rapido-sheet .reporte-pills-wrap{ margin-bottom:16px; }
.rapido-sheet__guardar{ width:100%; }
.rapido-sheet__omitir{
width:100%; background:none; border:none; color:var(--c-text-3, #8A867E);
font-size:13.5px; padding:12px 0 2px; cursor:pointer; min-height:44px; font-family:inherit;
}
/* Caritas de la hoja post-registro (pedido de Charly 31/08) */
.rapido-sheet__caras .reporte-pill{ font-size:23px; line-height:1; padding:9px 0; }
.rapido-sheet__caras .reporte-pill.is-active{ transform:scale(1.12); }
/* ────────────────────────────────────────────────────────────
La semana florece (Fase 2 · registro lúdico) — reemplaza al
anillo "N/M cumplidos" en la vista Rutina. 31/08/2026.
──────────────────────────────────────────────────────────── */
.home .isla-semana{
background:var(--c-surface); border:1px solid var(--c-hair);
border-radius:16px; padding:14px 14px 12px; margin:4px 0 14px;
text-align:center;
}
.home .isla-semana[hidden]{ display:none; }
.home .isla-semana__titulo{
font-family:var(--display, 'Bebas Neue'); font-size:15px; letter-spacing:1.5px;
color:var(--c-text-2); margin:0 0 2px;
}
.home .isla-semana__svg{ width:200px; height:136px; display:block; margin:0 auto; }
.home .isla-semana__pct{
font-family:var(--display, 'Bebas Neue'); font-size:38px; line-height:1;
letter-spacing:1px; color:var(--c-text); margin-top:2px;
}
.home .isla-semana__pct small{ font-size:17px; color:var(--c-text-3); }
.home .isla-semana__barra{
height:8px; border-radius:999px; background:rgba(138,134,126,.18);
overflow:hidden; margin:10px 8px 10px;
}
.home .isla-semana__barra i{
display:block; height:100%; width:0;
background:linear-gradient(90deg, var(--c-oliva, #6B7A3A), #9CB64B);
transition:width .5s ease; border-radius:999px;
}
.home .isla-semana__dias{ display:flex; justify-content:center; gap:8px; margin-bottom:8px; }
.home .isla-semana__dia{
width:30px; height:30px; border-radius:50%;
border:1.5px solid var(--c-hair); display:grid; place-items:center;
font-size:12px; font-weight:600; color:var(--c-text-3);
}
.home .isla-semana__dia--f{
background:var(--c-oliva, #6B7A3A); border-color:var(--c-oliva, #6B7A3A);
}
.home .isla-semana__dia--f::before{
content:''; width:16px; height:16px; display:block;
background-color:#F5EFE0;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.home .isla-semana__lema{ font-size:12.5px; color:var(--c-text-2); margin:0 0 2px; }
.home .isla-semana__racha{ font-size:12px; color:var(--c-text-3); margin:2px 0 0; }
.home .isla-semana__racha b{
font-family:var(--display, 'Bebas Neue'); font-size:16px; letter-spacing:1px;
color:#E8B62D; font-weight:400;
}
/* ────────────────────────────────────────────────────────────
Agrupación de ejercicios por protocolo ("la llave") · Fase grupos.
Solo aplica cuando la lista tiene .rutina-lista--agrupada. 31/08/2026.
──────────────────────────────────────────────────────────── */
.home .rutina-lista--agrupada{ list-style:none; padding:0; margin:0; display:block; }
.home .rutina-grupo{ display:flex; gap:10px; margin-bottom:16px; list-style:none; }
.home .rutina-grupo__llave{
flex:0 0 auto; width:30px; display:flex; flex-direction:column; align-items:center;
}
.home .rutina-grupo__bar{
width:4px; flex:1; border-radius:4px; margin:5px 0;
background:var(--grupo-color, #8A867E);
}
.home .rutina-grupo__lbl{
writing-mode:vertical-rl; transform:rotate(180deg);
font-family:var(--display, 'Bebas Neue'); letter-spacing:1.2px; font-size:12px;
color:var(--grupo-color, #8A867E); white-space:nowrap; padding:2px 0;
max-height:220px; overflow:hidden; text-overflow:ellipsis;
}
.home .rutina-grupo__body{ flex:1; min-width:0; }
.home .rutina-grupo__head{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.home .rutina-grupo__nom{
font-family:var(--display, 'Bebas Neue'); letter-spacing:.8px; font-size:16px; color:var(--c-text);
}
.home .rutina-grupo__cuenta{
font-size:11px; color:var(--c-text-3, #8A867E);
background:var(--c-surface-2, #2A2620); padding:2px 8px; border-radius:999px;
}
.home .rutina-grupo__body .rutina-card{ margin-bottom:9px; }
/* ────────────────────────────────────────────────────────────
Medallero de la Manada (Fase 3 · registro lúdico). 31/08/2026.
──────────────────────────────────────────────────────────── */
.home .medallero{ margin-top:20px; }
.home .medallero[hidden]{ display:none; }
.home .medallero__titulo{
font-family:var(--display, 'Bebas Neue'); letter-spacing:1.5px; font-size:18px;
color:var(--c-text-2); margin:0 0 14px;
}
.home .medallero-grupo{ margin-bottom:18px; }
.home .medallero-grupo__nom{
font-family:var(--display, 'Bebas Neue'); letter-spacing:1px; font-size:14px;
color:var(--c-text-3, #8A867E); margin-bottom:9px;
}
.home .medallero-grupo__grid{
display:grid; grid-template-columns:repeat(2, 1fr); gap:9px;
}
.home .medalla{
background:var(--c-surface); border:1px solid var(--c-hair); border-radius:13px;
padding:13px 11px; text-align:center; opacity:.4; transition:opacity .3s, transform .3s, border-color .3s;
}
.home .medalla--won{ opacity:1; }
.home .medalla--oro.medalla--won{ border-color:#E8B62D; box-shadow:0 0 0 1px rgba(232,182,45,.35) inset; }
.home .medalla__ico{ font-size:27px; line-height:1; }
.home .medalla--won .medalla__ico{ filter:none; }
.home .medalla:not(.medalla--won) .medalla__ico{ filter:grayscale(1); }
.home .medalla__nom{
font-family:var(--display, 'Bebas Neue'); letter-spacing:.6px; font-size:14px;
color:var(--c-text); margin-top:6px;
}
.home .medalla__hint{ font-size:10.5px; color:var(--c-text-3, #8A867E); margin-top:2px; line-height:1.3; }
/* ── Sello de fase en la llave (por grupo/protocolo). 31/08/2026 ── */
.home .rutina-fase{
display:inline-flex; align-items:center; gap:7px; margin:0 0 10px;
padding:4px 11px 4px 9px; border-radius:999px; font-size:11.5px; font-weight:600;
color:var(--fase-color, #8A867E);
background:color-mix(in srgb, var(--fase-color, #8A867E) 15%, transparent);
border:1px solid color-mix(in srgb, var(--fase-color, #8A867E) 40%, transparent);
}
/* Fallback para navegadores sin color-mix: un fondo suave neutro. */
@supports not (background: color-mix(in srgb, red 15%, transparent)){
.home .rutina-fase{ background:rgba(138,134,126,.14); border-color:rgba(138,134,126,.4); }
}
.home .rutina-fase__dots{ display:flex; gap:3px; }
.home .rutina-fase__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.3; }
.home .rutina-fase__dot--on{ opacity:1; }
/* ── Jaime habla (botón altavoz TTS). 31/08/2026 ── */
.jaime-speak{
border:none; cursor:pointer; padding:0; display:inline-grid; place-items:center;
width:26px; height:26px; border-radius:50%; background:var(--c-oliva, #6B7A3A);
color:#F5EFE0; flex:none; transition:transform .12s;
}
.jaime-speak svg{ width:14px; height:14px; fill:currentColor; }
.jaime-speak:active{ transform:scale(.9); }
.jaime-speak--playing{ background:#E8B62D; animation:jaime-speak-pulse 1s infinite; }
@keyframes jaime-speak-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
/* En el chat: el altavoz va dentro de la burbuja de Jaime, abajo a la derecha */
.jaime-chat__fila--jaime .jaime-chat__burb{ position:relative; padding-bottom:16px; }
.jaime-chat__fila--jaime .jaime-chat__burb .jaime-speak{
position:absolute; right:-10px; bottom:-10px; width:28px; height:28px;
border:2px solid var(--c-surface, #211E16);
}
/* En la burbuja de aviso: el altavoz va en una franja superior, a la izquierda
del botón cerrar. Cuando está visible, el texto baja una fila para no quedar
tapado (si no hay voz disponible el botón queda hidden y no sobra hueco). */
.jaime-burbuja__speak{ position:absolute; top:9px; right:40px; }
.jaime-burbuja__speak:not([hidden]) ~ .jaime-burbuja__texto{ margin-top:24px; }
@media (prefers-reduced-motion: reduce){ .jaime-speak--playing{ animation:none; } }
/* ════════════════════════════════════════════════════════════
Rediseño de la portada — jerarquía + sistema unificado. 31/08/2026
Solo reordena y unifica el envoltorio; no toca ninguna lógica.
════════════════════════════════════════════════════════════ */
/* Título de sección: barrita oliva + rótulo Bebas. Da un ritmo común. */
.home .stitle{ display:flex; align-items:center; gap:9px; margin:22px 2px 12px; }
.home .stitle__bar{ flex:none; width:4px; height:15px; border-radius:2px; background:var(--c-oliva); }
.home .stitle h3{
margin:0; font-family:var(--display,'Bebas Neue'); font-size:16px; letter-spacing:1.3px;
color:var(--c-text-2); text-transform:uppercase;
}
/* "Más para ti": los accesos secundarios apilados con el mismo espaciado. */
.home .mas-sec{ margin-top:4px; }
.home .mas-card{ display:flex; flex-direction:column; gap:10px; }
.home .mas-card > [hidden]{ display:none; }
/* Que Seguimiento (.seg-entry) y Bienestar (.health) compartan exactamente
el mismo formato de fila-tarjeta, para que no se sientan piezas sueltas. */
.home .mas-card .seg-entry,
.home .mas-card .health{ width:100%; margin:0; }
/* La filosofía, ahora al pie como cierre discreto. */
.home .philo--foot{ margin-top:22px; }
/* La isla ya vive arriba de las subpestañas: un respiro bajo ella. */
.home #rutina-vista > .isla-semana{ margin:2px 0 14px; }
/* ════════════════════════════════════════════════════════════
Mi progreso — isla GLOBAL + línea de constancia. 01/09/2026
════════════════════════════════════════════════════════════ */
/* Subtítulo e hito de la isla global (el recorrido completo del plan). */
.home .isla-global__sub{
font-size:11px; font-weight:600; letter-spacing:.2px;
color:var(--c-oliva); margin:-1px 0 4px; text-align:center;
}
.home .isla-global__hito{
font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.4px;
text-transform:uppercase; color:var(--c-text-3); margin:6px 0 2px; text-align:center;
}
/* El camino: la isla florece por el ENTRENO; el avance va por CLASES. 01/09/2026 */
.home .camino-isla-cap{
display:flex; align-items:center; justify-content:center; gap:6px;
font-size:11px; font-weight:600; color:var(--c-text-2); margin:8px 0 0; text-align:center;
}
.home .camino-isla-cap b{ color:var(--c-oliva); font-weight:700; }
.home .camino-clase{
margin-top:13px; padding-top:13px; border-top:1px solid var(--c-hair);
}
.home .camino-clase__head{
display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px;
}
.home .camino-clase__big{
font-family:var(--display, 'Bebas Neue'); font-size:23px; letter-spacing:.6px; color:var(--c-text); line-height:1;
}
.home .camino-clase__big b{ color:var(--c-oliva); }
.home .camino-clase__pct{ font-size:11px; font-weight:700; color:var(--c-text-3); white-space:nowrap; }
.home .camino-clase__dots{ display:flex; flex-wrap:wrap; gap:7px; }
.home .camino-dot{
width:20px; height:20px; border-radius:50%; border:2px solid var(--c-hair-2);
display:grid; place-items:center; font-size:9px; font-weight:800; color:var(--c-text-3); flex:0 0 auto;
}
.home .camino-dot--done{ background:var(--c-oliva); border-color:var(--c-oliva); color:#F5EFE0; }
.home .camino-dot--next{ border-color:var(--c-oliva); border-style:dashed; color:var(--c-oliva); }
.home .camino-clase__cap{
font-size:11px; color:var(--c-text-3); margin:9px 0 0; display:flex; align-items:center; gap:6px;
}
/* Línea de constancia (sparkline legible) — reemplaza las barritas por semana. */
.home .progreso-spark{ position:relative; margin-top:11px; }
.home .progreso-spark svg{ width:100%; height:auto; display:block; overflow:visible; }
.home .progreso-spark__meta{ stroke:var(--c-hair-2, #8A867E); stroke-width:1; stroke-dasharray:3 3; opacity:.7; }
.home .progreso-spark__area{ fill:var(--c-oliva-soft, rgba(107,122,58,.14)); }
.home .progreso-spark__line{ fill:none; stroke:var(--c-oliva, #6B7A3A); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.home .progreso-spark__lbl{
position:absolute; top:-3px; right:2px; font-size:8px; font-weight:700; letter-spacing:.5px;
text-transform:uppercase; color:var(--c-text-3); background:var(--c-surface); padding:0 3px;
}
/* Color de punto/halo por estado (fill/stroke = currentColor). */
.home .progreso-spark .pk--verde{ color:var(--c-oliva, #6B7A3A); }
.home .progreso-spark .pk--rojo{ color:var(--c-rojo, #C8102E); }
.home .progreso-spark .pk--azul{ color:#3F6FD0; }
.home .progreso-spark .pk--sin{ color:var(--c-hair-2, #8A867E); }
.home .progreso-spark .pk-halo{ opacity:.45; stroke-width:1.6; }
/* ════════════════════════════════════════════════════════════
Hero: legible sobre CUALQUIER foto + controles despejados.
Pedido de Charly (01/09/2026). Solo visual/estructura del hero.
════════════════════════════════════════════════════════════ */
/* 1) Velo (scrim) reforzado: nunca transparente en la mitad baja del texto. */
.home .dBp .cover .scrim{
background:linear-gradient(180deg,
rgba(8,7,5,0.55) 0%,
rgba(8,7,5,0.18) 22%,
rgba(8,7,5,0.34) 48%,
rgba(8,7,5,0.72) 74%,
rgba(8,7,5,0.95) 100%);
}
/* 2) Refuerzo local detrás del bloque de nombre/saludo: salva las fotos claras. */
.home .dBp .cover .cbot::before{
content:""; position:absolute; left:0; right:0; bottom:0; top:-26px;
background:linear-gradient(180deg, transparent 0%, rgba(8,7,5,.28) 42%, rgba(8,7,5,.60) 100%);
pointer-events:none; z-index:-1;
}
/* 3) Doble sombra de texto: contorno oscuro en cada letra (claro y oscuro). */
.home .dBp .cover .cbot .hi,
.home .dBp .cover .cbot .br{
text-shadow:0 1px 2px rgba(6,5,3,.9), 0 0 10px rgba(6,5,3,.55);
color:rgba(245,239,224,.96);
}
.home .dBp .cover .cbot .hi .edit{ color:rgba(245,239,224,.82); }
.home .dBp .cover .cbot .slogan{
text-shadow:0 1px 2px rgba(6,5,3,.9), 0 0 10px rgba(6,5,3,.55);
color:rgba(245,239,224,.94);
}
.home .dBp .cover .cbot .nm{
text-shadow:0 2px 6px rgba(6,5,3,.75), 0 1px 2px rgba(6,5,3,.9);
}
/* 4) Menú del avatar: ítems con icono + etiqueta (tema/editar viven acá).
El cover recorta con overflow:hidden y cortaría el 4º ítem del menú; como la
foto ya queda contenida por su object-fit, dejamos que el cover desborde para
que el menú (dropdown) se vea completo. Cuando está cerrado no desborda nada. */
.home .dBp .cover{ overflow:visible; }
.home .dBp .cover .avatar-menu{ min-width:196px; padding:5px; }
.home .dBp .cover .avatar-menu__item{
display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px;
}
.home .dBp .cover .avatar-menu__item svg{ width:17px; height:17px; flex:0 0 auto; }
/* El toggle de tema tiene dos íconos (luna/sol); el JS oculta el que no toca.
Blindamos el [hidden] por si alguna regla de svg intentara mostrarlo igual. */
.home .dBp .cover .avatar-menu__item svg[hidden]{ display:none; }
.home .dBp .cover .avatar-menu__item .avatar-menu__lbl{ flex:1; min-width:0; }
/* El toggle de tema muestra luna U sol según el tema; ambos como icono del ítem. */
.home .dBp .cover .avatar-menu__item#theme-toggle{ color:var(--c-text); }
/* 4b) Logo de Perros de la Isla un poco más grande (pedido de Charly), con un
halo sutil para que se apoye sobre cualquier foto sin ensuciarse. */
.home .dBp .cover .ctop .logo{
width:40px; height:40px;
box-shadow:0 0 0 1px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.35);
}
/* 5) Selector de perros con FOTO (la inicial queda de fallback debajo). */
.home .dBp .cover .dogsel .av{ position:relative; overflow:hidden; }
.home .dBp .cover .dogsel .av__foto{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit;
}