/* ==========================================================================
   RESET Y AISLAMIENTO
   ========================================================================== */
#mi-app-dietas {
    font-family: Arial, Helvetica, sans-serif !important;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
#mi-app-dietas * { box-sizing: border-box !important; }

.estado-oculto { display: none !important; }
.estado-visible-block { display: block !important; }
.estado-visible-flex { display: flex !important; }
.campo-bloqueado { background-color: #e9ecef !important; cursor: not-allowed !important; opacity: 0.8; color: #555 !important; }
.paso-contenedor { display: none; width: 100%; }
.paso-contenedor.paso-activo { display: block !important; }

/* ==========================================================================
   FECHA Y HORA EN DOS CAJAS
   ========================================================================== */
.contenedor-fecha-hora {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
}
.caja-dato-tiempo {
    flex: 1 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 10px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #555 !important;
}
.caja-dato-tiempo span {
    display: block !important;
    color: #0073aa !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   NUEVOS BOTONES (ALTURA REDUCIDA Y ANCHO COMPLETO)
   ========================================================================== */
.btn-accion-app {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 45px !important; /* Altura reducida a la mitad */
    border-radius: 6px !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    transition: transform 0.1s ease !important;
    border: 1px solid #ccc !important;
}
.btn-accion-app:active { transform: scale(0.97) !important; }
.btn-accion-app .emoji-chico { margin-right: 8px !important; font-size: 16px !important; }

.btn-amarillo { background-color: #ffc107 !important; border-color: #e0a800 !important; color: #000 !important; margin-bottom: 10px !important; margin-top: 15px !important; }
.btn-azul { background-color: #17a2b8 !important; border-color: #138496 !important; color: #fff !important; }
.btn-blanco { background-color: #ffffff !important; color: #333 !important; }

.fila-dos-botones {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    align-items: center !important; /* Fuerza la alineación vertical exacta */
}
.fila-dos-botones > * { 
    flex: 1 !important; 
    margin: 0 !important; /* Mata el margin-top oculto del tema de WordPress */
}
/* ==========================================================================
   RESTO DE ELEMENTOS Y KILÓMETROS
   ========================================================================== */
.kilometros-container { display: flex !important; gap: 10px !important; font-size: 12px !important; font-weight: bold !important; color: #333 !important; margin-bottom: 15px !important; }
.km-item { flex: 1 !important; }

.btn-continuar-marcha {
    width: 100% !important; height: 50px !important; background-color: #28a745 !important;
    color: white !important; font-weight: bold !important; font-size: 15px !important; 
    border-radius: 6px !important; border: none !important; cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(40,167,69,0.3) !important; text-transform: uppercase !important;
}

.titulo-paso { font-weight: 800; font-size: 16px; margin-bottom: 12px; color: #0056b3; text-transform: uppercase; border-bottom: 2px solid #ccc; padding-bottom: 5px; }
.nav-row-app { display: flex; gap: 6px; margin-top: 20px; }
.btn-nav-app { flex: 1; padding: 10px 5px; border: none; border-radius: 4px; background: #343a40; color: white; font-weight: bold; cursor: pointer; text-align: center; font-size: 11px; }
.btn-enviar-app { background-color: #28a745 !important; }

.modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0,0,0,0.7) !important; z-index: 10000 !important; display: none; align-items: center !important; justify-content: center !important; }
.modal-box { background: white; width: 92%; max-width: 400px; border-radius: 8px; position: relative; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.btn-cerrar-modal { position: absolute; top: 5px; right: 12px; font-size: 28px; color: white; cursor: pointer; z-index: 10; font-weight: bold; }
.modal-header-azul { background-color: #0073aa !important; padding: 12px !important; color: white !important; font-weight: bold !important; text-align: center !important; font-size: 15px !important; }
.texto-gracias { font-size: 22px !important; font-weight: 900 !important; color: #28a745 !important; background: transparent !important; margin: 10px 0 !important; padding: 0 !important; border: none !important; text-align: center; }
#map { width: 100%; height: 250px; }
.wpcf7-response-output { display: none !important; }