@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/bricolage.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree.woff2) format("woff2")}
/* Pepepe's Care: una columna de móvil, cabecera con el teckel, cuatro vistas y pestañas fijas abajo. */
:root{
  --bg:#F5EFE9; --surface:#FFFDFB; --ink:#2A1A10; --muted:#75604F; --line:#E4D6C8;
  --accent:#4A2A1B; --accent-ink:#FFF8F1; --soft:#EBDCCB;
  --tag:#B56A2B; --danger:#B13C2B; --warn:#8F5B00; --warn-bg:#FBEFD0; --danger-bg:#F9E1DC;
  --dog:#4A2A1B; --dog-dark:#3A2015; --dog-nose:#24130C;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#17100B; --surface:#231811; --ink:#F3E8DD; --muted:#B39C89; --line:#3B2A1E;
  --accent:#D69A62; --accent-ink:#21140B; --soft:#33231A;
  --tag:#E3A765; --danger:#F08B78; --warn:#F0B93A; --warn-bg:#3A2E10; --danger-bg:#3D1F1A;
  --dog:#7C4B31; --dog-dark:#5E3622; --dog-nose:#120A06; } }
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
.app{max-width:540px;margin:0 auto;padding-inline:16px;padding-block:16px 96px;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.02em}
h2{font-size:1.15rem;font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--tag);outline-offset:2px}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
header .who{display:flex;flex-direction:column;gap:6px;min-width:0}
header .sub{color:var(--muted);font-size:.95rem}
.dog{width:132px;flex:none;color:var(--accent)}
.dog .collar{fill:var(--tag)}
.chip{align-self:flex-start;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:.88rem;font-weight:600}

.banner{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:.92rem;font-weight:500}

section{display:flex;flex-direction:column;gap:12px}
.head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.label{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}

.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.quick button{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 8px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:6px}
.quick button:active{background:var(--soft)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--accent))}
.t-paseo{--c:#2E9E6F}.t-comida{--c:#DFA11A}.t-agua{--c:#3C8FD1}.t-pipi{--c:#C9B43A}.t-caca{--c:#8B5E3C}.t-medicacion{--c:#C0507A}.t-nota{--c:#7B8794}

.list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .main strong{font-weight:600;overflow-wrap:anywhere}
.row .main span{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.time{font-variant-numeric:tabular-nums;font-weight:700;width:3.2em;flex:none}
.empty{padding:18px 14px;color:var(--muted);font-size:.95rem}

.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:10px 16px;font-weight:700}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.small{padding:6px 12px;font-size:.88rem}
.btn.done{background:var(--soft);color:var(--accent)}
.link{background:none;border:0;color:var(--muted);font-size:.85rem;padding:6px;text-decoration:underline}
.link.armed{color:var(--danger);font-weight:700}

.daynav{display:flex;align-items:center;gap:6px}
.daynav button{background:var(--surface);border:1px solid var(--line);border-radius:8px;width:36px;height:36px;font-weight:700}
.daynav button:disabled{opacity:.35}

.pill{font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;background:var(--soft);color:var(--accent)}
.pill.late{background:var(--danger-bg);color:var(--danger)}
.pill.today{background:var(--warn-bg);color:var(--warn)}

dl{margin:0}
dl .row{align-items:flex-start}
dt{color:var(--muted);font-size:.9rem;width:38%;flex:none}
dd{margin:0;flex:1;min-width:0;overflow-wrap:anywhere;font-weight:500;white-space:pre-line}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.grid button{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;text-align:left}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.grid span{padding:6px 8px;font-size:.8rem;color:var(--muted)}

nav{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
nav div{max-width:540px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
nav button{background:none;border:0;padding:14px 4px 12px;font-weight:600;color:var(--muted);border-top:3px solid transparent;margin-top:-1px}
nav button[aria-selected="true"]{color:var(--accent);border-top-color:var(--accent)}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:10;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:540px;max-height:90%;overflow:auto;border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.sheet form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:.85rem;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.names{display:flex;flex-wrap:wrap;gap:8px}
.sheet img.big{width:100%;border-radius:12px}
.err{color:var(--danger);font-size:.9rem;font-weight:600}
body.ro .w{display:none!important}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px)}to{transform:none}}}

.app{padding-top:calc(16px + env(safe-area-inset-top,0px))}
.dog{color:inherit}
.dog .b{fill:var(--dog)} .dog .d{fill:var(--dog-dark)} .dog .t{fill:var(--tag)} .dog .n{fill:var(--dog-nose)}
.dog .ds{stroke:var(--dog-dark)} .dog .ts{stroke:var(--tag)}
.join{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.join form{display:flex;flex-direction:column;gap:12px}
.hint{color:var(--muted);font-size:.9rem}
.grid img{background:var(--soft)}
body.out nav, body.out #meChip{display:none}
main{display:flex;flex-direction:column;gap:20px}
.ico{width:30px;height:30px;fill:var(--c)}
.ico.sm{width:22px;height:22px;flex:none}
.tel{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
nav div{grid-template-columns:repeat(5,minmax(0,1fr))}
nav button{padding:14px 2px 12px;font-size:.8rem}
:root{--k0:#2E9E6F;--k1:#DFA11A;--k2:#3C8FD1;--k3:#C0507A;--k4:#8B5E3C;--k5:#7B6BD6}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:.7rem;text-align:center;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding-bottom:2px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 2px;min-height:54px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.day b{font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.day i{font-style:normal;font-size:.66rem;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.day.now{border:2px solid var(--accent);padding:5px 1px}
.day.past{opacity:.6}
.k0{--k:var(--k0)}.k1{--k:var(--k1)}.k2{--k:var(--k2)}.k3{--k:var(--k3)}.k4{--k:var(--k4)}.k5{--k:var(--k5)}
.day[class*=" k"]{background:color-mix(in srgb,var(--k) 24%,var(--surface));border-color:color-mix(in srgb,var(--k) 45%,var(--line))}
.day.now[class*=" k"]{border-color:var(--accent)}
.month{font-family:var(--display);font-size:1.15rem;font-weight:600}
.legend .dot{background:var(--k)}
.check{display:flex;gap:10px;align-items:center;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.guia{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.guia .head{align-self:stretch}
.guia h3{font-size:1.05rem;font-weight:600;min-width:0;overflow-wrap:anywhere}
.guia .pasos{white-space:pre-line;overflow-wrap:anywhere;align-self:stretch}
.guia a.btn{text-decoration:none;display:inline-block}
.video{align-self:stretch;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--soft)}
.video iframe{width:100%;height:100%;border:0;display:block}
.ts{min-height:65px}
.acciones{display:flex;flex-wrap:wrap;gap:8px;align-self:stretch}
.rowbtn{background:none;border:0;padding:0;text-align:left;cursor:pointer;align-items:stretch}
.num{font-variant-numeric:tabular-nums}
.ic{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.ic svg{width:18px;height:18px;fill:var(--accent)}
.ic.on{background:var(--accent);border-color:var(--accent)}
.ic.on svg{fill:var(--accent-ink)}