:root {
    /* Las variables SIEMPRE empiezan con dos guiones (--) */
    --color-principal: #f28c00;
    --color-secundario: #000; /* Un azul de app */
    --color-fondo: #f3f3f3;
    --color-light: #fbfbfb;
    --color-resumen: #e3e3e3;
    --radio-bordes: 12px;       /* El redondeado de tus botones */
    --espaciado: 16px;
    --color-alert: #f00;
    --back-pendiente: #f6D6D6;
    --border-pendiente: #D99;
    --wp-btn: #999;
}


.item_reserva.pendiente {
    border: 1px solid var(--border-pendiente);
    background: var(--back-pendiente);
}

.bg-prin {
    background-color: var(--color-principal);
}
.bg-base {
    background-color: var(--color-fondo);
}
.bg-resumen {
    background-color: var(--color-resumen);
}
.bg-light {
    background-color: var(--color-light);
}
.bg-wp-btn {
    background-color: var(--wp-btn);
}
.df {
    display: flex;
}
.f1{
    flex: 1;
}
.color-prin {
    color: var(--color-principal);
}
.color-sec {
    color: var(--color-secundario);
}
.pr{
    position: relative;
}
.tar {
    text-align: right;
}
.bred {
    border: 1px solid var(--color-alert) !important;
}
.bred::placeholder {
    color: var(--color-alert) !important;
}
.btn1 {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    text-transform: uppercase;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.close {
    position: absolute;
    transform: rotate(45deg);
    border-radius: 50%;
    padding: 5px;
    background: #fff;
}
.close div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* El truco maestro para el centrado absoluto */
    background: #ddd;
}
.close div:nth-child(1){
    width: 10%;
    height: 80%;
}
.close div:nth-child(2){
    width: 80%;
    height: 10%;
}
button {
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
}
button:hover {
    
}
.hvc {
    text-align: center;
    align-content: center;
}
a {
    text-decoration: none;
}

.db {
    display: block;
}

.f30{
    font-size: 3rem;
    line-height: 2.2rem;
}


.fs01 {
    font-size: 1.4rem;
    line-height: 1.3rem;
}
.fs02 {
    font-size: 1rem;
    line-height: 0.8rem;
}
.fs03 {
    font-size: 0.75rem;
    line-height: 0.65rem;
}
.fs04 {
    font-size: 3rem;
    line-height: 2.2rem;
}
.fs05 {
    font-size: 0.9rem;
    line-height: 0.8rem;
}
.fs06 {
    font-size: 1rem;
    line-height: 1rem;
}

.tc01 {
    color: rgb(15, 23, 42, 1);
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 1);
}
.tc02 {
    color: rgb(100, 116, 139, 1);
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 1);
}
.tc03 {
    color: #fff;
}

.fw1{
    font-weight: 700;
}

.boxs {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.boxs2 {
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.3);
}
.bt1 {
    background: #fff;
    border-radius: 10px;
}

.bo1 {
    border: 1px solid rgb(0, 0, 0, 0.5);
    border-radius: 5px;
}