@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/_heli/_fonts/merriweather-01.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  src: url('/_heli/_fonts/crimson-pro-01.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
      font-family: 'Roboto';
      src: url('/_heli/_fonts/roboto-01.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      color: #03036a;
    }

*{
    box-sizing: border-box;
}
input{
    background-color: rgb(253, 251, 251);
    color: #03036a;
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid #03036a;
    border-radius: 3px;
    text-align: center;
    min-height: 0;
    font-size: 11px;
}

#cie_1{
    background-color: rgb(164, 246, 168);
}

textarea{
    background-color: black;
    color: aquamarine;
    width: 100%;
    height: 100%;
    display: flex;
    font-family: 'Merriweather Sans';
    font-size: 11px; 
    min-height: 0;
    border: 0;
}

textarea:focus {
  border: 1px solid rgb(230, 243, 246); 
  outline: none; 
}

html, body {
    height: 100%;
    margin: 0; 
    padding: 0;
    font-family: 'Merriweather Sans';
    font-size: 11px;
    overflow: scroll;
    scrollbar-width: none;    
}

body::-webkit-scrollbar {
    display: none;
}

.box{
    width: 100%;
    height: 100vh;
    background: #ABE6EF;
    display: flex;
    
}

form{
    width: 100%;
    height: 100%;
    background: #ABE6EF;
    display: flex;
    flex-direction: column;   
}

.datosP{
    display: grid;
    grid-template-columns: 120px 90px auto 90px;
    align-items: center;
    width: 100%;
    height: 3%;
    background:#03036a;
}

.fundamental {
    display: flex;
    width: 100%;
    height: 95%;
    background: #ABE6EF;    
    color: #03036a;
    gap: 2px;
}

.f_vertical-1{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;    
    background: #ABE6EF;    
}

.f_vertical-2{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    background: #ABE6EF;
}

.foot{
    display: flex;
    width: 100%;
    height: 2%;
    background: #03036a;
}
/**********************************************************************************************/
/*Estructuracion de .f_vertical-1*/
/**********************************************************************************************/
.sectionHead{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 2%;
    background: #84C4CE;
}

.cont_sub-obj{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3px;
    width: 100%;
    height: 25%;
}

.cont_ef{
    display: flex;
    align-items: center;
    width: 100%;
    height: 23%;
    min-height: 0;
    gap: 2px;
    /*overflow: auto;*/
    }

.ef_v-1{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    min-height: 0;
}

.ef-items-1{
    display: flex;
    align-items: center; justify-content: center;
    background: #ABE6EF;
    color: #03036a;
    width: 100%;
    height:6%;
    min-height: 0;
    font-size: 10px;
}

.ef-items-2{
    display: flex;
    width: 100%;
    height:17%;
    min-height: 0;
}

.cont_ant{
    display: flex;
    align-items: center;
    width: 100%;
    height: 30%;
    min-height: 0;
    gap: 2px;
}

.ant_vv{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
    min-height: 0;
}

.ant-items-1{
    display: flex;
    align-items: center; justify-content: center;
    background: #ABE6EF;
    color: #03036a;
    width: 100%;
    height:5%;
    min-height: 0;
    font-size: 10px;
}

.ant-items-2{
    display: flex;
    width: 100%;
    height:15%;
    min-height: 0;
}

.cont_sv{
    display: grid;
    grid-template-columns: repeat(7, auto) 15% 15%;
    column-gap: 3px;
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 5%;
    font-size: 10px;
    min-height: 0;
}

.cont_ostomias{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 8%;
}

.cont_oxigeno {
   display: flex; justify-content: center; align-items: center;
   width: 100%; height: 2.5%;
}

.cont_dxs{
    display: flex;
    align-items: center;
    width: 100%;
    height: 5%;
    min-height: 0;
    gap: 5px;
}

.dxs_v-1{
    display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    width: 15%;
    height: 100%;
    min-height: 0;
    background: rgb(236, 240, 182);
}

.dxs_v-2{
    display: flex;
    flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1;
    height: 100%;
    min-height: 0;
}

.dx_principal-hh{
    display: flex;
    justify-content: center; align-items: center;
}

.obj_relacionados{
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 2px;
}

.nom-ape{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 700px;
}

/**********************************************************************************************/
/*Estructuracion de .f_vertical-2*/
/**********************************************************************************************/
.cont_ana{
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 14%;
}

.cont_plan{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    flex: 1; /* ocupa todo lo que queda */
    overflow: auto; /* si el contenido es mayor, aparece scroll interno */
}