###############   Complexión corporal   ############### -->
<section data-role="page">
    <!-- Header -->
    <header data-role="header" data-theme="a" data-position="fixed">
        <a data-transition="flip" href="index.html" class="ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-notext">Inicio</a>
        <h1>Complexión corporal</h1>
        <a href="#nav-panel" class="ui-btn ui-shadow ui-corner-all ui-icon-info ui-btn-icon-notext">Info</a>
    </header><!-- /header -->

    <article data-role="content" >
        <div class="ui-body ui-body-a ui-corner-all">
        <!-- Formulario complexión -->
        <form name="complexionForm" >
        <!-- Sexo -->
        <div data-role="fieldcontain">
            <select name="sexo" id="sexo">
                <option value="Hombre">Hombre</option>
                <option value="Mujer">Mujer</option>
            </select>
        </div>
        <!-- Altura -->
        <div data-role="fieldcontain">
            <label for="altura">Altura (cm)</label>
            <input type="number" step="any" min=”0″ name="altura" id="altura" value="" placeholder="Altura en centímetros..."/>
        </div>
        <!-- Perimetro muñeca -->
        <div data-role="fieldcontain">
            <label for="perimetro">Perímetro muñeca (cm)</label>
            <input type="number" step="any" min=”0″ name="perimetro" id="perimetro" value="" placeholder="Perímetro muñeca..."/>
        </div>
        <!-- Resultado -->
        <div data-role="fieldcontain">
            <ul data-role="listview" data-split-icon="info" data-split-theme="b" data-inset="true">
                <li data-split-theme="b"><a href="#" onclick="calcularComplexion()">
                <h2>Calcular complexión</h2>
                    <a data-transition="flow" href="#popupCloseRight" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
                </li>
            </ul>
            <input type="text" name="resultado" id="resultado" value="" readonly/>
        </div>
        </form>
    </div>
    </article><!-- /content -->

    <!-- footer -->
    <footer data-role="footer" data-position="fixed" data-theme="a" data-id="footer1">
        <nav data-role="navbar" >
            <ul>
                <li><a data-transition="slidefade" href="complexion.html" class="ui-btn-active">CPX</a></li>
                <li><a data-transition="slidefade" href="fcmax.html">FCM</a></li>
                <li><a data-transition="slidefade" href="icc.html">ICC</a></li>
                <li><a data-transition="slidefade" href="imc.html">IMC</a></li>
                <li><a data-transition="slidefade" href="mb.html">MB</a></li>
                <li><a data-transition="slidefade" href="pi.html">PI</a></li>
            </ul>
        </nav>
    </footer><!-- /footer -->

    <!-- ###############   PANEL INFO   ############### -->
    <div data-role="panel" data-position-fixed="true" data-theme="b" id="nav-panel">
        <ul data-role="listview" data-theme="a" class="nav-search">
            <li data-icon="delete"><a href="#" data-rel="close">Somatotipos</a></li>
        </ul>
        <div>
            <br>
            <div data-role="collapsible-set" data-inset="false" class="justify-panel">
                <div data-role="collapsible">
                    <h3>Endomorfo</h3>
                    <p>Se identifican con este biotipo a personas de complexión grande con cinturas escapulares y pélvicas amplias, robustas, fuertes, con buena masa muscular.</p> 

                    <p>Suelen ser personas que presentan un peso corporal elevado ya que la abundante masa muscular, al ser más densa que la grasa, eleva el peso.</p> 

                    <p>Este tipo de personas es muy agradecida al entrenamiento de fuerza y por su abundante masa muscular. Al comenzar un programa de actividad física, aumentan sus reservas de glucógeno muscular, mejorando el tono muscular rápidamente y elevando su peso entre uno e incluso tres kilos en los hombres.</p> 

                    <p>Los hombres tienden a ganar grasa alrededor de la cintura (barriga) y las mujeres en la región glúteo-femoral(cartucheras).</p>
                    <a href="#" data-rel="close" class="ui-btn ui-shadow">Cerrar panel</a>
                </div>
                <div data-role="collapsible">
                    <h3>Ectomorfo</h3>
                    <p>Son las personas delgadas con extremidades largas. Son lo contrario a la tipología endomorfa. </p>

                    <p>Suelen tener poca masa muscular y normalmente no suelen ganar con facilidad peso en forma de grasa.</p>
                    <a href="#" data-rel="close" class="ui-btn ui-shadow">Cerrar panel</a>
                </div>
                <div data-role="collapsible">
                    <h3>Mesomorfo</h3>
                    
                    <p>También denominada tipología atlética , por su estructura músculo-esquelética bien proporcionada y masa muscular adecuada.</p>

                    <p>Suelen ser personas que presentan buen rendimiento en deportes.</p>

                    <p>La grasa se almacena de una forma más homogénea.</p>
                    <a href="#" data-rel="close" class="ui-btn ui-shadow">Cerrar panel</a>
                </div>
                <div data-role="collapsible" data-theme="b">
                    <h3>Acumulación de peso</h3>
                        <p>Según estos tres biotipos, es fácil que los problemas de sobrepeso los encontremos en:</p>
                        <ul>
                            <li>La tipología mesomorfa por inactividad</li>
                            <li>La tipología endomorfa, que tiende al acumulo de grasa.</li>
                        </ul>
                        <p>Lo más habitual es que a las personas de tipología ectomorfa o longilínea, cuando acumulan grasa les sobren pocos kilos.</p>

                        <p>En las personas atléticas, en situaciones de abandono de la práctica de actividad física podemos encontrar individuos a los que les sobren hasta cinco o seis kilos.</p> 

                        <p>Finalmente, las personas de biotipo endomorfo pueden presentar sobrepesos.</p>
                        <a href="#" data-rel="close" class="ui-btn ui-shadow">Cerrar panel</a>
                </div>
            </div>
        </div>
    </div><!-- /panel -->

    <!-- ###############   INFO POPUP   ############### -->
    <div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px" data-theme="a">
        <a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <p>Es importante que el separador decimal sea el punto (.) y no la coma (,) .</p>
    </div><!-- /popup -->
    
</section><!-- /page