/* =========================
   ComparteyConvive — styles.css PRO (LIGHT / Verde)
   Reemplaza TODO el archivo por este.
   ========================= */

:root{
  /* Layout */
  --max: 1120px;
  --radius: 18px;

  /* Tema (blanco + verde) */
  --bg: #F6FBF8;              /* fondo */
  --surface: #FFFFFF;         /* cards / inputs */
  --text: #0F1F17;            /* texto principal */
  --muted: #4D6B5D;           /* texto secundario */
  --border: #DDEFE6;          /* borde suave */

  /* Marca */
  --brand: #A6E3CF;           /* verde botón */
  --brandHover: #93D9C2;      /* hover */
  --brandText: #89A68B;       /* verde “sage” tipo logo */

  /* Estados */
  --danger: #D74747;
  --success: #2F7A5E;

  /* Sombras */
  --shadow: 0 10px 26px rgba(15, 31, 23, 0.06);

  /* Campos */
  --field: #FFFFFF;
  --fieldFocus: #FFFFFF;

  /* Logo (fallbacks) */
  --logo1: url("img/logo-mark.png");  /* ✅ si está en /assets/img/logo-mark.png */
  --logo2: url("logo-mark.png");      /* ✅ si está en /assets/logo-mark.png */
}

/* Reset */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{color: var(--success); text-decoration:none}
a:hover{filter:brightness(.95)}
.container{max-width:var(--max);margin:0 auto;padding:24px}

/* =========================
   NAV
   ========================= */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(246, 251, 248, 0.92);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--max);margin:0 auto;padding:14px 24px
}

/* ✅ SOLO AJUSTE: un poco más de espacio para que el logo grande respire */
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}

/* ✅ SOLO AJUSTE: logo un poquito más grande (antes 44x44) */
.logo{
  display:inline-block;
  width:60px;height:60px;          /* ✅ antes: 44px */
  border-radius:12px;
  background-image: var(--logo1), var(--logo2);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  box-shadow:none;
}

.nav-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.pill{
  padding:8px 12px;border-radius:999px;
  background: rgba(255,255,255,0.90);
  border:1px solid var(--border);
  font-size:14px;
  color: var(--text);
}
.pill:hover{border-color: rgba(137,166,139,.55)}
.pill.active{
  background: rgba(166,227,207,.45);
  border-color: rgba(47,122,94,.22);
}

.cta{
  padding:10px 14px;border-radius:999px;
  background: linear-gradient(90deg, var(--brand), #B7F0DD);
  color: #0F1F17;
  font-weight:800;border:1px solid rgba(47,122,94,.12);
  cursor:pointer;
}
.cta:hover{background: var(--brandHover)}

/* =========================
   HERO / TYPO
   ========================= */
.hero{padding:56px 0 10px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch}
@media (max-width: 920px){.hero-grid{grid-template-columns:1fr}}

.h1{font-size:44px;line-height:1.05;margin:0 0 14px}
@media (max-width: 520px){.h1{font-size:36px}}

.lead{color:var(--muted);font-size:18px;line-height:1.55;margin:0 0 18px}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.badge{
  font-size:13px;
  color: var(--text);
  padding:8px 10px;border-radius:999px;
  background: rgba(166,227,207,.25);
  border:1px solid rgba(47,122,94,.16);
}

/* “contacto verificado” / acentos de marca */
.accent, .highlight, .text-accent, .brand-accent{
  color: var(--brandText);
  font-weight: 800;
}

/* =========================
   CARDS / SECTIONS
   ========================= */
.section{padding:26px 0}

.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
}
.card-pad{padding:18px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 920px){.grid3{grid-template-columns:1fr}}

.h2{font-size:22px;margin:0 0 10px}
.small{color:var(--muted);font-size:14px;line-height:1.55}

/* KPI */
.kpi{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.k{
  flex:1;min-width:160px;padding:14px;border-radius:16px;
  background: rgba(15,31,23,.03);
  border:1px solid var(--border)
}
.k b{display:block;font-size:22px}
hr.sep{border:none;border-top:1px solid var(--border);margin:18px 0}

/* ✅ Para tu cuenta.html (usabas card-item) */
.card-item{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
  color: var(--text);
}

/* =========================
   FORMS (contraste PRO)
   ========================= */
.form{display:grid;gap:10px}

label, .label, .field-label{
  font-size:13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .15px;
  opacity: 1;
}

input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  background: var(--field);
  border:1px solid var(--border);
  color: var(--text);
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input::placeholder,textarea::placeholder{
  color: rgba(77,107,93,.65);
}

input:focus,select:focus,textarea:focus{
  border-color: rgba(47,122,94,.35);
  box-shadow: 0 0 0 3px rgba(166,227,207,.35);
  background: var(--fieldFocus);
}

textarea{min-height:110px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 720px){.row2{grid-template-columns:1fr}}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(47,122,94,.14);
  background: rgba(166,227,207,.35);
  font-weight:800;
  color: var(--text);
  cursor:pointer;
}
.btn:hover{background: rgba(166,227,207,.50)}
.btn:disabled{opacity:.55;cursor:not-allowed}

.btn-primary{
  background: var(--brand);
  border: 1px solid rgba(47,122,94,.14);
  color: var(--text);
}
.btn-primary:hover{background: var(--brandHover)}

/* =========================
   ESTADOS / HELPERS
   ========================= */
.muted{color: var(--muted)}
.ok{color: var(--success) !important}
.bad{color: var(--danger) !important}

.pill-note{
  display:inline-block;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  opacity:.98;
  color: var(--muted);
  background: rgba(15,31,23,.03);
}

/* =========================
   ✅ CUENTA: “Tu anuncio” + Botones (SOLO lo acordado)
   ========================= */
body.page-cuenta #anuncioBox{opacity:1}
body.page-cuenta #anuncioBox strong{
  color: var(--text);
  font-weight: 900;
}
body.page-cuenta #anuncioBox{
  color: var(--text);
}
body.page-cuenta #anuncioBox .small,
body.page-cuenta #anuncioBox small{
  color: var(--muted);
  opacity: 1;
}

/* ✅ Botones en cuenta.html: Editar + Limpiar = verde, Borrar = rojo */
body.page-cuenta #btnEdit,
body.page-cuenta #btnClear{
  background: var(--brand);
  border: 1px solid rgba(47,122,94,.14);
  color: var(--text);
}
body.page-cuenta #btnEdit:hover,
body.page-cuenta #btnClear:hover{
  background: var(--brandHover);
}

body.page-cuenta #btnDelete{
  background: rgba(215,71,71,.14);
  border: 1px solid rgba(215,71,71,.28);
  color: #4A2B2B;
}
body.page-cuenta #btnDelete:hover{
  background: rgba(215,71,71,.20);
}

/* ✅ FIX extra SOLO CUENTA: Consejo + texto ayuda visibles y Guardar igual que labels */
body.page-cuenta .card-item p.muted{
  color: var(--muted) !important;
  opacity: 1 !important;
}
body.page-cuenta #btnSave{
  background: var(--brand) !important;
  border: 1px solid rgba(47,122,94,.14) !important;
  color: var(--text) !important;
}
body.page-cuenta #btnSave:hover{
  background: var(--brandHover) !important;
}

/* =========================
   ALERTAS / AVISOS
   ========================= */
.notice, .alert, .warning, .disclaimer, .important{
  font-size:12px;
  color: #4A2B2B;
  padding:12px 14px;border-radius:16px;
  background: rgba(215,71,71,.10);
  border:1px solid rgba(74,43,43,.18);
}
.notice p, .alert p, .warning p, .disclaimer p, .important p{
  color:#4A2B2B;
  font-weight: 650;
}

/* =========================
   FOOTER
   ========================= */
.footer{padding:28px 0 46px;color:var(--muted)}
.footer a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(77,107,93,.35)}