Guia

/* Colores principales */
--color-primario: #2E7D32;          /* Verde principal */
--color-primario-oscuro: #1B5E20;   /* Verde oscuro */
--color-primario-claro: #4CAF50;    /* Verde claro */
--color-secundario: #388E3C;        /* Verde secundario */
--color-acento: #10b981;            /* Esmeralda acento */
--color-acento-claro: #34d399;      /* Esmeralda claro */

--color-exito: #28a745;       /* Verde éxito */
--color-advertencia: #ffc107; /* Amarillo advertencia */
--color-peligro: #dc3545;     /* Rojo peligro */
--color-info: #17a2b8;        /* Azul información */

--color-fondo: #f8f9fa;                                              /* Fondo página */
--color-fondo-sidebar: linear-gradient(180deg, #1B5E20 0%, #2E7D32 100%); /* Sidebar */
--color-texto: #212529;                                              /* Texto principal */
--color-texto-claro: #6c757d;                                        /* Texto secundario */
--color-borde: #dee2e6;                                              /* Bordes */

--espaciado-xs: 0.25rem;  /* 4px */
--espaciado-sm: 0.5rem;   /* 8px */
--espaciado-md: 1rem;     /* 16px */
--espaciado-lg: 1.5rem;   /* 24px */
--espaciado-xl: 2rem;     /* 32px */

--radio-sm: 4px;
--radio-md: 8px;
--radio-lg: 12px;
--radio-completo: 50%;

--sombra-sm: 0 1px 3px rgba(0,0,0,0.08);   /* Sombra ligera */
--sombra-md: 0 4px 6px rgba(0,0,0,0.1);    /* Sombra media */
--sombra-lg: 0 10px 25px rgba(0,0,0,0.15); /* Sombra grande */

--transicion: all 0.2s ease;

--ancho-sidebar: 260px;

<button class="boton-primario" type="submit">Guardar</button>
<a class="boton" href="#">Volver</a>
<button class="boton-peligro" type="button">Eliminar</button>

<div class="alerta exito" role="status">Operación realizada correctamente.</div>
<div class="alerta error" role="alert">Ha ocurrido un error.</div>

<form action="" method="post">
  <div class="grupo-form">
    <label for="usuario">Usuario</label>
    <input id="usuario" name="usuario" type="text" required />
  </div>
  <div class="grupo-form">
    <label for="password">Contraseña</label>
    <input id="password" name="password" type="password" required />
  </div>
  <button class="boton-primario" type="submit">Entrar</button>
</form>

<form class="formulario-inline" action="" method="get">
  <div class="grupo-form">
    <label for="desde">Desde</label>
    <input id="desde" type="date" name="desde" />
  </div>
  <div class="grupo-form">
    <label for="hasta">Hasta</label>
    <input id="hasta" type="date" name="hasta" />
  </div>
  <button class="boton" type="submit">Filtrar</button>
</form>

<label class="check-modern">
  <input type="checkbox" name="opcion" value="1" />
  <span>Opción 1</span>
</label>

<div class="tabla-responsive">
  <table class="tabla" role="table">
    <thead>
      <tr>
        <th>Columna</th>
        <th>Columna</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dato</td>
        <td>Dato</td>
      </tr>
    </tbody>
  </table>
</div>

<section class="bloque">
  <h2>Título de sección</h2>
  <p class="texto-secundario">Descripción o instrucciones.</p>
</section>

<div class="estadisticas-grid">
  <div class="tarjeta-estadistica">
    <div class="tarjeta-titulo">Total Partidos</div>
    <div class="tarjeta-valor">42</div>
  </div>
  <div class="tarjeta-estadistica info">
    <div class="tarjeta-titulo">Pendientes</div>
    <div class="tarjeta-valor">8</div>
  </div>
</div>

<span class="etiqueta etiqueta-info">Pendiente</span>
<span class="etiqueta etiqueta-exito">Completado</span>
<span class="etiqueta etiqueta-advertencia">En revisión</span>
<span class="etiqueta etiqueta-peligro">Cancelado</span>

<div class="avatar-circle">JD</div>
<div class="avatar-circle sm">JD</div>
<div class="avatar-circle lg">JD</div>

<div class="modal" id="miModal">
  <div class="modal-contenido">
    <div class="modal-cabecera">
      <h3>Título del Modal</h3>
      <button class="boton-cerrar" aria-label="Cerrar">&times;</button>
    </div>
    <div class="modal-cuerpo">
      <p>Contenido del modal</p>
    </div>
    <div class="modal-pie">
      <button class="boton">Cancelar</button>
      <button class="boton-primario">Confirmar</button>
    </div>
  </div>
</div>

<div class="buscador">
  <i class="fas fa-search buscador-icono"></i>
  <input type="search" class="buscador-input" placeholder="Buscar..." />
</div>

<div class="layout-principal">
  <aside class="sidebar">
    <div class="logo">
      <i class="fas fa-futbol"></i>
      Panel de Control
    </div>
    <div class="usuario">
      <i class="fas fa-user"></i>
      Nombre Usuario
    </div>
    <div class="separador"></div>
    <div class="grupo">
      <div class="grupo-titulo">Menú Principal</div>
      <nav>
        <a class="activo" href="#"><i class="fas fa-home"></i> Inicio</a>
        <a href="#"><i class="fas fa-calendar"></i> Partidos</a>
      </nav>
    </div>
    <nav>
      <a class="salir" href="#"><i class="fas fa-sign-out-alt"></i> Cerrar Sesión</a>
    </nav>
  </aside>
  <main class="area-contenido">
    <!-- contenido -->
  </main>
</div>

/* Los enlaces del sidebar muestran foco con acento */
.sidebar nav a:focus-visible {
    outline: 2px solid var(--color-acento-claro);
    outline-offset: 2px;
}

/* Inputs muestran foco con sombra */
.grupo-form input:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.15);
}