<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: var(--font-sans, system-ui, sans-serif); background: transparent; }

  .hero {
    background: #fc4c02;
    padding: 1.75rem 1.25rem 1.5rem;
    text-align: center;
    border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
  }
  .hero-title {
    font-size: 15px; color: #fff; line-height: 1.6; margin: 0;
  }
  .hero-title strong {
    display: block; font-size: 20px; letter-spacing: 1px;
  }

  .card {
    background: var(--color-background-primary, #fff);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,0.12));
    border-radius: 0 0 var(--border-radius-lg, 12px) var(--border-radius-lg, 12px);
    padding: 1.5rem 1.25rem;
  }

  .form-group { margin-bottom: 1rem; }
  label { display: block; font-size: 13px; color: var(--color-text-secondary, #666); margin-bottom: 6px; font-weight: 500; }
  input[type="text"], input[type="date"], input[type="number"] {
    width: 100%; padding: 9px 12px; font-size: 15px;
    border: 0.5px solid var(--color-border-secondary, rgba(0,0,0,0.25));
    border-radius: var(--border-radius-md, 8px);
    background: var(--color-background-primary, #fff);
    color: var(--color-text-primary, #111);
  }
  input:focus { outline: none; box-shadow: 0 0 0 2px rgba(252,76,2,0.3); }

  .btn {
    width: 100%; padding: 12px; font-size: 15px; font-weight: 500;
    background: #fc4c02; color: #fff; border: none;
    border-radius: var(--border-radius-md, 8px); cursor: pointer;
    margin-top: 0.5rem; transition: opacity 0.15s;
  }
  .btn:hover { opacity: 0.88; }
  .btn:active { transform: scale(0.98); }

  .result {
    display: none; margin-top: 1.25rem;
    border-radius: var(--border-radius-lg, 12px);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,0.12));
    overflow: hidden;
  }
  .result-header {
    padding: 1.1rem 1.25rem;
    background: #005778;
    text-align: center;
  }
  .result-greeting { font-size: 13px; color: rgba(255,255,255,0.82); margin-bottom: 3px; }
  .result-div { font-size: 22px; font-weight: 500; color: #fff; letter-spacing: 1px; }
  .div-badge {
    display: inline-block; margin-top: 6px;
    background: #008E87; color: #fff;
    font-size: 12px; padding: 3px 12px;
    border-radius: 20px; letter-spacing: 0.5px;
  }
  .result-body { padding: 1rem 1.25rem; background: var(--color-background-secondary, #f5f5f3); }
  .result-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,0.1));
    font-size: 14px;
  }
  .result-row:last-child { border-bottom: none; }
  .result-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  .result-label { color: var(--color-text-secondary, #666); min-width: 80px; font-size: 13px; }
  .result-val { color: var(--color-text-primary, #111); font-weight: 500; flex: 1; }

  .error-msg {
    display: none; margin-top: 0.75rem;
    background: var(--color-background-danger, #fcebeb);
    color: var(--color-text-danger, #a32d2d);
    border-radius: var(--border-radius-md, 8px);
    padding: 10px 14px; font-size: 14px;
  }
  .reset-btn {
    width: 100%; margin-top: 0.75rem; padding: 9px;
    font-size: 13px; font-weight: 500;
    background: transparent; color: #fc4c02;
    border: 0.5px solid #fc4c02;
    border-radius: var(--border-radius-md, 8px); cursor: pointer;
    transition: opacity 0.15s;
  }
  .reset-btn:hover { opacity: 0.75; }
  .footer-note { text-align: center; margin-top: 1rem; font-size: 12px; color: var(--color-text-secondary, #888); }
  .season-tag { display: inline-block; background: #005778; color: #fff; font-size: 11px; padding: 2px 10px; border-radius: 20px; margin-top: 4px; }
</style>

<div style="max-width:420px; margin:0 auto; padding:1rem 0.5rem 2rem;">

  <div class="hero">
    <p class="hero-title">
      Descubre dónde comienza tu camino en el football
      <strong>Dolphins Football Club 🐬</strong>
      ¡Encuentra tu división hoy!
    </p>
  </div>

  <div class="card">
    <div class="form-group">
      <label for="nombre">Nombre del jugador</label>
      <input type="text" id="nombre" placeholder="Ej. Carlos Rodríguez">
    </div>
    <div class="form-group">
      <label for="nacimiento">Fecha de nacimiento</label>
      <input type="date" id="nacimiento">
    </div>
    <div class="form-group">
      <label for="peso">Peso (libras)</label>
      <input type="number" id="peso" placeholder="Ej. 85" min="0" max="400" step="1">
    </div>

    <button class="btn" onclick="calcular()">Buscar mi división</button>

    <div class="error-msg" id="error"></div>

    <div class="result" id="resultado">
      <div class="result-header">
        <div class="result-greeting" id="res-greeting"></div>
        <div class="result-div" id="res-div"></div>
        <div class="div-badge" id="res-badge"></div>
      </div>
      <div class="result-body">
        <div class="result-row">
          <span class="result-icon">🏈</span>
          <span class="result-label">Head Coach</span>
          <span class="result-val" id="res-coach"></span>
        </div>
        <div class="result-row">
          <span class="result-icon">📅</span>
          <span class="result-label">Días</span>
          <span class="result-val" id="res-dias"></span>
        </div>
        <div class="result-row">
          <span class="result-icon">🕕</span>
          <span class="result-label">Horario</span>
          <span class="result-val">6:00 PM – 8:00 PM</span>
        </div>
        <div class="result-row">
          <span class="result-icon">📍</span>
          <span class="result-label">Lugar</span>
          <span class="result-val">Parque Antonsanti, San Juan</span>
        </div>
      </div>
    </div>

    <button class="reset-btn" id="resetBtn" style="display:none;" onclick="reset()">Buscar otra división</button>

    <div class="footer-note">
      Temporada <span class="season-tag">2027</span><br>
      <span style="font-size:11px;">Corte de edad: 31 de diciembre de 2026</span>
    </div>
  </div>
</div>

<script>
const CORTE = new Date('2026-12-31');
const divisiones = [
  { nombre:'División C', badge:'Div C • 8–11 años', coach:'Zesar Zorba', dias:'Martes, jueves y viernes',
    reglas:(e,p) => (e>=8&&e<=10)||(e===11&&p<=75) },
  { nombre:'División B', badge:'Div B • 11–13 años', coach:'Javier Figueroa', dias:'Martes, miércoles y viernes',
    reglas:(e,p) => (e===11&&p>75)||e===12||(e===13&&p<=110) },
  { nombre:'División A', badge:'Div A • 13–15 años', coach:'Juan Carlos Pérez', dias:'Martes, jueves y viernes',
    reglas:(e,p) => (e===13&&p>110)||e===14||(e===15&&p<=140) },
  { nombre:'Varsity', badge:'Varsity • 15–18 años', coach:'Oscar Gutiérrez', dias:'Lunes, miércoles y viernes',
    reglas:(e,p) => (e===15&&p>140)||(e>=16&&e<=18) }
];

function calcular() {
  const nombre = document.getElementById('nombre').value.trim();
  const nacStr = document.getElementById('nacimiento').value;
  const pesoVal = parseFloat(document.getElementById('peso').value);
  const errEl = document.getElementById('error');
  const resEl = document.getElementById('resultado');
  const resetEl = document.getElementById('resetBtn');

  errEl.style.display = 'none';
  resEl.style.display = 'none';
  resetEl.style.display = 'none';

  if (!nombre) { mostrarError('Por favor ingresa el nombre del jugador.'); return; }
  if (!nacStr) { mostrarError('Por favor ingresa la fecha de nacimiento.'); return; }
  if (!pesoVal || pesoVal <= 0) { mostrarError('Por favor ingresa un peso válido.'); return; }

  const nac = new Date(nacStr);
  let edad = CORTE.getFullYear() - nac.getFullYear();
  const m = CORTE.getMonth() - nac.getMonth();
  if (m < 0 || (m === 0 && CORTE.getDate() < nac.getDate())) edad--;

  if (edad < 8 || edad > 18) {
    mostrarError(`Con ${edad} años al 31/dic/2026, ${nombre} no aplica para la temporada 2027 (rango: 8–18 años).`);
    return;
  }

  const div = divisiones.find(d => d.reglas(edad, pesoVal));
  if (!div) { mostrarError('No se encontró una división. Contáctanos para más información.'); return; }

  const primer = nombre.split(' ')[0];
  document.getElementById('res-greeting').textContent = `¡${primer}, te corresponde jugar en...`;
  document.getElementById('res-div').textContent = div.nombre;
  document.getElementById('res-badge').textContent = div.badge;
  document.getElementById('res-coach').textContent = div.coach;
  document.getElementById('res-dias').textContent = div.dias;

  resEl.style.display = 'block';
  resetEl.style.display = 'block';
  resEl.scrollIntoView({ behavior:'smooth', block:'nearest' });
}

function mostrarError(msg) {
  const el = document.getElementById('error');
  el.textContent = msg; el.style.display = 'block';
}

function reset() {
  ['nombre','nacimiento','peso'].forEach(id => document.getElementById(id).value = '');
  document.getElementById('resultado').style.display = 'none';
  document.getElementById('resetBtn').style.display = 'none';
  document.getElementById('error').style.display = 'none';
  document.getElementById('nombre').focus();
}
</script>