/* ============================================================
   GESTION.CSS — STYLES DE L'ADMINISTRATION « MAMA JULIA »
   Pensé MOBILE D'ABORD, gros texte et grandes zones tactiles :
   l'utilisatrice principale est une personne âgée.
   ============================================================ */

:root{
  --g-fondo:#eef3f6;
  --g-tarjeta:#ffffff;
  --g-tinta:#1d2b33;
  --g-suave:#5b6f79;
  --g-verde:#1f5135;
  --g-verde-claro:#2e7d52;
  --g-borde:#d8e2e8;
  --g-ocre:#c98a3a;
  --g-rojo:#b3402e;
  --g-ok:#1f7a44;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--g-fondo);
  color:var(--g-tinta);
  font-size:17px;
  line-height:1.5;
}

.g-cabecera{
  background:var(--g-verde);
  color:#fff;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.g-cabecera h1{
  margin:0;
  font-size:1.15rem;
  font-weight:700;
}
.g-cabecera .g-emoji{ font-size:1.3rem; }

.g-envoltura{
  max-width:760px;
  margin:0 auto;
  padding:18px 16px 60px;
}

/* ---------- Cartes ---------- */
.g-tarjeta{
  background:var(--g-tarjeta);
  border:1px solid var(--g-borde);
  border-radius:14px;
  padding:20px;
  margin-bottom:18px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.g-tarjeta h2{
  margin:0 0 6px;
  font-size:1.15rem;
  color:var(--g-verde);
}
.g-tarjeta p.g-ayuda{
  margin:0 0 16px;
  font-size:.95rem;
  color:var(--g-suave);
}

/* ---------- Champs ---------- */
label.g-etiqueta{
  display:block;
  font-weight:600;
  margin:14px 0 6px;
}
input[type="password"],
input[type="text"],
input[type="number"],
textarea{
  width:100%;
  font-size:1.05rem;
  font-family:inherit;
  padding:13px 14px;
  border:2px solid var(--g-borde);
  border-radius:10px;
  background:#fff;
  color:var(--g-tinta);
}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--g-verde-claro);
}
textarea{ min-height:90px; resize:vertical; }

/* ---------- Boutons ---------- */
.g-boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  font-size:1.08rem;
  font-weight:700;
  font-family:inherit;
  padding:15px 18px;
  border:none;
  border-radius:12px;
  background:var(--g-verde);
  color:#fff;
  cursor:pointer;
  margin-top:16px;
}
.g-boton:hover{ background:var(--g-verde-claro); }
.g-boton:disabled{ opacity:.55; cursor:not-allowed; }
.g-boton--ocre{ background:var(--g-ocre); }
.g-boton--ocre:hover{ background:#b87b2e; }
.g-boton--gris{
  background:#e7eef2;
  color:var(--g-tinta);
}
.g-boton--gris:hover{ background:#dbe5ea; }

/* ---------- Messages ---------- */
.g-aviso{
  margin-top:14px;
  padding:12px 14px;
  border-radius:10px;
  font-size:.97rem;
  font-weight:600;
  display:none;
}
.g-aviso.is-ver{ display:block; }
.g-aviso--ok{   background:#e3f3e9; color:var(--g-ok); }
.g-aviso--error{background:#f8e3df; color:var(--g-rojo); }
.g-aviso--info{ background:#e6eef3; color:var(--g-suave); }

/* ---------- Liste de produits ---------- */
.g-producto{
  border:1px solid var(--g-borde);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
  background:#fbfcfd;
}
.g-producto__nombre{
  font-weight:700;
  margin-bottom:10px;
  font-size:1.02rem;
}
.g-producto__linea{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}
.g-campo-precio{
  display:flex;
  align-items:center;
  gap:6px;
}
.g-campo-precio span{ font-weight:700; color:var(--g-suave); }
.g-campo-precio input{
  width:110px;
  padding:10px 12px;
  text-align:right;
}
/* Cases à cocher : grandes, faciles à toucher */
.g-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
}
.g-check input{
  width:24px;
  height:24px;
  accent-color:var(--g-verde);
  cursor:pointer;
}
.g-check--foto{ color:var(--g-ocre); }
.g-producto.is-oculto{
  background:#f4f0e9;
  border-color:#e4d8c4;
}
.g-producto.is-oculto .g-producto__nombre::after{
  content:" — oculto";
  color:var(--g-ocre);
  font-weight:600;
  font-size:.88rem;
}

/* ---------- Demandes (panneau de Nil) ---------- */
.g-solicitud{
  border:1px solid var(--g-borde);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
  background:#fbfcfd;
}
.g-solicitud.is-hecho{ opacity:.55; }
.g-solicitud__fecha{
  font-size:.85rem;
  color:var(--g-suave);
  margin-bottom:6px;
}
.g-solicitud__cuerpo{ font-size:.97rem; }
.g-etiqueta-estado{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  margin-left:6px;
}
.g-etiqueta-estado--pendiente{ background:#fbe9cf; color:#7a4d12; }
.g-etiqueta-estado--hecho{ background:#dceee2; color:var(--g-ok); }

/* ---------- Lien discret / pied ---------- */
.g-enlace{
  display:inline-block;
  margin-top:14px;
  color:var(--g-verde-claro);
  font-weight:600;
  text-decoration:none;
}
.g-enlace:hover{ text-decoration:underline; }
.g-pie{
  text-align:center;
  font-size:.82rem;
  color:var(--g-suave);
  padding:20px 16px;
}

/* ---------- Turnstile ---------- */
.g-turnstile{ margin-top:16px; }

/* ---------- Chargement ---------- */
.g-cargando{
  text-align:center;
  color:var(--g-suave);
  padding:40px 16px;
  font-size:1rem;
}