<!-- Selección de mes -->
<div class="card">
  <div class="month-select-row">
    <div class="form-group" style="min-width: 160px;">
      <label class="form-label" for="select-mes-num">Mes</label>
      <select id="select-mes-num" class="form-control">
        <option value="1">01 - Enero</option>
        <option value="2">02 - Febrero</option>
        <option value="3">03 - Marzo</option>
        <option value="4">04 - Abril</option>
        <option value="5">05 - Mayo</option>
        <option value="6">06 - Junio</option>
        <option value="7">07 - Julio</option>
        <option value="8">08 - Agosto</option>
        <option value="9">09 - Septiembre</option>
        <option value="10">10 - Octubre</option>
        <option value="11">11 - Noviembre</option>
        <option value="12">12 - Diciembre</option>
      </select>
    </div>
    <div class="form-group" style="min-width: 120px;">
      <label class="form-label" for="input-anio">Año</label>
      <input type="number" id="input-anio" class="form-control" value="2026" />
    </div>
    <div class="form-group" style="align-self: flex-end;">
      <button id="btn-nuevo-mes" class="btn btn-primary">+ Nuevo mes</button>
    </div>
  </div>
  <div class="form-group">
    <label class="form-label">Meses creados</label>
    <div id="lista-meses" class="month-list"></div>
  </div>
</div>

<!-- Pantalla principal Mes -->
<div class="card">
  <div id="mes-activo-header" class="month-header" style="margin-bottom: 0;">
    <div class="month-header-title" id="titulo-mes-visual">Sin mes seleccionado</div>
  </div>
  <div class="layout-main" style="margin-top: var(--space-16);">
    <!-- Zona izquierda: hábitos -->
    <div>
      <h3 style="margin-bottom: var(--space-8);">Hábitos (1–8)</h3>
      <div id="lista-habitos"></div>
    </div>

    <!-- Zona central: círculo mensual -->
    <div class="circle-container-card">
      <div class="circle-wrapper">
        <svg id="habit-circle" class="circle-svg" viewBox="0 0 400 400"></svg>
        <div class="circle-center-label" id="circle-center-label"></div>
      </div>
      <div class="circle-legend" id="circle-legend"></div>
    </div>

    <!-- Zona derecha: observaciones -->
    <div>
      <h3 style="margin-bottom: var(--space-8);">Observaciones</h3>
      <textarea id="textarea-observaciones" class="form-control" placeholder="Notas, reflexiones, objetivos del mes..."></textarea>
    </div>
  </div>
</div>