/* ECO · Diseño común para Colaboración, Mi libro y Aportar.
   No se carga en app.html ni arbol.html: preserva el botón de voz y el árbol.
   Se añade DESPUÉS del <style> de cada pantalla. */
:root {
  --eco-bg:#f7f4eb;--eco-surface:#fffdf6;--eco-green:#4d6542;
  --eco-green-deep:#293d30;--eco-mist:#edf0e5;
  --eco-ink:#302d25;--eco-muted:#777568;--eco-edge:#dadaca;
  --eco-shadow:0 18px 46px -31px rgba(37,55,42,.34);
}
body{background:var(--eco-bg)!important;color:var(--eco-ink);font-family:"Atkinson Hyperlegible",system-ui,sans-serif;}
body::before,body::after{pointer-events:none;}
:focus-visible{outline:3px solid #76936e!important;outline-offset:3px;}
/* Layout and headings */
header{box-sizing:border-box;max-width:1140px;margin-inline:auto!important;padding-block:clamp(16px,3vw,34px);gap:16px;}
header h1,h1{font-family:"Source Serif 4",Georgia,serif;color:var(--eco-green-deep);font-weight:700;letter-spacing:-.025em;}
header p,.sub,.status{color:var(--eco-muted);}
a.volver{display:inline-flex;align-items:center;gap:7px;text-decoration:none!important;border:1px solid var(--eco-edge);border-radius:14px;background:var(--eco-surface);color:var(--eco-green-deep)!important;padding:11px 15px;min-height:44px;box-shadow:0 4px 12px -10px #243c29;font-weight:700;}
a.volver:hover{background:var(--eco-mist);}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:clamp(12px,3vw,24px);}
/* Big containers and cards */
.wrap>section,section,.chapter,.colab-card,.aporte-item,.aportes,.aporte-bubble,.empty{
  border-radius:22px;border-color:var(--eco-edge);box-shadow:var(--eco-shadow);
}
.wrap>section,section,.chapter,.colab-card,.aporte-item,.aportes{background:var(--eco-surface);}
section h2,.chapter h2,.aportes h2{font-family:"Source Serif 4",Georgia,serif;color:var(--eco-green-deep);}
/* Main actions only: never target every button globally */
a.aportar-ahora,button.generar,.empty-cta,button.empty-cta,#invitarPanel .invite-send,.retry-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  background:var(--eco-green)!important;color:#fffdf6!important;
  border:1px solid var(--eco-green)!important;border-radius:15px!important;
  padding:11px 19px;text-decoration:none!important;font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-weight:700;box-shadow:0 8px 18px -13px rgba(40,58,39,.65);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
a.aportar-ahora:hover,button.generar:not(:disabled):hover,.empty-cta:hover,#invitarPanel .invite-send:not(:disabled):hover,.retry-btn:hover{
  background:var(--eco-green-deep)!important;transform:translateY(-1px);
}
button:disabled{cursor:not-allowed;opacity:.58;}
/* Collaboration: tabs, contributor cards, and recorded contributions */
.tabs-row{background:var(--eco-mist);border:1px solid var(--eco-edge);border-radius:18px;padding:5px;gap:4px;}
.tab-btn{min-height:44px;border-radius:13px!important;color:var(--eco-green-deep)!important;font-weight:700;transition:background .18s ease;}
.tab-btn.active,.tab-btn[aria-selected="true"]{background:var(--eco-green)!important;color:#fffdf6!important;border-color:var(--eco-green)!important;box-shadow:0 4px 12px -8px #243c29;}
.colab-card{transition:transform .18s ease,border-color .18s ease;}
.colab-card:hover{transform:translateY(-2px);border-color:#b8c4ad;}
.colab-card .nombre,.aporte-item .quien{color:var(--eco-green-deep);font-weight:700;}
.colab-card .parentesco,.colab-card .count{color:var(--eco-muted);}
.aporte-item .aporte-acciones button,.invite-list .invite-acciones button,.invite-list .invite-acciones a{
  background:var(--eco-mist);color:var(--eco-green-deep);border:1px solid var(--eco-edge);
  border-radius:12px;min-height:42px;padding:9px 13px;font-weight:700;
}
.aporte-item .aporte-acciones button:hover,.invite-list .invite-acciones button:hover{background:#dde8d7;}
/* My book: generation, chapter cards and native form controls */
.toolbar{gap:12px;}
#personaSelect,.dados-select-row select,#invitarPanel input{
  background:var(--eco-surface);border:1px solid var(--eco-edge);border-radius:13px;
  color:var(--eco-ink);min-height:46px;padding:10px 13px;font-size:1rem;
}
.chapter{padding:clamp(18px,3vw,28px);}
.chapter .meta,.chapter .theme{color:var(--eco-muted);}
.chapter .borrar{background:transparent!important;border:1px solid #d9b9ae!important;border-radius:12px!important;min-height:42px;padding:8px 14px;color:#913d32!important;}
.chapter .borrar:hover{background:#fff0ea!important;}
/* Contributor recording view — keep the microphone and state styles intact */
.aportes{border:1px solid var(--eco-edge);padding:clamp(16px,3vw,28px);}
.collab-switch-list a,.otra-historia-btn{border-radius:13px;}
.collab-switch-list a.active{background:var(--eco-green)!important;color:#fffdf6!important;}
/* Touch targets and narrow screens */
@media(max-width:680px){
  body{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));}
  header{align-items:flex-start;flex-wrap:wrap;gap:10px;}
  a.volver{width:auto;max-width:100%;font-size:.9rem;}
  .tabs-row{display:flex;flex-wrap:wrap;}
  .tab-btn{flex:1 1 150px;}
  .toolbar{display:flex;flex-wrap:wrap;}
  .toolbar>*{max-width:100%;}
  .colab-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
  a.aportar-ahora,button.generar{width:100%;box-sizing:border-box;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:.01ms!important;}}