/* Estilos comunes a todas las páginas de Comunito (web, alta, login, panel y /admin).
   Cada plantilla sigue teniendo sus estilos propios en su <style>, que va DESPUÉS de este archivo
   y por tanto manda en lo que repita. Aquí solo lo que debe verse igual en todas partes. */

:root {
  color-scheme: dark;
  --verde: #2DD4A8;
  --verde-claro: #7EE8C9;
  --verde-oscuro: #1B9E7D;
  --rojo: #fca5a5;
  --rojo-borde: rgba(248, 113, 113, 0.35);
  --fondo: #071009;
  --tarjeta: #0f1d12;
  --campo: #0b160d;
  --borde: #1e3320;
  --texto: #f4f8f3;
  --texto-suave: #a9bba6;
}

/* Los botones y campos no heredan la fuente por defecto: sin esto algunos salían en Arial. */
button, input, select, textarea { font-family: inherit; }

/* Barras de desplazamiento oscuras en toda la web (antes solo /admin y dos zonas del panel). */
* { scrollbar-width: thin; scrollbar-color: var(--verde-oscuro) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--verde-oscuro); }

/* Foco visible al navegar con el teclado. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* Sistema de botones: tres tipos (principal, secundario y peligro) y un tamaño pequeño. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primario { background: var(--verde); color: #04261f; }
.btn-primario:hover { background: var(--verde-claro); }
.btn-secundario { background: transparent; color: var(--verde-claro); border-color: var(--verde-oscuro); }
.btn-secundario:hover { border-color: var(--verde); background: rgba(45, 212, 168, 0.08); }
.btn-peligro { background: transparent; color: var(--rojo); border-color: var(--rojo-borde); font-weight: 600; }
.btn-peligro:hover { background: rgba(248, 113, 113, 0.12); }
.btn-pequeno { padding: 4px 12px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }