/* ============================================================================== [ID-27-A] FRONTEND CSS ==== */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; user-select: none; }

body { 
    background-color: #ECE5DD; display: flex; flex-direction: column; 
    height: 100vh; padding: 10px; overflow: hidden;
}

#header-caja {
    display: flex; justify-content: space-between; align-items: center;
    background: transparent; margin-bottom: 10px; min-height: 50px;
}

#btn-cobrar {
    background-color: #25D366; color: white; border: none; border-radius: 8px;
    font-size: 16px; font-weight: bold; padding: 12px 25px; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-left: auto;
}
#btn-cobrar:active { background-color: #128C7E; transform: scale(0.95); }

.btn-rojo-top {
    background-color: #DC3545; color: white; border: none; border-radius: 8px;
    font-size: 16px; font-weight: bold; padding: 12px 20px; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-rojo-top:active { background-color: #C82333; transform: scale(0.95); }

.oculto { display: none !important; }

#pantalla-medio {
    flex-grow: 1; background: #FFFFFF; border-radius: 10px; margin-bottom: 10px;
    padding: 15px; overflow-y: auto; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#total-vivo-container {
    font-size: 26px; font-weight: bold; color: #075E54; margin-bottom: 15px;
    border-bottom: 2px solid #EBEBEB; padding-bottom: 10px;
}

#lista-pedido { font-size: 16px; color: #333; font-weight: bold; }

.fila-ticket { 
    display: flex; justify-content: space-between; margin-bottom: 14px; 
    padding: 6px; border-radius: 6px; transition: background-color 0.2s ease;
}
.ultimo-agregado { background-color: #E8F5E9; } 

.fila-cantidad-nombre { display: flex; gap: 10px; }
.ticket-cantidad { width: 30px; text-align: right; }
.ticket-nombre { text-align: left; }
.ticket-precio { text-align: right; }

.total-gigante { font-size: 32px; color: #075E54; text-align: left; margin-bottom: 20px; font-weight: bold; }
.titulo-cerrada { color: #075E54; font-size: 20px; margin-bottom: 20px; text-align: left; font-weight: bold; }

.btn-verde-nueva {
    background-color: #25D366; color: white; border: none; border-radius: 8px;
    font-size: 18px; font-weight: bold; padding: 15px; width: 100%; margin-bottom: 15px;
    cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-verde-nueva:active { background-color: #128C7E; transform: scale(0.98); }

.grid-telegram { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; margin-top: auto; }

.btn-tg {
    background-color: #FAFAFA; color: #333333; border: 1px solid #D9D9D9; border-radius: 8px;
    font-size: 15px; font-weight: bold; height: 50px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-tg:active { background-color: #EBEBEB; transform: scale(0.98); }
.btn-tg.accion-volver { background-color: #DCF8C6; color: #075E54; border-color: #25D366; }

.btn-tg.btn-panel { background-color: #25D366; color: white; border: none; }
.btn-tg.btn-panel:active { background-color: #128C7E; }










/* ============================================================================== [ID-27-B] CSS FORMULARIOS ==== */
.form-crear { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.input-tg { 
    width: 100%; padding: 15px; font-size: 16px; font-weight: bold;
    border: 1px solid #D9D9D9; border-radius: 8px; background: #FAFAFA; color: #333;
}
.input-tg:focus { outline: none; border-color: #25D366; }
.input-otro { border: 2px solid #80bdff; background-color: #f8fbff; }

select.input-tg {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 30px;
    padding-right: 50px;
}






/* ============================================================================== [ID-27-C] CSS ZONAS Y PANELES ==== */
.bg-panel-activo { background-color: #F0F2F5 !important; }
.btn-panel-azul { background-color: #007BFF !important; color: white !important; border: none !important; }
.btn-panel-azul:active { background-color: #0056b3 !important; }

.texto-panel-grande { font-size: 16px; color: #333; line-height: 1.8; margin-top: 15px; }
.titulo-panel { font-size: 22px; color: #075E54; font-weight: bold; text-transform: uppercase; margin-bottom: 15px; text-align: left; }
.caja-combo { background:#E8F5E9; padding:12px; border-radius:8px; margin-top:10px; border: 1px solid #25D366; }

/* Botones falsos para la explicación */
.mock-btn-azul { 
    background-color: #007BFF; color: white; padding: 6px 12px; 
    border-radius: 6px; font-weight: bold; font-size: 14px; 
    display: inline-block; margin-bottom: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}



/* ============================================================================== [ID-27-D] CSS ESTRUCTURA DE FORMULARIO ==== */
.form-crear-contenedor {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 190px); 
}

.zona-botones-fondo {
    position: sticky;
    bottom: -15px; /* Se ancla exacto al borde inferior de la pantalla blanca */
    background-color: #FFFFFF;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-top: auto;
    border-top: 2px solid #EBEBEB;
    z-index: 99; /* Obliga al botón a estar siempre por encima del texto */
}















/* ============================================================================== [ID-27-E] CSS ONBOARDING Y MODALES ==== */
#onboarding-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #ECE5DD; z-index: 1000; padding: 15px 15px 0 15px;
    display: flex; flex-direction: column; overflow-y: auto;
}
.titulo-onboarding {
    font-size: 24px; color: #075E54; font-weight: bold; text-align: center;
    margin-bottom: 25px; margin-top: 10px; line-height: 1.3;
}
.titulo-seccion-actual {
    font-size: 16px; color: #333; font-weight: bold; text-align: center;
    text-transform: uppercase; margin-bottom: 15px; border-bottom: 2px solid #D9D9D9; padding-bottom: 10px;
}
.btn-onboarding {
    background-color: #FFFFFF; color: #333; border: 2px solid #25D366;
    border-radius: 12px; font-size: 18px; font-weight: bold; padding: 20px;
    margin-bottom: 15px; width: 100%; cursor: pointer; text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.2s;
}
.btn-onboarding:active { transform: scale(0.97); background-color: #F0F2F5; }
.btn-onboarding small { display: block; font-size: 14px; color: #666; margin-top: 8px; font-weight: normal; }

.btn-ancho-total { width: 100%; margin-bottom: 10px; height: 55px; }

.encabezados-columnas {
    display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 5px;
    padding-right: 5px; font-size: 12px; font-weight: bold; color: #666;
}

.fila-multi, .fila-manual {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: #FFF; padding: 10px 12px; border-radius: 8px; margin-bottom: 10px;
    border: 1px solid #D9D9D9;
}
.nombre-item { font-weight: bold; color: #333; font-size: 16px; flex-grow: 1; cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
.hint-receta { color: #007BFF; font-size: 13px; font-weight: bold; cursor: pointer; display: block; margin-top: 4px; }

.fila-manual input[type="text"] {
    flex-grow: 1; min-width: 0; padding: 10px; border: 1px solid #CCC; border-radius: 6px;
    font-weight: bold; font-size: 16px; background: #FAFAFA; color: #333;
}

.caja-dinero {
    display: flex; align-items: center; border: 1px solid #CCC; 
    border-radius: 6px; background: #FAFAFA; padding-left: 10px; width: 95px; flex-shrink: 0;
}
.caja-dinero span { font-size: 16px; font-weight: bold; color: #333; }
.caja-dinero input {
    border: none; background: transparent; width: 100%; padding: 10px;
    text-align: right; font-size: 16px; font-weight: bold; outline: none;
}
.caja-dinero:focus-within { border-color: #25D366; }

.input-oz, .input-oz-manual {
    width: 60px; padding: 10px; border: 1px solid #CCC; border-radius: 6px;
    text-align: center; font-size: 16px; font-weight: bold; background: #FAFAFA; flex-shrink: 0;
}
.input-oz:focus, .input-oz-manual:focus, .fila-manual input[type="text"]:focus { outline: none; border-color: #25D366; }

/* NUEVOS ESTILOS PARA COMBOS/PROMOS */
.bloque-combo {
    background: #FFF; border: 1px solid #D9D9D9; border-radius: 10px;
    padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.label-combo { font-size: 14px; font-weight: bold; color: #075E54; margin-bottom: 5px; margin-top: 10px; }
.label-combo:first-child { margin-top: 0; }
.input-combo-texto {
    width: 100%; padding: 12px; border: 1px solid #CCC; border-radius: 6px;
    font-size: 14px; font-weight: bold; background: #FAFAFA; margin-bottom: 5px;
}
.input-combo-texto:focus { outline: none; border-color: #25D366; }
textarea.input-combo-texto { resize: none; height: 70px; font-weight: normal; }










/* ============================================================================== [ID-27-E4] CSS BOTONES INFERIORES 50/50 FIJOS ==== */
/* ZONA FIJA AL FONDO DE LA PANTALLA (Aplica para todas las pantallas) */
.zona-fija-bottom {
    position: fixed !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    width: 100vw !important; 
    background: #ECE5DD !important; 
    padding: 15px !important; 
    z-index: 9999 !important;
    border-top: 2px solid #D9D9D9 !important; 
    display: flex !important; 
    gap: 8px !important; /* SE REDUJO EL ESPACIO ENTRE BOTONES */
    box-sizing: border-box !important;
}
.zona-columna { 
    flex-direction: column !important; 
}
.zona-fija-bottom:not(.zona-columna) {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* PREVENIR QUE LOS BOTONES TAPEN EL ÚLTIMO PRODUCTO DE LA LISTA */
#onboarding-step2 {
    padding-bottom: 140px !important; /* SE AUMENTÓ EL ESPACIO AL FONDO PARA EL SCROLL */
}

/* BOTONES DIVIDIDOS EXACTAMENTE 50/50 EN EL MISMO RENGLÓN */
.btn-mitad {
    flex: 1 !important; 
    width: 50% !important;
    height: 55px !important; 
    border-radius: 8px !important; 
    font-size: 16px !important; 
    font-weight: bold !important;
    border: none !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
}
.btn-guardar-verde { background-color: #25D366 !important; color: white !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }
.btn-guardar-verde:active { background-color: #128C7E !important; transform: scale(0.98) !important; }

.btn-atras-gris { background-color: #DCF8C6 !important; color: #075E54 !important; border: 1px solid #25D366 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
.btn-atras-gris:active { background-color: #C1ECA6 !important; transform: scale(0.98) !important; }

/* MOSTRAR MÁS (NARANJA) Y MODAL RECETA */
.btn-mostrar-mas {
    background-color: #F57C00 !important; color: white !important; border: none !important; border-radius: 8px !important;
    font-size: 16px !important; font-weight: bold !important; padding: 15px !important; width: 100% !important; margin-bottom: 5px !important;
    cursor: pointer !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
.btn-mostrar-mas:active { background-color: #E65100 !important; transform: scale(0.98) !important; }

.modal-fondo {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 99999; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal-cuerpo {
    background: #FFF; width: 100%; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}