@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-grotesk-400.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-500.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-600.ttf') format('truetype')}
@font-face{font-family:'Righteous';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/righteous-400.ttf') format('truetype')}
:root{
  color-scheme:light dark;
  --bg:light-dark(#FDF0FF,#191B30);
  --panel:light-dark(#fff9ff,#24253e);
  --text:light-dark(#191B30,#FDF0FF);
  --sub:light-dark(#54576f,#c5c4d6);
  --line:light-dark(#dcd3e9,#43435d);
  --soft:light-dark(#e1f4e9,#243c3a);
  --button:light-dark(#004534,#80FFA6);
  --button-text:light-dark(#FDF0FF,#004534);
  --purple:light-dark(#5D3FCC,#ACB6FC);
  --purple-soft:light-dark(#ebe4ff,#303149);
  --bad:light-dark(#9b352b,#ffc1b7);
  font-family:'Space Grotesk','Segoe UI',Arial,sans-serif;
}
:root[data-appearance=light]{color-scheme:light}
:root[data-appearance=dark]{color-scheme:dark}
.app{max-width:760px}
header{padding:24px;gap:20px;display:grid;grid-template-columns:minmax(0,1fr) auto}
.brand{color:var(--button);width:190px;max-width:100%;display:block;min-width:0}
.brand svg{width:100%;height:auto;display:block}
.brand-name{font:400 24px/1.2 'Righteous','Space Grotesk',sans-serif;overflow-wrap:anywhere}
.header-tools{display:grid;gap:6px;justify-items:end}
#profile{font-size:14px;color:var(--sub)}
.appearance-label{margin:0;gap:6px;font-size:14px;color:var(--text);display:grid;align-items:start}
.appearance-label select{font-family:inherit;font-size:16px;font-weight:600;width:160px;padding:11px;min-height:48px;border-radius:9px}
.mode{background:var(--purple-soft);color:var(--purple);font-size:14px;padding:11px 24px}
main{padding:28px 24px}
h1{font:400 32px/1.2 'Righteous','Space Grotesk',sans-serif;letter-spacing:-.3px}
h2{font-size:21px;font-weight:600}
h3{font-weight:600}
strong,b{font-weight:600}
.sub,small,.badge{font-size:14px}
.card{border-radius:18px;padding:22px}
.card p{overflow-wrap:anywhere}
.badge{background:var(--purple-soft);color:var(--purple);padding:5px 9px}
button{min-height:48px;border-radius:11px;font-weight:600}
button.primary{font-weight:600;border-radius:12px}
button.quiet{min-height:44px}
input,select{min-height:48px;border-radius:9px}
input[type=checkbox]{min-height:20px}
label{font-size:14px}
label input,label select{font-size:16px}
.check{font-size:16px}
.back{color:var(--purple);min-height:44px;display:inline-flex;align-items:center}
.heading .back{background:var(--button);color:var(--button-text);padding:10px 16px;border-radius:11px;text-decoration:none;font-weight:600;margin:0}
.heading{margin-bottom:22px}
.group{padding:16px 0}
.plant{padding:15px 0}
.plant p{font-size:14px}
nav[aria-label=Secciones]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px;background:var(--panel)}
nav[aria-label=Secciones] a{font-size:14px;min-width:0;min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere}
nav[aria-label=Secciones] a[aria-current=page]{color:var(--button);background:var(--soft)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.filter-note{padding:12px 15px;background:var(--purple-soft);color:var(--purple);border-radius:11px;font-size:14px;margin-bottom:20px}
.filter-note p{margin:0 0 5px}
.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0}
.pagination a{min-height:44px;display:inline-flex;align-items:center;color:var(--purple)}
.status-link{color:var(--purple)}
@media(max-width:460px){header{padding:20px 16px;gap:12px}.brand{width:156px}.appearance-label select{width:136px}main{padding:22px 16px}.mode{padding:10px 16px}.card{padding:17px}nav[aria-label=Secciones]{gap:3px;padding:9px 6px}nav[aria-label=Secciones] a{padding:10px 4px}.heading .back{width:100%;justify-content:center}}