body{
    background:#d9d9d9;
    font-family:"Verdana","Tahoma",sans-serif;
    font-size:14px;
}
body.gray{
filter: grayscale(100%);
}
/* contenedor Palm */
.palm{
    width:320px;
    margin:40px auto;
    background:
        repeating-linear-gradient(
            0deg,
            #dfe3d6,
            #dfe3d6 2px,
            #d6dbcf 3px
        );
    border:3px solid #000;
    box-shadow:4px 4px 0px #777;
}
/* encabezado */
.header{
    background:#cfcfcf;
    padding:8px;
    border-top:2px solid #000;
    border-bottom:2px solid #000;
    font-weight:bold;
    text-align:center;
}

/* sección */
.titlebar{
border-bottom:2px solid #000;
padding:4px 6px;
position:relative;
}

.section-title{
background:#000;
color:#dfe3d6;
padding:2px 8px;
font-size:13px;
}

.menu-button{
float:right;
cursor:pointer;
}


/* menu desplegable */
.dropdown{
display:none;
position:absolute;
right:0;
top:24px;
background:#e0e0e0;
border:1px solid #000;
width:160px;
z-index:100;
}

.dropdown div{
padding:5px;
cursor:pointer;
}

.dropdown div:hover{
background:#cfcfcf;
}





/* contenido */
.content{
    min-height:220px;
    padding:12px;
    letter-spacing:0.3px;
}

/* inputs estilo Palm */
input{
    width:95%;
    padding:4px;
    border:1px solid #000;
    background:#f5f5f5;
    font-size:14px;
    margin-top:3px;
    margin-bottom:10px;
}

/* botones */
button{
background:#e0e0e0;
border:1px solid #000;
padding:1px 6px;
font-size:13px;
cursor:pointer;
border-radius:6px;
}

button:active{
    transform:translateY(1px);
}

/* footer */
.footer{
display:flex;
gap:2px;
border-top:2px solid #000;
padding:4px;
}


/* registro */
#registro{
    color:blue;
    cursor:pointer;
    font-size:13px;
    margin-left:10px;
}